Building A Theme Options Panel – Part One

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 coming November 16th

Table of contents

1. Introduction
2. The structure
3. Setting up a new page in the admin

Introduction

You know what theme options are so i won’t be bothering you with that and other similar information that you can’t really use.

One important information that you need to know is that a small part of building theme options is actually WordPress specific (filters, hooks, functions…) and here is a rough estimate of what it actually is:

• HTML, CSS & jQuery – 60%
• PHP – 30%
• WordPress specific – 10%

But don’t worry, it’s all simple and straightforward. A few HTML elements, CSS rules, PHP loops and that’s pretty much all there is to it.

The structure

css, js, images, wps-panel-style.css, wps-panel-js.js

If you don’t know what those are gonna be for then i suggest you put off this tutorial for a while and check out some tutorials on web development basics. And if you do know (as i assume you do) please continue…

wps-panel-options.php

Here is where we’re going to define the options using a simple array.

wps-panel.php

This is the MAIN file for the theme options, like the engine is for a car or the processor is for a computer or brain for a human.

Let’s get started

If you created those files and folder it’s time to put some codes in them. We’ll start with wps-panel.php

<?php
/* ---------------------------------------------------------------------------------------------------
	
	File: wps-panel.php
	
--------------------------------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------------------------------
	Javascript
--------------------------------------------------------------------------------------------------- */
add_action('admin_print_scripts', 'wps_panel_include_js');
function wps_panel_include_js(){
	
	/* Register scripts */
	wp_register_script('wps_panel_js', get_template_directory_uri().'/wps-panel/js/wps-panel-js.js', false);
	
	/* Enqueue scripts */
	wp_enqueue_script('wps_panel_js');
	
}/* wps_panel_include_js() */


/* ---------------------------------------------------------------------------------------------------
	CSS
--------------------------------------------------------------------------------------------------- */
add_action('admin_print_styles', 'wps_panel_include_styles');
function wps_panel_include_styles(){

	/* Register styles */
	wp_register_style('wps_panel_style', get_template_directory_uri().'/wps-panel/css/wps-panel-style.css', false);
	
	/* Enqueue styles */
	wp_enqueue_style('wps_panel_style');	
	

}/* wps_panel_include_styles() */


/* ---------------------------------------------------------------------------------------------------
	INIT wpsPanel
--------------------------------------------------------------------------------------------------- */
add_action('admin_menu', 'wps_panel_init');
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() */

/* ---------------------------------------------------------------------------------------------------
	wpsPanel HTML OUTPUT
--------------------------------------------------------------------------------------------------- */
function wps_panel_output(){
	
	/* Important: This function will be used to output the HTML of the WPS Panel page in the admin */
	
}/* wps_panel_output() */

As you can see we can separate this into 4 sections:

• JavaScript – This is where we tell WordPress to include the wps-panel-js.js file
• CSS – This is where we tell WordPress to include the wps-panel-style.css file
• wpsPanel INIT – (function wps_panel_init) This is where we’ll tell WordPress to add a new page in the admin and handle the saving/reset options (but that part will come later on).
• wpsPanel HTML OUTPUT – (function wps_panel_output) This is the function that’ll be used to generate the HTML of our wpsPanel page.

For now only the wpsPanel INIT needs further explanation. As you can see we used a WordPress function named add_menu_page.

add_menu_page()

This is what the WordPress Codex has to say about it:

“Creates a new top level menu section in the admin menu sidebar and registers a hook to callback your function for outputting the page content when the linked menu page is requested.”

add_menu_page($page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position);

As the $function we used “wps_panel_output”, it’s function we’ll use to show the HTML output of the page.

If you want to learn more about add_menu_page() visit the WordPress Codex page for this function.

Uninformed

WordPress doesn’t know about wpsPanel yet so let’s handle that. The way to do it is to simply do a PHP include for the wps-panel.php fie in the theme’s functions.php file.

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

Now go to the WordPress admin, you’ll see another item in the menu, “wpsPanel”, just bellow the “Comments”. Go ahead, click it. A new admin page with no content opens up, perfect, it means everything worked out.

Just to make sure the CSS and JS file are included you can use these snippets:

/* 
    In the wps-panel-js.js 
    Returns an alert dialog with the value of test.
*/
alert('test');

/* 
    In the wps-panel-style.css 
    Just the background will be visible.
*/
body { display:none !important; }

Final Words

That’s it for the first part. We have set up the file&folder structure and created a new page where the theme options are going to be.

If you need further explanation on some parts of the tutorial feel free to ask in the comments and i’ll be happy to help out.

Part Two is coming next Wednesday.

Cheers