| A Site For And By Web Developers



WP Plugin Development – Starting the Class and Adding an Admin

In the last post we setup the plugin and activated it in the admin. In this post we will setup the plugin as a class and create a basic admin menu. The idea of writing the plugin as a class came from the popular how-to series at devlounge. Please check them out for more info as I use their ideas frequently in this post.

The first thing we want to do is make sure that the plugin class doesn’t already exist (the main reason for setting the plugin up as a class is to avoid conflicts.) This is accomplished with a simple IF statement. Then we will setup the basic structure of the class as well as the constructor. Finally we will initialize an instance of the class in the plugin file. Your code should look something like this.

if (!class_exists("elasticFonts"))
	class elasticFonts
		function elasticFonts()
if (class_exists("elasticFonts"))
	$elasticFonts = new elasticFonts();

Of Interest

  • We make sure the class doesn’t exist (line 1)
  • We name the class after our plugin (line 3)
  • Using the class name we create a constructor (line 6)
  • Outside of the class we check that the class exists and create an instance (line 13-16)

We want our plugin to offer flexibility to the user so we will create an admin that allows the user to select three different selections for font sizes. This will allow the user to make the decisions that best suit their particular theme. We will also need somewhere to save the user selections. There are a number of ways to do this, but I will be using the built-in WordPress options. This essentially provides us an easy way to read and write to the db_suffix_options table (usually wp_options.)

An easy place to start is with creating the HTML for the admin form itself. We will place this code in a function of the class so that we can easily access it later. This will be pretty simple as we only need a form, 3 text boxes (with labels) and a submit button. Your function to print the admin page may look something like this.

function printElasticFontsAdmin()
	$adminPage = '<div class="wrap">
                           <form action="' . $_SERVER[" method="post">
                           <h2>' . __("Elastic Fonts Options") . '</h2>
                           <h3>' . __("Fonts Data") . '</h3>
                           <h4>' . __("Minimum Size") . '</h4>
                           <input id="minimumSize" name="minimumSize" type="text" />
                           <h4>' . __("Medium Size") . '</h4>
                           <input id="midSize" name="midSize" type="text" />
                           <h4>' . __("Maximum Size") . '</h4>
                           <input id="maxSize" name="maxSize" type="text" />
                           <div class="submit">
                           <input name="' . __(" type="submit" value="update" /></div>
	echo $adminPage;

Of Note

  • We Use the __() function of WordPress wherever data will be seen on the screen. This is for internationalization and will be covered in a later post.
  • We wrap the admin form in the <div class=”wrap”></div> tags. This allows us to use the wordpress styling.
  • The function is given a meaningful name

The next thing we need to do is create a function outside of the class which will invoke our class menu. Since this plugin will affect the appearance of our blog I have chosen to include the link for the options under the themes menu of the WordPress menu. For more information on wordpress administration panels see WordPress Admin Menus You code may look something like the following.

if (!function_exists("elasticFontsAdmin"))
	function elasticFontsAdmin()
		global $elasticFonts;
		if (!isset($elasticFonts))
		if (function_exists('add_submenu_page'))
			add_submenu_page('themes.php','Elastic Fonts', 'Elastic Fonts', 9, basename(__FILE__), array(&amp;$elasticFonts, 'printElasticFontsAdmin'));

Of Note

  • We check if the function already exists (line 1)
  • A reference to the class is created (line 5)
  • We make sure the class is instantiated (line 6)
  • We verify the admin functions are available and add the submenu (lines 10-13)

Finally, we must add an action to a wordpress hook. This is quite easily done. I will go over actions in more depth in a later post. For now, we simply check that the class exists and if so use WordPress’ add_action to add the action. The code looks something like this.

if (isset($elasticFonts))
	add_action('admin_menu', 'elasticFontsAdmin');

Of Note

  • We are using the admin_menu wordpress hook (line 3)

Now we can upload the code. If all went well and the plugin is activated, we should now see the option in the menu and clicking on it will show our form.

Wordpress Admin Page

Wordpress Admin Page

In the next post we will add some functionality to our admin menu.

· · · ·


  • Artem · January 3, 2010 at 9:23 pm

    Alot of times when I use a class structure for a plugin, I get unknown function errors when I try to call a wordpress function from within a class. Functions like wp_add_dashboard_widget(), so I need to include admin.php and dashboard.php files in the class.

    Is there a way to extend some wordpress class to get access to all the admin functions? Because from Ive seen, you are limited to the things you can do if you use a class.

  • Author comment by johng · January 4, 2010 at 9:30 am

    Hi Artem. You are correct that usually when you want to use some of the wordpress functions you will have to include the files to have access to them. To the best of my knowledge, that is the “standard” way of doing it.

Leave a Reply



Theme Design by