The undersigned

WordPress how-to: Theme Options

09/06-2006 | 16:50
61 comments

In my two latest theme releases, I have made an options page, from where colors and other settings can be set. This guide will show you how to make an options page, that can pass on variables to your stylesheet.

We need to work with 3-4 different files for this type of options page:

functions.php
style.css
style.php
header.php

I have created a nice and easy to use base functions file, where we will begin our editing. Download the base file here and take a look at it.

With this file the form and admin page should fully automatically be created, but you will have to define what elements you want people to be able to change. These are the settings set in the functions.phps file when you open it:

$themename = “Theme name”;
$shortname = “tn”;
$options = array (
array( “name” => “Body background color”,
“id” => $shortname.“_body_backgroundcolor”,
“std” => “#FFFFFF”,
“type” => “text”),
array( “name” => “Body font color”,
“id” => $shortname.“_body_color”,
“std” => “#000000″,
“type” => “text”),
array( “name” => “Body font”,
“id” => $shortname.“_body_font”,
“type” => “select”,
“std” => “Arial”,
“options” => array(“Verdana”, “Arial”, “Georgia”))
);

As you might have figured out, you will have to give the $themename variable your themes name, and the $shortname variable your theme names shortname. Now for the more tricky part. Each array is the things you want your user to be able to change - in this case the body background color, the body font color, and the body font.

The arrays should include these:

name - the text the options page should show
id - an id for you to remember. This id should is going to be used in the stylesheet
std - the fields standard value.
type - what form type should it be listed as in the optionspage, text or select.
options - only for select boxes, this are the options available.

Style.php

Create a new file called style.php - open your style.css file and copy everything over, besides the theme information in the top - we will have to leave that in the style.css in order for WordPress to recognize your theme.

When you have copied everything over, save style.css and close it - we won’t need it anymore.

Please be sure that your theme’s header.php has this template tag in the header - in most cases it already has:

<?php wp_head(); ?>

Add these lines to the top of the style.php file, before the style.css content you pasted in it. This code makes sure that style.php gets all the settings defined in the functions.php file:

<?php
require_once( dirname(__FILE__) . ‘../../../../wp-config.php’);
require_once( dirname(__FILE__) . ‘/functions.php’);
header(“Content-type: text/css”);
global $options;
foreach ($options as $value) {
if (get_settings( $value[‘id’] ) === FALSE) { $$value[‘id’] = $value[’std’]; } else { $$value[‘id’] = get_settings( $value[‘id’] ); } }
?>

Now for each place you want to use one of the fields you made on the options page, use php to echo the value of the id you defined in the very beginning. Here is an example (where “tn” is the shortname you defined):

body {
font-family:<?php echo $tn_body_font; ?>;
color:<?php echo $tn_body_color; ?>;
background-color:<?php echo $tn_body_backgroundcolor; ?>;
}

Download my example style.php file here.

Other ways to use it

Just as in the style.php, you could easily add this little snippet in your header.php file:

<?php
global $options;
foreach ($options as $value) {
if (get_settings( $value[‘id’] ) === FALSE) { $$value[‘id’] = $value[’std’]; } else { $$value[‘id’] = get_settings( $value[‘id’] ); } }
?>

Now you can use all the same variables directly in the theme files, use them as conditional tags, or just echo them.

The end

Using this base functions.php file and style.php technique, you can easily make everything on your site changable through the options page. If you experience any problems, don’t hesitate to comment on this post. Also if you have integrated this in your theme, please leave a note for others to see :)

Two things that easily could be wrong, if you experience any problems:

You are missing the wp_head template tag in your themes header.
In functions.php file, be sure there are no whitespace (spaces/linebreaks) before the first <?php or after the last ?>.

61 comments

480x.com Says:

Writing a Theme Options Page in WordPress…

I know Joshua over at Monkeypup was recently working on a options page for a custom theme he was working on. I got him pretty far via back and forth emailing, but there are a couple things I’m sure I missed.
I just caught this post over at The u…

09/06-2006 | 17:08

WordPress Station » Blog Archive » WordPress how-to: Theme Options Says:

[…] The undersigned […]

10/06-2006 | 0:58

Scott Says:

My mind boggles when it comes to theme options—and this is a great “how to.” Not to detract from this thoughtful, step-by-step guide, but would it be appropriate to mention Ozh’s Theme Toolkit?

This way here (yours) is much less cumbersome way to do it, and probably will give a go next time around. You know my shtick with using the least possible (x). Thanks.

10/06-2006 | 4:23

