Create a WordPress plugin : Stylish HTML tables

Wordpress Plugin DevelopmentWhat 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-content\plugins\ 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-content\plugins 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.

.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.

WP Plugin Dashboard

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.

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.

Plugin effect on the table

<<Download Code>>

 

2 Responses to “Create a WordPress plugin : Stylish HTML tables”

  1. google.com

    Dec 24. 2013

    I believe what you posted was very logical. But, think on this, what if you
    were to write a killer headline? I am not suggesting your content is not solid., but what if you added a headline
    that grabbed a person’s attention? I mean Step by Step Guide for
    creating WordPress plugin | IdioTechie is a
    little plain. You might look at Yahoo’s front page and
    note how they write news headlines to grab viewers to click.
    You might add a video or a picture or two to grab readers excited about everything’ve written.
    Just my opinion, it could bring your posts a little bit more interesting.

    Reply to this comment
  2. latest mobile games

    Apr 15. 2014

    I leave a comment when I like a post on a blog or I have something to contribute to the conversation.
    It’s triggered by the passion communicated in the article I read.

    And after this post Step by Step Guide for creating WordPress plugin | IdioTechie.
    I was moved enough to write a commenta response ;-) I do have a few questions for you if
    it’s allright. Could it be just me or do a few of these remarks
    look like coming from brain dead individuals? :-P And, if you are writing
    on other social sites, I would like to follow
    everything new you have to post. Would you make a
    list all of all your shared pages like your Facebook page, twitter feed, or linkedin profile?

    Reply to this comment

Leave a Reply