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.
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.
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 is the fifth and final post in a series of posts detailing how to set up basic responsive page structures using CSS. In this post, I will be covering how to handle a layout with the header on the left, instead of across the top. Typically in this type of layout, the navigation is on the left as well. The Medium theme by Okay Themes is a good example of this style of layout.
This is the fourth in a series of posts detailing how to set up basic responsive page structures using CSS. In this post, I will be covering how to handle three column layouts with one sidebar on each side of the main content area. Layouts with both sidebars on the same side were covered in the last tutorial. (more…)
This is the third in a series of posts detailing how to set up basic responsive page structures using CSS. In this post, I will be covering how to handle three column layouts when both sidebars are on the same side. Sidebars split out on each side of the main content are covered in the next tutorial. (more…)
This is the first in a series of posts detailing how to setup basic responsive page structures using CSS. In this post, I will be covering how to easily put together a single column layout. It’s pretty simple, but I’ll move on to more complex layouts in the next posts.
There are just a few things I want to mention before getting started:
- The HTML structure will be coming from the Solum starter theme I released last week. Solum doesn’t contain any layout markup, so it gives a clean starting point.
- I will not be including menus in these tutorials. For examples of how to handle menus in responsive design, I would suggest taking a look at the mo.js project.
Many posts have been written about the WordPress template hierarchy and the naming conventions associated with it. In order for WordPress to load the right template file at the proper time, certain file names must be used. However, naming WordPress theme folders and files that aren’t part of the template hierarchy is not so straightforward. Today I would like to explain the file structure and folder names in use at Theme Foundation and the reasoning behind them.
File and folder names should be used to clearly identify their contents. I know this should be obvious, because names exist primarily to identify things. However, there have been times when I’ve opened a theme and found that I really have no idea where to begin looking for a particular piece of code. I hope that no one ever feels that way when working with a product I build, so here are the naming conventions I have in place for the themes I create.
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…)
How do you build a mobile-first, progressively enhanced, responsive navigation menu? Let me introduce you to Menu Object (mo.js), a system for handling menus from the ground up. At its most basic level, mo.js dynamically adds and removes classes from menu elements to allow various menu states to be styled using CSS. For those of you dying to get right to the code, you can check out the Menu Object repository on Github. For everyone else, let’s start at the beginning…
This post will explain how to easily implement custom meta boxes in your WordPress theme by using the Theme Toolkit provided by Theme Foundation. If you don’t want to use the toolkit, but are interested in implementing custom meta boxes from scratch, please see WordPress Meta Boxes: a Comprehensive Developer’s Guide.
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…
This post will explain how to easily implement the WordPress theme customizer in your WordPress theme by using the Theme Toolkit provided by Theme Foundation. If you’re not interested in saving time and energy by using the theme toolkit, please see my previous tutorial explaining how to implement the theme customizer from scratch. Let’s get started.
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 126.96.36.199, 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.