WordPress Theme & Plugin » Blog Archive » Today’s del.icio.us/tag/wordpress Says:

[…] The undersigned l Theme Options » […]

12/06-2006 | 1:47

PixelBud » Archive » Rockin’ the Suburbs Says:

[…] Tidbits & Lifehacks: • How to Pull an All Nighter - Tips on not sleeping. • Neo-Sapien - New WordPress Theme by WPDesigner.com • Wordpress How-To: Theme Options - How have an options page on your blog. • Why Business Blogs are Important - Learn the benefits of blogging. • HOW TO: Boost Your Blog Traffic - Self explanitory. lol. • 14 Resources for the Artistically Challenged - Are you an art person? No? • Ways Entrepreneurs Can Save Money - This works for geeks as well. […]

20/06-2006 | 6:03

Blogalistic » Blog Archive » Thursday's Tutorials Says:

[…] WordPress how-to: Theme Options - How to make an options page in the WordPress Admin, much like the one in K2. […]

22/06-2006 | 17:47

links for 2006-07-01 — 7 seconden — Cuiusvis hominis est errare Says:

[…] WordPress how-to: Theme Options | The undersigned This guide will show you how to make an options page, that can pass on variables to your stylesheet. (tags: wordpress tutorial theme) […]

01/07-2006 | 13:15

waarneming en verandering » Wordpress topics Says:

[…] Variable theme schemes Over at The Undersigned you can read about how you can make an options page for your themes. You can use this options page for changing colors and basically any theme variable on the flight. Nice. Think I should try this sometime myself. […]

03/07-2006 | 10:16

nonimage » Blog Archive » links for 2006-07-06 Says:

[…] WordPress how-to: Theme Options | The undersigned how to create a theme with user options for wordpress (tags: wordpress theme design tutorial) […]

06/07-2006 | 23:11

Renee Says:

Hi, I had a question,

I tried to use the roundedflow theme, but the style.php doesn’t seem to work in IE. I use firefox mainly, but happened to view my site from IE and noticed the style wasn’t showing at all.

Is there anyway I can fix this?

08/07-2006 | 6:12

Renee Says:

Op, nevermind! (-_-);

08/07-2006 | 6:37

sunburntkamel Says:

[…] redistribute. No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTMLallowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> […]

11/07-2006 | 19:51

Scott Says:

I just used your template with one of my new themes. I modified it slightly so it also did radio buttons (each with a

label

). Aren’t your proud of me? Thanks for inspiring me to tear myself from the breast of the theme toolkit.

I hope that’s not obscense. I like hyperbole. What I’m really saying is, thanks.

12/07-2006 | 0:19

Gérald Says:

Hi,
Thank you for this tutorial. I have a question: I have created different style.css for one theme. I change this unig FTP. I would love to be abble to choose what CSS I want directly in the thme options. Would you know how to do that ?

Regards

22/08-2006 | 10:52

Greg Houston Says:

Hi. Thank you for this tutorial.

I am having two difficulties, and they may be related.

#1. The theme options show up perfectly in the admin. I have two options for my theme. One is an email address for the contact form, and the other is an email address for styling author comments differently than visitor comments. The default for both of these is me@myhost.com. Now when I change them, and hit “save changes”, I get the following error message:

Warning: Cannot modify header information - headers already sent by (output started at /home/ashoka/WWW/wordpress/wp-content/themes/greg-default-01/functions.php:75) in /home/ashoka/WWW/wordpress/wp-content/themes/greg-default-01/functions.php on line 107

If I go back to the theme options, it does actually save the changes I made, but for some reason gives that error above. Do you have any idea what is causing that error.

I get the same error when I hit the reset button, but once again, if I go back to the theme options page in the admin, it has returned the options to their defaults.

Now on to difficulty number 2.

I have the following code in the head of my header.php file:

I have also tried switching these two around so that it is:

And then immediately in the body, just to test things out I have put:

But nothing appears.

I have also tried using it in my contact form:

$recipient = $pr_contact_email; where pr is my $shortname of course.

In neither case does anything happen. $pr_contact_email doesn’t seem to have a value outside of the admin panel.

I guess I have a third question as well. Thank you for your patience.

Since I am using this to access variables in my theme files and not in css.php, can I remove any of the following code, or any other code in the base file found at http://theundersigned.net/wp-content/optionspage/functions.phps

