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


25 Responses

Comments

  • Konrad says:

    I thought about making the theme i currently work on a bit more flexible without open aptana. Now i have the chance to do it. Thank you!

  • terrance says:

    very cool, i am newbie and find your info very easy to follow; some of it……lol

  • Nick says:

    I am trying to implement the theme options page according to your tutorial but after creating everything. Now wordpress is all messed up with that theme activated. If i click on anything, it goes to blank page and then I have to click on Back. Only after I delete the theme for which I created the options page, my wordpress acts normal again.

    • Alex Denning says:

      Sounds as though you’re missing something rather vital – go back through the options page really carefully, checking for errors.

  • Tommy says:

    Great site! (I will subscribe) and Great Tutorial, unfortunately i di’dnt got it to work on my site.

    Should i keep the [php] & [/php] tag when i post the code in to my header.php file? or is it just to the example

    • Alex Denning says:

      Looks as though I need to update the tutorial so the code displays properly. In the meantime, check out the new series on creating an advanced theme options page.

  • The text fields work for me but the checkbox stay stuck on true. If I untick the box and hit save it will stay checked…..an echo of the check box variable shows that it’s always on true.

    Any ideas what could be the problem?
    .-= Darice de Cuba´s last blog ..A PHP DOM parser case =-.

  • This code breaks when you upgrade to WP 2.8.6 looks like?

    I could be the only one but I doubt it.

    Is their a fix?
    .-= John MacMenamin´s last blog ..Stop DW _Notes Folder! =-.

  • virg says:

    Hello, thanks for the tutorial! I managed to get the background theme options but when I put the php code from above in the header I get:

    Parse error: syntax error, unexpected ‘&’ in /home/requestg/public_html/themes/portfolio/wp-content/themes/mytheme/header.php on line 62

    Can you please help me?

  • virg says:

    Sorry nvm, I got it to work but now when I try to save the theme options I get

    You do not have sufficient permissions to access this page.

  • wpdesigner says:

    for all those having problems with this tutorial you need to replace all the [php] and other bits until you get something like

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

  • wpdesigner says:

    sorry i mean this

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

    and it works like it should thanks to the author 😉

  • wpdesigner says:

    another example

    <!– don’t forget to change hd to your theme’s shortname –->

    <?php if ($hd_search_box == “true”) {?>

    <!–- search box code here -–>

    <?php }?>

  • alan says:

    hard to follow. weired code printed on pages.
    You know just don’t ,wasting peoples time.I hate lazy developers!

    Fix the code printing [php] wtf !

  • phil says:

    excellent tutorial,
    i have learn a lot but i can’t figure out how to add the upload form to an array,

    does anyone find a solution for this?

    thanks a lot for sharing your skills with us Alex!

  • WPExplorer says:

    I wish I had seen this post sooner as I did not save myself hours by knowing to add the global options to my page..thanks for this post.

Pingbacks