WordPress is a popular CMS and blogging platform. Reich Web Consulting specializes in WordPress websites and custom theme and plug-in development.

Posts

Alphabetical Post Navigation in WordPress

Have you ever had a need to build a page with alphabetical navigation in WordPress? There are lots of scenarios where this makes sense:

  • Alphabetical sitemaps.
  • A Glossary or Table of Contents


I’m building a site right now focused on terms and their definitions. Presenting terms in a default archive loop makes no sense. A better experience is to present them as a glossary of terms with alphabetical navigation.

There are plugins that can get you where you need to go, but they’re not necessary. A little bit of custom template code leveraging PHP output buffering gets you where you want to go pretty efficiently.

Create a new Template

I’m building a glossary page that will list all of the posts in a custom post type, called term. By using the WordPress Template Hierarchy I know that WordPress will create that page using a template namedarchive-terms.php if I create one in my theme. This is a logical place to put my custom query and template code. Place yours wherever it makes sense.

Query the Content You Want to Display in the Alphabetical List

By default, any template code you write operates against WordPress’ default loop. If that’s what you want in your list, you don’t need to create a new query. I want my Glossary page to list all of the terms in the glossary alphabetically. I need to create a custom query that selects and loops the right content.

Build and Buffer the Content

That query gives me the content I want in my glossary page. Now I need to loop over the query and do something with it’s results:

  1. Build the alphabetical navigation elements.
  2. Build the alphabetically-sorted list of posts that can be navigated to using alphabetical navigation.

We have two choices. We can loop the content multiple times and build the two distinct elements. The second choice is to loop once and use output buffering to control what renders when. We’ll do multiple loops first, then combine and simplify in the final example.

Building the Alphabetical Navigational Elements

First, lets loop through the results and capture the first letter of all the posts to build our navigation:

The template code above is a cookie-cutter WordPress loop that iterates through the posts, captures the first letter of each post, and renders a navigation list of each letter that links to the anchor#begins-with-<letter>. If you’ve got a basic understanding of WordPress Loops and basic theme coding, it’s not too complex. Because our query already specified ascending alphabetical order, we don’t have to worry about sorting the list ourselves.

Now it needs something to link to.

Building the Alphabetical List of Posts

Next, we need to build out our list of content. In this example we’ll keep it simple: we’ll build a two-tier list with anchors.

In the code above we built a list of letters linked to the alphabetical navigation menu. Each list element contains a child unordered list of all posts that start with that letter. We create some flags that track the current letter and whether or not we’re in the middle of a list. We use these to properly open and close our ordered list and list item tags.

Putting it All Together

The two blocks above can be simplified by leveraging PHP’s output buffering functions. Output buffering essentially stores your output in memory so you can retrieve and display it at a later time. Using output buffering we avoid duplicate queries and loops. And we completely avoid tracking flags used to control tag nesting.

The first thing we do is create $alphabet, which is an associative array that will have letters as keys and arrays of output sections as values. As we loop our content we create an output buffer using ob_start(), output each post as a list item linked to it’s permalink, and capture that output using ob_get_contents(), save the output into the current letter, and close the buffer with ob_end_clean().

Finally, we use the keys of the associative array to build our alphabetical navigation. Then we use the array one more time to build anchored sections of content.

Your WordPress Hosting Is Upgrading to PHP 7.2

Are you a Reich Web Consulting WordPress Hosting customer?

We don’t want to bore you with technical details, but we want you to know that some changes are coming to your web hosting platform that may affect your website.

Your site runs on WordPress. WordPress is written in a language called PHP, which has gone through many versions. Your site currently runs on PHP 5.6.  This version will reach its end of life on January 1, 2019.  This means that it is no longer supported software, and will become a security problem if not upgraded.

Don’t worry! You chose to host with Reich Web Consulting because we’ve got your back. We still do. If you trust Reich Web Consulting to do right by you, well, there’s no need to keep reading. Go enjoy this beautiful summer day! If you’d like to learn more, continue on.

The Benefits

There’s a reason we’re not asking if you want this upgrade, and that reason is SECURITY. Not performing the upgrade would eventually leave your website open to attack.  Every web host that supports WordPress and PHP must make this transition within the next 5 months, or willfully choose to leave their customers vulnerable to hackers.

As an added benefit, PHP 7.2 is significantly faster than PHP 5. Some benchmarks indicate that PHP 7.2 can run a WordPress page request over 2x faster than PHP 5! Faster page loads mean more users will stay on your site longer, and may even help search engine ranking.

Our Upgrade Plan

We’re upgrading to the latest version of PHP, which is 7.2. Most sites will work without any modifications, but some may require additional work.

