Category: Tutorials

In this three part series, we’re looking at how to add a custom option to the WordPress Custom Menu widget that will allow us to display menu item descriptions. This is the final post in this series. In this tutorial, we’ll cover how to use the custom option we created in the first tutorial. (more…)

WordPress has the capability to store descriptions for each menu item in a custom menu. However, by default those descriptions are never displayed on the front end. In this post, we’re going to look at how to display those descriptions. (more…)

Sometimes it’s easier and more efficient to add functionality to an existing widget instead of creating a similar widget from scratch. In this three part series, we’re going to look at how to extend the existing WordPress Custom Menu widget to allow menu item descriptions to be displayed. (more…)

When creating a page, WordPress allows you to choose a page template using a drop down list. This list is automatically generated based on the page templates provided by the theme. The standard way to add or remove templates from this list is to create or delete template files in theme. However, there are good reasons to remove a template from the list without deleting the template file itself. Let’s look at a couple of those reasons.

Child Themes

If we’re working with a child theme and we want to remove a template from the list, simply deleting it from the parent theme is only a temporary solution. If the parent theme is updated, the page template file will be reintroduced and appear in the page template list again. The whole goal of a child theme is to avoid modifying the parent theme in any way. So to remove a page template from the list we will want to use the theme_page_templates filter instead. (more…)

In this tutorial, we will cover how to automatically (and responsively) split a widget area into columns. The number of columns will automatically be calculated based on the number of widgets in the widget area. It’s really pretty simple. (more…)

Let me start by pointing out that I am not an expert typographer. In fact, I wouldn’t consider myself a typographer at all. However, as a web developer I deal with typography on a regular basis and do my best to display content in a responsible manner. Today I want to talk about vertical rhythm, baseline grids, and responsive typography. I also want to propose a simple, responsive, baseline grid that can be used to create a consistent vertical rhythm. (more…)

While working on Rampart, my upcoming commercial theme, I began to research the best practices surrounding “Skip to Content” links. If you’re not familiar with skip links, they are simply links that allow site visitors to bypass the site navigation and go directly to the main content of the page. These links are especially useful for people using screen readers or navigating with the keyboard rather than the mouse. Lets take a quick look at the three ways that skip links can be implemented before diving into the code.

(more…)

ARIA landmark roles help screen readers understand the purpose of various sections of a web page. Unfortunately, they seem to be largely neglected in the WordPress community. Adding landmark roles to a theme is relatively simple and I can’t think of a good reason not to include them in every project. Here is a simple breakdown of the ARIA landmark roles and how they should be applied when building WordPress themes. We’ll start with an explanation of each role and then take look at the code involved in adding each role to a theme. (more…)

This tutorial will explain how to create a custom control for the WordPress theme customizer that will allow multiple categories to be selected via checkbox inputs. Chris Molitor asked me the other day if I knew how to do this, and it sounded like a good challenge. This tutorial assumes that you already know how to work with the theme customizer. If you’re not sure how to use the theme customizer, please see the WordPress Theme Customizer: a Comprehensive Developer’s Guide first.

Update: this control can now be used multiple times within the theme customizer (previously multiple instances caused problems). (more…)

This tutorial will attempt to cover everything you could possibly want to know about using meta boxes in WordPress. Although it is possible to add meta boxes directly to a theme, best practice is to add meta boxes via a plugin. In this tutorial, we will build a plugin to add a meta box to the WordPress post editor.

The full plugin is available on github.

The add_meta_box() function was added to WordPress in version 2.5, so it’s been around a while. If you read this whole tutorial, you’ll be around a while as well. So let’s get started…

(more…)

This tutorial will explain in detail how to add support for the WordPress theme customizer to your WordPress theme.

The theme customizer was introduced in WordPress version 3.4. It allows for an editing environment where theme options can be tried by the administrator before being applied to the live site. In this tutorial, we will look at exactly how this feature can be added to a theme. The WordPress theme we will use for this example will be the Responsive theme version 1.8.0.1, by Emil Uzelac. This is one of the featured themes on WordPress.org at the moment and should give us a solid starting point. However, please feel free to use whatever theme you’d like as you follow along.

(more…)