Building A Theme Options Panel – Part Two

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 Tabs System (HTML, CSS & jQuery)
3. Fields (HTML & CSS)

Introduction

Welcome to the second part of the series.

The process of making a theme options panel is similar to developing a WordPress theme. First you create the HTML template and then you convert it into a WordPress theme. So, in this part we’ll make the HTML template for our WordPress theme options panel.

The Tabs System (HTML, CSS & jQuery)

Ok i forgot to mention, we’re making a theme options panel in which sections will be separated with tabs. The tabs navigation will be vertical, it’s the most popular theme options panel structure at the moment.

HTML

Of course, first the HTML. Everything is pretty much clear i think, it’s a regular structure for tabs.

<div id="wps-panel">
	
	<div id="wps-panel-sidebar">
		
		<ul>
			<li><a href="#wps-panel-section-general">General</a></li>
			<li><a href="#wps-panel-section-appearance">Appearance</a></li>
			<li><a href="#wps-panel-section-social">Social</a></li>
			<li><a href="#wps-panel-section-misc">Miscellaneous</a></li>
		</ul>
		
	</div><!-- #wps-panel-sidebar -->
	
	<div id="wps-panel-content">
		
		<div class="wps-panel-section" id="wps-panel-section-general">
			
			Section 1
			
		</div><!-- #wps-panel-section-general -->
		
		<div class="wps-panel-section" id="wps-panel-section-appearance">
			
			Section 2
			
		</div><!-- #wps-panel-section-appearance -->
		
		<div class="wps-panel-section" id="wps-panel-section-social">
			
			Section 3
			
		</div><!-- #wps-panel-section-social -->
		
		<div class="wps-panel-section" id="wps-panel-section-misc">
			
			Section 4
			
		</div><!-- #wps-panel-section-misc -->
		
	</div><!-- #wps-panel-content -->
	
</div><!-- #wps_panel -->

CSS

Time to make it look a bit better. I won’t explain what’s what, you should already know that, and anyway you’ll probably style it the way you want it.

The only thing worth mentioning is the last two lines, as you can see all the .wps-panel-section elements will be hidden by default and the one that has the .wps-panel-active class will be shown. We’ll add that “active” class using jQuery.

/* ---------------------------------------------------------- 
                    Layout Styling
------------------------------------------------------------*/
#wps-panel { margin-top:30px; margin-right:20px; }
	
	#wps-panel-sidebar { float:left; width:150px; }
		#wps-panel-sidebar ul, #wps-panel-sidebar li { list-style-type:none; margin:0; padding:0; }
		#wps-panel-sidebar ul { background:#666; border:1px solid #555; border-bottom:0; }
			#wps-panel-sidebar a { display:block; font-size:11px; padding:8px 10px; border-bottom:1px solid #555; text-decoration:none; color:#fff; text-shadow:1px 0 0 #222; font-weight:bold; }
			#wps-panel-sidebar a:hover { background:#555; color:#fff; }
			#wps-panel-sidebar a.wps-panel-active { background:#555; color:#fff; }
	
	#wps-panel-content { overflow:hidden; padding:10px; border-top:2px solid #555; background:#f7f7f7; }
		#wps-panel-content, #wps-panel-content p { font-size:11px; color:#666; }
		
		.wps-panel-section { display:none; }
		.wps-panel-section.wps-panel-active { display:block; }

jQuery

There are only two things we need to use jQuery for at the moment:

• Assign .wps-panel-active class to the first section link and the first section content
• Handle the section change when a section link is clicked

jQuery(document).ready(function($){
	
	/* Assign .wps-panel-active class to the first section link and the first section content */
	$('#wps-panel-sidebar a:first').addClass('wps-panel-active');
	$('#wps-panel-content .wps-panel-section:first').addClass('wps-panel-active');
	
	/* Handle the section change when a section link is clicked */
	$('#wps-panel-sidebar a').click(function(e){
		
		/* Prevent default behaviour */
		e.preventDefault();
		
		/* Get the section id */
		var section_id = $(this).attr('href');
		
		/* Remove .wps-panel-active class from the previous section link and add it to the new one */
		$('#wps-panel-sidebar .wps-panel-active').removeClass('wps-panel-active');
		$(this).addClass('wps-panel-active');
		
		/* Add .wps-panel-active class to the new section content and remove it from the previous one */
		$('#wps-panel-content .wps-panel-section' + section_id).addClass('wps-panel-active').siblings('.wps-panel-active').removeClass('wps-panel-active');
		
	});
	
});

