How To Create Widget

WordPress has on of the best administration back-ends. Widget is a content area in theme where you can put your functionality as you want. To create a widget in wordpress is very easier, to write your custom widget need little programming experience in PHP.
Wordpress given a great flexibility to the programmer in CMS, you can create great things in finger tips even its plugins, widget and template theme.
This post show you how to create a simple widget and display on your front end.In this tutorial I will create a widget which will take a constant test and display it on your wordpress design are, where you can drag and drop widget to your expected template area.

It’s same as wordpress plugins except registering as widget_init action.
We will start first create a directory ‘test_widget’ under wp-content/plugins directory.Now we will create a test test_widget.php file where we will keep all the widget functionality code.

Create Structure of Widget :

We will put below code in test_widget.php at top level.

1
2
3
4
5
6
/*
Plugin Name: Test Widget
Description: Test widget
Author: Parvez Alam
Version: 1.0
*/

Above codes tells wordpress compiler this file is widget.

Add code functionality :

This file responsive to all widget level functionality.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
/*
Plugin Name: Test Widget
Description: Test widget
Author: Parvez Alam
Version: 1.0
*/


error_reporting(E_ALL);
add_action("widgets_init", array('Test_Widget', 'register'));

class Test_Widget {
  function control(){
    echo 'Control panel area';
  }
  function widget($args){
    echo $args['before_widget'];
    echo $args['before_title'] . 'Title: Hello PHP Flow' . $args['after_title'];
    echo 'I am your widget';
    echo $args['after_widget'];
  }
  function register(){
    register_sidebar_widget('Test Widget', array('Test_Widget', 'widget'));
    register_widget_control('Test Widget', array('Test_Widget', 'control'));
  }
}
?>

How to Activate Plugin:

Now open installed plugin menu in dashboard menu and click activate link of widget plugin.
activate_plugin

Widget Area

After activation widget,you can view in widget list of theme.
Widget_area

Front End Area :

Now you can view final result in wordpress front end.

The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Latest posts by Parvez (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>