WP Plugin Development QuickStart Pack

Welcome to all in WP plugin development tune.  Though today not develop any plugin but we are learn “What is must need to make a wp plugin”. We are ready today a plugin quickstart pack, by which using can develop every plugin next time.  In this tune get, which information need to make a plugin? How to use internal/external CSS/JS use in a plugin etc.

First step: To develop every wp plugin must need some plugin information, like plugin name, plugin url, author, tag, description etc. This information need to write HTML comment like: /* Here will be plugin information*/

<?php
/*
Plugin Name: Your plugin Name
Plugin URI: http://example.com/pluginsurl
Description: Given your plugin description here.
Author: Author Name
Version: 1.0
Author URI: http://example.com/
Tags:
*/
//here write all plugin function
?>

Step two: In this step every plugin need to be a function for wp latest jquery. Here jeba_wp_latest_jquery is function name, you can use any name but same name need to be use in add_action. Note: One function name can be use in only one name otherwise it show error.

function jeba_wp_latest_jquery() {
wp_enqueue_script('jquery');
}
add_action('init', 'jeba_wp_latest_jquery');

Step three: How to use external file like CSS and JS use in a wp plugin are shown below. If you need the external file in body use wp_footer instead of init like add_action(‘wp_footer’,’plugin_function_name’);

 

 
function plugin_function_name() {
    wp_enqueue_script( 'anyname-js', plugins_url( '/js/needed_jquery.js', __FILE__ ), array('jquery'), 1.0, false);
    wp_enqueue_style( 'anyname-css', plugins_url( '/css/needed_style.css', __FILE__ ));
}
add_action('init','plugin_function_name');</div>

Step four: How to use CSS style or javascript in wp plugin function are shown below. Sometime need to use this when plugin develop.

function another_plugin_function_name () {?>
        <script type="text/javascript">
               jQuery(document).ready(function(){
                        jQuery('').ticker();
               });
       </script>

        <style type="text/css">
        //Style here
         body{background-color:green;}
        </style>
<?php
}
add_action('wp_head', 'another_plugin_function_name');

In last if need use any image use like this

<img src="' . plugins_url( 'plugin_folder_name/locator_folder/image.png', dirname(__FILE__) ) . '"/>

If you are professional wp plugin developer you can use WordPress Plugin Boilerplate. Download

If you face any problem to use the code comment here.