Great plugin! Implemented within minutes and simple for end users to manage.
Client is particularly happy with the reporting features of the plugin.
BFowler for Ad King Pro

WordPress plugin basics: Site details plugin – Part 1

So you now know how to start building a WordPress plugin but now what? You have a few ideas in mind, have a functions.php file that’s well overdue for a clean out and organisation, but none of it is really reusable. Time to tackle a plugin that you’ll use on every project you use.

I thought I would run you though building a site details plugin. I know in almost every WordPress project I build, there is information that either is used in multiple places (header, footer, sidebar and/or contact page) or details that just don’t have a page (like the header or footer) but hard coding these into the template isn’t ideal because the client would like the ability to update this because they were sold on the idea that this CMS system they are getting allows them to modify every part of the site. In comes a site details plugin.

Lets get into it shall we. If you haven’t already, go ahead and create a new plugin folder and file, details on this can be followed on another post. Name this something descriptive and unique. Mine will be called “Details King Pro” and will have the folder and filename of “details-king-pro” and a prefix for almost everything we do of “dkp”.

So now we’re ready for our first piece of code. WordPress stores common options in the database and are retrieved via the function get_option(). However first we need to register our group and add our options. This will provide us with the ability to add a link in the WordPress menu to access our fields for updating.

Here is where we can define the fields we require. Just for tutorial sake, I’ll be having a Facebook, Twitter, Google+, LinkedIn, address and phone number fields. Lets get into some code – add the following into your main plugin file:

function register_dkp_options() {

 register_setting( 'dkp-options', 'dkp_address' );
 register_setting( 'dkp-options', 'dkp_phone' );
 register_setting( 'dkp-options', 'dkp_facebook' );
 register_setting( 'dkp-options', 'dkp_twitter' );
 register_setting( 'dkp-options', 'dkp_googleplus' );
 register_setting( 'dkp-options', 'dkp_linkedin' );

 add_option( 'dkp_address', '' );
 add_option( 'dkp_phone', '' );
 add_option( 'dkp_facebook', '' );
 add_option( 'dkp_twitter', '' );
 add_option( 'dkp_googleplus', '' );
 add_option( 'dkp_linkedin', '' );
 add_action( 'admin_init', 'register_dkp_options' );
 function add_dkp_page() {
 add_options_page('Details King Pro', 'Details King Pro', 'manage_options', 'details-king-pro', 'dkp_options_page');
 add_action('admin_menu', 'add_dkp_page');
 function dkp_options_page() {
 include 'settings_page.php';

Now for a bit of explanation. The first function, register_dkp_options(), and its contents is all about initialising the fields your wanting to create. The register_setting function notifys the WordPress system that these variables exist and that they will be expected to be saved with a settings form, which we will cover soon. The add_option function then adds that field into the database with a default value (if you wish). As you can see, I have left all mine blank. Finally, we run that function using the WordPress function and hook, add_action and admin_init.

Now WordPress knows of the fields and has default values for them, we now need to create a page to modify them easily. The function add_dkp_page() houses the WordPress function add_options_page which allows us to create a page under the settings section of the admin menu. The variables of this function are page title, menu title, allowed capability, menu slug and the function that will display the page. As you can see, I am calling the next function on the page, dkp_options_page. To avoid having a messy plugin file having HTML through it, I have split this code into another file and am including it into this script.

So create another PHP file under the plugin folder called settings_page.php and place the following code inside it:

 <?php screen_icon(); ?>
 <h2>Details King Pro</h2>
 <form method="post" action="options.php">
 <?php settings_fields('dkp-options'); ?>
 <label>Address</label><input type="text" name="dkp_address" value="<?= get_option('dkp_address') ?>" /><br />
 <label>Phone</label><input type="text" name="dkp_phone" value="<?= get_option('dkp_phone') ?>" /><br />
 <label>Facebook</label><input type="text" name="dkp_facebook" value="<?= get_option('dkp_facebook') ?>" /><br />
 <label>Twitter</label><input type="text" name="dkp_twitter" value="<?= get_option('dkp_twitter') ?>" /><br />
 <label>Google +</label><input type="text" name="dkp_googleplus" value="<?= get_option('dkp_googleplus') ?>" /><br />
 <label>LinkedIn</label><input type="text" name="dkp_linkedin" value="<?= get_option('dkp_linkedin') ?>" /><br />
 <?php submit_button(); ?>

Some more explanation. The wrap class has a few default admin styling attached to it like headings and other formatting goodness. The screen_icon function displays the icon for the section your displaying the page on, in this case, the settings icon. Opening the form tag with the action of options.php allows our form to be controlled and saved by WordPress’ default settings functionality (which is where registering the setting becomes useful). Along with this the settings_fields function outputs some important hidden fields required for it to work. After this, is somewhat up to you how you display your fields. I have just done the basics here to give you an idea. If you were to release this as a plugin for others to use, it would be suggested to ‘pretty’ it up a little. Outputting your fields is like any other HTML form, the name being the option name and using the get_option function in the value for future editing of the settings. Finally using the submit_button function simply outputs a submit button for the form with the required name and ID it needs for the form.

Save this and visit your admin area. If setup correctly, you should now have a new link under the Settings tab with the name of your plugin. Upon clicking this, your form that we just created should display. Filling out the form and clicking “Save Changes” should save your form and return you to your form all filled out.

Now to use your newly saved fields on the frontend of your site, all you use is the get_option function calling the field you require. You could take this a step further and have these load into a function that you call which would give you all your fields at once, something similar to:

function dkp_return_fields() {
 $output = array();
 $output['dkp_address'] = (get_option( 'dkp_address' ) ? get_option( 'dkp_address' ) : '');
 $output['dkp_phone'] = (get_option( 'dkp_phone' ) ? get_option( 'dkp_phone' ) : '');
 $output['dkp_facebook'] = (get_option( 'dkp_facebook' ) ? get_option( 'dkp_facebook' ) : '');
 $output['dkp_twitter'] = (get_option( 'dkp_twitter' ) ? get_option( 'dkp_twitter' ) : '');
 $output['dkp_googleplus'] = (get_option( 'dkp_googleplus' ) ? get_option( 'dkp_googleplus' ) : '');
 $output['dkp_linkedin'] = (get_option( 'dkp_linkedin' ) ? get_option( 'dkp_linkedin' ) : '');
 return $output;

This is using the shorthand ‘if’ statement to determine if the field is blank or not. If it is you can set a default. If you would like the user to be able to make a field blank on purpose, and still assign a default to the field, you will have to rely on the default value when originally creating the value, then in your return fields, you would replace the if statement with just the get_option function.

Congratulations, you have just created your own details plugin. Granted this is very particular to your own use and with the fields hardcoded means that its versatility is lacking. Time to change that and read through Part 2 – making dynamic fields as you need them.

Leave a Reply

Your email address will not be published. Required fields are marked *