Although I do my best to ensure compatibility between versions of the Options Framework theme (GitHub), upgrading to this latest version will require some minor updates on the part of theme developers.
I am also planning to write some tutorial soon about how to migrate from the Options Framework to the native WordPress Customizer if you’d prefer to take that route. Continue reading
I’ve been working on a new project called the Customizer Library. It’s a collection of classes and functions that make it a bit easier to develop for the WordPress Customizer. It also includes helper functions for Google fonts and inline styles- though I’m considering moving these off into their own repositories as they might not be needed for all projects.
I’ve created a GitHub repository for the Customizer Library that can be included in a theme/plugin as a submodule. I also created a demo theme with example code so developers can get a quick idea of how it works and what it does. I’ve tried to document as much as possible on GitHub- so view the readmes there for implementation details.
I think the reason the Options Framework has been so successful is because it reduced a really complex task (developing an options page) to a really simple task (defining an array). It abstracted the complexity of adding an admin page, generating field markup, sanitizing the data, and saving the options.
The WordPress Customizer is simple in comparison. There’s just one spot to load the controls and WordPress handles the generation of field markup for the most part. But it still doesn’t provide a default data sanitization and the syntax is more complex than it needs to be. Continue reading
The latest WordPress release (3.8) is scheduled for December 12th. For those following along with core you’re probably aware that this release will bring significant UI changes to the WordPress dashboard.
The Options Framework handles this new dashboard design fairly well. Core styling classes were used as much as possible and styling is fairly minimal- so most of design changes are inherited. The biggest issue I saw with the current version is that checkboxes and radio buttons are a bit warped. Continue reading
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.
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 }
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.
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.
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
The Options Kit is a collection of example themes for developers using the Options Framework plugin. Each theme has example code for a different set of issues- such as using Google fonts, adding custom styling to the options panel, or hooking in javascript for color palettes.
Options Check – Example theme with all the option types
Options Palettes – Hook in custom javascript to create an color palette option
Options Styles – Hook in custom styles to change the options appearance
Options Typography – Example typography options, including Google fonts
Options Stylesheets – How to load additional stylesheets via the options
I’ll add new option examples as people request them. This also lets me know which features might need to be added or updated in the core plugin. If you have a suggestion, please leave it in the comments.
I can’t offer support for all custom implementations, but I’ll do my best to answer any questions directly related to code in the Options Kit.
If you only plan on using the theme version of the Options Framework, the Options Framework Theme Kit might be what you’re looking for.
After you add it to the cart, click checkout to complete the transaction.
