AdminPage Class for Wordpress 3.0

What is it?

Ever wanted to build your own Wordpress Option Pages for your Theme, your Plugin or something else? Then you maybe run crazy with all these parameters, function calls and things to keep in mind. This ist where the AdminPage Class comes in to save the princess. AdminPage Class is no plugin! It's made for theme developers, who want to give their users a cool interface and prevent them from damaging it in any way.

The AdminPage Class gives you a simple yet flexible abstraction of this task. In less than five minutes you can build a whole set of pages containing options of every kind. It handles all the saving and security stuff for you, so you can concentrate on building what you need: The option page.

AdminPage Class doesn't build the page upon it's own styles. It takes the styles Wordpress already has and which you are so comfortable with. This means everything is looking like it would be out-of-the box from Wordpress itself. So you can also use one of these cool alternative AdminCenter Themes with the AdminPage Class.

So in short that means?

What can i do with it?

Sounds pretty nice! How do I use it?

AdminPage Class follows an object-oriented approach so you just need to include the adminpage.class.php into your functions.php and then you are ready to start the game!

So just copy it in your theme's folder and add the following line of code to your functions.php:


	include 'adminpage.class.php';

Now you are good to go!

Before you start!

Here are some things stated before you start:

Build a new Top-Level Menu + first page

To build a new Top-Level Menu and its first page you just build a new TopPage object. As an argument you pass an array containing all the infos the script needs to build the pages.


	$site = new TopPage($args);

Possible values for $args:

Copy&Paste example


	$site = new TopPage(array(
		'menu_title' => 'Settings',
		'page_title' => 'Homepage',
		'menu_slug' => 'theme_settings',
	));

Build a new sub-page

Building a page which fits in one of the menus already there is even simpler than create a complete new one. Just build a new SubPage object. Now we have two arguments: The first one can be a TopPage object or a string representing the Top-Level Menu. The second one can be a string, then it is interpreted as the title for the new page, or an array containing some other options which are optional.


	$other_site = new SubPage($top, $args);

Possible values for $top:

Possible values for $args:

Copy&Paste example


	$other_site = new SubPage($site, 'New Site');

Now it's gonna be hot: Building the options

Building the options now is as simple as you can imagine! Just call the object's functions and you are done. If your page handler is $site it works like this.

addTitle($text), addSubtitle($text), addParagraph($text)

Just call one of these methods to add a Title, a Subtitle or a Paragraph. The arguments passed are just the text displayed on the page.

Possible values for $text:

Any string you want to be viewed

Copy&Paste example


	$site->addTitle('Google');
	$site->addSubtitle('AdSense');
	$site->addParagraph('This is your text');

addInput($args)

Now we are going serious. Our first real option. And it is not hard to make. Just call the method like before with an array passed as shown in the example.

Possible values for $args:

Copy&Paste example


	$site->addInput(array(
		'id' => 'google',
		'label' => 'Google Name',
		'desc' => 'Put your google Name here',
		'standard' => 'This is the standard value',
	));

addTextarea($args)

Textareas are build exactly like inputs. They just have some more arguments in the array.

Possible values for $args:

Copy&Paste example


	$site->addTextarea(array(
		'id' => 'google_ad',
		'label' => 'Google AdSense',
		'desc' => 'Put your google Adsense Code here',
		'standard' => 'This is the standard value',
	));

addEditor($args)

And even the super-cool TinyMCE editor is build that easy.

Possible values for $args:

Copy&Paste example


	$site->addEditor(array(
		'id' => 'welcome_text',
		'label' => 'Your welcome'
	));

addCheckbox($args)

After all the Checkbox has exactly the same arguments, but as standard you pass true for checked or false for unchecked

Possible values for $args:

Copy&Paste example


	$site->addCheckbox(array(
		'id' => 'switch',
		'label' => 'AdSense',
		'desc' => 'Should it be viewed?',
		'standard' => true,
	));

addRadiobuttons($args)

Now this is a bit more complex but just a little bit. Just pass an options array in our normal array. The standard is the value of our option.

Possible values for $args:

Copy&Paste example


	$site->addRadiobuttons(array(
		'id' => 'google',
		'label' => 'Google Name',
		'standard' => 'de',
		'options' => array(
			'google.de' => 'de',
			'google.com' => 'en',
			'google.org' => 'org',
		),
	));

addDropdown($args)

Dropdowns are built exactly the same as radios.

Possible values for $args:

Copy&Paste example


	$site->addDropdown(array(
		'id' => 'google',
		'label' => 'Google Name',
		'desc' => 'My Description',
		'standard' => 'de',
		'options' => array(
			'google.de' => 'de',
			'google.com' => 'en',
			'google.org' => 'org',
		),
	));

addUpload($args)

Ok just added some new shit. This one adds an uploader which can upload any type of data. When you upload an image, it will be shown on the right side and if you set title you will get an extra input for some extra data. If you get this from your database it will be an array containing file for the file in your filesystem, url for the direct url, type for the MIME type and title for your extra field if you added it.

Possible values for $args:

Copy&Paste example


	$site->addUpload(array(
		'id' => 'image',
		'label' => 'Mam',
		'desc' => 'My Mam',
		'title' => 'Mam's name',
	));

addSlider($args)

And now we have some cool UI Elements. This one is a slider. When you set standard as an array a range slider will be build. The other variables are self-explaining.

Possible values for $args:

Copy&Paste example


	$site->addSlider(array(
		'id' => 'money',
		'label' => 'How much money?',
		'standard' => 60,
	));

addDate($args)

This is just what the name sais (as ever :D). It adds a normal input which opens a datepicker if you click it. The standard is a date with the format MM/DD/YYYY. The get_option call returns a UNIX timestamp (the seconds since 1970), which is easy to pass on the date function!

Possible values for $args:

Copy&Paste example


	$site->addDate(array(
		'id' => 'day',
		'label' => 'Which day?',
		'standard' => '08/07/2012',
	));

Ok, but what is this little help button in the top right corner?

Yeah, even that was thought over! You can add this so called "contextual help" in a pretty straightforward way!

addHelp($html)

Just call the addHelp method like you called the other ones, with your site-handler! Pass any HTML wanted as argument! You probably want some paragraphs for structuring your text.

Possible values for $html:

Any HTML you want!

Copy&Paste example


	$site->addHelp('<p>This is my own help!</p><p>This a new paragraph</p>');

That's all?

Uhm yeah! This is everything you will need to build one of these fancy option sites! Ah no, the copy&paste code. Just copy this in your functions.php to see how everything works:


	$options = new TopPage(array(
		'menu_title' => 'Settings',
		'page_title' => 'Homepage',
		'menu_slug' => 'site_options',
	));
	$options->addTitle('Welcome Part');
	$options->addInput(array(
		'id' => 'welcome_phrase',
		'label' => 'Welcome Phrase',
		'standard' => 'Hello out there',
		'size' => 'large',
	));
	$options->addEditor(array(
		'id' => 'welcome_message',
		'label' => 'Welcome Text',
		'standard' => '<strong>Hello out there</strong>',
		'desc' => 'The text on the page top left',
	));

But how do I integrate that with my theme?

Now that all these options have been created we just have to get the values to our theme. Just call the get_option($name) function and echo it in your template. The name passed as parameter is equal to the id you have given to your options!


	echo get_option('google');