In Part 1, I posted my Plugin Plan that Portrayed the Promise of the Program and then in Part 2 I got Technical and Tore into the TabberList Tables! Here in part 3, we finalise our forms and fill them with funky features!

Creating an Options Page

Getting some sexy admin panels going on in WordPress is a piece of cake. First, we need to tell WordPress that we want our own Admin panel and then we need to tell it where to get the info.

So, first thing I do is open up my ‘tabberlist-main.php’ file and I add the following:

if (!function_exists('tabberlist_actions') ) {
	function tabberlist_actions()
	{
		add_options_page("TabberList", "TabberList", 1, "TabberList", "tabberlist_menu");
	}
}

Again, the ‘if (!function_exists…))’ part is all about preventing fatal errors – functions can only be declared once so what this is saying is: “If you’ve seen me before then I’m not the function you’re looking for. You can go about your business. Move along.”

The add_options_page() is a a built in WordPress function that lets it know that we want to have our own admin panel. As you can see, there are five parameters. Here they are in order:

• Page title – The text that will go between the <title> tags (in this case, “TabberList”)
• Menu title – The text that will actually appear in the WordPress admin panel (again, “Tabberlist”)
• Capability – What permissions the user needs to be able to access the panel (0 is subscriber, 10 is admin – I’m happy to let anyone except a subscriber edit this list, so I set it to 1)
• File/handle – If no function is declared, this needs to be the file that handles menu display. Otherwise, it’s just a unique identifier (we’re declaring a function, so this will just be a handle – “TabberList” is fine)
• Function – The function to run when the user clicks on the link in the admin panel (in this case, I’ve called it “tabberlist_menu”)

The sharp amongst you (that’s all of you, right? ) will notice that we now need to declare the “tabberlist_menu” function so that WordPress knows what to do when someone clicks our Options page in the admin panel (not to mention avoiding fatal errors from having non-existent functions).

So let’s declare it:

if (!function_exists('tabberlist_menu')) {
	function tabberlist_menu()
	{
		include 'tabberlist-admin.php';
	}
 }

Nothing really to see here, to be honest. I like to keep things clean and tidy, so I’m going to have my admin form in a separate file. All I need to do here is include that file, which I’ve called ‘tabberlist-admin.php’. Nice.

We’ll look into that file in more detail in just a bit but, before we do, we need to add an action that sets this whole crazy chain of events in motion.

add_action('admin_menu', 'tabberlist_actions');

This simply tells WordPress to execute the ‘tabberlist_actions’ function whenever the ‘admin_menu’ is loaded. That’s it! This is all you need to create your very own options page in the WordPress dashboard. Pretty easy, right? Here’s the code in full:

if (!function_exists('tabberlist_menu')) {
	function tabberlist_menu()
	{
		include 'tabberlist-admin.php';
	}
 }

if (!function_exists('tabberlist_actions') ) {
	function tabberlist_actions()
	{
		add_options_page("TabberList", "TabberList", 1, "TabberList", "tabberlist_menu");
	}
}
add_action('admin_menu', 'tabberlist_actions');

Of course, right now there’s nothing on that options page, which is less exciting. Let’s fix that now.

Creating the Options Form

We open up a new file and save it as ‘tabberlist-admin.php’.

Then we start creating our form. In order for everything to look right, we wrap our form in two divs with a special WordPress class, like so:

<div class="wrap">

</div>

I’m a big fan of consistent styling, so I tend to just borrow the standard WordPress styles and icons and such as much as possible so that my options page fits in nicely with the rest of the WordPress admin pages. I also throw in a brief introduction. Note that the “class=’description’” style is, again, a WordPress class.

<div class="wrap">
	<div id='icon-tools' class='icon32'></div>
	<h2>TabberList Admin</h2>
	<p class='description'>Welcome to TabberList. Select a skin, and start entering makin' some lists!</p>
</div>

For more information on styling your admin pages, check out the excellent summary at OneExtraPixel.com.

The next thing we need to do is open up the <form> tags. All of our form html elements must go in between these tags, or any of the data that users enter won’t get picked up on save.

<div class="wrap">
	<div id='icon-tools' class='icon32'></div>
	<h2>TabberList Admin</h2>
	<p class='description'>Welcome to TabberList. Select a skin, and start entering makin' some lists!</p>
	<form name="form_development" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>" >
			<p class="submit">
				<input type="submit" name="tabberListSave" id="tabberListSave" class='button-primary' value="Save Changes" />
			</p>	

	</form>
</div>

Important things to note:

• The form needs to have a method declared (either ‘post’ or ‘get’)
• The form needs an action, which should point to the script that is going to process it. In this case, we use $_SERVER['REQUEST_URI'] which is a PHP constant that passes the name of the current page (as it’s this page that will have the processing instructions in it -more on that in part 4)
• The <input> tag needs a type (in this case, it’s ’submit’) so the form knows what kind of input field it is
• The <input> tag needs a name so that it can be identified by the processing script
• The <input> tag needs a value, as (in this case) it will be what appears on the button itself. It will also be what is passed to the processing script when the form is submitted.

Again, in a fit of fitting-in, I have used a predefined WordPress class on this button (’button-primary’). This will change the button into the big blue WordPress button that we all know and love.

And there we have it!

OK, so not quite. If you go to this options page now, all you’ll see is simply a title and a Save Changes button. That’s because I’m going to declare a TabberList class to take care of some of our form creation and processing and we’ll do all of that in Part 4.

Remember to subscribe to my RSS feed so that you don’t miss an episode!