Create Your Own Genesis Custom Theme Setting

When creating any kind of software, code reuse is of utmost importance. The same can be said of data reuse. When using the Genesis Framework for WordPress, you can pretty easily create your own Genesis custom theme settings. Those settings can then be made available to your entire website.

In my experience developing WordPress websites for small businesses, I’ve found giving clients access to edit more of the information in their theme is better. One of the things I’ve noticed about small business is they grow quickly, and end up moving into bigger and better locations rather often, so giving them access to simple things—like a single site-wide control to edit their company address—makes them incredibly happy.

What we’re working towards is something along the lines of this:

Genesis Custom Theme Setting Hooks

We’ll need a few different Genesis hooks to put together our custom settings. They cover default settings, sanitization, and the setting metaboxes. They look something like below, and we’ll cover them in detail.

1
2
3
4

add_action( 'genesis_settings_sanitizer_init', 'my_genesis_settings_sanitizer_init' );
add_action( 'genesis_theme_settings_metaboxes', 'my_genesis_theme_settings_metaboxes' );
 
add_filter( 'genesis_theme_settings_defaults', 'my_genesis_theme_settings_defaults' );

Defaults

For our custom setting, it may be useful to have default information available. The genesis_theme_settings_defaults is where you’ll specify said information. For our company address example, we’ll just put in some dummy data.

1
2
3
4
5
6
7
8
9

function my_genesis_theme_settings_defaults( $defaults ) {
 
  $defaults[ 'company_address' ] = '123 Main Street';
  $defaults[ 'company_city' ] = 'Indianapolis';
  $defaults[ 'company_state' ] = 'IN';
  $defaults[ 'company_zip_code' ] = '00000';
 
  return $defaults;
}

Sanitization

In Genesis 2.0, there are a number of sanitization options to make sure the data entered matches the format we’re expecting. These options are one_zero, no_html, absint, safe_html, requires_unfiltered_html, and url. The options are fairly self-explanatory, and also extensible via genesis_available_sanitizer_filters.

We’re just going to use the no_html sanitizer here, because we expect to mark this up in various ways in the theme.

1
2
3
4
5
6
7
8
9
10
11
12

function my_genesis_settings_sanitizer_init() {
  genesis_add_option_filter(
    'no_html', 
    GENESIS_SETTINGS_FIELD, 
    array( 
      'company_address',
      'company_city',
      'company_state',
      'company_zip'
    )
  );
}

Here is also the first time we’ll notice the GENESIS_SETTINGS_FIELD. This is a constant defined by the Genesis Framework. Don’t change it.

Metaboxes, Oh My!

Now that we have the defaults and sanitization out of the way, let’s get to the usable parts. The metaboxes are where our fields show up for editing. In the admin area, head over to Genesis > Theme Settings. That’s where our metaboxes are going to show up.

We need two functions to hook our metaboxes into WordPress: one to tell Genesis we have a metabox to add, and one to tell WordPress what shows up in our metabox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

function my_genesis_theme_settings_metaboxes( $pagehook ) {
  add_meta_box( 
    'custom-settings',
    'My Custom Settings', 
    'my_custom_settings', 
    $pagehook, 
    'main', 
    'high' 
  );
}
 
function my_custom_settings() {
  ?>
 
  <p>
    <?php _e( 'Company Address:', 'my_domain' );?><br />
    <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[company_address]" value="<?php echo esc_attr( genesis_get_option( 'company_address' ) ); ?>" size="50" />
  </p>
 
  <p>
    <?php _e( 'Company City:', 'my_domain' );?><br />
    <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[company_city]" value="<?php echo esc_attr( genesis_get_option( 'company_city' ) ); ?>" size="50" />
  </p>
 
  <p>
    <?php _e( 'Company State:', 'my_domain' );?><br />
    <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[company_state]" value="<?php echo esc_attr( genesis_get_option( 'company_state' ) ); ?>" size="50" />
  </p>
 
  <p>
    <?php _e( 'Company Zip Code:', 'my_domain' );?><br />
    <input type="text" name="<?php echo GENESIS_SETTINGS_FIELD; ?>[company_zip]" value="<?php echo esc_attr( genesis_get_option( 'company_zip' ) ); ?>" size="50" />
  </p>
 
  <?php
}

Using the add_meta_box function, we let WordPress know what’s in our metabox. Here you’ll again seen the GENESIS_SETTINGS_FIELD constant. You’ll also see the input boxes using the genesis_get_option function.

The big bonus for using the Genesis Framework with WordPress here? You don’t really have to worry about saving your data to the database. All the tediousness of it is encapsulated. As a development exercise, I would recommend digging through the code to see how it all goes together. The security issues of getting data from a browser to a database are enough for a thorough college course or five.

Using Your Settings

Now that Genesis has our settings, it’s easy to pull out our data with genesis_get_option.

1

genesis_get_option( 'company_address' );

You can use your data anywhere in WordPress now, mark it up as you please, or use it to drive custom functionality in your Genesis child theme.