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:


[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”3-6″ show_line_numbers=”0″]


[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”8-11″ show_line_numbers=”0″]


[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”18-22″ show_line_numbers=”0″]


[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”24-28″ show_line_numbers=”0″]


[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”30-35″ show_line_numbers=”0″]


[gist id=”e182d64246dd579b089836cbe4473808″ file=”customizer-default-sections.php” lines=”37-42″ show_line_numbers=”0″]

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