Create An Advanced Options Page in WordPress: Day 2

Continuing [wp]’s series on [c], today we’re going to be creating the different options.


  • Day 1: Introduction
  • Day 2: Creating the different options
  • Day 3: Styling the options page
  • Day 4: Implementing the options into a theme

Introduced yesterday, this is the second installment of this month’s themed week – create an advanced options page in WordPress. Today we’re going to be creating the different types of options that we can use in our theme options page. The code used in this tutorial comes from my WordPress theme, [b].

Types of options

There are four different ‘types’ of options we’re going to create today: title, large text box, small text box and checkbox. With these four different types of options available to us, we’ll be able to cover all the bases – give users the option to show and hide elements, enter ad codes, Feedburner addresses – anything really. However, as we’re creating an advanced options page here’s a screen of the full options page we’ll be creating over the week:


Fig 2.1: The Options Page We’re Creating

As the image above shows, there are four main elements to our options page. First is the Feedburner URL, next is letting the user choose a layout, after that showing and hiding various elements and finally text areas for ad codes, footer text and Analytics code.

Getting started

So let’s get started. The template file we’re using to create the options page is called the functions.php file, but we’re not going to start putting data straight into that just yet, so instead open up your code editor of choice and create a new file, functions-options.php. Save this new file with your theme files.

Open it up in your editor of choice. First, we need to specify a ‘themename’ and ‘shortname’. The ‘themename’ should be your theme’s name and ‘shortname’ a shortened version of it. For example, Biblioteca is shortened to ‘blt’:


// Create your own options page -->

$themename = "Bibliteca";

$shortname = "blt";

Creating a small text box


Fig 2.2: an example small text box

Simple enough so far. Next we move onto a PHP array that lets us specify various elements we want to be displayed, and then style these elements, applying the same styling multiple times. Simpler, we’re going to fill out various boxes with the information about our theme options. Tomorrow we’re going to by styling them. The first of our options is the Feedburner URL. We’ve got five different options we can specify: title of the element, description, an ID, what is displayed by standard and what type of input to offer. We want to name our element ‘Feedburner URL’, with a description ‘Copy and paste your Feedburner URL here’. We want an ID of ‘_feedburner’, standard text of ‘’ and an input type of text. We can achieve that with the code below:


"name" => __('Feedburner URL'),

"desc" => __("Copy and paste your Feedburner URL"),

"id" => $shortname."_feedburner",

"std" => "",

"type" => "text"),

To create other options we’re effectively just copying and pasting the code, changing the different elements we want. If you want a small text box, use the code above as a base. We’ll now do a single example of each of the types of element we’re going to be creating.

Creating a title


Fig 2.3: An example title

The next element down on our options page is a title. The title hasn’t got too many different fields we need to fill in, just a description and a type, so to have a title ‘Choose a layout below’ we need the following code:


"desc" => __("<h3>Choose a layout below</h3>"),

"type" => "title"),

You’ll notice the ‘Choose a layout’ is in an <h3> tag, so that it stands out.

Creating a checkbox


Fig 2.4: An example checkbox

The third element we need is a checkbox that lets the user enable or disable elements. To create a checkbox with the option to hide ‘Sidebar Area 1’, a the description ‘Hide Sidebar Area 1?’, ID ‘_sidebar_area_1’ and a standard of false (or in other words the box unchecked; the option is ‘true’) we’ll need the following code:


"name" => __('Sidebar Area 1'),

"desc" => __("Hide Sidebar Area 1?"),

"id" => $shortname."_sidebar_area_1",

"std" => "false",

"type" => "checkbox"),

Again, this can be changed to create other elements. For example, if we wanted the option ‘Hide Homepage Area 1’ we’d need the following:


"name" => __('Homepage Area 1'),

"desc" => __("Hide Homepage Area 1?"),

"id" => $shortname."_home_area_1",

"std" => "false",

"type" => "checkbox"),

Creating a large textbox


Fig 2.5: An example large text box

The final element we need is a large text box. One of the large text boxes was where the user could paste an ad code for an advert size 300×250. We can create one with the following:

array(     "name" => __('Ad code at 300x250 size'),

"desc" => __("Copy and paste into the box below your advert code at 300x250 size"),

"id" => $shortname."_300_250_ad",

"std" => __(""),

"type" => "textarea",

"options" => array(

"rows" => "5",

"cols" => "94") ),

The first three lines should look familiar by now, and as we don’t want anything to be displayed as standard, the space between the quotation marks is blank. The type for a large text area is ‘textarea’. Now you’ll notice we’ve got a couple more options – rows and columns. These are setting the height and width of the text box.

Changing things slightly

We’ve now created an example of each of the main elements, and to create others you just change the name, description etc. I’m not going to create a single example for each. Instead, you can download a txt file at the top of the post with all of the options already in it. Note that it won’t actually do anything at the minute and will probably land you with a big error; you need tomorrow’s styling for the page to display properly. Make sure you [s] and [t] to catch it!

Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Examining Hybrid Core | Wordpress Chronicle
February 15, 2012 5:24 pm

[…] I had to search for where hybrid_get_prefix was to determine what it did. It’s a function in the core.php file. It creates a prefix from the theme name if one isn’t defined. From other tutorials, I know using prefixes prevents duplicate function names (i.e. this tutorial on making Option Pages.) […]

Sumeet Chawla
June 8, 2010 5:17 pm

Great Tutorial Alex. May be you can include a link to the part 2 of the series at the end of this tutorial? I didn’t find any direct means of going ahead..

May 18, 2010 7:01 pm

Can anyone tell me how to insert a radio button group in the options page.

10+ WordPress Tutorials: How to Create an Options Page for Your WordPress Themes and Frameworks -
March 7, 2010 12:16 am

[…] 4.1 Create An Advanced Options Page in WordPress (part 2) by WPShout […]

February 2, 2010 9:15 pm

Diggin the tutorial. Having a problem with the download file. It seems to be truncated.

What is better? Uploading header images via the theme options page? Or uploading them via FTP and populating a list of images within a specific folder?

Create An Advanced Theme Options Page in WordPress: Day 3 |
November 29, 2009 5:34 pm

[…] them and creating the actual page that displays them in the WordPress backend.Day 1: IntroductionDay 2: Creating the different optionsDay 3: Styling the options pageDay 4: Implementing the options into a themeCreating the options […]

Il meglio della settimana #33 | BigThink
October 11, 2009 9:09 pm

[…] An Advanced Options Page in WordPress – 1 – 2 – 3 – 4 Una guida in quattro puntate che vi insegnerà a creare una pagina di opzioni […]

Thomas Scholz
October 6, 2009 7:45 pm

May I just add three hints?

1. I didn’t “see” your download link because it looks like an ad. 🙂
2. There’s a typo in the download url. Ad an “n” after the “w” and it works.
3. Why do you use the function __() without a textdomain? Nobody will ever be able to translate your code anyway.
John Godley has written a nice tutorial on this topic:

.-= Thomas Scholz´s last blog ..PHP: Funktion sanitize_ip =-.