Are you using WordPress? You can create your own custom widgets. It allows you to add non-content elements into a sidebar or any widgets area. In this article we will show How to Create Custom Widget in WordPress Step by Step.
You can add popular posts, banners, google ads, etc. There are so many default widgets. There are so many plugins online for ready-made widgets. But our mission is theme development in our own way. We want to learn how to create widgets manually.
What is a WordPress Widget?
Widget is that element who is out of content. But it’s always helpful for content. We see common widgets area is footer widgets area and sidebar widgets area.
WordPress by default comes with several widgets including categories, tag cloud, navigation menu, calendar, search bar, recent posts, and more. Widgets are really helpful for visitors. Let’s register the sidebar for the widgets area.
Register sidebar in WordPress:
To register a sidebar in WordPress we use a default hook named widgets_init. And the function name register_sidebar. Look at the algorithm.
Use this function to register sidebar:
function wpk_sidebar_register(){
$sidebar = array(
'before_widget' => '<div class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
'name'=>__( 'My sidebar', 'textdomain' ),
);
register_sidebar($sidebar);
}
add_action('widgets_init', 'wpk_sidebar_register', 50);Don’t forget to replace the text domain and widget area name with your own.
Creating a Custom Widget in WordPress:
WordPress has a built-in WordPress WP_Widget class. Every widget class should extend WordPress built-in widgets class.
WordPress widget class has up to 18 methods to create widgets. But in this article we focus following method-
__construct() : We used this method for creating widgets ID, widgets title and description.
Widget : We used this method for creating widgets output.
Form : We used this method for creating form fields for admin.
Update: We used this method for widgets value save database.
That’s class Like-
/**
* Test Widgets
*/class WPK_Widgets extends WP_Widget{
//widgets ID, title and description
function __construct(){
parent::__construct(
'wpk_widgets',
__('WPKnifer Text Area', 'textdomain'),
array( 'description' => __( 'Sample widget for Tutorial', 'textdomain' ), )
);
}
//we create output
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
if($title != ''):
echo $args['before_title'].$title.$args['after_title'];
endif;
if($instance['textarea'] != ''){
echo '<p>'.$instance['textarea'].'</p>';
}
echo $args['after_widget'];
}
//Admin options
public function form( $instance ) {
$title = (isset($instance[ 'title' ]))? $instance[ 'title' ]:'WPKnifer Title';
$textarea = (isset($instance[ 'textarea' ]))? $instance[ 'textarea' ]:'This is a test widget';
?>
<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>
<p>
<label for="<?php echo $this->get_field_id( 'textarea' ); ?>"><?php _e( 'Textarea:' ); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id( 'textarea' ); ?>" name="<?php echo $this->get_field_name( 'textarea' ); ?>"><?php echo esc_attr( $textarea ); ?></textarea>
</p> <?php
}
//Update value to database
public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = (!empty( $new_instance['title'])) ? strip_tags( $new_instance['title'] ) : ''; $instance['textarea'] = (!empty( $new_instance['textarea'])) ? strip_tags( $new_instance['textarea'] ) : ''; return $instance;
}
}
And To load the widgets on your theme. Register the widgets class.
function wpk_load_widget() { register_widget( 'WPK_Widgets' ); // If you want to more Widgets you can register in This place
}
add_action( 'widgets_init', 'wpk_load_widget' );You copy those algorithms and paste on your function.php or plugin functions file. In this example we show only two type fields. If we want we will show you more type fields.
If you copy paste this code you can see a widget was created in Appearance > Widgets named “WPKnifer Text Area”. It has two field.
Conclusion:
Widgets are an important part of WordPress. In this article, we try to show How to Create Custom Widget in WordPress Step by Step. We hope you like this article.
If you have any problems with these widgets feel free to contact us.
See More:
How to Display Popular Posts by Views in WordPress Without a Plugin
