WordPress Beginners Tutorial – Building a Theme Options Page

WordPress Beginners Tutorial – Building a Theme Options Page

After many hours of searching the web, looking for some great WordPress admin theme options page tutorials, I have found a lot of different methods which became confusing and complicated. So after many hours of learning and understanding how to create an options page, and after including an options page for some of my clients, I decided to create the most BASIC tutorial on this issue. I will try to be as basic and simple as possible so beginners can follow along easily. This tutorial expects the user to have a beginner background in html, php and WordPress. This tutorial will show the very minimal things to code to get a working options page in your WordPress theme. After you start to understand and learn the basics, then you can branch out and find some more advanced tutorials. So here we go. To set this up, say we are creating a brand new WordPress theme called Blitz. If there already is a WordPress theme called Blitz, this tutorial has no relationship to that theme and is purely by coincidence. Of course with our new Blitz theme, we have a folder called Blitz under our themes folder and includes the very basic files that are required for a WordPress Theme. The files we have in our Blitz folder are index.php, header.php, footer.php, style.css and functions.php.

Step 1: In this tutorial we will be showing you the bare minimum to create a theme options page which will give you a good base on creating more advanced theme option page. I would highly suggest to find some more advanced tutorials after you get this one down such as, validation, security, more advanced options, etc.. The next step after finishing this small project would be to add some validation code for the form to check what users will be putting in the textbox. OK. Let’s get started. First, plan out your options that you want to include on your theme options page. Since this a BARE BONES tutorial, we will plan out having one textbox for user to type whatever text they want in the textbox on the admin options page and then have it simply appear in the footer. Pretty simple!

Here is a screen shot of your options page with a textbox. To view the images, just click on the image and when finished viewing just hit the back button in your browser to get back to the article.

And then here is our footer displaying the text.

Step 2: Before we begin creating our theme options page we must have the bar minimum files to create a theme. So I will be creating 5 files, header.php, footer.php, index.php, functions.php, and style.css to create my simple theme. Since this tutorial will be covering theme options page, I will not be covering how to create a basic theme. But you will need a basic theme to see how to create a theme options page. To keep things less complicated as you start to create your options page, lets create a brand new file called blitz-options.php and save it in your new theme folder (if you are following along in this tutorial, this folder would be called blitz and will sit in our themes folder. This page is where we will write our code for the new theme options page. But we need to have the theme’s functions.php page call this file. So in your theme’s functions.php page, place this code that will call the new blitz-options.php page.

require_once('blitz-options.php');

Step 3: Now in our new blitz-options.php file, we will start coding. We need to create our sub-menu under the appearances admin menu. In this code, we are telling WordPress to call the function blitz_theme_menu() and then create the new menu option which will show up under the Appearances menu.

/**
**  Blitz Options Page - creates a theme options page
**/
 
// create custom theme settings menu
add_action('admin_menu', 'blitz_theme_menu');
 
function blitz_theme_menu() {
    add_theme_page('Blitz Option', 'Blitz Options', 'manage_options', 'blitz_theme_options.php','blitz_theme_page');
}

 

Step 4: Now we need to register our settings. This will tell WordPress about our new options values which will be saved in the wp-options table.

add_action('admin_init', 'blitz_register_settings'); 
  function blitz_register_settings() {  
  register_setting('blitz-settings-group','blitz_textbox'); 
}

Step 5: Now we need to create our theme options page. This uses html and php markup to create and layout our html form. This form will be what the user sees on the new theme options page. This is a very simple form which will display a textbox, and a button. The user will enter text into the textbox, hit the save button and the information will be saved in the database(wp-options table). I have also set the input value to whatever is the present value of ‘blitz_textbox’ using the get_option() function.

** Be careful if copying code from syntax box. I have tried 4 different syntax plugins and all of them keeps adding extra symbols. For example, this happens twice in lines 10 -19. The plugins keeps adding a back slash which should be my closing php tag. See the end of lines 10 – 19. I have also included code screen shots.

function blitz_theme_page() {
     ?>
     <div class="wrap">
      <form id="formOption" method="post" action="options.php">
       < ?php settings_fields('blitz-settings-group'); ?>
       <table class="form-table">
        <tr valign="top">
        <th scope="row"><span class="boldText">Blitz Textbox</span></th>
        <td>
        <input type="text" name="blitz_textbox" value="<?php print get_option('blitz_textbox'); ?/>" />        <br />
        </td>
        </tr>
        <tr valign="top">
        <th scope="row"><span></span>
        </th>
        <td>
         <p class="submit">
          <input type="submit" class="button-primary" value="<?php _e('Save Changes'); ?/>" />         </p>
        </td>
        </tr>
       </table>
      </form>
     </div>
   < ?php
}

 

Step 6: This is the code that needs to be placed in the footer to display our blitz_textbox value. Using the get_option function again, I am able to get the blitz_textbox value out of the database and display it in the theme’s footer.

<footer class="site-footer" role="container">
    <div class="site-info">
        <div id="themeTest">
            <?php echo get_option('blitz_textbox'); ?>
        </div>
    </div>
</footer>

 

 

OK. That’s it. This small amount of code will create a new theme options page for you, with a simple texbox and button. It will allow the user to enter text into the textbox, hit the save button which will save the text value in the database and then this text value will show up in the footer of your theme. I hope I have done this tutorial justice. After reading the multitude of articles and getting confused, I wanted to help out others you might have the same problem. Please provide feedback and let me know. Complaints, compliments and suggestions are always welcome!