Create custom widget in wordpress

Wordpress Tutorials, WrodPress Programmatically

Create custom widget in wordpress

custom widget in wordpress

Create custom widget in WordPress is a small function that performs a specific task. Also, you can say the widget is contents and features that we can add in a sidebar. WordPress comes with some default widgets like a tag cloud, search etc. We can easy to use a widget in WordPress and no need to write any code. Below is the best explanation for how to create a custom widget in WordPress.

The widget can easily add, removed and rearranged from Theme Customizer or Appearance -> widget in the WordPress admin area. Below is the code for creating a custom WordPress widget. You need to add below code in a functions.php file of your current theme.

/**
 * Register and load the widget
 */
function my_sample_load_widget() {
    register_widget( 'helpyouforever_widget' );
}
add_action( 'widgets_init', 'my_sample_load_widget' );
 
/**
 * Creating the widget class
 */
class helpyouforever_widget extends WP_Widget {
 
/**
 * constructor for class
 */
function __construct() {
    parent::__construct(

    // Base ID of your widget
    'helpyouforever_widget', 

    // Widget name will appear in UI
    __('Helpyouforever Widget', 'text_domain'), 

        // Widget description
        array( 'description' => __( 'Sample widget based on Helpyouforever Tutorial', 'text_domain' ), ) 
    );
}
 
/**
 * Creating code for widget front-end
 * @param type $args
 * @param type $instance
 */
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 __( 'Helpyouforever is the best learning website for WordPress', 'text_domain' );
    echo $args['after_widget'];
}

/**
 * Widget Backend 
 * @param type $instance
 */
public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
        $title = $instance[ 'title' ];
    }
    else {
        $title = __( 'Sample title', 'text_domain' );
    }
    // Widget admin form
    ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'text_domain' ); ?></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
 * @param type $new_instance
 * @param type $old_instance
 * @return type
 */
public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    return $instance;
    }
}

 

After adding this code you need to go Appearance -> widget from WordPress admin dashboard. Then you are able to see Helpyouforever widget in your widget area and you just need to drag and drop to a specific sidebar when you want to display.

Widget create

 

Below screenshot is for admin side widget options.

Widget options

We can see front side Helpyouforever widget display in sidebar area and below is the screenshot for display this widget.

Front side widget

That is all about widget in WordPress we are creating own widgets because of in some of the cases we need functionality like the display on every one of the pages with the same design and the same functionality, in that case, no need to write that same type of code multiple time on all the pages there will a widget is the best option to display same types of functionality on one page.

We can add the widget in page sidebar also so that sidebar will be common for all the pages where we have displayed that sidebar.

Nowadays theme also created from widget all the themes part will come from the widget area that is a new option for the developer but we always need to realize about speed and accuracy of the website if we think like there is best widget use then only use widget otherwise no need to use the widget.

 

8 thoughts on “Create custom widget in wordpress

  1. I’m also writing to make you be aware of of the superb discovery my friend’s child found reading your web site. She learned some pieces, which included what it’s like to have an amazing giving mindset to have the rest without problems know selected grueling things. You undoubtedly did more than readers’ desires. Thank you for supplying such warm and friendly, trustworthy, edifying and in addition easy tips on this topic to Lizeth.

  2. you are truly a good webmaster. The web site loading speed is incredible. It kind of feels that you’re doing any distinctive trick. Moreover, The contents are masterpiece. you have done a excellent process in this subject!

  3. Hey there! This is my 1st comment here so I just wanted to give a quick shout out and say I truly enjoy reading through your articles. Can you suggest any other blogs/websites/forums that deal with the same subjects? Thanks a ton!

Leave a Reply