In order to upgrade our sites without causing service interruptions, we’ll go through the following process.

  1. Run a Compatibility Tool Against Your Site to Determine if the PHP 7.2 upgrade is safe.
  2. If it’s not we’ll determine what components are incompatible.
  3. If those components are free and won’t affect your site performance to upgrade them, we’ll go ahead and update those components.
  4. If making your site compatible with PHP 7.2 will include any costs, we’ll contact you before we do anything. This could be due to premium plugin upgrades, or significant labor involved in more complex scenarios.

Only after all the sites we host are tested and confirmed to work with PHP 7.2 will be “flip the switch.

Our Upgrade Timeline

We plan to begin testing immediately.  We plan to complete the process and finalize the upgrade to PHP 7.2 at the end of August.

add a google reviews badge to your wordpress site without a plugin

Add a Google Reviews Widget to WordPress Without a Plugin

This article will teach you how to leverage the Google Places API to add a Google reviews widget to your WordPress website.

Why Customer Reviews Matter

It doesn’t matter if you’re an online-only or a traditional brick-and-mortar business: customer reviews matter. Reviews are an important ranking signal for local search optimization (increasing the visibility of your business listings in services like Google My Business). In addition to getting visitors to your site, reviews provide trust and credibility that turns a casual visitor into a customer. In other words, they can influence click-through rates, bounce rates, and conversions.

If your website hosts it’s own customer reviews (in the right format), Google will show review stars as part of your organic listings.

But if you don’t have reviews built into your website, getting review stars to show up can be hard to achieve. And why add review functionality to your site when Google already provides them?

We’re going to leverage the reviews that are already on our Google My Business listings to add a reviews widget to a WordPress site.

Get a Google API Key

First, you’ll need a Google API key. Follow these instructions to create a project and create an API key, and then follow these instructions to enable the Google Places API for your new project:

  1. Go to your Google Developer Console and make sure you are on the app you just created.
  2. Click Enable API, search for the Google Places Web Service and click the link for that service.
  3. Click Enable to allow calls to the Google Places Web Service from your application.

This configuration will provide you with a key to access the Google API and query the Google Places web service.

Write WordPress Code to Pull Your Business’ Google Reviews

There is a little bit of code involved in this process, and I admittedly don’t write short code.  So rather than reproduce it here, I’ve added it to a Gift which I’ve embedded below.

This code is split up into several sections.

RWC_Google_Places Class

The RWC_Google_Places class acts as a wrapper around the Google Places web services that we need to access.

Create a new instance by passing the API key to the class’ constructor. The findPlaces() method searches the Places API for all locations that match the query. The query can be a business name or address. The method returns a PHP object built from the JSON response retrieved from the API.

The getDetails() method queries the Places API for in-depth details about a particular “place” using the ID associated with the listing. Pass it a place ID, and it will return a PHP object containing the listing’s details.

RWC_Google_Reviews Class

The RWC_Google_Reviews class leverages the wrapper class to retrieve Place details and generate the badge via the WordPress Shortcode API. Create an instance by calling the constructor and passing your Google API key. It will automatically register shortcodes with WordPress.

Displaying the Google Reviews Widget

To generate a shortcode, add the No query or placeId attributes specified on shortcode. shortcode to your page content. Of course, that’s not quite enough.  To create a badge, you’ll also have to specify one of two shortcode attributes: query or placeId. The query attribute can be used to send a query string, such as a business name or address, to Google Places, and it generates a badge for each match.  If you happen to know your business’ placeId, you can use that instead. Examples:

[google-reviews-badge query="Reich Web Consulting"]

Google Reviews Widget Without a Plugin

The shortcode output

The Code

The code is long, but it’s not complicated. You can quickly reduce this code to just a couple of lines if you don’t care about things like comments and error-checking.

If you look closely at this code, it doesn’t load any styling. That’s intentional. The HTML output is pretty raw, and I decided to leave it up to anyone who decides to use this code to make their badge match their website.

So go ahead and give it a shot. Leave a comment with any questions or feedback about the code.

https://gist.github.com/reichwebconsulting/8e0a7e1f65908c76f8d13aea82c0ccf8

MailChimp Featured Image

How to Use MailChimp RSS-to-Email with WordPress

This post will teach you how to leverage MailChimp RSS-to-Email campaigns to notify subscribers when you update your WordPress blog.

Bloggers depend on a variety of channels to notify their fans when they post new content. This includes RSS feeds, social, and in-browser notifications, and the topic of this post: email subscriptions. Bloggers using the WordPress platform often depend on the Jetpack Subscription plugin to do the heavy lifting. Jetpack leverages WordPress.com to manage lists, construct, and deliver notifications to subscripers. And it works. Kind of. But Jetpack’s Blog Subscription plugin can only take you so far.  It’s insanely rigid, more or less impossible to customize, and really not a great experience for your customers.  It just doesn’t feel like a professional solution.  So what does?  Try using MailChimps RSS-to-Email feature. All you need is an active MailChimp account and the ability to make some minor changes to your WordPress site.

