Any Questions?

02476 252 345

How to Develop your Plugins Options Page (WP Series Part Five)

How to develop a wordpress options page

It’s always best practice to split your plugin into multiple files, this helps improve the usability of your code. In the last tutorial we created a WordPress Setting Page that echoed out ‘this is my page’. Our aim for this tutorial are listed below.

  • Create a file specifically for our settings page
  • To correctly format our page using WordPress’s built in syntax
  • To add our own custom HTML

Lets start by separating our setting page from our main plugin page. Create a folder inside your plugin called ‘includes’ and then go ahead and create a blank PHP file called options-page.php. We now need to include this file within our mash-general-info.php. Inside of our if statement that currently echo’s out “this is my page”, lets copy and delete the current code and instead replace with a require function that pulls in our new file.

     if(current_user_can('manage_options')):

          require('includes/options-page.php');

     else:

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

     endif;

A good way for you to test whether your new settings page is working or not is to go ahead and paste the echo statement “this is my page” into your news file. Save, upload and head over to the backend of WordPress. If you can still see the welcome text then everything should working fine and you are ready to move onto the next stage.

Formatting Your WordPress Plugin Page

As web designers we need to ensure that the presentation of our plugin to the user is both professional and usable. Our aim is to make our plugin match up with both the style and the general feel of the WordPress backend. Our plugin is an extension of WordPress so therefore it should look like one. Luckily for plugin developers, we can easily replicate the styles and the layouts used throughout WordPress in our plugin by using a third party plugin called “Wordpress Admin Style”. The plugin, developed by bueltge isn’t currently available on the WordPress codex however can be downloaded via Git Hub at the following location https://github.com/bueltge/WordPress-Admin-Style. Simply click Download ZIP down the sidebar, head over to WordPress Upload Plugins and upload the ZIP file to WordPress. Once installed the plugin will showcase all WordPress Admin Styles on one page which will help you develop your plugin WordPress compliant.

Styling Your WordPress Plugin Page

With the plugin now installed you should be able to see the Admin Style menu item from your dashboard. If we start by having a quick look inside the plugin we should have a better idea of how we can implement this into our plugin. As you will be able to see all of the different types of formatting are linked from the top of the plugin, all you need to do is click on the relevant style and you will be taken to the correctly formatted code. Lets go ahead and trial run this code.

Our plugin will require a two column layout, one column will control the form whilst the other column will give the user a little bit of information about the plugin and the author. Lets start by selecting “2 Column Page Layout”, this should take you down to the correct code. Simply copy and paste this into your options-page.php file and then lets take a look at the results. Code below.

<div class="wrap">

	<div id="icon-options-general" class="icon32"></div>
	<h2>Name String</h2>

	<div id="poststuff">

		<div id="post-body" class="metabox-holder columns-2">

			<!-- main content -->
			<div id="post-body-content">

				<div class="meta-box-sortables ui-sortable">

					<div class="postbox">

						<h3><span>Main Content Header</span></h3>
						<div class="inside">
							Content space
						</div> <!-- .inside -->

					</div> <!-- .postbox -->

				</div> <!-- .meta-box-sortables .ui-sortable -->

			</div> <!-- post-body-content -->

			<!-- sidebar -->
			<div id="postbox-container-1" class="postbox-container">

				<div class="meta-box-sortables">

					<div class="postbox">

						<h3><span>Sidebar Content Header</span></h3>
						<div class="inside">
							Content space
						</div> <!-- .inside -->

					</div> <!-- .postbox -->

				</div> <!-- .meta-box-sortables -->

			</div> <!-- #postbox-container-1 .postbox-container -->

		</div> <!-- #post-body .metabox-holder .columns-2 -->

		<br class="clear">
	</div> <!-- #poststuff -->

</div> <!-- .wrap -->

As you can see our two column layout has been achieved with next to no effort what so ever. Lets customise the HTML to match up to our plugin. We will be changing the main heading to Manage Your Website General Information as well as the sub headings to Edit Website Information and About this plugin. If we begin by focussing on the sidebar lets add a little bit of information about the plugin, how developers can use the plugin and a little bit of information regarding the author.

	<h3><span>About this plugin</span></h3>
						<div class="inside">

                            <p>This plugin allows business owners &amp; webmasters to dynamically control how the phone number, email address &amp; street address appear on the frontend of the website.
                         </p>
                     </div> <!-- .inside -->
                       <h3>How to use this plugin</h3>
                     <div class="inside">

                       <p>Developers, simply copy and paste the code associated with each field into your website.</p>     	

						</div> <!-- .inside -->

                      <h3>Author</h3>
                     <div class="inside">

                       <p>This plugin was created by <a href="http://www.mash-webdesign.co.uk" title="Mash Web Design" target="_blank">Mash Web Design</a></p>     	

						</div> <!-- .inside -->

Now the sidebar has been implemented, lets go ahead and format our left column. Before we jump headfirst into the code we have to consider how this plugin is set up to work. We will need to implement the following functionality.

  • A form so the user can update the information
  • Save the data to the database
  • The developer will need to be able to add the code into his template files

Final Stages

