Adding Theme Options in Genesis

If you’re customizing your site in a way that require site-wide options to be managed in the backend, it’s a good idea to use the Genesis Theme Settings page rather than create a separate backend page specifically for your feature. This keeps all theme-related settings in a single location.

I’m going to walk you through creating your own theme options for Genesis. I’ll be adding a Social Settings box that allows you to specify a Twitter and Facebook URL, to be used in the nav menu of the theme.

Set up Defaults

The default values are what the fields will be set to when a user clicks “Reset Settings”. I’m just going to use blank values, but you could use whatever you like.

Sanitization

One of the major improvements to Genesis in the 1.7 release is the addition of a Sanitizer class. Mark Jaquith, a lead developer of WordPress, was hired by StudioPress to conduct a security audit, and this was one of the results.

The Sanitizer class makes it easy to ensure only the specific types of data you want can be saved in your theme settings. This prevents someone from dropping malicious scripts into one of your theme settings. For more information, watch this Theme & Plugin Security presentation.

By default, Genesis comes with four sanitization filters: one_zero, no_html, safe_html, and requires_unfiltered_html. These should cover almost anything you need to do, but if you did want to add something to this list you could use the genesis_available_sanitizer_filters filter (see /lib/classes/sanitization.php).

We’re going to use the no_html filter.

Register Metabox

We’ll use the add_meta_box() function to add a metabox to the Theme Settings page. You can look in /lib/admin/theme-settings.php for more examples:

Create Metabox

Our add_meta_box() function basically says “Stick the metabox the the be_social_settings_box() function on the Theme Settings page.” Now we have to create that function.

For more examples of metaboxes, see /lib/admin/theme-settings.php.

Putting it all together

Since there’s a lot code, I recommend putting it in a single file. Inside my child theme I’ve created /lib/functions/social-settings.php, and this is the contents:

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments are closed. Continue the conversation with me on Twitter: @billerickson

Comments

  1. Vishal Jain says

    Works like a charm! One question here. Can I use these values using shortcode like [twitter_url] etc. in a post, page and widgets?

  2. Polina says

    Hi Bill! Thank you so much for this. I’ve already used it on a few child themes I’ve built with Genesis and it works perfectly 🙂

    One question: on the last child theme I built, sometimes when saving, ALL the custom fields to revert to their default values. This seems to happen randomly and I can’t figure out what’s causing it.

    I am pretty much doing exactly the same you did here (which has worked perfectly on several other child themes), just using many (20 or 30) custom fields instead of 2.

    • Bill Erickson says

      I’m sorry but I’m not sure what would cause that issue, especially if it’s random (not always).

      Maybe one of your fields is passing data in an unexpected way that’s corrupting the whole $_POST object so nothing gets saved correctly.

  3. jay says

    Hi Bill! im still using this code and im wondering, how can i add the new option in customizer? Genesis automatically did that on default genesis setting, but not the custom option that this code created

    • Bill Erickson says

      Genesis doesn’t automatically add settings to the customizer. Genesis separately create the customizer functionality, and you’ll need to as well for your custom theme settings.

      I recommend waiting for the next release of Genesis, which should be out soon. There’s a simple filter for adding new and modifying existing customizer settings: genesis_customizer_theme_settings_config