function mytheme_wp_head() { ?>
/style.php” rel=”stylesheet” type=”text/css” />

Currently all of that code is present in my functions.php file.

Thank you for your time.

Cheers,
Greg

02/09-2006 | 4:15

Greg Houston Says:

Parts of my previous post may be a bit confusing. For some reason, not all of the code I copy/pasted in to it showed up.

Briefly, in my header template I do have the call for global $options; … and the wp_head();

I have also tried switching the order of the two.

Cheers, and thank you.

Greg Houston

02/09-2006 | 4:22

It's Time For A Change at Literal Barrage Says:

[…] I'm excited to see where this is headed. I believe that I've designed enough flexibility into the theme to allow myself to perhaps even bring back some of the old looks on occasion merely by including a new custom stylesheet (I may end up doing this as a proof-of-concept, should I get the time). I must give credit to Heilmann for inspiring a lot of my design ideas here, Christian Montoya whose Hot Dates with CSS inspired the current dating scheme, Thomas Silkjaer over at The Undersigned whose theme options HOWTO is foundational to the theme backend I am constructing and Alessandro Fulcinti whose Layout Gala provided the inspiration and technical know-how (read: negative CSS margins, baby!) to move forward with the theme. […]

23/09-2006 | 2:11

Billytheradponi (Nick Barrett) Says:

Wow, thanks, this is really useful :D

02/10-2006 | 22:46

@PICO@ Says:

Thanks for your template and I really love that.

Yet, I have a problem to display the style correctly in the IE, but I have a promising result in Opera.

Is there anyway to work around with?

Thanks for your assitance.

03/10-2006 | 11:00

samgar Says:

Hi! I download the water-10 theme and copied all the files into the specified folder and it appears as if it is installed, but when choosing it and looking at my web site it seems a desaster! Nothing is in order, I cannot see any pictures or something related with the theme.

Any idea of what is the problem and how can I solve it?

11/11-2006 | 17:53

Martijn Says:

Thanks for the tutorial. I tried it but found out the function.php loads with every page, not just when loading the theme options. I some cases, like when querying to fill dropdowns, this can be a major performance hog.

13/11-2006 | 23:45

The Thin Line: From Skin To Theme « sunburntkamel Says:

[…] when i said that Themes could be built on style.css and functions.php, that’s only partly true. you could build a theme that way that only inserted a footer credit, and applied javascript to the head of the theme. to add an options panel, you’ll probably want to use theundersigned’s tutorial, or ozh’s theme toolkit. I’m using theundersigned’s tutorial, mainly because the PHP is simple enough for me to get the gist of what’s going on. Ozh’s toolkit does more, but requires me to take more on faith, and has previously caused problems on the theme viewer and wordpress.com. […]

19/11-2006 | 2:58

adam Says:

awesome tutorial. i can understand what most of the code does, kinda. (i’m not a coder).
i’m having some issues with the dropdown menu, though.
i can select whatever i want, and the value saves (it’s persistant on the options page, and i can see it in my database). but when i load style.php, it shows the variable as whatever i’ve set as the default.

any idea where i’d look to fix this? (it’s happening both on windows/apache/PHP 5 and windows/IIS/PHP 4)

20/11-2006 | 23:23

mattrutherford.com Says:

[…] WordPress how-to: Theme Options (tags: wordpress theme) […]

29/12-2006 | 6:33

Official Theme Options « SunBurntKamel Says:

[…] sure, theundersigned’s tutorial, and ozh’s themetoolkit are better than a kick in the head. but with custom headers, sidebar widgets, and color pickers being available to theme authors via API, why can’t we have an official options page API? one that sanitizes values, does error checking, all that good stuff that the theme toolkit gets blasted for not doing? […]

07/03-2007 | 16:46

Charles Stricklin Says:

Like Greg, I too am having problems with “Warning: Cannot modify header information - headers already sent” errors using 2.1.2. Is there something I should look for to correct the problem?

14/03-2007 | 18:03

Nick Says:

Hi! I have also download the water-10 theme and copied all the files into the specified folder but it seems the styles are not being applied. I’ve gone as far as copying the styling information from the styles.php file to the styles.css file and have made minimal headway, but I was wondering if there is something I am doing wrong or an easy fix to this?

I love the look of the theme in test run so I am hopeful to make it work for me.

Thank you!

21/03-2007 | 14:42

Root Says:

Hi,
I just love what you have done. Unfortunately my messing can not manage including a checkbox. I must be missing something simple in my array and in the calling thereof. Could anyone help please? TY.

28/03-2007 | 23:30

Brock Says:

dude - this rocks
A great framework for experimenting.

Thanks for the effort you have put into this!

30/03-2007 | 2:14

Brock Says:

One question I have: why the shortname?

I guess I don’t follow the purpose of this variable. Couldn’t I just drop it and plug in the two letters everywhere?

30/03-2007 | 2:22

arjan Says:

Very nice.

I need this to modify the admin theme.

Is it possible to do this with the wp-admin.css file?

I wat an options page for the admin theme. I want there the option to change the admin panel header color.

Please help me.

14/04-2007 | 14:24

adam Says:

@arjan- you can do this in the same way if you want. just make a wp-admin.php, and add this to your functions.php:

function yourtheme_admin_css() } ?>
<link href=”<?php bloginfo(’template_directory’) ?>/wp-admin.php” rel=”stylesheet” type=”text/css” />
<?php }

