• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Featured
    • C# Tutorials
      • LinQ Tutorials
      • Facebook C# API Tutorials
    • PHP Tutorials
      • CodeIgniter Tutorials
    • Amazon AWS Tutorials
  • Categories
    • Programming
    • Development
    • Database
    • Web Server
    • Source Control
    • Management
    • Project
  • About
  • Write
  • Contact

CodeSamplez.com

Programming, Web development, Cloud Technologies

You are here: Home / Development / Develop A Simple Wordpress Plugin Admin Panel

Develop A Simple WordPress Plugin Admin Panel

March 5, 2013 by Rana Ahsan 6 Comments

Wordpress Plugin Development

In this tutorial, we will explore how we to develop a simple WordPress plugin admin panel. This tutorial is not for complete beginners and I do assume/strongly recommend that, you already have gained some knowledge about how to create a simple WordPress plugin. I have recently created very simple settings page for my own like fb WordPress plugin and I will share that experience here.

Set Up Admin Menu:

First thing to develop the administration area is to give the user menu option to navigate to the settings page. For this, we will have to add few codes on our main plugin php page, which is usually in {plugin-name}.php format. Lets see the code example for this:

add_action( 'admin_menu', 'like_fb_menu' );

function like_fb_menu() {
	add_options_page( 'Like FB Plugin Options', 'Like FB', 'manage_options', 'like-fb-option', 'like_fb_plugin_options' );
}

function like_fb_plugin_options() {
	if ( !current_user_can( 'manage_options' ) )  {
		wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
	}
	include __DIR__."/options.php";
} 

as you can see above, we first added an action for admin menu creation event. in the handler, we added our plugin option details with add_options_page method. and in the target method specified here do the real task of checking current user’s permission and show the option page. We have separated the settings page into a different options.php file.

well, as we have completed this phase, we should now be able to navigate to the settings page(which is blank at this moment). I will on admin area’s ‘Settings’->’Like FB’ menu option.

Create Settings Template For WordPress Plugin Admin Panel:

Lets move ahead to create the settings template. As we are creating a plugin of WordPress CMS, we will want to keep its look and feel in our implementation as well. So, let us use a small code snippet for settings page template with WordPress standard:

<div class="wrap">
<?php screen_icon(); ?>
<h2>Welcome To Like FB Plugin Administration Page</h2>
</div>

Now if you have a look in the administration area, you should be able to see a nice screen icon of WordPress and header text at the top of the screen as like below:

Basic WordPress Plugin Admin Panel

Lets now create the settings option form. Here I am using two simple check box option, you can change it with your own settings controls.

<fieldset>
    <legend>General Settings</legend>
    <form method="post" action=""> 
        <input type="checkbox" name="like_fb_show" checked='checked' /> &nbsp; <span> Show Facebook Like Button </span>
        <br /><br />
        <input type="checkbox" name="like_gplus_show"  /> &nbsp; <span> Show Google+ Button </span>
        <p><input type="submit" value="Save" class="button button-primary" name="submit" /></p>
    </form>
</fieldset>

We have kept the form action to an empty string, so that, after submission, it post the data to same page/URI. The name of the controls should be very unique, so that they doesn’t conflict with others. Also, we have added CSS class to submit button, which will help it render in WordPress look and feel way.

Process Posted Data And Database Integration:

Now, we will have to add code to process the posted data and save them in WordPress database. They are few different way to work with WordPress database. Such as:

  • WordPress Post Meta Data: There is a table in WordPress database which contains post specific settings and we can add options there with wordpress’s given API function. It uses the ‘wp_postmeta’ table.
  • WordPress Option Data: The settings which aren’t post specific and are global to the application, we can use these options to save/retrieve our plugins data as well.
  • Create Separate Database Table: If you are creating a heavy weight WordPress plugin which may require a different table structure, we will need to create separate db table in WordPress database to manipulate the plugins data there.

For this tutorial, we will simply use the wordpress options table (‘wp_options’) to retrieve and save our options. Add the following code snippet at the top of the options page.

$fb_opt_name = "like_fb_show";
$gp_opt_name = "like_gplus_show";

if(isset($_POST["submit"])){ 
    $fb_show = $_POST[$fb_opt_name];
    update_option($fb_opt_name, $fb_show);
    $gplus_show = $_POST[$gp_opt_name];
    update_option($gp_opt_name, $gplus_show);
    
    echo '<div id="message" class="updated fade"><p>Options Updates</p></div>';
}
else{
    $fb_show = get_option($fb_opt_name);
    $gplus_show = get_option($gp_opt_name);
}

