How to create custom widgets. - WPTRINITY

How to create custom widgets.

In WordPress? Widgets allow you to drag and drop elements into any sidebar or widget ready area of your website. In this, we will show you how to easily create a custom WordPress widget.

What is a WordPress Widget?

WordPress widgets contain pieces of code that you can add to your website’s sidebars or widget areas.
By default, WordPress comes with a standard set of widgets that you can use with any WordPress theme.

WordPress also allows developers to create their own custom widgets. Many WordPress themes and plugins come with their own custom widgets that you can add to your sidebars.

Creating a Custom Widget in WordPress

Take a look at this code and then paste it in your site function.php to see it in action.

 // Register and load the widget
function wp_load_widget() {
register_widget( 'wp_widget' );
}
add_action( 'widgets_init', 'wp_load_widget' );
 
// Creating the widget 
class wp_widget extends WP_Widget {
 
function __construct() {
parent::__construct(
 
// Base ID of your widget
'wp_widget', 
 
// Widget name will appear in UI
__('WP Widget', 'wp_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on wp Tutorial', 'wp_widget_domain' ), ) 
);
}
 
// Creating widget front-end
 
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 __( 'Hello, World!', 'wp_widget_domain' );
echo $args['after_widget'];
}
 
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wp_widget_domain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="wptrinity" 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 
}
 
// 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 wp_widget ends here 

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

Now you can visit your website to see it in action.

Leave a Comment

Your email address will not be published. Required fields are marked *