WordPress widget is an easy-to-use way to add content and specific features into your website.
You just need to drag and drop the widget into any widgetized area like sidebar, footer or header of your website and start using its functionality.
Tip – Try WordPress themes, that comes with integrated widgetized sidebar and footer. This will save your time from custom coding..
This is a WordPress widget tutorial, where you will learn how to create a custom widget for WordPress using the plugin.
Once you activate this plugin, the widget will be listed in the widget area of the WordPress.
After reading this article, you can create a WordPress custom menu widget quickly.
You might also be interested in our article on – Removing HTML Tags From WordPress Comment Form.
Functionality of My WordPress Custom Widget
This widget is the text widget which is used for many purposes like displaying your latest offers, deals or special events on your website.
It contains two fields named, title and description. So you just need to fill data under these fields from the dashboard and display it on any widget section (like a sidebar or footer) of your website. So that, it looks cool on the front end and grabs visitor’s attention more readily.
[dlv dl_url=”https://www.inkthemes.com/wp-content/uploads/2014/05/wordpress_widget.zip” dl_text =”Download Widget File”]
Steps to Create Custom WordPress Widget
I have created a new folder named, wordpress_widget where I have saved a newly created file widget.php.
Now, save this wordpress_widget folder under the plugin folder of WordPress.
(Eg. wamp -> www -> WordPress -> wp-content -> plugins)
1. Enter Plugin Details
When you create a new plugin, it is very necessary to provide all its details like- plugin name, plugin URI, its short description, author name, author URI etc. You can follow the below code and enter details according to it.
[php]<?php
/*
Plugin Name: Custom Widget
Plugin URI: https://www.inkthemes.com
Description: Building a Custom WordPress Widget.
Author: InkThemes
Version: 1
Author URI: https://www.inkthemes.com
*/
?>
[/php]2. Define Widget Name
You need to create a class (here it is my_plugin) that encloses widget in it.
You need to create a constructor, give constructor name same as that of a class i.e. my_plugin.
Under this constructor, you need to define a widget name.
As you can see in the below code I have given a widget name- My Widget
[php]<?php
class my_plugin extends WP_Widget {
// constructor
function my_plugin() {
// Give widget name here
parent::WP_Widget(false, $name = __(‘My Widget’, ‘wp_widget_plugin’) );
}
?>
[/php]3. Add Functionality to Widget for Backend
You need to create a form that you will see when adding the widget in the sidebar. And then you can fill data under these form fields from backend that will ultimately display on front end.
You will be more clear with a below image.
For that, you have to use a predefined function called form () that create the widget for the WordPress administration.
Also define CSS code for the widget fields i.e. title and textarea, for that, just use the below code and add it under the widget.php file followed by the above piece of code.
[php]<?php
// widget form creation
function form($instance) {
// Check values
if( $instance) {
$title = esc_attr($instance[‘title’]);
$textarea = $instance[‘textarea’];
} else {
$title = ”;
$textarea = ”;
}
?>
<p>
<label for=”<?php echo $this->get_field_id(‘title’); ?>”><?php _e(‘Title’, ‘wp_widget_plugin’); ?></label>
<input class=”widefat” id=”<?php echo $this->get_field_id(‘title’); ?>” name=”<?php echo $this->get_field_name(‘title’); ?>” type=”text” value=”<?php echo $title; ?>” />
</p>
<p>
<label for=”<?php echo $this->get_field_id(‘textarea’); ?>”><?php _e(‘Description:’, ‘wp_widget_plugin’); ?></label>
<textarea class=”widefat” id=”<?php echo $this->get_field_id(‘textarea’); ?>” name=”<?php echo $this->get_field_name(‘textarea’); ?>” rows=”7″ cols=”20″ ><?php echo $textarea; ?></textarea>
</p>
<?php
}
?>
[/php]4. Update Widget Data on Backend
When you click on the save button on widget form, then predefined function update() is called.
This function overwrite the old value of form fields with a new value. As you can see in the below code I have used two fields in the form, so these two fields keep on updating with new valid values in backend.
[php]<?php
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance[‘title’] = strip_tags($new_instance[‘title’]);
$instance[‘textarea’] = strip_tags($new_instance[‘textarea’]);
return $instance;
}
?>
[/php]5. Display Widget on Front End
In order to display widget in the front end, you need to include a widget () function in the code. This function contains two parameters $args and $instance.
$args –> associative array that will be passed as a first argument to every active widget callback
$instance –> instance variable
$before_widget –> HTML to place before widget
[php]<?php
// display widget
function widget($args, $instance) {
extract( $args );
// these are the widget options
$title = apply_filters(‘widget_title’, $instance[‘title’]);
$textarea = $instance[‘textarea’];
echo $before_widget;
// Display the widget
echo ‘<div class=”widget-text wp_widget_plugin_box” style=”width:269px; padding:5px 9px 20px 5px; border: 1px solid rgb(231, 15, 52); background: pink; border-radius: 5px; margin: 10px 0 25px 0;”>’;
echo ‘<div class=”widget-title” style=”width: 90%; height:30px; margin-left:3%; “>’;
// Check if title is set
if ( $title ) {
echo $before_title . $title . $after_title ;
}
echo ‘</div>’;
// Check if textarea is set
echo ‘<div class=”widget-textarea” style=”width: 90%; margin-left:3%; padding:8px; background-color: white; border-radius: 3px; min-height: 70px;”>’;
if( $textarea ) {
echo ‘<p class=”wp_widget_plugin_textarea” style=”font-size:15px;”>’.$textarea.'</p>’;
}
echo ‘</div>’;
echo ‘</div>’;
echo $after_widget;
}
}
?>
[/php]6. Register Widget in WordPress
You need to register widget in WordPress so that it will be available under widget section of your WordPress dashboard. To do so, you can follow the below code.
[php]<?php
// register widget
add_action(‘widgets_init’, create_function(”, ‘return register_widget(“my_plugin”);’));
?>
[/php]Screenshots
1. Plugin named, Custom Widget is listed under the plugins option of your WordPress dashboard, so you need to activate it by click on the Activate option, similar as below image.
2. Once the plugin is activated, Widget named My Widget is listed under the widget area of your WordPress dashboard, similar as below image.
3. You can place the widget under the sidebar or footer section of your website by simple drag and drop.
Now enter data in the widget fields that you want to display on the front end. As you see in the below image, I have filled two fields, Title, and Description of My Widget.
4. This is how the widget appears in the sidebar section of your website.
Did you like the design of BlackBird WordPress theme?? It comes with widgetized sidebar and footer widgets…:)
Note: You can set the appearance of the widget as per your choice, just modify the HTML code under Step5.
Here is one of the helpful WordPress Custom Widget Videos –
Conclusion
Creating WordPress custom widget is very easy, you can create any type of widget you want. These are the common steps you need to follow for every widget type. I hope this tutorial makes your approach clear.
If you have any query then do share it in the comment box. I will definitely resolve it and also share your thoughts about the post. I will be glad to know it. 🙂
Related Links –
You might also be interested in:
