Options Page

The third in this series of tutorials is adding an options page to the admin section of WordPress, we created our options page from two different tutorials we found online.

If we follow the steps in this tutorial we will be able to add an options section in the admin menu column of WordPress, have looked at the options array, and how to add the page to our theme.

We will need to do the following steps, add the options page and supporting files to out theme, look at the options for part four and adding the social icons folder so we can create different icon bar style for our theme, which will do in part five of the tutorials.

If you have not worked through the first tutorial you can download the starting theme from the downloads page or from getting started two, this code does not require the sample theme, however if you are not using the starting theme then you will need adjust where you add the functions and the call to the page in your functions.php.

Options Page

We will be adding the options page to the admin section of our child theme, we have given our page its own admin section, and not added it to the appearance menu, this is because we could have a default set of options that we would add to different themes, so our options are not tied to a single theme.

The options page makes it easy for us to add dynamic information to our themes, our social media accounts, links and icons, contact information and footer information are some of the options we will be covering in the tutorials.

In the download for this tutorial are the social media icon sets, before we can use these in our theme we should copy the icon images folders to the child themes ‘images’ folder.

In the download for this tutorial are two files, one ‘admin-options.php’ is our page, the other ‘admin.css’ which is the stylesheet, and before we can use the options page in our theme we should copy these two new files to the child themes main folder.

Download Support Files: Tutorial 2 Options Page (2053)

Social Icons

We found this set of social icons for our themes, these have a Creative Commons licence and were sourced from the DeviantArt website, please visit the artists page and read the licence notes.

Most of what we wanted were already included in the sets, but we had to make some changes.

  • Added the Email Icon
  • Added a Top Of Page Icon
  • Added  a new Help ! Icon

The icons came in four sizes, 60px, 48px, 24px and 16px, we tried the different sizes but found that a 32px * 32px would be a good addition so we have added the new size to the folder.

Complete alternate sets of free icons can be downloaded from My Site My Way if you are designing different themes, you might fine a set that matches.

Page File

The code in the page file (admin-options.php) is a mixture of code from NetTuts admin options page and Steve Talyor’s post on custom fields we have made the functions flexible to add ‘page specific options’ in a later tutorial.

We will not go to deep at this point into the code, but we will look at five array sections, to show how the option array is constructed, you will be able to relate this back to the screenshot, and when we work through tutorial five we will add some more options.

array(
 "name" => "Header Information",
 "type" => "section"),

array( "type" => "open"),

array(
 "name" => "Info Title 1",
 "desc" => "Information Title 1 eg: Telephone, Fax etc:",
 "id" => $shortname."_info_title_1",
 "type" => "text",
 "std" => ""),

array(
 "name" => "Info Text 1",
 "desc" => "Information Text 1 eg: Telephone No., E-mail, Website URL http://www.mysite.com etc:",
 "id" => $shortname."_info_text_1",
 "type" => "text",
 "std" => ""),
array( "type" => "close"),

The first ‘section’ is the header bar, this can be clicked to colapse the section, although it does not work in all browsers.

the next section is the ‘open’ section element, this sets the start position for the jquery.

The next two are both type => “text”, the options are text, textarea, checkbox and select, “name” and “desc”, these are just to let the admin know what to enter, “id” must be a unique reference so we can retrieve the set values at a later time, “std” is the standard setting, like ‘true’, or a text string for something like the footer credit text.

Open the file and have a look at what has been added, to this array, we will be adding more options as we work through other tutorials, and there may be some others that you want to add later specific to your themes.

 Functions Code

In the child themes folder we open the functions.php file and copy the code from the lesson-3-functions.php (in the changes folder) and add this code to the end of our functions.php, we do not copy the first line <?php as this has already been set at line one.

$themename = 'Twenty Ten Templates';

/* Start Lesson 3 Support */
/* Start Template Tutorial Two Support */
/* Start add Category Defaults */
function cms_insert_category($taxonomy,$catName){
 if (!$taxonomy || !$catName) exit;
 /* if we have a category name then insert the category */
 if(!is_term($catName, $taxonomy) && $catName){
  $cat_defaults = array(
   'name' => $catName,
   'description' => $catName);
  $temp = wp_insert_term($catName, $taxonomy, $cat_defaults);
 }
}
/* End add Category Defaults */

/* Start insert our Two new Categories */
cms_insert_category('category','gallery');
cms_insert_category('category','asides');
/* End insert our Two new Categories */

/* List all Images in a folder */
function list_images($path){
    $list = array();
    $dir_handle = @opendir($path) or die("Unable to open $path");
    while($file = readdir($dir_handle)){
        if($file == "." || $file == ".."){continue;}
        $filename = explode(".",$file);
        $cnt = count($filename); $cnt--; $ext = $filename[$cnt];
        if(strtolower($ext) == ('png' || 'jpg')){
   if (!strpos($file, '-thumbnail') > 0) {
    array_push($list, $file);
   }
  }
    }
    return $list;
}

/* load support files */
/* Only Admin can set the page Options */
if (is_admin() && file_exists(STYLESHEETPATH. '/admin-options.php')) include_once(STYLESHEETPATH. '/admin-options.php');
/* End Template Tutorial Two Support */
/* End Lesson 3 Support */

Here the code is adding a $themename variable, adding a new function ‘cms_insert_category()’,  this we use create the two default categories for the standard twenty ten theme post layouts (asides and gallery), we will be using this function later in the tutorials, when we will add three link columns in the footer area.

The function  ‘list_images($path)’ will list all images in a given folder while ignoring any ‘-thumbnail’ images, we will use this for listing our social icons and later for sub-header images, the last few lines are to add our admin-options.php file to the theme.

Viewing the Options Page

To view our admin options page, we can log in to the admin area and we should see a new setting page with the theme name ($themename), have a look at the different sections as we will be using these in the next two tutorials.

We have included the files in the final folder so we can check the placement of the code, now when we visit our local website we will see our setting page.

In our next tutorial we will be adding a nice header logo and information section to our theme.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

5 thoughts on “Options Page

  1. Great tutorials, I’ve bookmarked this site. I’ve been hacking away at my own Twenty Ten child theme for a while now and created a few basic tutorials of my own. This is the first one I’ve seen that deals with adding an options area, thanks.

  2. Great tutorials, I’ve bookmarked this site. I’ve been hacking away at my own Twenty Ten child theme for a while now and created a few basic tutorials of my own. This is the first one I’ve seen that deals with adding an options area, thanks.

  3. Thank you for a great set of tutorials. In Options Page lesson, I repeatedly encounter error message “Unable to open data……twentyten-template/icons/24X24” when I change the functions.php. Same when I use the final folder in download functions.php. I have uploaded all 4 image folders. Also, in above functions.pho code you have “$themename = ‘Twenty Ten Templates’;” which is not in the final functions.php. When I validate admin-options.php code an eoor shows on line 346 “value=”” as not vaild in any version. Any suggestions would be much appreciated. Thanks again for these tutorials

  4. This is really a very helpful tutorials.thanks very much i have been able to follow this tutorials up to this level. i am currently have an error message in the admin-options.php. Can you please help me out.

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tutorials 2010 Two

screenshot

For this series of tutorials we need to have a local WordPress setup. This will enable easy deployment of the theme files. This series will be added to over two weeks, rather than one big set of files since we … Continue reading

Read More