Create An Advanced Theme Options Page in WordPress: Day 4

Day 4 of [c] is here!

• Day 1: Introduction
• Day 2: Creating the different options
• Day 3: Styling the options page
• Day 4: Implementing the options into a theme

Today comes the exciting implementation of our options page that we created yesterday. The first thing to do is to create a new file called get-theme-options.php and save it with your theme files. In this file paste the following:

<?php
//allows the theme to get info from the theme options page
global $options;
foreach ($options as $value) {
    if (get_option( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; }
    else { $$value['id'] = get_option( $value['id'] ); }
    }
?>

What it does is it allows us to reference the options we’ve selected in the backend. We need to include it in every file that you want to use theme options, which we can do with the following:

<?php include (TEMPLATEPATH.'/get-theme-options.php'); ?>

Implementing Feedburner

The very first option on our options page was the Feedburner address, where users could input their Feedburner URL and it’ll become the RSS feed. With get-theme-options at the top of our header.php file, to get the contents of the Feedburner field from the options page, it’s just a simple echo. At this point you’ll need the shortname you entered in part two and combine this with the ID for the Feedburner, in our example with a shortname of blt and the feedburner ID of _feedburner, that makes blt_feedburner. Combine that with an echo and you get this:

<?php echo $blt_feedburner;?>

Add this to the RSS link in the header and you’ll get something like this:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>" href="<?php echo $blt_feedburner; ?>" />

The same applies to the other text boxes –

<?php echo $[shortname][ID]; ?>

. For example, for the Analytics code, you’d implement it like so

 <?php echo $blt_analytics; ?>

, replacing ‘blt’ with the shortname you selected.

Changing the layout

The next thing we wanted to let users do was enable/disable certain features, with the first option being change the layout. To be able to do this you’ll need to have two (or more) stylesheets, with the different layouts in them. Our example had three layouts to choose from – standard, widened content area and three columns. I’ve created three separate stylesheets, two-column.css, two-column-wide.css and three-column.css. These have been uploaded to /mytheme/css/. With that done, next step is to open up your header.php file and find where the stylesheet is referenced. Below that, with get-theme-options included, copy and paste the following, changing the shortname and ID if necessary:

<?php if ($blt_three_column == "true") {?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/three-column.css" type="text/css" media="screen,projection" />

<?php }?>

<?php if ($blt_two_column == "true") {?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/two-column.css" media="screen,projection" />

<?php }?>

<?php if ($blt_two_column_wide == "true") {?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/two-column-wide.css" type="text/css" media="screen,projection" />

<?php }?>

Essentially all we’re doing here is saying if checkbox x is true, do this:.

implementing checkboxes: show and hide

The same principal applies to showing and hiding ‘stuff’: to hide ‘Homepage Area 1’ I can do so with the following:

<?php //make sure you include get-theme-options

if ($blt_homepage_area_1 == "true") {?>

<!—homepage area one here -->

<?php }?>

And that is all there is to it! You can obviously repeat the principal, so for ‘Homepage Area 2’ you’d need:

<?php //make sure you include get-theme-options

if ($blt_homepage_area_2 == "true") {?>

<!—homepage area two here -->

<?php }?>

The other option you’ve got is if a checkbox is unticked; just change true to false:

<?php //make sure you include get-theme-options

if ($blt_homepage_area_2 == "false") {?>

<!—homepage area two here -->

<?php }?>

Concluding

And with that, we’ve finished implementing all the different options we created – now spend the next five minutes enabling and disabling! We’ve also finished the week’s series, but with still a day to go, not to worry; tomorrow we’ll be wrapping up. See you then!