WordPress widgets give you the ability to edit a certain part of your WordPress theme, usually on the sidebar. Using its drag-and-drop features, it’s really easy for beginners to add, customize or delete a widget.
Although there are a lot WordPress plugins available on the Web, the best way to get your exact desired output on the front end is coding it.
Coding WordPress widgets is just like coding a plugin but, this time, it’s more simple and easy. WordPress widgets provide user the options to fill out forms, include or exclude certain data information and some other features.
The order and placement is set by the WordPress theme in the functions.php file.
In today’s tutorial, learn how to create WordPress widgets by coding an Advertisement Banner widget to display banners on your site. OK, let’s start.
Resources You Need to Complete This Tutorial
- WordPress Installation
- Basic Knowledge about WordPress Widgets
- Basic Knowledge about WordPress API
Step 1: Creating the Class and Functions
WordPress widgets are classes and are easy to duplicate. A class provides blueprint that can be used repeatedly. The base class holds the functions that must be extended to make the widget work. To start off, create the class first.
Create a new php file on your plugins folder of your WordPress installation folder and name it ads_widget.php. Then, copy the class code below.
Notice that a comment section just above the the php class codes was created. This will display the details about the plugin such as the plugin name, description, author and so on.
/*
Plugin Name: Advertisement Widget
Plugin URI: 1stwebdesigner.com/
Description: An Advertisement Banner Widget
Author: Sam Norton
*/
<?php
class Ads_Widgets extends WP_Widget
{
function Ads_Widgets()
{
// widget actual processes
}
function form($instance)
{
// display the options form on admin backend
}
function update($new_instance, $old_instance)
{
// processes widget options to be saved
}
function widget($args, $instance) {
// display the content of the widget
}
}
//call register widget
add_action( 'widgets_init', create_function('', 'return register_widget("Ads_Widgets");') );
?>
Step 2: Processing the Widget
Inside the function Ads_Widgets, copy the code below. These codes will initialize the widget and will be used throughout the function to target the current instance of the widget.
<?php
function Ads_Widgets()
{
$widget_ops = array('classname' => 'Ads_Widgets', 'description' => 'Displays Ads' );
$this->WP_Widget('Ads_Widgets', 'Advertisement Widget', $widget_ops);
}
?>
Step 3: The Form Function
Next, code the form to display the options form on the back-end admin panel. Copy the code below inside the function form.
function form($instance)
{
$instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
$title = $instance['title'];
$message = esc_attr($instance['message']);
$link = esc_attr($instance['link']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<p><label for="<?php echo $this->get_field_id('message'); ?>"><?php _e('Advertisement Banner'); ?></label>
<textarea rows="4" cols="50" class="widefat" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>"><?php echo ($message); ?> </textarea>
</p>
<label for="<?php echo $this->get_field_id('link'); ?>"><?php _e('Ads Link'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" type="text" value="<?php echo $link; ?>" />
</p>
<?php
} ?>
Step 4: The Update Function
Next, work on the update function. This function will take the user settings and save them to the database.
<?php
function update($new_instance, $old_instance)
{
$instance = $old_instance;
$instance['title'] = $new_instance['title'];
$instance['message'] = $new_instance['message'];
$instance['link'] = $new_instance['link'];
return $instance;
}
?>
Step 5: The Widget Function
This function will display the content of the widget on the front page. The code will contain arguments from the theme, which can be a title, a description or other values. Copy the code below inside the function widget.
function widget($args, $instance) {
extract( $args );
$title = apply_filters('widget_title', $instance['title']);
$message = $instance['message'];
$link = $instance['link'];
?>
<?php echo $before_widget; ?>
<?php if ( $title )
echo $before_title . $title . $after_title; ?>
<ul>
<li><?php echo '<a href="'.$link.'" target="_blank"><img src='.$message." '/>"; ?></a></li>
</ul>
<?php echo $after_widget; ?>
<?php
}
}
Step 6: Adding Action Hook and Returning Widgets
Finally, load the widget by the function widget_init using an action hook. This will also register the widget name to make it work both on the front and back-end. Place the code below the class that was created above.
add_action( 'widgets_init', create_function('', 'return register_widget("Ads_Widgets");') );
Step 7: Activating the Plugin Widget
Now that the widget is done, activate the plugin.
On the back-end admin panel, go to the Plugins panel and then click on the activate plugin link on the created widget.
Next, to display the ads, you just need to supply the following fields.
If you are going to check the WordPress site, you can that the banner was already displayed and running.
Conclusion
Congratulations! You just created your very first advertisement widget that will display an advertisement banner on your site.
If you are not comfortable doing all these php stuff you might wanna use built in plugins like rtWidgets.
Hope you learned on this tutorial and feel free to use the downloadable code on your projects.
Let me know your thoughts if you have other ways to do the same thing.