add_action(’admin_head’, ‘yourtheme_admin_css’);

14/04-2007 | 14:55

arjan Says:

Thank you for your fast reply.

I can’t get it to work.
Can you make/give me a simple working version. I need only one option to change the header background.
If I have a example I can learn from it and add other admin colors to the script.

I love your striped theme options
I desperately want this for the admin panel colors http://theundersigned.net/2006/05/stripedplus-10-final-released/

Can you make something like this for the admin panel colors?

I understand if you want money from me when you made this for me.
This is I think not a big problem, I can donate through paypal or something.

If you made a working script with only one option (for example the admin panel header color) I will made the other colors configurable.

Please help me out.

Thanks for reading.

15/04-2007 | 7:30

arjan Says:

Me again. After a night of stress and coding. It works :)
I can now change the admin css colors using the Theme Otions button from the Themes menu.
But I want that this function acts like a plugin. Totally separated from the frontend themes.

I’ve being busy to make it a plugin, but I’can make it. I don’t know how.
I want to activate the plugin and then a admin theme options button appear in the submenu of the Options menu.

please help me.

15/04-2007 | 11:31

A Theme Tip For WordPress Theme Authors at Literal Barrage Says:

[…] For theme authors looking to customize their theme offerings with a fancy options/administration screen, functions.php is the place to start. By default, WordPress loads it whenever your theme is active — on the front page or on the back end. A brief discussion on the wp-hackers mailing list today prodded me to post the following code from the functions.php I’m including in Elbee Elgee (whenever I get around to releasing it, that is…). I took the guide offered by The Undersigned as a jumping-off point and added some nice tweaks. In particular, The Undersigned’s version only allowed for text and select form inputs — I wanted/needed more flexibility. […]

03/05-2007 | 23:03

Doug Stewart Says:

I took your excellent guide as a jumping-off point and spiced it up a bit. Hope you don’t mind.

03/05-2007 | 23:59

Useful, But Rarely Used WordPress Techniques » WPDesigner Says:

[…] Theme Options - Ready to take your theme to the next level? Add theme options to your theme. Allow theme users to edit the CSS without touching the style.css file. […]

26/05-2007 | 2:15

adam Says:

i just uploaded a theme to the theme viewer that uses this, and the line 2 of my style.php caused a fatal error - call to an undefined file

eventually i fixed it by adding a slash:

require_once( dirname(__FILE__) . ‘/../../../../wp-config.php’);

do different versions of PHP return different trailing slashes for dirname() ?

29/05-2007 | 17:26

ElegantBlue Theme Released! | Nathan Rice Says:

[…] I’m sure that I was inspired by a website design along the way somewhere, but I honestly don’t remember. I suck at design, so I rely heavily on the influences of others. Thanks to FamFamFam for the arrow icon, thanks to The Undersigned for the awesome code examples to include theme options with this theme, thanks to the guys who put together the feed icon “official pack”, thanks to a certain client who forced me to figure out how to separate trackbacks and comments, thanks to the readers of NathanRice.org for being a huge group of long-term beta-testers, and thanks to PHP for being such an awesome language and super easy to learn and use! […]

02/10-2007 | 1:18

James Says:

Thanks very much for this - a brilliant help.

One thing that might help others (this took me ages to spot):

If you copy and paste the style.php headers direct from your example above, my code editor pasted the quote marks in as curly quotes, which broke the php. Replacing them all with straight quotes fixed this.

Hope that helps someone else!

03/10-2007 | 16:14

Kirby Says:

Typers Wanted To Take FREE Typing Tests! Top Typers Earn FREE Memberships and top paying typing Jobs! We’re looking for people that can type fast without errors. So we’ve set up a typing test to find the fastest and most accurate typists who want to earn a FREE Regular Typers Wanted Membership and one of our top paying typing jobs when they become available.
wwwTypers-Wanted.com

