WP Widget Generator

GigaBook Web Developer Tools

A WordPress widget is a piece of code you can insert into a Sidebar of your WordPress site. Example of the default Widgets you get in WordPress are:

A WordPress widget is a piece of code you can insert into a Sidebar of your WordPress site. Example of the default Widgets you get in WordPress are:

  • Display categories
  • Tag clouds
  • Text area
  • Recent comments
  • Search form

To add a widget into a sidebar you can do this by logging into the admin area and navigating to Appearance -> Widgets, on the left side of screen you will see a list of all the widgets on the right you will see all the possible sidebars you can add widgets in. To add a widget to the sidebar you just have to drag the widget to where you want it be displayed.

When the widget is in a sidebar the form will expand so that you can customise how the widget behaviours.

widget-screen-2

Developing A New Widget

To create your own WordPress Widget you can do this by creating your own PHP class and inheriting from the WP_Widget class located in wp-includes/class-wp-widget.php.

Then you just need to define the widget in the constructor and override 3 methods to change how the widgets behaviours.

<?php
add_action( 'widgets_init', function(){
register_widget( 'My_First_Widget' );
});

class My_First_Widget extends WP_Widget {

/**
* Sets up the widgets name etc
*/
public function __construct() {
}

/**
* Outputs the content of the widget
*
* @param array $args
* @param array $instance
*/
public function widget( $args, $instance ) {

}

/**
* Outputs the options form on admin
*
* @param array $instance The widget options
*/
public function form( $instance ) {
}

/**
* Processing widget options on save
*
* @param array $new_instance The new options
* @param array $old_instance The previous options
*/
public function update( $new_instance, $old_instance ) {
}
}

Widget Constructor

The widget constructor is where you define the name and description of the Widget you're creating. First you need to create an array with the classname and description of the widget. Then you need to call the WP_Widget::__construct with the Name of the widget.

/**
* Sets up the widgets name etc
*/
public function __construct() {
$widget_ops = array(
'classname' => 'my_first_widget',
'description' => '',
);

parent::__construct( 'my_first_widget', 'My First Widget', $widget_ops );
}

Override Widget Methods

The 3 methods you need to override are:

  • widget - Used to display the widget on the frontend
  • form - Used in the admin area to show the form
  • update - Used to validate and store the widget values from the admin area form

Widget Method

The widget method is used to output the contents and HTML to the frontend of the website. In the below example we are just going to echo Hello World on the page.

/**
* Outputs the content of the widget
*
* @param array $args
* @param array $instance
*/
public function widget( $args, $instance ) {
// outputs the content of the widget
echo $args['before_widget'];

if ( ! empty( $instance['title'] ) ) {
echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
}

echo __( 'Hello, World!', 'text_domain' );

echo $args['after_widget'];
}

Form Method

As you can see from the example below it will create a form in the admin area that adds a textbox to enter the title of the widget.

/**
* Outputs the options form on admin
*
* @param array $instance The widget options
*/
public function form( $instance ) {
// outputs the options form on admin
$title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
?>

<label for="<?php echo $this->get_field_id( 'title' ); ?>"><!--?php _e( 'Title:' ); ?--></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" class="widefat" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />

<?php
}

Update Method

The code snippet below will take care of the update of the admin form, here is a simple example of validation as it will loop through the instance of the form values and call the sanitize_text_field() to validate the input textboxes.

/**
* Processing widget options on save
*
* @param array $new_instance The new options
* @param array $old_instance The previous options
*/
public function update( $new_instance, $old_instance ) {
// processes widget options to be saved
foreach( $new_instance as $key => $value )
{
$updated_instance[$key] = sanitize_text_field($value);
}

return $updated_instance;
}

WordPress Widget Generator

The WordPress widget generator make it very easy to get started with a new WordPress widget. On the left side of the tool you can enter the CSS class, widget ID and widget name. When you click the generate PHP code it will generate the base code you need to create a new widget in your WordPress site.

widget-generator

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!