How to Integrate MailChimp RSS-to-Email with WordPress

Obviously you need a MailChimp account to get started. So if you don’t already have one, go ahead and register for a free account now.

In order to setup MailChimp Blog Subscriptions, you first need to create a list to hold your blog subscribers. Read Create a New List to learn all about Lists on MailChimp and how to create them.

The Lists Management screen contains the Create List button which you will click to start a new list.

First, create a new list in MailChimp to store your blog subscribers

Create a MailChimp Form to Add Subscribers

Now that you’ve created your Blog  Subscribers list you need a way to for users to add themselves to the list. In other words you need a Blog Subscription form.  There are a number of ways you can do this.

You can of course manually code a form and the requisite client and server-side code to send submissions to MailChimp.  The code to do this is not complex, but it’s also well above the skill of the average non-technical WordPress user. But if you do go this route I applaud your efforts!

The second option is to use the sign-up form options provided by MailChimp. On your Lists Management screen you’ll see a drop-down menu to the right of each list, and under that menu you’ll see Sign-Up Forms.  The Sign-Up Forms option provides a variety of customizable forms that you can copy and paste into your website.

Finally, you can use a WordPress plugin like MailChimp for WordPress which will help you easily integrate your lists with your website. If you happen to be using Gravity Forms they have a terrific MailChimp add-on as well.

Use the MailChimp Signup Forms tool to create forms that you can easily embed in your site.

Use the MailChimp Signup Forms tool to create forms that you can easily embed in your site.

Setup an RSS-to-Email Campaign

The final step required to get MailChimp to email your subscribers when you update your blog is to setup an RSS-to-Email Campaign. To setup an RSS-to-Email Campaign click the Campaigns tab, and then click the dropdown next to Create Campaign and choose RSS Campaign. Unless you’re using a plugin which overrides the default RSS feed for your site, your RSS feed URL should be http://yoursite.com/?feed=rss2 where http://yoursite.com is the site address you have configured in WordPress.

After you add your RSS feed address, you can configure a schedule for how often your RSS feed will be scanned for new posts.  Unlike JetPack Subscriptions, MailChimp cannot send out updates as soon as you update your blog, and this is probably it’s greatest failing at the moment.  However you can schedule daily, weekly, and even monthly emails.

Setting up the template for RSS-to-Email is just as easy as setting up any other mailing in MailChimp.  Simply drag the RSS Header and RSS Items widgets onto the template, and you’re ready to go.

After you've created your list and added a signup form to your site, create a MailChimp RSS-to-Email Campaign to tie it all together.

After you’ve created your list and added a signup form to your site, create a MailChimp RSS-to-Email Campaign to tie it all together.

Pros and Cons

The benefits of using MailChimp RSS-to-Email campaigns over Jetpack Subscriptions are obvious. You have full control over the process, what emails your subscribers receive, what they look like, and what they contain. On a recent project which used Jetpack Subscriptions, the client was very frustrated with the limited control we had over the emails being sent to her subscribers. This is actually the situation that led to me investigating MailChimp RSS-to-Email.

The cons are a little less obvious.  Jetpack Subscriptions have the benefit of being tied directly to your WordPress install. This means that Jetpack can do it’s thing as soon as you publish a new blog post.  Your MailChimp Campaign isn’t directly connected to WordPress. When you setup your campaign you tell MailChimp a time and a schedule at which it should check your RSS feed for updates.  MailChimp will generate and send your mailings only on the designated schedule and not on-demand.  If that’s a deal-breaker, then MailChimp RSS-to-Email may not be the solution for you.  However I would hope that they make this available in the future.

 

WordPress Logo

WordPress Scheduled Posts and Time Zones

I’m doing some work for a celebrity chef who has a ton of cooks in her kitchen. One of them is responsible for her blogging and social media strategy. She wants to queue a bunch of content that will be released on a slow, steady drip. The WordPress Scheduled Posts features is normally the perfect tool for this job.  Scheduled Posts didn’t work on her first attempt. Unfortunately the post she scheduled for New Years day remained in draft mode the morning of January 1. What went wrong?

How to fix WordPress Scheduled Posts by Setting your Time Zone

The answer is simple.  The developer that initially setup the client’s WordPress site left the time zone configured to UTC while the the client and her entire support team are on Eastern Time.  Solving the problem was as easy as setting the time zone in the WordPress General Settings screen by going to your Dashboard and selecting Settings > General from the main menu. Choose your time zone and then click Save Changes. WordPress lists time zones by UTC offset.  If you’re not sure of your offset, you can consult a helpful time zone chart here.

This image shows you how to fix WordPress Scheduled Posts by setting your time zone in WordPress

Follow the steps shown in thie image to set your time zone in WordPress.

Portfolio Items