Create An Awesome WordPress Theme Options Page (part 2 – implementation)

Continuing on the ‘Create An Awesome WordPress Theme Options Page’ series, and following directly on from part one (ie you need to read it first), we’ll be implementing the options we’ve created into our hypothetical WordPress theme, Hexadecimal.

Update 21.08.09: this tutorial series has been updated with a new series – check out “Create An Advanced Theme Options Page in WordPress“.

Changing colour

changingcolour

The first thing we did in part one was let the user change the site’s colour scheme, as the picture above shows. Now we’re going to implement it. First up, open up your header.php file, and add the following code:

<?php
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?>

I’ll say this now to avoid hours of wasted time later – you must put the code above at the start of all the files which you add options to.

Right. Anyway. To change the colours we’re going to need an additional stylesheet. Lets call it extrastyle.php. Once you’ve created the file, upload it to your theme folder. Next thing to do is add the following line to your header.php file, below the stylesheet:

<?php include (TEMPLATEPATH . '/extrastyle.php'); ?>

Once you’ve done that, switch back to your new php file, and the following lines:

<?php
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?>

<style type="text/css">


body{
background: #<?php echo $hd_main_bg;?>;
}

</style>

Remember in part one at the start we made a shortened name of our theme? We’re going to use that here – where it says “background:#<?php echo$hd_….” you need to change the hd (the shortend version of hexadecimal) to your theme’s shortname. And that’s that.

Showing and disabling ‘stuff’

showandgetrid

The next thing we did in part one was give the user the option to show or disable the search box, which we can do with the following code (it’s more or lest the same as the code above, so I won’t go into a deep and meaningful explanation).

&amp;lt;?php
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?&amp;gt;

&amp;lt;!-- don't forget to change hd to your theme's shortname --&amp;gt;

&amp;lt;?php if ($hd_search_box == &amp;amp;quot;true&amp;amp;quot;) {?&amp;gt;

&amp;lt;!-- sidebar code here --&amp;gt;

&amp;lt;?php }?&amp;gt;

Putting in your name

name

The final thing we did was put in the user’s name. Again, no explanation this time, hopefully you get the jist 😀

&amp;lt;!-- don't forget the code to put at the start!--&amp;gt;

&amp;lt;?php echo $hd_my_name;?&amp;gt;

And finally

And there we have it. Wasn’t that fun!

Part one – Creating the options page

Part two – Implementation

Part three – Inspiration