Options Framework + Theme Customizer

One of the great new features in WordPress 3.4 is the Theme Customizer which allows you to modify options for a theme and instantly preview them on the site.

I’d encourage you to try out the Theme Customizer, but first upgrade to the latest version of the Options Framework (1.3). Earlier versions explicitly checked for $_POST['update'] in the request before saving anything to the database, which doesn’t allow options set via the Theme Customizer to save properly.

Continue reading

Options Framework Sidebar

The latest version of the Options Framework has a new hook to display content below the options panel. This feature was added thanks to @Satrya, who posted a neat screenshot on GitHub and requested it.

The hook can be used to display any content below the options panel, but one cool use is to add a sidebar with additional information about the theme. Here’s an example:

I added a demo theme of this to the Options Theme Kit if you’re interested to see exactly how it works.

Here’s a slightly simpler example:

add_action('optionsframework_after','exampletheme_options_after', 100);

function exampletheme_options_after() { ?>
    <p>Content after the options panel!</p>
<?php }

Theme Customizer Default Sections

I kept having to hunt through wp-includes/class-wp-customize-manager.php to see what the default sections in the theme customizer were registered as.

To save you the trouble, here they are:


$this->add_section( 'title_tagline', array(
     'title'    => __( 'Site Title & Tagline' ),
     'priority' => 20,
) );


$this->add_section( 'colors', array(
     'title'          => __( 'Colors' ),
     'priority'       => 40,
) );


$this->add_section( 'header_image', array(
     'title'          => __( 'Header Image' ),
     'theme_supports' => 'custom-header',
     'priority'       => 60,
) );


$this->add_section( 'background_image', array(
     'title'          => __( 'Background Image' ),
     'theme_supports' => 'custom-background',
     'priority'       => 80,
) );


$this->add_section( 'nav', array(
     'title'          => __( 'Navigation' ),
     'theme_supports' => 'menus',
     'priority'       => 100,
     'description'    => sprintf( _n('Your theme supports %s menu. Select which menu you would like to use.', 'Your theme supports %s menus. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . "\n\n" . __('You can edit your menu content on the Menus screen in the Appearance section.'),
) );


$this->add_section( 'static_front_page', array(
     'title'          => __( 'Static Front Page' ),
      // 'theme_supports' => 'static-front-page',
      'priority'       => 120,
      'description'    => __( 'Your theme supports a static front page.' ),
) );

If you’re not sure how to add options to these default sections, give Otto’s post a read.

Loading Additional Stylesheets from an Options Panel

A common option in premium WordPress themes is the ability to select different design styles. Even “Twenty Eleven” has the option to use a “Light” or “Dark” color palette.

There are two main ways to apply these styles- either with body classes or by loading in a second stylesheet. This tutorial covers the stylesheet method.

I’m also assuming you’re using the Options Framework (theme or plugin version) to set up your options, though you could likely adapt the code if you are building your own panel from scratch.

Continue reading

Loading Google Fonts from Theme Options

Providing font options in a WordPress theme can be a significant design challenge.

It’s not quite as simple as just outputting a bit of inline CSS for font-family. Every font has unique meanlines and x-heights- so the font size, line heights and paddings for every font selector may need to be adjusted as well. A 1.2 line-height could be perfect in body text for “Helvetica Nueue”, but appear cramped with “Georgia”.

Unless you want to offer hundreds of options so that the user can also adjust these other css properties, it’s probably best to whittle down the font choices to a couple that look really great. I’d recommend adjusting the line heights and sizes automatically when the user makes a switch, which unfortunately, is a ton of extra work.

On a recent project I’ve been working on, I decided it wasn’t worth it. I kept the font face defaults and decided just give the user control over font colors and sizes. However, if you do want to offer your users that option, good on you.

What We’ll Cover

In this tutorial I won’t show how to adjust all the font properties- but I will suggest some ways to set up font options, and conditionally load Google fonts when a user has selected one.

In these examples I assume you’re using the Options Framework (theme or plugin version), but it should be fairly easy to use this code even if you’re building your own options panel from scratch.
Continue reading

Infinite Scroll in WordPress


Infinite scroll has become a standard feature in many web applications. Twitter and Facebook are the ones I use every day, but it’s also in a ton of Tumblr themes and Cargo Collective sites.

I feel WordPress themes has been slow to adopt infinite scroll- but after adding it to my site over the weekend I understand some of the complications.

Unlike Tumblr or Cargo Collective, WordPress (.org) users can use plugins to add all sorts of javascript to posts. On my site Syntax Highlighting is the main culprit (which I use to display code snippets), but many others have social buttons or lightboxed images.

When infinite scroll pulls in additional posts via ajax, it doesn’t load the javascript code from the header or footer of the post that might be needed to display js content (e.g. social buttons, formatted code, etc) properly. That puts theme authors in a bind. Infinite scroll may be a better end user experience, but it’s going to lead to more support requests during theme set up.

However, if you don’t use much javascript in your post content, or if you display excerpts on your index pages rather than full posts, I’d suggest trying it out.

The Infinite Scroll plugin recently had a complete rewrite, and I can now recommend using it again. If you use the plugin you should be able to set up infinite scroll for your theme in just a couple minutes.

I’ll also posted a tutorial about how to add Infinite Scroll to a theme without a plugin.

Useful Links:

Image Credit: Infinity Pool

WP Engine Hosting Review

I’ve hosted most of my sites with BlueHost the last six years, but I recently migrated this one over to WP Engine. I was mainly curious to see what the impact on page speed would be. As WP Theming has grown in traffic so have load times– despite good caching, gzipped files, minified scripts and css, and sprited images.

Page Speed

The home page of the site had a page speed score of 96% before the migration and roughly 81% after. No theme code changed and the only plugin removal was W3 Total Cache. However, load times improved significantly (as measured by Google):

This Google Page Speed graph shows that page speeds were 1.47 seconds faster after the migration, which is 25% improvement.

You’ll notice average page speed is 1.47 seconds faster, which is a significant 25% improvement. I’d venture to guess the numbers might be even more impressive for someone who had not already worked to optimize load times.
Continue reading

Color Palettes with the Options Framework

Example Options

I recently collaborated on a project with Brian Casel, another WordPress developer, who wanted options for selecting preset color palettes in the Options Framework.

The idea is that a user could choose a color palette (light,dark,vibrant) from a select box or image radio button- and all the color pickers would fill with those presets. The user could then override any of those preset colors if they choose.
Continue reading

Options Framework 1.0


Although this is the “milestone” 1.0 release for the Options Framework there aren’t any major changes for end users in this version. It’s more of a developer release, providing additional filters and hooks.

If your theme currently works, it should be fine after this release too. But I would love for any developers who use it to test it out and make sure.
Continue reading

Theming the Image Post Format


Working with post formats in WordPress can be challenging because of the lack of structured data. For instance, just because a user selects an “image” post format, there’s no guarantee that an image was actually attached to the post.

Alex King has created a plugin and submitted a couple patches, but until the WordPress UI catches up we as theme developers need to be a little creative.

In the most recent version of Portfolio Press, I ended up styling the image format to look like this:
Continue reading

Custom Design on WordPress.com


If you want a highly customized theme for your WordPress site the only option is to self-host, right? Not so fast…

I just finished a small project for Bluefin Software redeveloping their blog. They wanted to stay with WordPress.com hosting because of its ability to scale and low maintenance. And incredibly, by using just the custom design upgrade and widget areas in the Coraline Theme, it was possible to build exactly what their designer had envisioned.
Continue reading