WordPress is the one of the best platform for blogging. You can easily customize it according to you or your client’s requirement. WordPress provides you to creating it’s Plugin facility for easily customization without changing the Core part of WordPress. So in this post we are talking about the make WordPress plugin.
Important things for your Plugin are:
- Choose a unique name for your WordPress plugin if possible.
- Create the PHP file with the name gain from your WordPress Plugin name.
The reason behind this is clear, because your are using this plugin for your WordPress blog or template whatever and to prevent from the conflicting with the name, we have to choose some unique name for plugin folder and its file.
You can put more then one file into your plugin directory without any restriction with WordPress core files. If you have JavaScript file, CSS files or images then you can store it directly into your WordPress plugin’s directory with or without creating a sub folder. The path for your plugin directory should be wp-content/plugins/. You can access your plugin’s absolute path with plugin_dir_path() and plugins_url().
Now lets start to making our WordPress plugin. Just go to your WordPress directory and open the given path that is wp-content/plugins/. Now lets make a directory for our plugin, in my example i have given the directory name first_WP_plugin, the plugin name depending on you whatever you want to give but just make sure to try with the unique name.
Now lets create a file into our plugin directory firstplugin.php, again depending on you the name of the file. Open the file in your favorite editor. Now before starting your logic, you should have to following the WordPress standard. First put some information about your WordPress plugin in c style comments /* .. */ at the top of the header. Take a look on the given example.
/* Plugin Name: My First WordPress Plugin Plugin URI: URI_Of_Page_Describing_Plugin_and_Updates Description: A brief description of the Plugin. Version: 1.0 Author: Jogesh Sharma Author URI: http://webomnizz.com/ License: A "Slug" license name e.g. GPL2 */
After filling this information lets check it into your WordPress admin panel, just log-in into WordPress and just click on the plugins menu. You could find all the information that you filled into your plugins main file with ‘Activate’, ‘Edit’ and ‘Delete’ option. If you want to make it active then just click on the ‘Activate’ link of your plugin. Now your plugin is activated. Now its time to put your logic into your plugin.
Let’s get start to make a plugin which display the social media buttons like Google’s +1 button etc. in our post. In this example i used only Google’s +1 button. If you want then you can add more buttons as you like. So let’s move into the plugin codes:
global $wp_version; $exit_msg = "My First WordPress Plugin require wordpress 2.5 or newer!"; if( version_compare($wp_version, "2.5", "<") ) exit($exit_msg);
First check the WordPress version, with the help of the global variable $wp_version. This variable provide you the version of WordPress that are you using.
// Function for plugins
function socialStick_Button(){
global $post;
$link = urlencode(get_permalink($post->ID));
$google_plus = '<span style="position:absolute;top:0px;left:95px;"><div class="g-plusone" data-size="small" data-href="'. $link .'"></div></span>';
echo "<link type='text/css' rel='stylesheet' href=".plugins_url('css/style.css', __FILE__)." >";
echo "<div id='jp_social_butt'>$google_plus</div>
<script type=\"text/javascript\">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>";
}
Now make a function which provide the Google’s +1 button for our post. I got this +1 button from this link. Now before making this function we have to decide where you want to show this Google’s button. Simple in every post you want to display. So what you want to do; is simply to the the global variable $post, this variable return an array with values. Just collect the ID of current post and put it into the Google’s +1 button.
function socialStick_ContentHook( $content ){
if( is_single() ) return $content.socialStick_Button();
else return $content;
}
add_filter('the_content', 'socialStick_ContentHook');
The above function help us to stick the social button with the post. If you want to use the social button only for the single post, then just copy and post the function as it is. Now just check to refresh you single post you can find your +1 button.
Complete Code:
/*
Plugin Name: My First WordPress Plugin
Plugin URI: URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: 1.0
Author: Jogesh Sharma
Author URI: http://webomnizz.com/blog/about
License: A "Slug" license name e.g. GPL2
*/
global $wp_version;
$exit_msg = "My First WordPress Plugin require wordpress 2.5 or newer!";
if( version_compare($wp_version, "2.5", "<") ){
exit($exit_msg);
}
// Function for plugins
function socialStick_Button(){
global $post;
$link = urlencode(get_permalink($post->ID));
$google_plus = '<span style="position:absolute;top:0px;left:95px;"><div class="g-plusone" data-size="small" data-href="'. $link .'"></div></span>';
echo "<link type='text/css' rel='stylesheet' href=".plugins_url('css/style.css', __FILE__)." >";
echo "<div id='jp_social_butt'>$google_plus</div>
<script type=\"text/javascript\">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>";
}
function socialStick_ContentHook( $content ){
if( is_single() ) :
return $content.socialStick_Button();
else :
return $content;
endif;
}
add_filter('the_content', 'socialStick_ContentHook');
Hope you all enjoying the post. For any discussion about this post you are most welcome to the comment section.