WordPress is a free open source content management system. Reich Web Consulting specializes in building custom WordPress websites, themes, and and plugins.

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.

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.


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.


Six Ways to Find 404 Errors On Your Website

404 Not Found: even if you’re not a web designer or a programmer you’ve probably seen this error before. But if you have been living underground in the disconnected world of the mole people for a few decades, 404 Not Found is the error code on the web that means you’ve tried to access a resource that doesn’t exist.

404 errors need to be dealt with. When a customer experiences a 404 it’s a missed opportunity for you and a bad user experience for them. When a search engine experiences a 404 error the missing resources could be removed from their index, and it could be translated as a signal that your website is unreliable.

But before you can fix a 404 Not Found error you need to know they’re happening. This article explore six easy ways to discover 404 errors on your own website.

1. Find 404 Errors Using Server Logs

One of the easiest ways to discover 404 errors is by utilizing your hosting environment’s access logs and error logs. Every hosting environment is different so unfortunately I can’t explain where to find yours, but a Google search should prove fruitful. Searching for “cpanel raw access logs” turns up a plethora of helpful pages for the CPanel hosting environment.

Your log files may need some massaging to be useful. Most are text files that can be easily opened in Excel and then filtered by HTTP response code.

The Pros: This method should show you all 404 errors that occurred on your site in the time frame covered by the log.

The Cons: Your hosting environment’s log files can be difficult to read and utilize unless you know your way around a spreadsheet.

The raw access logs from this website. These file contain lots of data and need some help to be useful.

The raw access logs from this website. These file contain lots of data and need some help to be useful.

2. Find 404 Errors Using a Spider or Link Scanner

This method doesn’t actually find 404 errors. It discovers broken links on your website so they can be fixed before they generate 404 errors. An ounce of prevention is worth a pound of cure.

An easy way to find potential 404 errors is by scanning your website with a spider or link scanner. A spider indexes your site the same way that a search engine like Google does: it starts with a URL and scans the code for links, and then works through that list recursively. There are lots of programs and online services that can scan your site for free, and will provide a list of broken links that exist on your site.  My two favorites are Xenu Link Sleuth and Screaming Frog SEO.

The Pros:

Using a spider to locate broken links on your website doesn’t actually find 404 errors: it helps prevent them.  By scanning your site, discovering, and fixing broken links you’ll prevent your visitors from visiting URLs that don’t exist and reduce the number of 404 errors that occur on your website in the future.

The Cons:

Anyone can link to your website, and you don’t have control over the URLs that they link to. Just because you fix all of the broken links on your website doesn’t mean that other websites, or even search engines, don’t have active links to broken URLs on your website. You won’t be able to discover or fix those using a spider.

A report from Xenu Link Sleuth. Xenu requests every URL of your site and returns the status code, among other things.

A report from Xenu Link Sleuth. Xenu requests every URL of your site and returns the status code, among other things.

3. Find 404 Errors Using Google Analytics (and Yoast SEO)

This one is a little WordPress-specific, but you can do a similar trick with other content management systems.

If you use the Google Analytics by Yoast plugin, it automatically tags 404 errors so you can find them in Google Analytics using the Content Drilldown tool. Just go to Behavior > Site Content > Content Drilldown and do a search for 404.html.

The Pros: 

It’s right in Google Analytics where you would expect to find this sort of data. Because it’s in Google Analytics you can export your list of 404 errors to do something useful with it, like construct a list of URL to redirect.

The Cons:

It’s WordPress specific. It requires you to install yet another plugin on your website to basically embed a few lines of JavaScript for Google Analytics.

Yoast SEO automatically registers your 404 errors in Google Analytics.

Yoast SEO automatically registers your 404 errors in Google Analytics.

4. Find 404 Errors Using Google Search Console

Google Search Console (formerly Google Webmaster Tools) provides a window into how Google sees your website. Under the Crawl Errors Google Search Console provides a list of all connection errors that occured while Google attempted to index your site.

