Back to Top

How to Create a Custom WordPress Widget

Create Widget in Wordpress

Today I am going to share one my experience in WordPress. Recently I have developed widget for one of my plugin Direction Map.So I am going to explain how you can create own WordPress widget.

WordPress has a lot of very handy features and Widget is one of the same.Widget in WordPress is to add dynamic content and features to sidebars.so I must say widget is very good and useful feature of WordPress for technical and non-technical both users.

So, Let’s dive into the code

First of all, Create one file with the name of demo-widget into your plugin or you can add your code into functions.php file or you can place below code into your plugin main file if you want to create widget for your plugin.

Step 1:

function demo_widgets() {
	include('widget.php');
}
add_action( 'widgets_init', 'demo_widgets' );

Here, In above code, I have just initialised my widget using action hook and will write widget code into the included file widget.php.

Step 2:

Now, Let’s create file widget.php at the same place or you want to have it.

In this file, first of call the following function

register_widget( 'Demo_Widget' );

and next, extend the WP_Widget core class with Demo_Widget class

class Demo_Widget extends WP_Widget {
}

Now,we will call constructor within class say,

function Demo_Widget() {
	/* Widget settings. */
	$widget_ops = array( 'classname' => 'Demo_Widget', 'description' => __('An example widget that displays a title', 'demo') );
	/* Widget control settings. */
	$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'demo-widget' );
	/* Create the widget. */
	$this->WP_Widget( 'demo-widget', __('Demo Widget', 'example'), $widget_ops, $control_ops );
}

Step 3:

To display the widget on the screen, we will call below function into the class

function widget( $args, $instance ) {
	extract( $args );
	/* Our variables from the widget settings. */
	$title = apply_filters('Demo', $instance['title'] );
	/* Before widget (defined by themes). */
	echo $before_widget;
	/* Display the widget title if one was input
	(before and after defined by themes). */
	if ( $title )
	echo $before_title . $title . $after_title;
	/* After widget (defined by themes). */
	echo $after_widget;
}

Step 4:

To update any the widget settings, you need to call below function into class

function update( $new_instance, $old_instance ) {
	$instance = $old_instance;
	/* Strip tags for title and name to remove HTML
	(important for text inputs). */
	$instance['title'] = strip_tags( $new_instance['title'] );
	return $instance;
}

Step 5:

Last but not the least, to displays the widget settings controls on the widget panel need to form elements and for that we can call following function into the class

function form( $instance ) {

		/* Set up some default widget settings. */
		$defaults = array( 'title' => __('Demo', 'demo'), 'title' => __('Demo', 'demo'), 'width' => '200', 'height' => '300' );
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>
		
		

There we have it.Here is the demo of a widget which we have developed here.

DEMO

Download Demo
I hope this post was useful & it has helped you to create own widget in wordpress.Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Comments (1)

  1. Nice Dude , thank you

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to Protect file using .htaccess

Posted on 3 years ago

Bhumi

Overview of Amazon Web Services (AWS)

Posted on 2 years ago

Bhumi

How to get started with AngularJS

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 3 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 4 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 4 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi