Using Saved Custom Widget Options

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…)

Displaying WordPress Menu Item Descriptions

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…)

Adding Custom Options to Existing Widgets

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…)

Clickable Phone Numbers on Touch Devices

It’s relatively simple to create a link that points to a phone number instead of a URL. However, this only works on devices that have the means to place a call. In a traditional desktop browser, clicking a telephone link leads to an error message or dialog box. While some computers my have a means to place phone calls, it’s not a good user experience for the rest of your site visitors. Let’s look at how we can improve this situation with a little Javascript.


Filter Available Page Templates

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…)

Automatic Columns for Widget Areas

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…)

A Month of Theme Development

For many years I silently worked on building better WordPress themes. Only a few times did I let the general public know what I was up to. I would usually work hard for a little while, only to get overcome with client work. When client work slowed down, I would start over, improving on where I previously left off.  I can’t even count how many times this has happened over the years. (A few of you may remember the “Rampart” theme I was working on last year. Yes, this is an improvement on that theme, with better code and a better plan).

For the past few months, I’ve been slowly working on a new theme once again. This time, however, I don’t want it to get buried, I don’t want it to get abandoned, I don’t want it to die. So I’ve come up with a plan to make this theme happen. First, let me explain what kind of theme this is, and then I’ll explain my plan.

Longview: a theme for developers only

First of all, I want to be very clear. This is not a theme developed for end users. It will not do everything “with no code needed” and it would fail miserably on ThemeForest. This is a theme for developers who want a theme built with them in mind. A theme that follows best practices and coding standards. A theme that is extensible and well documented. A theme that makes a developer’s life easy.

Here are a few things that make the Longview theme great:


Vertical Rhythm and Responsive Typography: A Starting Point

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…)

Using Skip to Content Links to Improve WordPress Theme Accessibility

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.


Using ARIA Landmark Roles to Improve WordPress Theme Accessibility

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…)

Rampart: A WordPress Theme for Developers

I’ve been building, modifying, using, and studying WordPress themes for over five years now. I remember watching the release of the first few commercial WordPress themes. As time went on, I ended up working for and with a number of different theme companies. I worked on various client projects as well. I’ve spent countless hours working with themes both good and bad. Now the time has finally come for me to put my experience into the form of a product: the Rampart WordPress theme.

Please note: Rampart will be a commercial theme, and is not available yet. There will be discounts for developers interested in purchasing the theme before it officially launches. To be the first to find out when these deals are available, please sign up for the Theme Foundation newsletter.

A Theme for Developers Only

If you’re not a web developer, you can stop reading now. This theme is not for you. It will not have a thousand theme options, it will not have a slider, and it will not be advertised with the phrase “without any code.”

If you are a web developer, I want to help you build higher quality sites in less time. Here’s the plan… (more…)

Simple CSS Layout with Header on the Left

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.

CSS layout example


Simple Three Column CSS Layout (Split Sidebars)

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…)

Simple Three Column CSS Layout (Sidebars Together)

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…)

Simple Two Column CSS Layout

This is the second in a series of posts detailing how to setup basic responsive page structures using CSS. In this post, I will be covering how to handle two column layouts, first with the content on the left and the sidebar on the right and then the other way around. (more…)

Simple Single Column CSS Layout

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:

  1. 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.
  2. 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.


Introducing Solum, a WordPress Starter Theme

As I mentioned a week ago in my New Year post, I’ve been working on a new WordPress starter theme. I know there are plenty of starter themes available already, so I want to spell out my goals for this starter theme clearly.

  1. Do things the WordPress way.
  2. Include only the most necessary components (I know this is vague. Think: no amazing features, almost no styles, etc).
  3. Pass the Theme-Check plugin tests.
  4. Be easily extensible.
  5. Serve as a tool for teaching the proper way to build WordPress themes.
  6. Include comprehensive documentation.

I don’t think I’ve achieved these goals yet, but I’m working on it (although it does pass the Theme-Check tests). If you’d like to check out what’s been done so far, or help Solum reach the goals listed above, check out the Solum Github page.

Guidelines for Naming WordPress Theme Folders and Files

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.


A New Year Brings New Plans

It’s been 14 months since my first post here on Theme Foundation. I’ve only posted about once a month and this site had been on the back burner most of the time. In the first half of 2014 I want to change all that. Here’s the plan:

  1. Post two helpful tutorials or discussions of relevant topics per week.
  2. Release my first commercial theme before the first of June. (Just in time for BeachPress!)

I’ve been hard at work on a new starter theme and a unique pricing system, but I’m not going to tell you about either of those today. That info will come soon enough. Want to be the first to know when those posts are published? Sign up for the Theme Foundation Newsletter.

A Collection of Controls for the WordPress Theme Customizer

If you’ve worked with WordPress theme customizer before, you know that there are some great controls built into core. However, if you want to extend what the customizer can do, you’ll have to either write your own controls, or find controls that someone else has already written. To ease the process of finding quality customizer controls, I’ve created a Github repository to serve as a central location for such controls. If you have any controls you’d like to see created, or if you’ve created a control and would like to submit it, please head on over to the WordPress Theme Customizer Controls Github repository and get involved.

The Easy Way to Keep Your Custom Post Type in a Plugin

Just a few days ago, Justin Tadlock wrote about why custom post types belong in plugins. If you’re not sure whether to put your custom post type code in a plugin or place it directly into your theme, go read his article. If you already know that custom post types belong in plugins, then stay right here!

While Justin was writing his in depth article detailing all the reasons that custom post types belong in plugins, I was working on building a custom post type plugin generator. Now all you need to do to create a custom post type plugin is fill out a quick form, click “Generate Plugin” and you’re done! All the code is created dynamically based on the input you provide.

Try generating a custom post type plugin now!

How to Create a Multi-Category Control for the Theme Customizer

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…)

The Best Things in Life are not Drag-and-Drop

Lately I’ve been doing a lot of thinking about the philosophy behind WordPress theming. It seems that the prevailing attitude is to make things easier than ever before. We want to enable the masses to create and manage their own websites. This sounds like a noble goal, but is it really really a good idea?


Responsive Navigation Menus: Flexible Solutions

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…


Introducing the Widgetize Plugin for WordPress

Quickly widgetize any post or page with the new Widgetize plugin. Many themes offer widgetized home pages, but Widgetize allows you to create any number of widget areas on any post or page. Here’s how it works…


Responsive Navigation Menus: Problems and Proposals

One of the most challenging aspects of responsive design is creating a complex menu system that works well on mobile, tablet, and desktop devices. In this post, I will briefly discuss the common problems and then move on to outline a proposal for one possible way of handling them elegantly across a multitude of devices. (more…)

Theme Toolkit Tutorial: Custom Meta Boxes

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.


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…


Theme Toolkit Tutorial: The WordPress Theme Customizer

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.


The WordPress Theme Customizer: a Comprehensive Developer’s Guide

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, by Emil Uzelac. This is one of the featured themes on 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.


A Beginning

Hello, and welcome to the Theme Foundation project. My name is Alex Mansfield and I am the sole developer behind Theme Foundation (at least for now). I am currently constructing a modular theme toolkit that will allow advanced features to be quickly and easily added to new and existing WordPress themes. The toolkit is in private beta at the moment, and includes modules for building custom metaboxes, theme options pages, and utilizing the WordPress theme customizer introduced in WordPress 3.4. Along with releasing the theme toolkit, I will be writing in-depth tutorials covering all the features included in the toolkit. If there are any features you would like to see included in the toolkit, please let me know. Thanks!

Sign up for updates on the project and for access to the theme toolkit beta.