Building A Theme Options Panel – Part Four

Series links

Building A Theme Options Panel – Part One
Building A Theme Options Panel – Part Two
Building A Theme Options Panel – Part Three
Building A Theme Options Panel – Part Four

Table of contents

1. Introduction
2. Saving and Resetting Option Values (wps-panel.php)
3. Front-end Usage (wps-panel-front.php)

Introduction

Welcome to the 4th part which was planned to be the final one, and it kind of is, the 5th part will be an optional part where we’ll be adding new field types.

But let’s focus on the 4th part now. In this one we’ll handle saving the options in the database and retrieving them in the front end. Let’s get started.

Saving and Resetting Option Values (wps-panel.php)

Time to make some stuff happen when the form is submitted. Let’s take a look at how the wps_panel_init() function looks like at the moment (without the new code).

function wps_panel_init(){
	
	/* Important: There will be more code here, but that will come later on */
	
	/* Add the page */
	add_menu_page('wpsPanel', 'wpsPanel', 'edit_themes', basename(__FILE__), 'wps_panel_output', false, 30);
	
}/* wps_panel_init() */

That’s how we left it back in the 1st part of the series and now we’ll update it. You see where it says /* Important: There will be more code here, but that will come later on */? Well the time has come to put some code in there. Take a look bellow how the new wps_panel_init() function looks like. And don’t worry i’ll explain it right after the snippet.

function wps_panel_init(){
	
	/* Include the options */
	include TEMPLATEPATH.'/wps-panel/wps-panel-options.php';
	 
	/* Save & Reset */
	if (isset($_GET['page']) && $_GET['page'] == basename(__FILE__)) {
		
		/* Save */
		if (isset($_REQUEST['action']) && 'save' == $_REQUEST['action']){
			
			/* Loop the options, cross reference the current and the submitted values, and save if they're different */
			foreach ($options as $option){
				
				if($option['type'] != 'open' && $option['type'] != 'close'){
				
					if(!is_array($_REQUEST[$option['id']])){ $the_value = stripslashes($_REQUEST[$option['id']]); }else{ $the_value = serialize($_REQUEST[$option['id']]); }
					
					if(isset($_REQUEST[$option['id']])){ update_option($option['id'], $the_value); }else{ delete_option($option['id']); } 
					
				}
				
			}
			
			/* Redirect to the theme options page */
			header('Location: admin.php?page=wps-panel.php&saved=true');
			
			/* Chuck Norris */
			die;
		 
		/* Reset */
		}else if(isset($_REQUEST['action']) && 'reset' == $_REQUEST['action']) {
			
			/* Loop the options and delete them (setting the default values will happen on next page load) */
			foreach ($options as $option) {
				delete_option($option['id']); 
			}
			
			/* Redirect to the theme options page */
			header("Location: admin.php?page=wps-panel.php&reset=true");
			
			/* Steven Seagal */
			die;
		 
		}
	}
	
	/* Add the page */
	add_menu_page('wpsPanel', 'wpsPanel', 'edit_themes', basename(__FILE__), 'wps_panel_output', false, 30);
	
}/* wps_panel_init() */

I did add some comments in there so you can understand what happens, but just in case here’s a bit more information.

We need to tell the function what we’re updating, right? It can’t update if it doesn’t know what to update. So first we include the wps-panel-options.php which contains all the info about the options we need.

Then we check what action to take, if you remember we have 2 forms: a little one for resetting and a big one for saving. They both have a hidden input field named action, in the reset form the value is reset and in the save form the value is save (ahhh, if only everything in development was so clear).

If the action is save we loop all the options (wps-panel-options.php) and save the values in the database. If the action is reset it’s the same thing just we delete them from the database instead of saving them in it.

Front-end Usage (wps-panel-front.php)

This is a new file we are going to create. The only thing it will consist of is a function we’ll use to get the option values and store them in an array. Here’s the code.

<?php
/* ---------------------------------------------------------------------------------------------------
 
    File: wps-panel-front.php
 
    Functions for usage in the front-end.
 
--------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------------
	wpsPanel GET OPTION VALUES
--------------------------------------------------------------------------------------------------- */
function wps_panel_get_options(){
	
	/* Include the options */
	include TEMPLATEPATH.'/wps-panel/wps-panel-options.php';
	
	/* Create an array */
	$wps_options = array();
	
	/* Loop the options */
	foreach ($options as $option) {
	
		/* If not open or close */
		if($option['type'] != 'open' && $option['type'] != 'close'){
			
			/* If it is not in the database */
			if (get_option($option['id']) === FALSE) { 
				
				/* Get the default value */
				if($option['std'] != ''){
					$wps_options[$option['id']] = $option['std']; 
				}
			
			/* If it is in the database */
			}else{
				
				/* Get the value from the database */
				$option_value = get_option($option['id']);
				if($option_value != ''){
					$wps_options[$option['id']] = $option_value; 
				}
				
			}
		}
	}
	
	/* Return the option values */
	return $wps_options;
	
}/* wps_panel_get_options() END */

?>

All is commented and quite clear i think, if you don’t understand something feel free to ask in the comments.

But now we have to include this file somewhere. Again we’re doing that in the functions.php file of the theme. Remember back in the 1st part when we included the wps-panel.php? Well it’s the same. But let’s improve it a bit. Here’s how it looks now (before modification).

include TEMPLATEPATH.'/wps-panel/wps-panel.php';

…and here is how it looks after modification…

/* Include back-end */
if(is_admin()){ include TEMPLATEPATH.'/wps-panel/wps-panel.php'; }

/* Include front-end */
if(!is_admin()){ include TEMPLATEPATH.'/wps-panel/wps-panel-front.php'; }

As you can see we’re including one file for the back-end and one for the front-end. And we’re using a simple if statement for both, is_admin() is a WordPress function used to determine if we’re in the back-end or not. No need to include unnecessary files, right?

Actual Front-end Usage

<?php
	
	/* Get the options */
	$options = wps_panel_get_options();
	
	/* Actual usage when you need the value */
	echo $options['field_id'];
	
?>

Sample Usage (color style options)

Set the option (wps-panel-options.php).

$options[] = array(	'title' => 'Color Style',
                    'desc'  => 'Here goes the description for this field.',
                    'id'    => $shortname.'_color_style',
					'opts'  => array( 'Light' => 'color-style-light', 'Black' => 'color-style-black', 'Blue' => 'color-style-blue' ),
                    'std'   => 'color-style-light',
                    'type'  => 'select' );

Front end. Getting all the options on top of header.php

<?php
	/* Get the options */
    $options = wps_panel_get_options();
?>

Front end. Setting a class to <body> based on option value.

<body <?php body_class($options['wps_color_style']); ?>>

CSS. Setting rules for the color styles, in style.css

body.color-style-light { /* Rules here */ }
body.color-style-dark { /* Rules here */ }
body.color-style-blue { /* Rules here */ }

Final Words

That’s about it. yulius asked in the comments about a tutorial on adding more fields such as a colorpicker, uploader and such so we’ll be having another part for that. I guess that’ll be the last one.

You can download the files the files for this tutorial, the download link is located on top by the thumbnail. There’s a tweet button too, feel free to tweet about this tutorial.