Skip to content

Create An Advanced Theme Options Page in WordPress: Day 4

Day 4 of [c] 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!

Yay! 🎉 You made it to the end of the article!
Alex Denning

69 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
whitepixel
December 15, 2011 5:01 pm

Wow thanks for this tutorials. It really helps a lot of designers who doesn’t now how to code like me 🙂 keep up the good work!

Mudit
September 8, 2011 12:04 pm

Hi Alex,

I had little hiccups placing all the pieces of this tutorial (as I am a newbie to the wordpress development) but once done, it worked like a charm.
Thanks for the great article.

Bobby
August 26, 2011 9:25 pm

Why is everything so jacked after implementing the code? After day 3 it sent everything everywhere in the admin. Is it compatible with WP 3x ? I’ve not changed a thing from the code you have given through the tutorial… I copied and pasted.

Nick
April 13, 2011 12:32 am

Does the stuff included in Day 4 still work with WordPress 3.x? I have everything up to this point working, but I can’t get any of the options to display properly, and I’m not getting any error messages to help me out.

I am simply trying to display the custom option entered in a text box in the footer. get-theme-options.php exists, and header.php, index.php and footer.php all include . Thanks,

Nick

elba
March 20, 2011 8:28 pm

Hi,

I found your series and went through it a couple of times.
I’m implementing it now – and get the following error:

Warning: Invalid argument supplied for foreach() … /get-theme-options.php on line 4

Does anyone has an idea what could be the problem?

Thanks.

Lindsey
June 3, 2011 6:36 am
Reply to  elba

I have the same problem. My assumption is that the newest version of WordPress does not work with the get-theme-options.php code. I don’t know enough PHP to recode that page, but hopefully someone else does because this is my go-to code for theme options pages for clients.

Valentin
March 11, 2011 2:36 pm

Many many thanks for the great tutorial! Also many thanksto the community here, the comments were really helpful. I am currently working on my own SEO WP theme and adding an options page has just gotten soooo easy 🙂

Robin
January 25, 2011 10:33 am

Just wanted to sincerely thank you. I am new wordpress and in the process of developing an admin page for a theme I am making from scratch. The only problem I had was updating the header links in functions.php like James so graciously pointed out. It’s contributions like this that really help me learn and look forward to one day giving back to the community. Thanks Alex!

Phil
November 12, 2010 12:20 am

Awsome Tutorial! I look forward to adding all kinds of options to my theme. One questions though, when I make changes to the options and click save settings i get a warning that says “You do not have sufficient permissions to access this page.” but the changes are still saved, what might cause this?

mike
November 7, 2010 2:15 pm

Pretty nice,but what happened to day 5?

ilan
September 1, 2010 3:36 pm

hello,

i have a problem, when putting html code into the fields in the options page, it all get wrong (mostly with ” and haviing \ before it).
even trying to encode it don’t always solve the problem.

any idea how to solve it?

thanks a lot,
ilan

Philip
August 8, 2010 10:54 am

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:)

Riley
July 2, 2010 6:49 pm

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.

John
June 3, 2010 2:43 am

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.

Abhik
May 20, 2010 4:22 pm

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 becomes

Thanks in advance..

Damien
January 2, 2011 1:54 pm
Reply to  Abhik

Try stripslashes, it will work 🙂

echo stripslashes($xp_MainAd);

100+ Resources for WordPress Theme Developers | BloggingBlogging.com
April 28, 2010 6:05 am

[…] Creating An Advanced Options Page in WordPress Part 1, Part 2, Part 3, and Part 4 […]

Sam
April 4, 2010 5:25 pm

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!

Joyful Thiek
February 17, 2010 6:16 am

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.

James Smith
February 14, 2010 3:51 pm

and

include (TEMPLATEPATH.’/get-theme-options.php’);

James Smith
February 15, 2010 3:43 pm
Reply to  Alex Denning

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?

James Smith
February 14, 2010 3:51 pm

header(“Content-type: text/css”);

James Smith
February 14, 2010 3:50 pm

This is what I have in the header in the above post (got cut of)

James Smith
February 14, 2010 3:49 pm

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

Bob
February 6, 2010 1:37 am

Great stuff works as it should and well explained i’m gonna use this for my upcoming designs thanks 😉

Ricky
January 24, 2010 11:40 am

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
January 24, 2010 1:47 pm
Reply to  Ricky

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…..

Steve Shead
January 16, 2010 3:46 pm

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

Steve Shead
January 16, 2010 4:54 am

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
January 16, 2010 12:59 am

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

Joaquin
January 13, 2010 1:29 am

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 Ball
January 10, 2010 4:44 am

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

Keith
January 8, 2010 7:24 pm

One of the best WP tutorial I have read. Keep up the good work. Very well written and easy to follow.

Benjamin Kornal
December 30, 2009 10:28 pm

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
December 30, 2009 10:37 pm

I forgot to tell you this happens when I try to save the options
Thanks, Benjamin

Benjamin Kornal
December 31, 2009 4:05 pm
Reply to  Alex Denning

That wasn’t it I had to save the file in UTF-8 and that fixed it
Regards, Benjamin

PatzZ
December 20, 2009 10:24 am

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.

Joel G Goodman
December 2, 2009 5:46 pm

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.

Create An Advanced Options Page in WordPress | WPShout.com
November 29, 2009 5:32 pm

[…] 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 […]

Cristian
November 17, 2009 2:47 pm

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.

James
November 17, 2009 8:15 pm
Reply to  Cristian

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
November 17, 2009 9:14 pm
Reply to  Cristian

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…

Cristian
November 20, 2009 8:45 pm
Reply to  Alex Denning

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.

Michael Cummings
December 4, 2009 6:16 am
Reply to  James

Thanks for the solution to that problem, and thanks to the Author for this helpful tutorial…

Michael Oeser
November 17, 2009 1:45 pm

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?

max
October 20, 2009 2:09 pm

Thanks, this is a great tutorial!

James
October 19, 2009 7:11 am

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

James
October 19, 2009 8:47 am
Reply to  Alex Denning

Hi Alex,

Thanks for your reply. I still cannot see the code after clearing my cache but will check later.

Thanks again for sharing.

James
October 19, 2009 7:24 pm
Reply to  Alex Denning

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.

James
October 20, 2009 9:33 am
Reply to  Alex Denning

Hi Alex,

Thanks – yes it can be seen within the post now as well.

Comment Name Violation
October 18, 2009 6:43 am

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.

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

69
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...