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

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 ‘http://feeds2.feedburner.com/’ and an input type of text. We can achieve that with the code below:

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:

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:

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!

Enjoyed that? Join the email list!

Your email address:

We're writing a full WordPress tutorial e-book. Would you like updates and a 25% discount when it ships?

No

Yes

http://toscho.de Thomas Scholz

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: http://urbangiraffe.com/articles/localizing-wordpress-themes-and-plugins/

1. Not really my fault, but take the point – in future a text link (if I remember :P)
2. I’m just incapable of getting download links right. The number of times that has happened!
3. Yeah, fair point. The code comes from Biblioteca and I never got around to localisation. It should be possible to translate the options page as when originally researching options pages for Biblioteca (and hence this article), I got a lot of the code from Thematic which is localised.