Fields (HTML & CSS)

It’s time to make the HTML for the main fields: input(text), textarea, select, radio and checkbox. And this is how it looks like.

HTML

Bellow is the HTML for those fields. As you can see every field section is wrapped using a div with class wps-panel-field, contains a label for the title a div with class wps-panel-description for the field description and bellow it the related form field.

IMPORTANT: All this goes in the first section instead of the “Section 1″ text.

<!-- Input(text) field -->
<div class="wps-panel-field">
	
	<label>Textual Input Field</label>
	<div class="wps-panel-description">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div><!-- .wps-panel-description -->
	<input type="text" />
	
</div><!-- .wps-panel-field -->

<!-- Textarea field -->
<div class="wps-panel-field">
	
	<label>Textarea Field</label>
	<div class="wps-panel-description">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div><!-- .wps-panel-description -->
	<textarea></textarea>
	
</div><!-- .wps-panel-field -->

<!-- Select field -->
<div class="wps-panel-field">
	
	<label>Select Field</label>
	<div class="wps-panel-description">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div><!-- .wps-panel-description -->
	<select>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
		<option>Option 5</option>
	</select>
	
</div><!-- .wps-panel-field -->

<!-- Radio field -->
<div class="wps-panel-field">
	
	<label>Radio Field</label>
	<div class="wps-panel-description">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div><!-- .wps-panel-description -->
	<p><input type="radio" name="radio_field" /> Option 1</p>
	<p><input type="radio" name="radio_field" /> Option 2</p>
	<p><input type="radio" name="radio_field" /> Option 3</p>
	<p><input type="radio" name="radio_field" /> Option 4</p>
	
</div><!-- .wps-panel-field -->

<!-- Checkbox field -->
<div class="wps-panel-field">
	
	<label>Checkbox Field</label>
	<div class="wps-panel-description">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</div><!-- .wps-panel-description -->
	<p><input type="checkbox" name="checkbox_field[]" /> Checkbox 1</p>
	<p><input type="checkbox" name="checkbox_field[]" /> Checkbox 2</p>
	<p><input type="checkbox" name="checkbox_field[]" /> Checkbox 3</p>
	<p><input type="checkbox" name="checkbox_field[]" /> Checkbox 4</p>
	
</div><!-- .wps-panel-field -->

CSS

Here is some simple styling to make it look nicer then what it looks with the default style. Again, nothing special, you’ll style it the way you want it.

/* ---------------------------------------------------------- 
                     Fields Styling 
------------------------------------------------------------*/
#wps-panel-content .wps-panel-field { margin-bottom:15px; padding-bottom:15px; border-bottom:1px dashed #eee; }
	#wps-panel-content label { font-weight:bold; color:#444; font-size:12px; margin-bottom:5px; text-shadow:1px 0 0 #fff; }
	#wps-panel-content .wps-panel-description { font-style:italic; font-family:"Georgia"; margin-bottom:5px; color:#777; text-shadow:1px 0 0 #fff; }
		#wps-panel-content input[type=text], #wps-panel-content textarea, #wps-panel-content option, #wps-panel-select { border:1px solid #ddd; color:#666; font-size:11px; background:#fff; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0;  }
		#wps-panel-content input[type=text], #wps-panel-content textarea { padding:5px; }
		#wps-panel-content input[type=text] { width:270px; }
		#wps-panel-content textarea { width:350px; height:100px; }

Final Words

We’re done with the HTML template of our theme options and with that we’re done with the second part of the series.

In the third part (coming on next Wednesday) we’ll be working mostly with PHP, and at the end that third part we’ll have a working theme options panel.

You can download 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

Cheers