For the final stages of this tutorial we will be completing the first of our goals by adding the form and a table to wrap the form. When you are building your own plugin i would definitely recommend returning back to the WordPress Admin Styles plugin to ensure your are using the correct syntax however for the purposes of this tutorial i have added this in for you. Please find the full options-page.php code below. We have simply added a form containing all of our input fields into the left column. Don’t worry to much about this just yet, in the next tutorial we will be looking much more in depth into the code below, and how we can save information added into our form into the WordPress database.

<div class="wrap">
	
	<div id="icon-options-general" class="icon32"></div>
	<h2>Manage Your Websites General Business Information</h2>

	<div id="poststuff">
	
		<div id="post-body" class="metabox-holder columns-2">
		
			<!-- main content -->
			<div id="post-body-content">
				
				<div class="meta-box-sortables ui-sortable">
					
			             <div class="postbox">
					
						<h3><span>Edit Website Information</span></h3>
						<div class="inside">
							
                           <form name="mash_general_options_form" method="post" action="">
                            <table class="form-table">
                            <tr>
                                <td><label for="mash_dynamic_telephone">Telephone</label></td>
                                <td><input name="mash_dynamic_telephone" id="mash_dynamic_telephone" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                              <tr>
                                <td><label for="mash_dynamic_telephone_2">Telephone Two</label></td>
                                <td><input name="mash_dynamic_telephone_2" id="mash_dynamic_telephone_2" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                             <tr>
                                <td><label for="mash_dynamic_address_1">Address Line 1</label></td>
                                <td><input name="mash_dynamic_address_1" id="mash_dynamic_address_1" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                             <tr>
                                <td><label for="mash_dynamic_address_2">Address Line 2</label></td>
                                <td><input name="mash_dynamic_address_2" id="mash_dynamic_address_2" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                             <tr>
                                <td><label for="mash_dynamic_address_3">Address Line 3</label></td>
                                <td><input name="mash_dynamic_address_3" id="mash_dynamic_address_3" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                             <tr>
                                <td><label for="mash_dynamic_address_4">Address Line 4</label></td>
                                <td><input name="mash_dynamic_address_4" id="mash_dynamic_address_4" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                             <tr>
                                <td><label for="mash_dynamic_email">Email Address</label></td>
                                <td><input name="mash_dynamic_email" id="mash_dynamic_email" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                              <tr>
                                <td><label for="mash_dynamic_strapline">Website Strapline</label></td>
                                <td><input name="mash_dynamic_strapline" id="mash_dynamic_strapline" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                              <tr>
                                <td><label for="mash_dynamic_twitter_url">Twitter URL</label></td>
                                <td><input name="mash_dynamic_twitter_url" id="mash_dynamic_twitter_url" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                              <tr>
                                <td><label for="mash_dynamic_facebook_url">Facebook URL</label></td>
                                <td><input name="mash_dynamic_facebook_url" id="mash_dynamic_facebook_url" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                              <tr>
                                <td><label for="mash_dynamic_google_url">Google Plus URL</label></td>
                                <td><input name="mash_dynamic_google_url" id="mash_dynamic_google_url" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                               <tr>
                                <td><label for="mash_dynamic_youtube_url">Youtube URL</label></td>
                                <td><input name="mash_dynamic_youtube_url" id="mash_dynamic_youtube_url" type="text" value="" class="regular-text" /></td>
                                <td><a class="button-secondary mash_dynamic_button" href="javascript:void(0)" title="View Code"><?php _e( 'View Code' ); ?></a> </td>
                            </tr>
                           
                        </table>
                                     <input type="hidden" name="mash_form_submitted" value="Y">  
                                 <p><input class="button-primary" type="submit" name="mash-form_submit" value="<?php _e( 'Save Information' ); ?>" /></p>   
                           </form>          
                        
						</div> <!-- .inside -->
					
					</div> <!-- .postbox -->
					
				</div> <!-- .meta-box-sortables .ui-sortable -->
				
			</div> <!-- post-body-content -->
			
			<!-- sidebar -->
			<div id="postbox-container-1" class="postbox-container">
				
				<div class="meta-box-sortables">
					
					<div class="postbox">
					
						<h3><span>About this plugin</span></h3>
						<div class="inside">
							
                            <p>This plugin allows business owners &amp; webmasters to dynamically manage general information shown on their website.
                         </p>
                     </div> <!-- .inside -->
                       <h3>How to use this plugin</h3>
                     <div class="inside">
                      
                       <p>Developers, simply copy and paste the code associated with each field into your theme files.</p>     	

						</div> <!-- .inside -->
                        
                      <h3>Author</h3>
                     <div class="inside">
                     
                       <p>This plugin was created by <a href="http://www.mash-webdesign.co.uk" title="Mash Web Design" target="_blank">Mash Web Design</a></p>     	

						</div> <!-- .inside -->
						
					</div> <!-- .postbox -->
					
				</div> <!-- .meta-box-sortables -->
				
			</div> <!-- #postbox-container-1 .postbox-container -->
			
		</div> <!-- #post-body .metabox-holder .columns-2 -->
		
		<br class="clear">
	</div> <!-- #poststuff -->
	
</div> <!-- .wrap -->

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