10/11-2007 | 11:54

links for 2007-11-23 | Stephan Miller Says:

[…] The undersigned » Blog Archive » WordPress how-to: Theme Options How to create a Wordpress theme with admin options. (tags: wordpress theme hacks options) […]

23/11-2007 | 13:20

Handicraft information » Blog Archive » links for 2007-11-23 Says:

[…] The undersigned » Blog Archive » WordPress how-to: Theme Options How to create a Wordpress theme with admin options. (tags: wordpress theme hacks options) […]

23/11-2007 | 14:04

How To: Adding Options to Your WordPress Theme Says:

[…] like to set this up for one of your themes, The Undersigned has made a great post detailed how to add options to your WordPress theme, where you are walked through the steps it takes to add an options panel. I recommend giving it a […]

04/12-2007 | 10:02

Theme options and widgets for the Structure theme: Letting users more easily control their WordPress theme Says:

[…] not a lot of tutorials or references on the Web about how to do this, but I found a good article on The Undersigned that helped. His example didn’t quite work right, and it took a bit of customization to […]

12/12-2007 | 0:12

Mike Says:

I used your code as a basis for other theme options, and I want to thank you because it was very helpful. One problem I found was that it added slashes to escaped characters, so I dropped in the stripslashes() function in the update_option statements and everything worked perfectly.

Thanks again!

15/12-2007 | 3:05

Simon Says:

I’m having a bit of trouble using this technique. Basically I’m not using it in the stylesheet, but to display user selectable images in the header. If I set values, they are stored correctly and the foreach loops through them fine in the header file (I’ve tried echoing out the key and value, so I know it’s working). The problem I’ve got is that it’s not assigning the values taken from the array to a usable variable. This means the values aren’t accessible outside of the foreach loop at the top of the header file (I’ve tried various ways of assigning the values to variables, none work even though they are clearly there. Any ideas at all? it’s driving me nuts!

26/01-2008 | 3:23

sbh* - Ma.gnolia: Recently Ma.rk’d Says:

[…] not such a pretty little web site.Rating: ★ ★ ★ ★ ★ Tags: unicode, webThe undersigned » Blog Archive » WordPress how-to: Theme OptionsA good little wordpress how-to.Rating: ★ ★ ★ ★ ★ Tags: wordpress, […]

27/01-2008 | 9:08

PremiumThemes.net - Highest Quality Premium WordPress Themes is coming! | free premium wordpress theme, wordpress cms, custom wordpress template, paid wordpress theme, wordpress revolution, wordpress theme revolution Says:

[…] Silkjær at undersigned introduced theme options and that is really a wonderful feature if you wish to give the power to control the theme behavior […]

03/03-2008 | 11:35

Harris Says:

Is that possible to create something like this method but to change the whole css stylesheet?

My idea is that by placing some customized css styles( perhaps like spring style, summer style…) so people just need to click and change the style.

Thank you.

07/04-2008 | 4:45

Francis Potter Says:

Great tip. For recent Wordpress versions, use get_option instead of get_settings.

13/04-2008 | 2:50

Dizi Televizyon Sinema Film » Blog Archive » PremiumThemes.net - Highest Quality Premium WordPress Themes is coming! Says:

[…] Silkjær at undersigned introduced theme options and that is really a wonderful feature if you wish to give the power to control the theme behavior […]

13/04-2008 | 15:29

wordpress theme maker Says:

[…] minutes!This guide gives you a base file to work from, and explains in easy words, how to let yourhttp://theundersigned.net/2006/06/wordpress-how-to-theme-options/Dezzain Studio - Personal Web Design, Blog Design And Custom …We create unique custom wordpress […]

15/05-2008 | 11:57

有用，但很少被用到的Wordpress技巧 at 第七封印 Says:

[…] 主题修改项 […]

20/05-2008 | 16:44

SevaTeem » Blog Archive » Adding an options page and the first options Says:

[…] a couple of people have done sterling work on easing the creation of options pages. The Undersigned blazed the trail in 2006 with a great tutorial as to how to go about creating options pages and […]

23/05-2008 | 13:59

mk Says:

Wondering if anyone solved the “headers already sent” problem reported here a few times?

17/06-2008 | 2:32

mk Says:

no, seriously. it’s driving me nuts.

19/06-2008 | 20:47

mk Says:

It was, of course, space after the ” php ? > ”

Which I thought I had checked, but…

20/06-2008 | 7:00

Make Sections MSNBC Style in WordPress » Curtis Henson Says: