How to Develop a new WordPress plugin

This post assumes you have read our WordPress Plugin Considerations post.

This post will guide you how to develop a new WordPress plugin, starting with the menu section.
Eventually the plugin will list Videos from Kaltura CE edition.
Remember: Hook names and parameters must be exactly as written bellow.

WordPress Configuration Menu

Configuration menu allows you to control plugin specific settings, functionality and options although it is not required by WordPress.
Here at Panda OS we always write configuration menus to support code reuse and enhance the functionality of our plugins.

Creating the menu:

  1. Create a new directory under /wordpress/wp-content/plugins/ and give it a name.
    *Mine will be Panda Video.
  2. Create a new php file in your plugin directory.
    This file will serve as the “main” file for our plugin where we will register our plugin and configure all the options that we’ll need for it.
  3. Register the plugin by inserting this code in the plugin main file, WordPress will automatically register it from the comments.
    /** Plugin Name: Panda-OS New plugin
    Plugin URI: <small>A link to a text which contains information on the plugin.</small>
    Description: Listing Videos from Kaltura CE
    Version: 1.0
    Author: Panda OS
    Author URI: https://www.panda-os.com
    License: <small>Your license agreement</small> **/ 
  4. Create a hook for our plugin global administration configuration.
    “admin_menu” – Display the configuration under the “Settings” in the admin panel.
    “admin_init” – Initialize page with all the new DB parameters.

    public function __construct() {
        if ( is_admin() ){ // admin actions
            add_action( 'admin_menu', 'panda_video_menu' );
            add_action( 'admin_init', 'page_init' );
        } else {
            // non-admin - enqueues, actions, and filters
        }
    }
    
  5. Add the options page.
    Usage: add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);

    public function panda_video_menu() {
        add_options_page( 'PandaOS plugin Options', 'PandaOS Video', 'manage_options', 'pandaos_video', 'panda_video_options_page');
    }
  6. Initialize the new configuration page.
    *Use the name you have used in the action hook “admin_init”.

    public function 'page_init'()
  7. Register all the settings we need in our plugin using the “register_setting” function inside the “page_init” function.
    Repeat this step for every settings parameter that you’ll need in your plugin.
    Usage: register_setting( $option_group, $option_name, $sanitize_callback );

    register_setting( 'videoConf', 'serviceUrl');
    register_setting( 'videoConf', 'email');
  8. Create a settings section for the settings above.
    Usage: add_settings_section( $id, $title, $callback, $page )

    add_settings_section( 'global_section', 'Setting', "Enter your settings below", 'pandaos_video' );
  9. Add a menu field for each setting we registered (step 7), so we can edit and view it.
    Usage: add_settings_field( $id, $title, $callback, $page, $section, $args );

    add_settings_field( 'serviceUrl', 'Service URL', 'serviceUrl_field', 'pandaos_video', 'global_section' );
    add_settings_field( 'email', 'Email', 'email_field', 'pandaos_video', 'global_section' );
  10. Create a callback to view the fields.
    Repeat for every field you have made.

    public function serviceUrl_field()
    {
        <input type="text" id="KalturaUrl" name="serviceUrl" width="350px" value="<?php echo get_option('serviceUrl',null);" ?> />
    }
    
    public function email_field(){ //TODO: add email logic here 
    <div></div>
    }
    
  11. Create the HTML which will generate the settings page.
    *The below code is very simple and will only list the settings field one by one.

    public function(){
      if ( !current_user_can( 'manage_options' ) ) {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
      }
            ?>
            <div class="wrap">
                <?php screen_icon('plugins'); ?> <h2>PandaOS Video Options</h2>
                <form method="post" action="options.php">
                    <?php settings_fields( self::VIDEO_CONF); ?>
                    <?php do_settings_fields( self::VIDEO_CONF, self::PANDAOS_CONF_GROUP_NAME ); ?>
                    <?php do_settings_sections(self::PANDAOS_CONF_GROUP_NAME); ?>
    
                    <?php submit_button(); ?>
                </form>
            </div>
        }
    }

Configuration Menu

Congratulations,

you should have a working configuration menu for your plugin!
Let us know if you have any doubts or issues.

5 thoughts on “How to Develop a new WordPress plugin

  1. My developer is trying to persuade me to move to .net from PHP.

    I have always disliked the idea because of the costs. But he’s tryiong none the less.
    I’ve been using Movable-type on various websites for about a year and am concerned
    about switching to another platform. I have heard good things about blogengine.net.
    Is there a way I can transfer all my wordpress
    content into it? Any help would be really appreciated!

  2. There is a way to transfer your blogs and other content from WordPress to blogengine.net.
    Really, I don’t understand this move as WordPress has more features then blogengine.net.
    In addition, WordPress rocks and still have good Admin UI to manage it.

    If you can share with me the idea behind it I’ll give you my thought about it.
    If you still want to make the migration I can assist you in this also.

  3. Pingback: Loading AngularJS with Wordpress

Leave a Reply

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