Initially, there will be no options in the database table for our plugin. In that case, ‘update_option’ will automatically call the ‘add_option’ method to insert them. From then on, each time, it will only update the existing options. So, we don’t need to use the ‘add_option’ method ourselves at all. We have added class to the shown message block as well to give the wordpress look and feel.

You will also notice that, in case of data not posted, we have added code to retrieve the options instead, so, now it need to be added to our existing template. So, as a complete functional page, our options.php page should be something like as follows:

<?php
$fb_opt_name = "like_fb_show";
$gp_opt_name = "like_gplus_show";

if(isset($_POST["submit"])){ 
    $fb_show = $_POST[$fb_opt_name];
    update_option($fb_opt_name, $fb_show);
    $gplus_show = $_POST[$gp_opt_name];
    update_option($gp_opt_name, $gplus_show);
    
    echo '<div id="message" class="updated fade"><p>Options Updates</p></div>';
}
else{
    $fb_show = get_option($fb_opt_name);
    $gplus_show = get_option($gp_opt_name);
}
?>
<div class="wrap">
<?php screen_icon(); ?>
<h2>Welcome To Like FB Plugin Administration Page</h2>
<br />
<br />
<div class="like-fb-left">
    <fieldset>
            <legend>General Settings</legend>
        <form method="post" action=""> 
            <input type="checkbox" name="<?php echo $fb_opt_name; ?>" <?php echo $fb_show?"checked='checked'":""; ?> /> &nbsp; <span> Show Facebook Like Button </span>
            <br /><br />
            <input type="checkbox" name="<?php echo $gp_opt_name; ?>" <?php echo $gplus_show?"checked='checked'":""; ?> /> &nbsp; <span> Show Google+ Button </span>
            <p><input type="submit" value="Save" class="button button-primary" name="submit" /></p>
        </form>
    </fieldset>        
</div>

Further References:

Hope this simple guide to wordpress plugin admin panel development will help you enhance your plugin development skill to a higher level. For more in-depth references, you can follow the links below.

  • Worpdress Plugin Developers Blog
  • WordPress Codex

Feel free to ask any questions here by commenting. Happy coding 🙂

Share If Liked

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

You may also like

Filed Under: Development Tagged With: php, plugin, wordpress

About Rana Ahsan

Rana is a passionate software engineer/Technology Enthusiast.
Github: ranacseruet

Reader Interactions

Comments

  1. Abdul Awal says

    July 4, 2014 at 2:09 pm

    Thanks for this awesome post.
    By the way, Do you know any way to keep checkbox checked by default ?

    Thanks

    Reply
    • Md Ali Ahsan Rana says

      July 4, 2014 at 5:27 pm

      “checked=’checked'” should do the work, right?

      Reply
  2. Ayesha says

    September 13, 2014 at 4:34 am

    This is good tutorial, I got an Idea now…………. thanks

    Reply
  3. Ryadi says

    December 11, 2014 at 10:28 am

    Very clear and good tutorial. I wonder, how to use separated tables rather than using WordPress tables.

    Reply
  4. Niraja says

    August 4, 2015 at 12:30 am

    how to store data from fronted site to backend site ..and also show the data in wp-admin …whatever you post in frintedsite …..could you please help me…

    Reply
  5. mosley says

    October 29, 2015 at 8:58 pm

    Is there a way to do this with a seperate database table – one that is not in the WordPress database?

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Follow Us

  • Twitter
  • Facebook

Top Posts & Pages

  • How To Work With JSON In Node.js / JavaScript
    How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
    PHP HTML5 Video Streaming Tutorial
  • How To Work With C# Serial Port Communication
    How To Work With C# Serial Port Communication
  • Facebook C# API Tutorials
    Facebook C# API Tutorials
  • Using Supervisord Web Interface And Plugin
    Using Supervisord Web Interface And Plugin
  • LinQ Query With Like Operator
    LinQ Query With Like Operator
  • Get Facebook C# Api Access Token
    Get Facebook C# Api Access Token
  • Getting Started With UDP Programming in Java
    Getting Started With UDP Programming in Java
  • How To Use Hotkeys/Keyboard Events In WPF Application Using C#
    How To Use Hotkeys/Keyboard Events In WPF Application Using C#
  • Control HTML5 Audio With Jquery
    Control HTML5 Audio With Jquery

Recent Posts

  • Building Auth With JWT – Part 2
  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read

Tags

.net angularjs apache api audio auth authenticatin aws c# cloud server codeigniter deployment docker doctrine facebook git github golang htaccess html5 http javascript jwt linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty socket.io tfs tips unit-test utility web application wordpress wpf

Footer

Archives

Follow Us

  • Twitter
  • Facebook

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 3,774 other subscribers

Copyright © 2023