Create An Advanced Options Page in WordPress: Day 2

checkbox
Tell us what you think of your hosting for the 2014 WordPress hosting survey!

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

download-2

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

    themeoptionsscreen

    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 --> http://wpshout.com/create-an-advanced-options-page-in-wordpress/
    
    $themename = "Bibliteca";
    
    $shortname = "blt";

    Creating a small text box

    smallbox

    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

    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

    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

    largebox

    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!

    Found this helpful? You'll find us helpful!

    WPShout is published by a full-service WordPress-loving constultancy, Press Up. Get in touch with us about your project or business idea, we're knowledgable and friendly.

    About the author

    Hello, I'm Alex! I started WPShout in 2009, just before my 16th birthday. Get in touch with me, I'd love to chat. You should also follow me on Twitter :)

    11 Comments

    • 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/

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

      • Alex Denning

        Thanks for the comment :). As always, appreciate you stopping by.

        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.

    • 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?

      • Alex Denning

        Follow the next day’s tutorial for the next part :)

        Probably the first option although depends who the theme is aimed at.

    • Monit

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

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