Step by step guide for creating wordpress plugin
0 likes14,863 views
This document provides a step-by-step guide for creating a simple WordPress plugin called "Simple Stylish Tables" that allows users to style HTML tables. The steps include: 1) Creating a plugin directory and main PHP file, 2) Adding CSS styling in a stylesheet, 3) Adding header metadata, 4) Hooking the plugin into WordPress using actions, 5) Registering and enqueuing the stylesheet, and 6) Installing and using the plugin to style tables with a custom class.
![Step by Step Guide for creating Wordpress plugin
http://idiotechie.com/?p=824 August 31, 2012
What is WordPress? WordPress is Open Source Blog
publishing software which uses PHP as front end and
MySQL as back end in the application. It is highly
extensible through pluggable framework and use of
‘Plugin’.
What is a WordPress Plugin? A plugin is a pluggable
feature to the WordPress application which allow an
enhancement , allows customization or modification to
the installed wordpress application easily. It consists of
one or more functions which integrates with the
wordpress 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 ready
to useHere are little key points on the background of WP Plugin.
WordPress Directory : All the WordPress plugins are kept under wp-contentplugins directory. So
any 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 the
wordpress 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 without
modifying 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 a
specific 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 before
writing 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 plugin
makes use of css file to create a stylish looking HTML table plugin. So let’s follow a step by step
guide.
Step 1: Give a plugin name and create directory
The plugin name must be unique and should relate to the functionality of the plugin.Let’s give the plugin
name 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 by
providing customized style for HTML tables.](https://image.slidesharecdn.com/idiotechie-com-stepbystepguideforcreatingwordpressplugin-120831131418-phpapp02/85/Step-by-step-guide-for-creating-wordpress-plugin-1-320.jpg)
Step by step guide for creating wordpress plugin
- 1. Step by Step Guide for creating Wordpress plugin http://idiotechie.com/?p=824 August 31, 2012 What is WordPress? WordPress is Open Source Blog publishing software which uses PHP as front end and MySQL as back end in the application. It is highly extensible through pluggable framework and use of ‘Plugin’. What is a WordPress Plugin? A plugin is a pluggable feature to the WordPress application which allow an enhancement , allows customization or modification to the installed wordpress application easily. It consists of one or more functions which integrates with the wordpress 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 ready to useHere are little key points on the background of WP Plugin. WordPress Directory : All the WordPress plugins are kept under wp-contentplugins directory. So any 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 the wordpress 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 without modifying 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 a specific 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 before writing 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 plugin makes use of css file to create a stylish looking HTML table plugin. So let’s follow a step by step guide. Step 1: Give a plugin name and create directory The plugin name must be unique and should relate to the functionality of the plugin.Let’s give the plugin name 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 by providing customized style for HTML tables.
- 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 the HTML table. Step 3: Now create the main plugin file Create a PHP file – ‘sstables.php’ which contains the main plugin code. Step 4: Create the Header content //Plugin Name: Simple Stylish Tables Plugin URI: http://www.idiotechie.com/download/ Description: Simple plugin for creating styish tables in the WP Author: Mainak Goswami Version: 1.0 Author URI: http://www.idiotechie.com This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; */ The header information which holds the meta data of the plugin are actually featured in the plugin dashboard 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 and then 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 that there 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 our plugin to the wordpress application.
- 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 the below link: http://codex.wordpress.org/Plugin_Submission_and_Promotion Step 7: Install the plugin. The plugin can be added through “Add New” option in the Plugin Dashboard page. Or it can be manually installed as well by placing/ FTP the code under the /wp-content/plugins folder 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 to customize 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 a virtual 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