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.
Changing colour
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]<?php
global $options;
foreach ($options as $value) {
if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); }
}
?>[/php]
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]<?php include (TEMPLATEPATH . ‘/extrastyle.php’); ?>[/php]
Once you’ve done that, switch back to your new php file, and the following lines:
[php]<?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>[/php]
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’
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).
[php] &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'] ); }
}
?&gt;
&lt;!– don’t forget to change hd to your theme’s shortname –&gt;
&lt;?php if ($hd_search_box == &amp;quot;true&amp;quot;) {?&gt;
&lt;!– sidebar code here –&gt;
&lt;?php }?&gt;[/php]
Putting in your name
The final thing we did was put in the user’s name. Again, no explanation this time, hopefully you get the jist 
[php]&lt;!– don’t forget the code to put at the start!–&gt;
&lt;?php echo $hd_my_name;?&gt;[/php]
And finally
And there we have it. Wasn’t that fun!
Part one - Creating the options page
Part two – Implementation
Part three – Inspiration
You should follow me on Twitter
Related Posts
No related posts.
15 Comments - Add Yours!
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!
very cool, i am newbie and find your info very easy to follow; some of it……lol
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.
Sounds as though you’re missing something rather vital – go back through the options page really carefully, checking for errors.
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
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 =-.
You’ll want to check out the updated tutorial for something that works better.
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! =-.
I’m not going to look into this as there is a new and better way of doing this.
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?
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.
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’); ?>
sorry i mean this
<?php include (TEMPLATEPATH . ‘/extrastyle.php’); ?>
and it works like it should thanks to the author
another example
<!– don’t forget to change hd to your theme’s shortname –->
<?php if ($hd_search_box == “true”) {?>
<!–- search box code here -–>
<?php }?>
4 Trackbacks