How to create and manage Widgets in WordPress

In WordPress, widgets are blocks of content that you can add to your site’s sidebars, footers, and other areas.

Widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user, which is now available on properly “widgetized” WordPress Themes to include the header, footer, and elsewhere in the WordPress design and structure.

Each widget can add a feature or function to your site, without having to write any code. Common widgets to add to your site are menus, popular post lists, calendars, banner ads, social icons, and more.

How Do WordPress Custom Widgets Work?

In WordPress, you have to create a custom widget using the standard WP Widget class from the Widgets API. There are around 20 functions that you can play around with. Out of these, four is the minimum requirement for any widget to work:

You need to remember the following four functions if you want to create custom widgets:

Now, you need to create a file by the name of custom-widget.php with this code:

 __construct()

This is the constructor method, which will determine the custom widget’s ID, name, and description.

function __construct() {
  parent::__construct(
    // Base ID of your widget
    'custom_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' )
  ));
}

function widget()

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

This function is responsible for rendering front-end design or how your widget (HTML layout) will look like the front end of the website.

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'];
}

function form()

This function allows us to create a form (usually contains HTML input form fields, i.e., textbox, select, etc.).

Now, 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 Dashboard.

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
}

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.

For this, we have to implement update(), which will refresh the widget every time you change the settings.

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

Finally, you can integrate the custom widget in  function.php of your theme using the following code:

require_once( 'custom-widget.php' );

Now save your plugin file. Go to the Widgets screen and you’ll see the widget for use.

If you add it to a widget area and add text and a link to it, it will be output in the live site.

WordPress custom widget allows you to add a specific function to your website based on your needs. It’s a great solution whenever you can’t find anything in particular that would meet your specific requirements.