How to Create Or Delete a Custom WordPress Widget

You're looking for how to create widgets on wordpress ?. All right, please continue reading the page How to Create Or Delete a Custom WordPress Widget. Widgets allow you to drag and drop elements into any sidebar or widget ready area of your website. In this article, 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 ready areas. Think of them as modules that you can use to add different elements by using a simple drag and drop interface.

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.

For example, you can add a contact form, a custom login form, or a photo gallery to a sidebar without writing any code.

Having said that, let’s see how to easily create your own custom widgets in WordPress. 

Creating a Custom Widget in WordPress

Before we get started, it would be best if you create a site-specific plugin where you will be pasting the widget code from this tutorial.

You can also paste the code in your theme’s functions.php file. However, it will only be available when that particular theme is active.

In this tutorial, we will create a simple widget that just greets visitors. Take a look at this code and then paste it in your site-specific plugin to see it in action.

CODE

[// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

// Creating the widget
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(

// Base ID of your widget
'wpb_widget',

// Widget name will appear in UI
__('W3zetmedia Widget', 'wpb_widget_domain'),

// Widget description
array( 'description' => __( 'Sample widget based on W3zetmedia Tutorial', 'wpb_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!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
      
// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// 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 ); ?>" />
</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 wpb_widget ends here
]

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

Location:

Share :