Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Step by step guide for creating wordpress plugin

14,740 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Step by step guide for creating wordpress plugin

  1. 1. Step by Step Guide for creating Wordpress pluginhttp://idiotechie.com/?p=824 August 31, 2012What is WordPress? WordPress is Open Source Blogpublishing software which uses PHP as front end andMySQL as back end in the application. It is highlyextensible through pluggable framework and use of‘Plugin’.What is a WordPress Plugin? A plugin is a pluggablefeature to the WordPress application which allow anenhancement , allows customization or modification tothe installed wordpress application easily. It consists ofone or more functions which integrates with thewordpress application without actually modifying the existing application code.In this article we will show a step by step guide on how to create a wordpress plugin and make it readyto useHere are little key points on the background of WP Plugin.WordPress Directory : All the WordPress plugins are kept under wp-contentplugins directory. Soany new plugins created needs to be used inside this folder.File Header: File header in WordPress plays a vital role as it is this file which is read by thewordpress application for getting the meta information e.g. plugin name, version, author etc.WP Plugin Hooks: These are the components which hooks into the wordpress application withoutmodifying the original files. Hooks are of two types -a) Action Hooks: This is all about inserting additional custom code into the wordpress application.Actions are triggered by specific events in the WordPress application such as publishing a post,changing themes, or displaying a page of the admin panel. Action hook code (function) can execute aspecific code in response to the event. e.g. wp_head, wp_footer, comment_post.add_action( hook_name, your_function_name,[priority],[accepted_args] );b) Filter Hooks: Filters can be imagined as a piece of code which can change the text just beforewriting the content into the database or displaying on the screen.e.g. the_content, the_title,comment_text etc.add_filter(hook_name, your_filter_function, [priority],[accepted_args]);Now we are going to create a simple WordPress plugin called ‘Simple Stylish Table’. This pluginmakes use of css file to create a stylish looking HTML table plugin. So let’s follow a step by stepguide.Step 1: Give a plugin name and create directoryThe plugin name must be unique and should relate to the functionality of the plugin.Let’s give the pluginname as ‘Simple Stylish Tables’.Now create a folder under the wp-contentplugins path with simple-stylish-tables.Step 2: Create a css file.Create a css file ‘ssstyle.css’ which actually overrides the standard wordpress application css file byproviding customized style for HTML tables.
  2. 2. .ss-table{padding: 0;margin: 0;border-collapse: collapse;border: 1px dashed #333;color: #000;background: #bcd0e4;}In the above code snippet a new class .ss-table is being created to customize the look and feel of theHTML table.Step 3: Now create the main plugin fileCreate a PHP file – ‘sstables.php’ which contains the main plugin code.Step 4: Create the Header content//Plugin Name: Simple Stylish TablesPlugin URI: http://www.idiotechie.com/download/Description: Simple plugin for creating styish tables in the WPAuthor: Mainak GoswamiVersion: 1.0Author URI: http://www.idiotechie.comThis program is free software; you can redistribute it and/or modifyit under the terms of the GNU General Public License as published bythe Free Software Foundation;*/The header information which holds the meta data of the plugin are actually featured in the plugindashboard when the plugin in installed.Step 5: Create a function stylish_table()The stylish_table() function will first register the new custom stylesheet :”ssstyle.css” for further use andthen add/enqueue a CSS style file to the wordpress generated page.wp_register_style(stylish_table_style, plugins_url(ssstyle.css,__FILE__),false,"1.0");The above contents of the function wp_register_style can be explained as below:wp_register_style(“Name of the Stylesheet”, “Path of the stylesheet”,”boolean value to determine thatthere is no dependencies on any other stylesheet”,”version number”);wp_enqueue_style(stylish_table_style);This loads the “stylish_table_style” in the wordpress application.Well…is that all? Wait…there is one last step…We will need to use one of the action hooks to hook ourplugin to the wordpress application.
  3. 3. add_action(wp_enqueue_scripts, stylish_table);The add_action adds the function stylish_table() to the wp_enqueue_scripts hook.That’s all about creating a plugin. Now how do I use it in my posts in blog?Step 6: Submit your newly created plugin to the wordpress site as per the instructions provided in thebelow link: http://codex.wordpress.org/Plugin_Submission_and_PromotionStep 7: Install the plugin. The plugin can be added through “Add New” option in the Plugin Dashboardpage. Or it can be manually installed as well by placing/ FTP the code under the /wp-content/pluginsfolder and then activate it from the plugin dashboard.Step 8: Use the plugin inside the posts: Once the plugin has been activated it can be used tocustomize to style up the existing or new HTML tables inside the posts and use the style class as -”ss-table” which has been referred in the stylesheet or in the plugin description.Sample Test table example is shown below.<table class="ss-table" border="1" cellspacing="0" cellpadding="0"><tbody><tr><td valign="top" width="284">Java</td><td valign="top" width="284">C++</td></tr><tr><td valign="top" width="284">Write once, run anywhere /everywhere.</td><td valign="top" width="284">Write once, compile anywhere.</td></tr><tr><td style="text-align: left;" valign="top" width="284"> Runs in avirtual machine.</td><td style="text-align: left;" valign="top" width="284">Exposes low-level details.</td></tr></tbody></table>Output :Note: The hover effect cannot be displayed here but as an example it can be found in the following post:SAX vs DOM Parser.<<Download Code>>Filed in: PHP, Random, Social Media, Trends Tags: action hook, css, filter hook, guide, hooks, html,php, plugin, step by step, stylish, table, Wordpress

×