Create An Advanced Theme Options Page in WordPress: Day 4
Posted on 08. Oct, 2009 by Alex Denning in Theme Options Page
Day 4 of Creating an Advanced Theme Options Page in WordPress is here!
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!
No 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.
68 Responses to “Create An Advanced Theme Options Page in WordPress: Day 4”
Trackbacks/Pingbacks
[...] as follows:Day 1: IntroductionDay 2: Creating the different optionsDay 3: Styling the options pageDay 4: Implementing the options into a themeAnd that’s pretty much it. Unlike last time there won’t be a free eBook to download at the [...]
[...] Creating An Advanced Options Page in WordPress Part 1, Part 2, Part 3, and Part 4 [...]
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
Comment Name Violation
18. Oct, 2009
Hi!
Great tutorial, thank you. But your get-theme-options.php code is missing from the top page. What is the code that goes into get-theme-options.php file to make this all work?
Thanks again.
Alex Denning
19. Oct, 2009
Ditto comment above/below. Next time you visit, please respect the request not to use your site’s name as the name of your comment.
James
19. Oct, 2009
Hi,
I have been following this and all ok until today.
A bit confused about what actually goes in the get-theme-options.php file?
At the top of this page, is there some code not showing, i.e.
——————————–
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:
CODE HERE
——————————–
Thanks for sharing this process – much appreciated.
James
Alex Denning
19. Oct, 2009
Sorry about that. That was meant to remind me to paste the code! You should see it now.
James
19. Oct, 2009
Hi Alex,
Thanks for your reply. I still cannot see the code after clearing my cache but will check later.
Thanks again for sharing.
Alex Denning
19. Oct, 2009
Should be there once the cache has refreshed. It if isn’t I’ll post it in a comment.
James
19. Oct, 2009
Hi Alex,
If you could paste it in the comment that would be great. Not sure why, but still unable to see it. Refreshed cache, tried different browsers too…
Thanks again.
Damir
20. Oct, 2009
Sorry about my first comment, my forms are saved in firefox so it got there automatically. Code is still not visible in the post. I cleared my cache and restarted computer but still no show. Please post it in the comment.
Thanks.
.-= Damir´s last blog ..Copper Black – WordPress Theme =-.
Alex Denning
20. Oct, 2009
Not to worry. The code you want is below. I’ve cleared the site’s cache – is it there now?
<?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'] ); }
}
?>
James
20. Oct, 2009
Hi Alex,
Thanks – yes it can be seen within the post now as well.
max
20. Oct, 2009
Thanks, this is a great tutorial!
Alex Denning
20. Oct, 2009
Glad you enjoyed it!
Damir
22. Oct, 2009
Thank you for this great tutorial, it is just what I was looking for. I get the theme options page under theme links as it should but I do get an error when trying to save changes “You do not have sufficient permissions to access this page.” I’m using wp 2.8.4 What could be causing the error?
Thanks again.
.-= Damir´s last blog ..Copper Black – WordPress Theme =-.
Alex Denning
22. Oct, 2009
Erm. Hard to diagnose without seeing what you have and haven’t done, although I do recall a couple of similar errors when I was writing the tutorial. What I’d suggest doing is grab yourself a copy of Biblioteca and compare the options page code in that to what you’ve got. The options page in Biblioteca is located in /library/functions/
Damir
23. Oct, 2009
Thanks for the quick reply, I sort of figured it out. First I was calling the get-theme-options.php inside my existing functions.php (with rest of your code merged inside) using “include_once (TEMPLATEPATH . ‘/….) so I don’t have to use ” include get-theme-options.php…” in every template file that I wanted to use theme options but existing functions file already has “global $options; foreach ($options as $value)…)” code for footer html option page and it was giving me different errors. But using it as you have suggested it works so thank you again for this great tutorial.
.-= Damir´s last blog ..Copper Black – WordPress Theme =-.
Alex Denning
23. Oct, 2009
No problem. Do let me see the results!
Joel G Goodman
23. Oct, 2009
Wow. I must have really great timing. I was just looking to incorporate and options page and stumbled on your series. Thanks for the great tutorial.
I have one question about the implementation phase here. For including the get_theme_options.php — where do you recommend. I tried loading it in header.php and got fairly large error. Any tips?
Thanks again!
.-= Joel G Goodman´s last blog ..NaNoWriMo 2009 =-.
Alex Denning
23. Oct, 2009
You need to put it in every single template file that calls the theme options, at the top of the file.
Joel G Goodman
23. Oct, 2009
So it’s not enough to include in the header.php file that gets called on every page. I’ll play around and see what happens.
thanks again!
.-= Joel G Goodman´s last blog ..NaNoWriMo 2009 =-.
Michael Oeser
17. Nov, 2009
Great stuff exactly at the right time
Just one question: When I put the Analytics code in the optionspage field and then look in the sourcecode of the page everything seems to be fine.
So I copied this options area and wanted to use it for an AdSense code but this doesn´t work because double quotes are not correctly interpreted. This is part of the output for the Analytics code:
and this for the AdSense code:
Any idea why this can be and how to solve it?
Michael Oeser
17. Nov, 2009
Sorry the code was strippped out…here again:
and this for the AdSense code:
Any idea why this can be and how to solve it?
.-= Michael Oeser´s last blog ..WordPress vor Angriffen, Viren und Spam schützen – rechtlich unbedenkliche Methoden und Werkzeuge =-.
Alex Denning
17. Nov, 2009
Hey Michael,
Your code has gone again! You’ll need to wrap it with
and encode it with this tool. Then it should work!Cristian
17. Nov, 2009
Hi!
Great post. I get a “You do not have sufficient permissions to access this page” message when I try to save the options. Any ideas as how to fix the problem?
thanks.
Alex Denning
17. Nov, 2009
Hey Christian,
I might be jumping to conclusions here, but it looks like you’ve Googled theme options pages, stumbled upon this site and found it doesn’t work. I apologise if this isn’t the case, but it seems you implemented it for a client’s project, found it doesn’t work and so thought you’d leave a comment. I of course am then obliged to spend my time replying to your comment to make it all work and you’ll then send it to your client and get paid lots. That’s the impression I’ve got anyway.
I’ll give you the same advice as above – compare your code to Biblioteca’s and see what differences you can find.
James
17. Nov, 2009
Hi Cristian,
If you work out what is causing this issue can you paste your findings here? I have tried and cannot find the problem.
Hope you are more successful…
Thanks
James
17. Nov, 2009
Hi Cristian,
I worked out that you need to change these to suit your file path. I changed mine to the following:
header(“Location: themes.php?page=functions.php&reset=true”);
Note the change to functions.php…
Alex Denning
17. Nov, 2009
Thanks for sharing that James. In retrospective I was a tad harsh on Christian, but it’s always nice to see a community helping each other out. It’s comments like this I like
Cristian
20. Nov, 2009
Ouch! You hit the nail on the head. This is client work. But aren’t we all looking for advice and hints for the advancement of our own work? And I’m not demanding anything, just made an attempt to see if your knowledge base had a reference of this scenario. But I guess not. Can’t blame me for trying. Keep up the good work.
Alex Denning
21. Nov, 2009
It was more the way you did it than anything else. I’ve happily helped countless readers before, but I just can’t stand the
kind of comment. Perhaps I was a bit harsh. Sorry about that. Luckily a lovely reader has replied to your comment with a solution.
Michael Cummings
04. Dec, 2009
Thanks for the solution to that problem, and thanks to the Author for this helpful tutorial…
Michael Oeser
17. Nov, 2009
OK, I´ll try it again:
This is the AdSense code that doesn´t work:
And that´s the Analytics code which does work:
I added some blanks and hope it shows up now.
.-= Michael Oeser´s last blog ..Vorschau auf BranfordMagazine 4.0 =-.
Alex Denning
21. Nov, 2009
Still not displaying; I’m just replying to your email.
Justin
28. Nov, 2009
Great tutorial, I’ve learned a lot.
I am struggling, however, to understand how you allow a structural change in layout ONLY through css. For instance, if I want to offer two columns layout and three columns layout I would have to alter the html and not merely the css.
Right now I’m using Tim Thumb to resize images (for a gallery theme) according to what layout the user selects in the admin section. And the only way I can figure to do this is put the Tim Thumb code in an if/else statement, but I can’t figure out how to do this.
Is there a simpler way to allow a structural change in the theme such that a user can simply select it from the backend? I see that you show an example of a three column layout, but I don’t know how you could do that only through css.
Thanks for your help.
.-= Justin´s last blog ..project 365 =-.
Alex Denning
02. Dec, 2009
In short, you can’t. You need to do and if statement and include a second sidebar the right way. Download a copy of Biblioteca for an example of how to do this.
With a single if statement, you can include a stylesheet and also a second sidebar, which I think is what you’re trying to do. Again, Biblioteca does this.
Joel G Goodman
02. Dec, 2009
Justin – A couple things come to mind. You’d need to make sure your markup is clean enough to handle this, but you separate the classes you need to be variable widths/heights in different places into new stylesheets. Then based on the theme options selection you would load that stylesheet.
So, left column, large body is checked, then load style1.css (code would look just like Alex’s last example in this post). I’m not sure you’re having php/javascript issues as much as understanding the power of CSS and clean, semantically rich markup.
PatzZ
20. Dec, 2009
Sorry I cant figure it out when i’m saving or reset it gives me an error You do not have sufficient permissions to access this page. I put that get-option.php codes in to my functions.php and was tried with everything but still i can’t fix the problem can you pls tell me why this is happening.
Benjamin Kornal
30. Dec, 2009
I’m having a problem with
I get this error
Warning: Cannot modify header information – headers already sent by (output started at /var/www/wordpress/wp-content/themes/theme/functions.php:7) in /var/www/wordpress/wp-content/themes/theme/library/theme-options.php on line 83
Line 7 in functions.php is the previous php code,
and line 83 is;
header(“Location: themes.php?page=theme-options.php&saved=true”);
line 84; die;
Hope you can help. regards, Benjamin
Benjamin Kornal
30. Dec, 2009
I forgot to tell you this happens when I try to save the options
Thanks, Benjamin
Alex Denning
31. Dec, 2009
See the above comments for a fix. You’ll need to change the page depending where you’ve put the file:
header(“Location: themes.php?page=theme-options.php&saved=true”);
Benjamin Kornal
31. Dec, 2009
That wasn’t it I had to save the file in UTF-8 and that fixed it
Regards, Benjamin
Keith
08. Jan, 2010
One of the best WP tutorial I have read. Keep up the good work. Very well written and easy to follow.
Alex Denning
18. Jan, 2010
Thanks
Alex Ball
10. Jan, 2010
Quick question…
When doing the show/hide implementation, do you only have to do a ‘true’ state? For example, if you only do a ‘true’ state and what happens if true, does it just automatically hide it if the box is unchecked?
Thanks!
Alex
Joaquin
13. Jan, 2010
Hi Alex! Great tutorial! I’m wondering if you know how to list the authors on this options page? I’d like to feature an author on the home page and let the editor choose it.. any clue?
thanks!
Joaquín
Alex Denning
18. Jan, 2010
Not of the top of my head, I’m afraid. Take a look for some other themes that do the same and see if you can learn something from the way they do it.
Steve Shead
16. Jan, 2010
Hi there – first off this is a great tutorial and I am VERY grateful for the time you’ve spent on this. I am a novice – you’ve saved me a ton of time.
One quick question – when I click “save changes” the updates go live, but I’m left with a blank page. I’m sure this is my mistake, somewhere, but could you point me to where you think the issue might be please?
thanks again.
Steve
Steve Shead
16. Jan, 2010
UPDATE: All functions that have a “save” or “submit”, or even logout now go to a blank page. What did I miss?
Thanks
Steve
Steve Shead
16. Jan, 2010
UPDATE 2: Scratch all of that. I found that if you leave a space after ?> at the beginning or end of the code it blows it out of the water. Sorry for the multiple posts – I now have a fully functional options page again!
Steve
Alex Denning
18. Jan, 2010
Good to hear
Ricky
24. Jan, 2010
Really nice tutorial. I’m trying to understand it from past few days.
It is working well. I’ve one confusion. How can I change the css style.
I’ve created a style.php file where I have pasted a necessary code and defined text/css type. The only problem is I’m unable to change the style.
Pls help me out with this.
Ricky
24. Jan, 2010
I solved it. I forgot to include style.php file in header file.
One more doubt how can I make a tabbed menu for admin panel?
Like in “General” tab there is an option for general settings. “Header” tab there is a setting for header area and so on…..
Bob
06. Feb, 2010
Great stuff works as it should and well explained i’m gonna use this for my upcoming designs thanks
James Smith
14. Feb, 2010
Great tutorial. I do have one question. I am trying to change the background color of the blog using custom options page. I am trying to pass the value of the background color variable to the style.php file. I added a code snippet at the top of the file to include the options. However the CSS is not picking up the value. As you can see the file is being converted to .CSS via code.
body { background: ; background-image:url(images/bg.jpg); color: #000; font-family: Arial, Helvetica, sans-serif; height:100%}
Any advise appreciated.
James
James Smith
14. Feb, 2010
This is what I have in the header in the above post (got cut of)
James Smith
14. Feb, 2010
header(“Content-type: text/css”);
James Smith
14. Feb, 2010
and
include (TEMPLATEPATH.’/get-theme-options.php’);
Alex Denning
15. Feb, 2010
Does get-theme-options.php exist?
James Smith
15. Feb, 2010
Yes it exists.
I seem to be able to read the values in all other php files except for when I insert the code in the style.php and have the header(“Content-type: text/css”); code. Then it just does not recognize? Any suggestions please?
Joyful Thiek
17. Feb, 2010
And if you don’t mind, can you please tell me how I can set up a field for uploading a picture file for the blog logo from the Options page? I’ve looked for it everywhere but I can’t seem to find an answer.
Sam
04. Apr, 2010
Hi Alex,
Great tutorial, I’ve looked at three today and this is by far the easiest to follow.
One suggestion would be to change the blog layout option to ‘select’ rather than offering 3 check boxes and telling the user to only choose one.
Also the download files for day three 404′d my ass
Other than that a great tutorial and I found it really useful, thanks!
Abhik
20. May, 2010
Hi,
Whenever I put a html link (a href) in textarea field it adds \ before every “.
How can I fix that?
When I put
it becomesThanks in advance..
John
03. Jun, 2010
Hi Alex, thank you very much for the thorough tut. I read through it a couple times when you published it last year and finally got around to making my own.
I noticed when you adjust the site layout, you do it by making additional stylesheets and including them via if statements in the header. Did you consider filtering the
body_class()function and adding in 3c, 2c and 2cw based on the if statements you wrote? If so, why did you choose the way you did? To me, filtering the class is simpler as it leads to less code duplication among the 3 stylesheets, but I could be missing something.Alex Denning
05. Jun, 2010
When I wrote this,
body_classdidn’t actually exist (I wrote this a while before publishing), so that’s why I didn’t use it!It’s a good shout though and something that would make a lot of sense doing (now you mention it, I do know of some themes that do it). I’d have to test it out but it seems you’d have to test which has a worse effect on loading times — extra styles inline or a large stylesheet (and body class functions can get fairly big!). For the odd styles,
body_classwould be the way to go, but with a lot of options I’m not so sure.Riley
02. Jul, 2010
I am also having this problem.
When generating a .php css file using
header(“Content-type: text/css”);
include (TEMPLATEPATH.’/get-theme-options.php’);
Nothing happens. When viewing the file individually include errors occur.
If I remove the include line the file loads fine and css is applied.
Does anyone know the solution?
Thank you.
Great tutorial.
Riley
03. Jul, 2010
Found a solution to my problem. Anyone trying to use theme options from this tutorial to create dynamic css files check out this other tutorial.
http://equalmark.net/hintsandtips/wordpress-dynamic-css/
Otherwise include (TEMPLATEPATH.’/get-theme-options.php’); doesnt work under css header.
Philip
08. Aug, 2010
hi Alex,
i have learn a lot by reading and reading your tutorials this year,
i have add color selectors, nice easing drop downs…the only thing i can’t implement is the wp upload form,
i have add an upload form that works but i can’t get the wp upload box and the url in my input.
can you help me to do this?
or anyone here have done this?
thanks a lot for sharing your knowledge with us!!!
all the best to your life and your upcoming projects:)