CodeSamplez.com

Programming, Web development, Cloud Technologies

  • Facebook
  • Google+
  • RSS
  • Twitter
  • 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
Home Development Develop A Simple Wordpress Plugin Admin Panel

Develop A Simple WordPress Plugin Admin Panel

Rana Ahsan March 5, 2013 6 Comments


 Develop A Simple WordPress Plugin Admin Panel    

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 🙂

Related

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

About Rana Ahsan

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

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.

Email Subscription

Never miss any programming tutorial again.

Popular Tutorials

  • How To Work With JSON In Node.js / JavaScript
  • PHP HTML5 Video Streaming Tutorial
  • Generate HTTP Requests using c#
  • How To Work With C# Serial Port Communication
  • Facebook C# API Tutorials
  • How To Work With CodeIgniter Pagination
  • LinQ To SQL Database Update Operations In C#
  • Utilizing Config File In C#.NET Application
  • Get Facebook C# Api Access Token
  • How To Work With Multithreaded Programming In C#.NET Application

Recent Tutorials

  • Building Auth With JWT – Part 1
  • Document Your REST API Like A Pro
  • Understanding Golang Error Handling
  • Web Application Case Studies You Must Read
  • Getting Started With Golang Unit Testing
  • Getting Started With Big Data Analytics Pipeline
  • NodeJS Tips And Tricks For Beginners
  • Apple Push Notification Backend In NodeJS
  • Web Based Universal Language Translator, Voice/Text Messaging App
  • How To Dockerize A Multi-Container App From Scratch

Recent Comments

  • intolap on PHP HTML5 Video Streaming Tutorial
  • manishpanchal on PHP HTML5 Video Streaming Tutorial
  • Rana Ghosh on PHP HTML5 Video Streaming Tutorial
  • ld13 on Pipe Email To PHP And Parse Content
  • Daniel on PHP HTML5 Video Streaming Tutorial

Archives

Resources

  • CodeSamplez.com Demo

Tags

.net apache api audio aws c# cache cloud server codeigniter deployment doctrine facebook git github golang htaccess html5 http image java javascript linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty ssh tfs thread tips ubuntu unit-test utility web application wordpress wpf

Copyright © 2010 - 2021 · CodeSamplez.com ·

Copyright © 2021 · Streamline Pro Theme on Genesis Framework · WordPress · Log in