WordPress widgets are used to add text, pages, social buttons, and other features in designated areas (sidebars) of your website. Some of the default widgets on the installation of WordPress are archives, calendars, categories, tag clouds, pages, meta, etc. Some plugins automatically add widgets, and you can see these in Appearance > Widgets.
How to Create Custom Widgets on WordPress
First things first, you need to remember the following three functions if you want to create custom widgets:
function widget ()
This function is responsible for rendering front-end design or how your widget (HTML layout) will look like the front end of the website.
function form ()
This function allows us to create a form (usually contains HTML input form fields, i.e., textbox, select, etc.).
function update ()
This function gets called as soon as users hit the submit button if a form is available in the widget. It reloads the object through AJAX request and saves (or processes) your data according to your need.
Now, you need to create a file by the name of custom-widget.php with this code:
<?php
// Creating the widget
class cw_widget extends WP_Widget
{
function __construct()
{
parent::__construct(
// Base ID of your widget
'cw_widget',
// Widget name will appear in UI
__('Cloudways Widget', 'cw_widget_domain'),
// Widget description
array(
'description' => __('Sample widget based on Testing Widgets',
'cw_widget_domain')
));
}
// Creating widget front-end
// This is where the action happens
public function widget($args, $instance)
{
$title = apply_filters('widget_title', $instance['title']);
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if (!empty($title))
echo $args['before_title'] . $title . $args['after_title'];
// This is where you run the code and display the output
echo __($title, 'cw_widget_domain');
echo $args['after_widget'];
}
// Widget Backend
public function form($instance)
{
if (isset($instance['title'])) {
$title = $instance['title'];
} else {
$title = __('New title', 'cw_widget_domain');
}
// Widget admin form
?>
<label for="<?php
echo $this->get_field_id('title');
?>"><?php
_e('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 esc_attr($title);
?>" />
<?php
}
// Updating widget replacing old instances with new
public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title']))
? strip_tags($new_instance['title']) : '';
return $instance;
}
} // Class cw_widget ends here
// Register and load the widget
function cw_load_widget()
{
register_widget('cw_widget');
}
add_action('widgets_init', 'cw_load_widget');
You can look into WordPress Codex for more attributes and examples.
Download Your Way Out!
Life is too short for putting codes. This is why you can download the custom-widget.php file from here.
How to Integrate the Custom Widget
You can integrate the custom widget in the function.php of your theme using the following code:
require_once('custom-widget.php');
In the end, you register and load the widget. Go to Appearance > Widgets. Here you can now see your own created custom widget. Drag and drop your widget in any sidebar of your theme.
Don’t you think this is simple enough to implement?
Do tell me if it was easy or not in the comments box below.
Click&Go Makes WordPress Faster
People will know to see the widgets if your website loads quickly. WordPress websites hosted on the Cloudways Click&Go platform are supersonic, thanks to our super-secret optimization formula of Apache+Varnish+Ngnix+Memcached. So, don’t wait. Start your 3-day FREE trial now by clicking the banner below.
Sarim Javaid
Sarim Javaid is a Sr. Content Marketing Manager at Cloudways, where his role involves shaping compelling narratives and strategic content. Skilled at crafting cohesive stories from a flurry of ideas, Sarim's writing is driven by curiosity and a deep fascination with Google's evolving algorithms. Beyond the professional sphere, he's a music and art admirer and an overly-excited person.
