Theme Options: Putting It All Together

In this article, we’re going to put together a more complicated example that ties a lot of the concepts together from this series of articles.

Example Overview

Let’s say the client wants us to rig up some elements on their site for them that show stuff from Twitter and Facebook (I don’t know what, just use your imagination). So, we’ll add a new options tab called Social Media with a section for some Facebook options and another section for some Twitter options.

Here is what we’ll end up with:

Add Social Media Tab

Before we can add any sections or options, we need to first add our new tab. We’ll use the themeblvd_add_option_tab() function to do this.

/**
 * Add "Social Media" tab.
 */
themeblvd_add_option_tab('social_media', 'Social Media');

Add Twitter Section

Now that we’ve created our new Social Media tab, we can add our first section of options called Twitter. We’ll use the themeblvd_add_option_section() function.

/**
 * Add "Twitter" section to "Social Media" tab.
 */
themeblvd_add_option_section('social_media', 'twitter', 'Twitter', 'Here you can configure your options for Twitter.', array(
    array(
        'name'      => 'Twitter username',
        'desc'      => 'Input your Twitter account.',
        'id'        => 'twitter_username',
        'type'      => 'text'
    ),
    array(
        'name'      => 'Number of tweets',
        'desc'      => 'Enter in a number from 1-15.',
        'id'        => 'twitter_number',
        'type'      => 'text'
    ),
    array(
        'name'      => 'Show @replies?',
        'desc'      => 'Select whether you'd like to include @replies with your tweets or not.',
        'id'        => 'twitter_replies',
        'std'       => 'show',
        'type'      => 'radio',
        'options'   => array(
            'show' => 'Yes, show @replies.',
            'hide' => 'No, hide them.'
        )
    )
));

Add Facebook Section

And then in the same way we added our Twitter section, we’ll add a second section to our new tab called Facebook.

/**
 * Add "Facebook" section to "Social Media" tab.
 */
themeblvd_add_option_section('social_media', 'facebook', 'Facebook', 'Here you can configure your options for Facebook.', array(
    array(
        'name'      => 'Facebook profile',
        'desc'      => 'Enter in the URL to your facebook profile page.',
        'id'        => 'facebook_profile',
        'type'      => 'text'
    ),
    array(
        'name'      => 'Facebook fanpage',
        'desc'      => 'Enter in the URL to your facebook fanpage.',
        'id'        => 'facebook_fanpage',
        'type'      => 'text'
    )
));

Full Code

Here is all the code from this article put together.

/**
 * Add "Social Media" tab.
 */
themeblvd_add_option_tab('social_media', 'Social Media');

/**
 * Add "Twitter" section to "Social Media" tab.
 */
themeblvd_add_option_section('social_media', 'twitter', 'Twitter', 'Here you can configure your options for Twitter.', array(
    array(
        'name'      => 'Twitter username',
        'desc'      => 'Input your Twitter account.',
        'id'        => 'twitter_username',
        'type'      => 'text'
    ),
    array(
        'name'      => 'Number of tweets',
        'desc'      => 'Enter in a number from 1-15.',
        'id'        => 'twitter_number',
        'type'      => 'text'
    ),
    array(
        'name'      => 'Show @replies?',
        'desc'      => 'Select whether you'd like to include @replies with your tweets or not.',
        'id'        => 'twitter_replies',
        'std'       => 'show',
        'type'      => 'radio',
        'options'   => array(
            'show' => 'Yes, show @replies.',
            'hide' => 'No, hide them.'
        )
    )
));

/**
 * Add "Facebook" section to "Social Media" tab.
 */
themeblvd_add_option_section('social_media', 'facebook', 'Facebook', 'Here you can configure your options for Facebook.', array(
    array(
        'name'      => 'Facebook profile',
        'desc'      => 'Enter in the URL to your facebook profile page.',
        'id'        => 'facebook_profile',
        'type'      => 'text'
    ),
    array(
        'name'      => 'Facebook fanpage',
        'desc'      => 'Enter in the URL to your facebook fanpage.',
        'id'        => 'facebook_fanpage',
        'type'      => 'text'
    )
));

Utilizing these options

In order to retrieve the values for these options on the frontend of your site you’d just use themeblvd_get_option() like this:

// Twitter
$tw_user = themeblvd_get_option('twitter_username'):
$tw_num = themeblvd_get_option('twitter_number'):
$tw_replies = themeblvd_get_option('twitter_replies'):

// Facebook
$fb_profile = themeblvd_get_option('facebook_profile'):
$fb_fanpage = themeblvd_get_option('facebook_fanpage'):