how to make custom widgets in wordpress

How to Create a Custom WordPress Widget

If you search for how to create widgets in WordPress, this article is for you. The main purpose of widgets consists of adding new elements to your site. We will tell you about an easy way to install your own WP-widget. We also suggest you to try to add this application using our code. Besides that, we will explain some of the nuances associated with the added widgets.

Appointment of WordPress widget

All that you are adding to your web pages look like some parts of the code. And custom WordPress widget helps to add them. If you want to use this application, you should have one or more sidebars. In this instance, there are a lot of special blocks you can use as elements of your site dragging them with a mouse.

The default mode of WP contains ordinary kit of widgets. They can be used with many WP-themes. Even beginner can add WP-widgets. But you also have the possibility as webmaster to create custom WordPress widget.

custom wordpress widget
How to Create Widgets in WordPress

You do not write any code, because website themes are included custom widgets. All you need is a sidebar, where you will add them. There are contact, login and application form, a gallery of photos etc. Let’s try to do it without problems now!

We think you will be interested in another one of our article instructions on how to convert HTML to WordPress.

Instruction for creating a custom widget

You should do one step before you will start to create own custom widgets. There are two ways to do it:

  • To attach a site-specific plugin. You need it because the next step is pasting the code in the plugin area.
  • To use functions.php file of WP-theme. This action is for a user, who want to paste code directly. But that’s only possible in some themes.

And now we make a widget, which will greet visitors. The code is placed below.

// 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
__(‘DebBrother Widget', 'wpb_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on DebBrother 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

Then we can start:

  1. Copy and paste the code in a functions.php file or site-specific plugin.
  2. Visit subdivision “Widgets page”. It is located in division “Appearance”.
  3. Find “Custom menu” in the catalog of available widgets. It is the new DebBrother widget, which you should place to a sidebar.
  4. See on your site. New greeting widget is there.
create custom widget wordpress
How to Create Custom Sidebar Widget in WordPress

The second view on the custom widget code

Let’s start to study our widget code. First of all ‘wpb_widget’ was registered by us. The next step was to load this custom app. We also found out why you needed a widget and how to place it on the server. Finally, we ascertained how to change the program in a manual mode.

But the attentive reader will have noticed that we did not tell about ‘wpb_text_domain’ and its goal.

Translation and localization are used in WordPress with gettext. We need ‘wpb_text_domain’ because it opens access for translation line. Special settings are available for the custom WP-widget. You may exclude ‘wpb_text_domain’ and place your own text domain of theme.

We will glad if our memo will be useful for you when you’ll try to add custom WP-widget on your web pages. It is simple.

1 Star2 Stars3 Stars4 Stars5 Stars (5.00 / 5, votes: 1)
Loading...

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>