HOW TO CREATE A SIMPLE WORDPRESS WIDGET (IN 5 STEPS TUTORIAL)

How To Create A Simple WordPress Widget (in 5 steps tutorial)

In this tutorial I will show you How To Create A Simple WordPress Widget (in 5 steps). hope you find it useful. happy coding 🙂

Widgets do play a very vital role in your WordPress blog/site and therefore they need to be given high priority. There are hundreds, or maybe thousands, of developers around the world who have built thousands of widgets. These range from simple ones (like we’re going to learn in this tutorial) to advanced widgets (often made for custom products such as themes, plugins, etc.).I starting creating my custom WordPress widget ever since I started working on ThesisLove – a hub to purchase amazing Thesis 2.0 skins and get free boxes. Therefore, thanks to the Thesis WordPress Theme that I’m able to write this tutorial.

Before creating any WordPress widget, it is a must that you know some basic PHP codes because you might want to achieve something that will, of course, be using PHP to execute the result on the frontend. Once you’re introduced to some basic PHP code, you shouldn’t have a very hard time creating a custom WordPress widget. Assuming you’re done with that, let’s begin.

*Note – The widget we’re going to create here will add an option for the user to enter some text, and if the field is left blank, a default text will appear. This is similar to the “Text Widget” by WordPress, but honestly, I haven’t even had a look into its source code. Therefore, this tutorial is based on my knowledge.

Step 5 contains the final code which is to be injected into the theme’s functions.php.

Step 1 – Introduction Of The Widget

The very first step of creating any WordPress widget is to name it and give it a description. The following lines of code will do it for us.

class my_custom_widget extends WP_Widget {
01 function my_custom_widget() {
02 $widget_ops = array('classname' => 'my-widget-class', 'description' =>     03('Your Custom Widget Description Goes Here.', 'mydomain'));
04 $control_ops = array('id_base' => 'my_custom_widget');
05 $this->WP_Widget('my_custom_widget', __('My Widget Title Goes Here', 'mydomain'), $widget_ops, $control_ops); 

Step 2 – Adding Widget Options

These options will be the widget title and the text area for the user to enter some text in it.

function form($instance) {
$defaults = array('text_area' => "The Default Text Goes here");
$instance = wp_parse_args((array) $instance, $defaults); ?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'mydomain'); ?></label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php printf('%s', esc_attr((string)$instance['title'])); ?>" class="widefat" type="text" />
</p>
<p>
<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Text Area:', 'mydomain'); ?></label>
<textarea id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>" class="widefat" rows="3" cols="8"><?php printf('%s', esc_textarea($instance['textarea'])); ?></textarea>
</p> } 

Description

  • Where it says “The Default Text Goes Here” – that text will be displayed when the user leaves the “Text Area” field blank.

Step 3 – Widget In The FrontEnd

It’s time to put the code that will be executed in the frontend i.e. when the widget is placed in the widgetized area.

function widget($args, $instance) {
extract($args);
$title = apply_filters('widget_title', $instance['title']);
$textarea = $instance['textarea'];
 
/* Widget In The Frontend */
 
?>
<? echo $before_widget; ?>
<? if (!empty($title))
echo $before_title . $title . $after_title;; ?>
<p> <? echo $textarea; ?> </p>
<? echo $after_widget; ?>
<?
} 

Step 4 – Widget Update Functions

When the widget is saved after any changes, the changes need to be noticed by WordPress. The following will carry that out.

 function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = sprintf('%s', strip_tags(stripslashes($new_instance['title'])));
$instance['textarea'] = $new_instance['textarea'];
return $instance;
} 

Step 5 – Registering And Finalizing The Widget (Full Code)

The above codes were in pieces, and therefore they have to be put together. Therefore, the following snippet contains the full code (as it should be) and the function to register it.

 class my_custom_widget extends WP_Widget {
function my_custom_widget() {
$widget_ops = array('classname' => 'my-widget-class', 'description' => __('Your Custom Widget Description Goes Here.', 'mydomain'));
$control_ops = array('id_base' => 'my_custom_widget');
$this->WP_Widget('my_custom_widget', __('My Widget Title Goes Here', 'mydomain'), $widget_ops, $control_ops);
}
 
function widget($args, $instance) {
extract($args);
$title = apply_filters('widget_title', $instance['title']);
$textarea = $instance['textarea'];
 
/* Widget In The Frontend */
 
?>
<? echo $before_widget; ?>
<? if (!empty($title))
echo $before_title . $title . $after_title;; ?>
<p> <? echo $textarea; ?> </p>
<? echo $after_widget; ?>
<?
}
 
/* Widget Update Functions */
 
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = sprintf('%s', strip_tags(stripslashes($new_instance['title'])));
$instance['textarea'] = $new_instance['textarea'];
return $instance;
}
 
/* Widget Options */
 
function form($instance) {
$defaults = array('textarea' => "The Default Text Goes here");
$instance = wp_parse_args((array) $instance, $defaults); ?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:', 'mydomain'); ?></label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php printf('%s', esc_attr((string)$instance['title'])); ?>" class="widefat" type="text" />
</p>
<p>
<label for="<?php echo $this->get_field_id('textarea'); ?>"><?php _e('Text Area:', 'mydomain'); ?></label>
<textarea id="<?php echo $this->get_field_id('textarea'); ?>" name="<?php echo $this->get_field_name('textarea'); ?>" class="widefat" rows="3" cols="8">
<?php printf('%s', esc_textarea($instance['textarea'])); ?></textarea> </p> <?
}
}
 
/* Registering The Widget */
$widgets = array('my_custom_widget');
foreach ($widgets as $widget)
register_widget($widget); 

Final Output

This is the final output of the widget on the dashboard. The output in the frontend, at least for this widget, is quite obvious and therefore there’s no need to show it.

Conclusion

I hope it was easy enough for you now to create a WordPress widget (a very simple one, though!). Any questions/doubts etc. will be answered in the comments area.

Read also :
5 WRONG-HEADED PARADIGMS THAT MIGHT BE HURTING YOUR BUSINESS
FIVE REASONS WHY BLOGGERS SHOULD BE ON PINTEREST
EASILY MANAGE YOUR SOCIAL MEDIA WITH SYMPHONY | SYMPHONY REVIEW
4 MOST-NOTICED THINGS IN AN ARTICLE OR BLOG POST
10 WAYS TO IMPROVE YOUR PINTEREST ACCOUNT
Back to Home

Leave a Comment