Any Questions?

02476 252 345

Creating a WordPress Options Page (WP Series Part Four)

Create A Wordpress Options Page

At the end of Part Two of our WordPress series we had created our basic plugin, the plugin information was correctly showing under “Manage Plugins” and we were ready to begin adding our plugin functionality.

As discussed in Part One, our aim for this series is to create an easy to manage information area in the backend of WordPress where clients can dynamically alter the telephone numbers, email addresses and street address shown on the front end of the website. In order for the client to manage these different options we will need to create a page within the backend of WordPress. In this tutorial I will be teaching you that correct way to set up your plugins page.

Adding a Menu Item To WordPress Admin

Firstly before we begin, lets reopen our main plugin file, mash_general_info.php and familiarise ourselves with the code. We currently have the basic comments that tell WordPress about our plugin much like the comments found at the top of a themes stylesheet.

We will be adding our menu item under the settings tab in the backend of WordPress. As plugin developers you are not limited to only this menu position however this is a logical location for our plugin to be accessed.

To create our menu item, lets begin by adding a mash_general_info function that we will be able to call later on.

 function mash_general_info(){

 }

WordPress has a whole variety of different functions available to plugin developers, we will be using the WordPress function add_options_page to create our menu item. add_options_page takes five different parameters.

  • The title of the page
  • The menu title
  • The capability, so who has access to view the page
  • The slug
  • The function that will control the content displayed on the page

Before our menu items created we have to ensure that we do not forget to create an action to ensure our code is runs when the menu is loaded by WordPress. We will use the add_action function to do this and specify the first parameter as admin_menu (Where we hook onto), and the second parameter as our function (What function to run).

For more information on hooks, actions and filters please take a second to review my previous tutorial “What Are WordPress Hooks“.

Lets go ahead and add the code to our plugin.

      function mash_general_info(){

 	  /* add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function); */

		add_options_page(
			'General Business Information',
			'Manage Information',
			'manage_options',
			'mash-general-info',
			'mash_general_info_options'
		);

      }

     add_action('admin_menu', 'mash_general_info');

With this code in place our menu item should now be added and viewable under settings. However once clicked should simply show a blank page. This is because we are yet to tell WordPress what we would like to show on our page. If you remember correctly, the last parameter of add_options_page calls the function that will control what is displayed on the page. Go ahead a create the function now.

     function mash_general_info_options(){

     }

All we aim to do in this tutorial is simply display a basic message that has a heading of “General Information” and simply informs the user that “This is my page”. You could simply add an echo to do this, however it would be much more secure to run some simple checks to see whether the current user accessing the page has the permissions to be able manage the options and see the page. To do this we will add a very simple if statement that checks the users access and if they are able to view the page we will display our content. However if our checks return as false we will kill the page and display a message stating “Please contact site Admin, you do not have the correct access.” Lets go ahead and add the code below to our plugins page.

     function mash_general_info_options(){

	 	if(current_user_can('manage_options')):

			echo '<h1>General Information</h1>
			      <p>This is my page</p>';

		else:

			wp_die('Please contact site Admin, you do not have the correct access.');

		endif;

     }

If you now reload your WordPress backend you should see our link and once clicked you should be able to see our message. Congratulations you have now added your first plugin page.

If something has gone wrong, please ensure your plugin code is exactly the same as below.

<?php

/**
     * Plugin Name: Mash General Website Information
     * Plugin URI: http://www.mash-webdesign.co.uk
     * Description: A plugin that allows clients to dynamically control business information.
     * Version: 1.0
     * Author: Adam Collins
     * Author URI: http://www.mash-webdesign.co.uk
     * License: GPL2
*/

 function mash_general_info(){

 	/* add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function); */

		add_options_page(
			'General Business Information',
			'Manage Information',
			'manage_options',
			'mash-general-info',
			'mash_general_info_options'
		);

    }

    add_action('admin_menu', 'mash_general_info'); 

     function mash_general_info_options(){

	 	if(current_user_can('manage_options')):

			echo '<h1>General Information</h1>
			      <p>This is my page</p>';

		else:

			wp_die('Please contact site Admin, you do not have the correct access.');

		endif;

     }

 ?>

Written by:

Creative Director - info@mash-webdesign.co.uk - 07541987924 - DOB: 02/1993/27

With over five years commercial experience in the web industry, Adam specialises in all things web related. Adam has a passion for CRO, ensuring that the websites he creates don't just look great but also make his clients money.

Mash Web Design