The Pros:

Google regularly spiders your site and attempts to index any URLs that it finds, as well as any URLs it already had in it’s database. If any URL stops working, whether it’s new or historical, Google Search Console will let you know.  These reports can be exported to CSV, so you can do something useful with them, like create a redirect list. This is also helpful because essentially Google Search Console is discovering broken links before actual humans are, so check regularly and act on it.

The Cons:

If you have any pages that you’ve intentionally prevented search engines from indexing either through robots.txt or through a noindex tag, Google will not index them and, therefore, not check to see if the links still work. Google Search Console only displays 404 errors generated by Google’s crawler and not actual users.

Using Google Analytics to Find 404 Errors

Using Google Analytics to Find 404 Errors

5. Find Errors Using SEO Redirection (or another 404 Management Plugin)

This tip is WordPress specific, but most content management systems have a similar feature or plugin.

There are lots of plugins that can help you discover and fix 404 errors. I use SEO Redirection as well as it’s premium sibling, SEO Redirection Premium. These plugins track 404 errors that occur on your website and help you easily resolve them by redirecting the broken URL to an existing page. Yoast SEO’s premium version also has this feature built in. Yoast SEO Premium will hook up straight to your Google Search Console account, and allow you to redirect 404 errors discovered by Google from within the plugin.

The Pros:

WordPress can become your one-stop shop for discovering and dealing with 404 errors and broken links. And if you’re willing to pay for a premium plugin, you can really automate the process.

The Cons:

WordPress specific, and all of the problems that come with installing plugins. To make the most of this method you should  purchase the premium version of one of these plugins. But trust me: they’re worth it.

404 Errors Caught by SEO Redirection Premium

404 Errors Caught by SEO Redirection Premium

6. Find 404 Errors with Other Services

There are a host of other services that can help you discover 404 errors including OnPage.org and Moz. I only bring these up for the sake of thoroughness. There’s absolutely no reason you need to sign up for a paid service just to discover broken URLs and 404 errors, but these services do a lot more than that and are worth investigating.

The Pros:

Another set of eyes scanning your website for errors can’t be a bad thing. Plus these services offer far more than just 404 error reports.

The Cons:

Services like Moz don’t come cheap. So don’t use them unless you’re looking for more than just a 404 error detector.

Moz 4xx Error Report

Moz 4xx Error Report


So what do I do?  I use a combination of all of the methods above. A link scanner or spider like Xenu helps you proactively discover and fix broken links within your website, but can’t help you with links from other sources like other websites or Google. Google Analytics helps you discover URLs that are actually breaking as people attempt to view them. Google Search Console helps you discover broken links that Google either has in their index, or is trying to index. WordPress plugins like SEO Redirection and Yoast SEO Premium help me easily deal with 404 errors as I discover them. And of course, I already use Moz for other reasons, so I take it’s 404 report into consideration as well.

In another post, I’ll be talking about how to handle 404 errors on your WordPress website once you find them. Stay tuned!

The Most Exciting Feature of WordPress 4.5 Beta 1

The news just broke that WordPress 4.5 Beta 1 was just released. It seems to me that this released doesn’t provide too many sexy new features. There are a number of new Customizer integrations, such as Theme Logo Support and a Responsive Preview feature. But the new feature that excites me is the addition of the wp_add_inline_script() method, which complements the already existing wp_add_inline_style() function. The new function provides a standard way to include inline JavaScript.

Why does this matter? Adding inline styles through this method can guarantee that dependencies have been loaded before the code executes. That alone is important. But I’m excited by the potential this function brings to the table. As themes and plugins adopt it, caching solutions should be able to lock into it and move the inline scripts to external files that can be cached and even offloaded to a CDN rather than re-downloaded for every page view. I’m sure we’ll see solutions like Super Cache and Fastest Cache integrating quickly.