How to Create Custom WordPress Widget Step by Step With Example

One of the topics in WordPress is WordPress widget development. You can use widgets to add banners, advertisements, newsletter sign up forms, and other elements to your website. In this article, we will show you how to create a custom WordPress widget, step by step with example.

## What Is WordPress Widget?

Widgets in WordPress contain pieces of code that you can add to your website’s sidebars or widget-ready areas (also called a sidebar).

Custom WordPress widget makes it easy for you to add additional functions to your website. Think of them as modules that you can use to add different elements by using a simple drag and drop interface.

By default, WordPress ships with several widgets. They provide you with basic utility features and are compatible with every WordPress theme.

However, sometimes, those standard widgets can’t perform the tasks you want. WordPress also allows developers to create their own custom widgets.

## When to Use WordPress Widgets

You should use a widget whenever you want to add extra content to one or more pages in your site (and when I say page, I include posts, archives etc).

Think about how many users will need access to each widget and how important it is when you decide where to place it. Widgets in the sidebar will be more prominent than those in the footer, which some users may not even see.

So a latest posts widget or a call to action widget might be better off in the sidebar where people have more chance of interacting with them, while a social media feed could go in the footer.

If your theme also has special widget areas for the home page, you might want to use these for navigation around your site’s departments, lists of relevant content, or media such as a video welcoming people to the site.

## Anatomy of a Widget

Visually, a widget comprises two areas:

* Title Area
* Widget Options

## Where to Create Custom WordPress

It is up to you to choose whether you want to create the widget using a [plugin](https://honarsystems.com/wordpress-plugin-development/) or via editing the **functions.php** file.

A plugin will enable the custom widget to work on any site while adding code to **functions.php**. However, it will only be available when that particular theme is active.

Another tool that you can use is the [Code Snippets](https://wordpress.org/plugins/code-snippets/) plugin which allows you to easily add custom code to your WordPress website.

## Widget Basics

In WordPress, you have to create a custom widget using the standard [**WP Widget**](https://developer.wordpress.org/reference/classes/wp_widget/) class from the [**Widgets API**](https://codex.wordpress.org/Widgets_API). There are 18 functions that you can play around with. Out of these, **four** is the minimum requirement for any widget.

* **\_\_construct()** – constructor function where you can define your widget’s parameters.
* **widget()** – contains the output of the widget.
* **form()** – determines widget settings in the WordPress dashboard.
* **update()** – updates widget settings.

## Creating a Custom Widget in WordPress

One more thing to note is that we’re writing this code in the **functions.php** file for the currently loaded theme.

### 1. Extending the WP_Widget class

WordPress comes with a built-in WordPress Widget class. Each new WordPress widget extends the WordPress widget class.

Open your themes **functions.php** file with any editor you prefer. Create a new class that extends the base **WP\_Widget** class.

class hs_example_widget extends WP_Widget {
// The construct part
function __construct(){
}
// Creating widget front-end
public function widget($args, $instance){ }
// Creating widget Backend
public function form($instance){ }
// Updating widget replacing old instances with new
public function update($new_instance, $old_instance){ }
}

### 2. Adding __construct()

We start implementing the four standard functions one by one. The first one is the constructor method, which will determine the custom widget’s ID, name, and description.

function __construct() {
parent::__construct(
// widget ID
‘example_widget’,
// widget name
__(‘HS Example Widget’, ‘hs-text-domain’),
// widget description
array(‘description’ => __(‘Hostinger Widget Tutorial’, ‘hs-text-domain’),)
);
}

### 3. Adding widget()

It defines the look of your WordPress custom widget on the front-end.

public function widget($args, $instance) {
$title = apply_filters(‘widget_title’, $instance[‘title’]);
echo $args[‘before widget’];
//if title is present
If (!empty ($title))
Echo $args[‘before_title’] . $title . $args[‘after_title’];
//output
echo __(‘Greetings from honarsystems.com!’, ‘hs-text-domain’);
echo $args[‘after_widget’];
}

we have configured the output of our widget so that it displays the phrase “**Greetings from honarsystems.com!**“.

### 4. Adding form()

We have to program the back-end of the widget using the **form()** method. You can see the result when you want to add the widget from the WordPress Widgets.

public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) )
$title = $instance[ ‘title’ ];
else
$title = __( ‘Default Title’, ‘hs-text-domain’ ); ?>
<p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”><?php _e( ‘Title:’ ); ?></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 esc_attr( $title ); ?>” />
</p>
<?php
}

Now you can see the widget in the Appearance > Widgets section in the admin panel.

After adding into the one of widget areas, you can change widget title from Default Title to what you want.

### 5. Adding update()

We have to implement **update()**, to save anything that’s input to that form. This will save the data input by users to the widget settings.

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}

### 6. Registering the Widget

We define a function **hs\_register\_widget()** to register the widget class. Finally, we have to register the new custom widget using **add\_action()** function.

function hs_register_widget() {
register_widget( ‘hs_example_widget’ );
}
add_action( ‘widgets_init’, ‘hs_register_widget’ );

More: [https://honarsystems.com/wordpress-widget-development/](https://honarsystems.com/wordpress-widget-development/)

1 Comment

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer