Create An Awesome WordPress Theme Options Page (part 2 – implementation)
Posted on 01. Jun, 2009 by Alex Denning in Theme Options Page
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
- 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’
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).
- &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;
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 
- &lt;!– don't forget the code to put at the start!–&gt;
- &lt;?php echo $hd_my_name;?&gt;
And finally
And there we have it. Wasn’t that fun!
Part one - Creating the options page
Part two – Implementation
Part three – Inspiration
Related posts:
Enjoyed the post? We'll see you on Twitter or in your RSS reader!
Alex Denning is the founder of WPShout. A WordPress developer from London, Alex co-founded WPShift at the start of 2010 where he sells awesome WordPress themes.
You can find Alex on Twitter and at AlexDenning.com.
25 Responses to “Create An Awesome WordPress Theme Options Page (part 2 – implementation)”
Trackbacks/Pingbacks
[...] 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 – By Nometech [...]
[...] Part 2 – Implementation [...]
[...] Create An Awesome WordPress Theme Options Page (part 2 – implementation) [...]
[...] a little description of what the option does. ‘id’ is what’ll we’ll use in part two to implement the colour changing into the theme in part two. [...]
[...] 3b. Create An Awesome WordPress Theme Options Page Part 2 [...]
[...] is something that we’ve just covered on WPShout! In part one we created the backend, and in part two we implemented it.5. Tabbed sidebarTabbed content on your sidebar is very cool. Fact. Thankfully, [...]
[...] 3b. Create An Awesome WordPress Theme Options Page Part 2 [...]
Leave a Reply
- WordPress Theme Design Basics
- Create An Advanced Options Page in WordPress
- Premium Frameworks Reviewed
- Creating A Tumblog With WordPress
- 10 Practical WordPress Security Tips
- A to Z of WordPress .htaccess Hacks
- WordPress Theme Design Basics
- 10 WordPress Plugins That Every Blog Needs
- 10 Awesome Things To Do With WordPress' Custom Fields
- How To Stop An Eithical Hacker Breaking Into Your WordPress Site
Konrad
04. Jun, 2009
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
12. Aug, 2009
very cool, i am newbie and find your info very easy to follow; some of it……lol
Nick
19. Aug, 2009
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
20. Aug, 2009
Sounds as though you’re missing something rather vital – go back through the options page really carefully, checking for errors.
Tommy
21. Oct, 2009
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
22. Oct, 2009
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.
Darice de Cuba
25. Oct, 2009
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 =-.
Alex Denning
27. Oct, 2009
You’ll want to check out the updated tutorial for something that works better.
John MacMenamin
19. Nov, 2009
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! =-.
Alex Denning
21. Nov, 2009
I’m not going to look into this as there is a new and better way of doing this.
virg
10. Feb, 2010
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
10. Feb, 2010
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
23. Feb, 2010
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
23. Feb, 2010
sorry i mean this
<?php include (TEMPLATEPATH . ‘/extrastyle.php’); ?>
and it works like it should thanks to the author
wpdesigner
23. Feb, 2010
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
19. Apr, 2010
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
22. May, 2010
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
06. Jun, 2010
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.