Create a custom WordPress Widget tutorial from scratch

Creating a Custom Widget in WordPress

In this article, I will show you how to create a custom WordPress Widget tutorial with the code. There are possibly two ways to create a WordPress Widget:

1. Theme specific widget:

If you put the widget code into your theme’s functions.php then it will only be available when that particular theme is active and will be not available to use if you change the WordPress theme.

2. Plugin specific widget:

To create a plugin-specific widget you have to create a plugin first then put widget code into that plugin so it will work even if you change the WordPress theme, also it will be useful to other WordPress websites.

In this tutorial, I will create a simple custom WordPress Widget that just accepts two fields input title and message description and displays it to visitors. Take a look at this code and then paste it in your plugin to see it in the WordPress widgets section.

Custom widget WordPress code:

<?php
// Register and load the widget
function tia_load_widget() {
	register_widget( 'tia_widget' );
}
add_action( 'widgets_init', 'tia_load_widget' );

// Creating the widget
class tia_widget extends WP_Widget {

	function __construct() {
		parent::__construct(

		// Base ID of your widget
		'tia_widget',

		// Widget name will appear in UI
		__('Tech In Area Widget', 'tia_widget_domain'),

		// Widget description
		array( 'description' => __( 'Sample widget based on Tech In Area Tutorial', 'tia_widget_domain' ), )
		);
	}

	// Creating widget front-end

	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );
		$description = apply_filters( 'widget_description', $instance['description'] );

		// before and after widget arguments are defined by themes
		echo $args['before_widget'];
		if ( ! empty( $title ) )
		echo $args['before_title'] . $title . $args['after_title'];
		
		if ( ! empty( $description ) )
		
		// This is where you run the code and display the output
		echo __( $description, 'tia_widget_domain' );
		echo $args['after_widget'];
	}

	// Widget Backend
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'New title', 'tia_widget_domain' );
		}
		
		$description = "";
		if ( isset( $instance[ 'description' ] ) ) {
			$description = $instance[ 'description' ];
		}
		// Widget admin form
		?>
		<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 ); ?>" />
			
			<label for="<?php echo $this->get_field_id( 'description' ); ?>"><?php _e( 'Description:' ); ?></label>
			<textarea class="widefat" id="<?php echo $this->get_field_id( 'description' ); ?>" name="<?php echo $this->get_field_name( 'description' ); ?>"><?php echo esc_attr( $description ); ?></textarea>
		</p>
		<?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'] ) : '';
		$instance['description'] = ( ! empty( $new_instance['description'] ) ) ? strip_tags( $new_instance['description'] ) : '';
		return $instance;
	}
} 
// Class tia_widget ends here
?>

In the above code, we have extended the WordPress’s Widget Class and used its three functions widget(), form(), and update(). This structure is necessary to create a WordPress widget.

After adding the code you need to head over to Appearance » Widgets page. You will notice the new Tech In Area Widget in the list of available widgets. You need to drag and drop this widget to a sidebar.

For more details on WordPress widget class and function please visit here

Check out my blog on how to create a WordPress theme and plugin.

Comments are closed, but trackbacks and pingbacks are open.