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

<?php

// Create your own options page --> https://wpshout.com/create-an-advanced-options-page-in-wordpress/

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

array(

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

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

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

"std" => "http://feeds2.feedburner.com/",

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

array(

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

array(

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

array(

"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!