{"id":594,"date":"2015-05-17T20:24:52","date_gmt":"2015-05-17T20:24:52","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=594"},"modified":"2016-04-22T17:40:16","modified_gmt":"2016-04-22T17:40:16","slug":"create-custom-wordpress-widget-from-scratch","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/create-custom-wordpress-widget-from-scratch\/","title":{"rendered":"Create Custom WordPress Widget from Scratch"},"content":{"rendered":"

WordPress Widgets is used to add content and features to Sidebar. Some default widgets are come with the WordPress (Search, Categories, Tag Cloud etc.). We can also create custom widgets as per our needs.<\/p>\n

Today we will learn how to create custom WordPress widgets. For testing purpose we will create an Author Profile Widget. Author Widget would be used to display author information (Picture, Name, Introduction, Location, and Email) at the sidebar. Follow the step by step instructions given below.<\/p>\n

<\/span> Create a folder named widgets<\/code> into the current theme directory.<\/p>\n

<\/span> Create a PHP file named author-widget.php<\/code>.<\/p>\n

<\/span> Provide widget details under the comment tags (It is not mandatory).<\/p>\n

\/**
 * Plugin Name: Author Widget
 * Plugin URI: create-custom-wordpress-widget-from-scratch
 * Description: Provides a widget for display blog author information
 * Version: 1.0
 * Author: CodexWorld
 * Author URI: http:\/\/www.codexworld.com
 *\/<\/span><\/span><\/pre>\n
<\/span> Using the add_action()<\/code> function we will hook codexworld_author_widget()<\/code> to widgets_init<\/code> action. codexworld_author_widget()<\/code> function register a widget with Codexworld_Author_Widget<\/code> class.<\/p>\n
\/\/ load widget
<\/span>add_action<\/span>( <\/span>'widgets_init'<\/span>, <\/span>'codexworld_author_widget' <\/span>);

<\/span>\/\/ Register widget
<\/span>function <\/span>codexworld_author_widget<\/span>() {
    <\/span>register_widget<\/span>( <\/span>'Codexworld_Author_Widget' <\/span>);
}<\/span><\/span><\/pre>\n
<\/span> Codexworld_Author_Widget<\/code> class extends WP_Widget<\/code>.<\/p>\n
\/\/ Widget class
<\/span>class <\/span>Codexworld_Author_Widget <\/span>extends <\/span>WP_Widget <\/span>{

}<\/span><\/span><\/pre>\n
<\/span> Into the Codexworld_Author_Widget<\/code> class, codexworld_author_widget()<\/code> function will used to create custom widget.<\/p>\n
function <\/span>codexworld_author_widget<\/span>() {
    
    <\/span>\/\/ Widget settings
    <\/span>$widget_ops <\/span>= array (
        <\/span>'classname' <\/span>=> <\/span>'codexworld_author_widget'<\/span>,
        <\/span>'description' <\/span>=> <\/span>__<\/span>(<\/span>'A widget for display author information'<\/span>)
    );

    <\/span>\/\/ Widget control settings
    <\/span>$control_ops <\/span>= array (
        <\/span>'width' <\/span>=> <\/span>300<\/span>,
        <\/span>'height' <\/span>=> <\/span>350<\/span>,
        <\/span>'id_base' <\/span>=> <\/span>'codexworld_author_widget'
    <\/span>);

    <\/span>\/\/ Create the widget
    <\/span>$this<\/span>-><\/span>WP_Widget<\/span>( <\/span>'codexworld_author_widget'<\/span>, <\/span>__<\/span>(<\/span>'Author Profile'<\/span>), <\/span>$widget_ops<\/span>, <\/span>$control_ops <\/span>);
    
}<\/span><\/span><\/pre>\n
<\/span> We will use widget()<\/code> function for display the widget content at the sidebar.<\/p>\n
\/**
 * Display Widget
 *\/
<\/span>function <\/span>widget<\/span>( <\/span>$args<\/span>, <\/span>$instance <\/span>) {
    <\/span>extract<\/span>( <\/span>$args <\/span>);

    <\/span>\/\/ variables from the widget settings
    <\/span>$title <\/span>= <\/span>apply_filters<\/span>(<\/span>'widget_title'<\/span>, <\/span>$instance<\/span>[<\/span>'title'<\/span>] );
    <\/span>$name <\/span>= <\/span>$instance<\/span>[<\/span>'name'<\/span>];
    <\/span>$picture <\/span>= <\/span>$instance<\/span>[<\/span>'picture'<\/span>];
    <\/span>$introduction <\/span>= <\/span>$instance<\/span>[<\/span>'introduction'<\/span>];
    <\/span>$location <\/span>= <\/span>$instance<\/span>[<\/span>'location'<\/span>];
    <\/span>$email <\/span>= <\/span>$instance<\/span>[<\/span>'email'<\/span>];

    <\/span>\/\/ Before widget (defined by theme functions file)
    <\/span>echo <\/span>$before_widget<\/span>;

    <\/span>\/\/ Display widget title
    <\/span>if ( <\/span>$title <\/span>)
        echo <\/span>$before_title <\/span>. <\/span>$title <\/span>. <\/span>$after_title<\/span>;
    
    <\/span>\/\/ Display author picture
    <\/span>echo <\/span>'<div class=\"profile-pic\">'<\/span>;
    if ( <\/span>$picture <\/span>)    
        echo <\/span>'<img src=\"'<\/span>.<\/span>$picture<\/span>.<\/span>'\" alt=\"'<\/span>.<\/span>$name<\/span>.<\/span>'\\'s Picture\" title=\"'<\/span>.<\/span>$name<\/span>.<\/span>'\"\/>'<\/span>;
    echo <\/span>'<\/div>'<\/span>;
        
    echo <\/span>'<div class=\"profile_meta\">'<\/span>;
    <\/span>\/\/ Display the author name
    <\/span>if ( <\/span>$name <\/span>)
        echo <\/span>'<span><b>'<\/span>.<\/span>$name<\/span>.<\/span>'<\/b><\/span><br\/>'<\/span>;
    
    <\/span>\/\/ Display author introduction
    <\/span>if ( <\/span>$introduction <\/span>)
        echo <\/span>'<span>'<\/span>.<\/span>$introduction<\/span>.<\/span>'<\/span><br\/>'<\/span>;\r\n
        
    <\/span>\/\/ Display author location
    <\/span>if ( <\/span>$location <\/span>)
        echo <\/span>'<span>'<\/span>.<\/span>$location<\/span>.<\/span>'<\/span><br\/>'<\/span>;
        
    <\/span>\/\/ Display author email
    <\/span>if ( <\/span>$email <\/span>)
        echo <\/span>'<span><a href=\"mailto:'<\/span>.<\/span>$email<\/span>.<\/span>'\">'<\/span>.<\/span>str_replace<\/span>(<\/span>\"@\"<\/span>,<\/span>'[at]'<\/span>,<\/span>$email<\/span>).<\/span>'<\/a><\/span><br\/>'<\/span>;
    echo <\/span>'<\/div>'<\/span>;

    <\/span>\/\/ After widget (defined by theme functions file)
    <\/span>echo <\/span>$after_widget<\/span>;
}<\/span><\/span><\/pre>\n
<\/span> update()<\/code> function helps to update the widget data.<\/p>\n
\/**
 * Update Widget
 *\/
<\/span>function <\/span>update<\/span>( <\/span>$new_instance<\/span>, <\/span>$old_instance <\/span>) {
    <\/span>$instance <\/span>= <\/span>$old_instance<\/span>;
    
    <\/span>\/\/ Strip tags to remove HTML (important for text inputs)
    <\/span>$instance<\/span>[<\/span>'title'<\/span>] = <\/span>strip_tags<\/span>(<\/span>$new_instance<\/span>[<\/span>'title'<\/span>]);
    
    <\/span>\/\/ No need to strip tags
    <\/span>$instance<\/span>[<\/span>'name'<\/span>] = <\/span>$new_instance<\/span>[<\/span>'name'<\/span>];
    <\/span>$instance<\/span>[<\/span>'picture'<\/span>] = <\/span>$new_instance<\/span>[<\/span>'picture'<\/span>];
    <\/span>$instance<\/span>[<\/span>'introduction'<\/span>] = <\/span>$new_instance<\/span>[<\/span>'introduction'<\/span>];
    <\/span>$instance<\/span>[<\/span>'location'<\/span>] = <\/span>$new_instance<\/span>[<\/span>'location'<\/span>];
    <\/span>$instance<\/span>[<\/span>'email'<\/span>] = <\/span>$new_instance<\/span>[<\/span>'email'<\/span>];
    
    return <\/span>$instance<\/span>;
}<\/span><\/span><\/pre>\n
<\/span> form()<\/code> function is used to appearing the widget form at the wp-admin Widgets area<\/b>.<\/p>\n
\/**
 * Displays the widget settings controls on the widget panel
 *\/
<\/span>function <\/span>form<\/span>( <\/span>$instance <\/span>) {

    <\/span>\/\/ Set up some default widget settings
    <\/span>$defaults <\/span>= array(\r\n
        <\/span>'title' <\/span>=> <\/span>''<\/span>,
        <\/span>'picture' <\/span>=> <\/span>''<\/span>,
        <\/span>'name' <\/span>=> <\/span>''<\/span>,
        <\/span>'introduction' <\/span>=> <\/span>''<\/span>,
        <\/span>'location' <\/span>=> <\/span>''<\/span>,
        <\/span>'email' <\/span>=> <\/span>''<\/span>,
    );
        
    <\/span>$instance <\/span>= <\/span>wp_parse_args<\/span>( (array) <\/span>$instance<\/span>, <\/span>$defaults <\/span>); <\/span>?>
<\/span>\r\n    <!-- Widget Title: Text Input --><\/span>\r\n    <p<\/span>>\r\n        <label<\/span> for<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'title'<\/span> ); ?><\/span>\"<\/span>><?php _e('Title:'<\/span>) ?><\/span><\/label<\/span>>\r\n        <input<\/span> class<\/span>=\"widefat\"<\/span> id<\/span>=<\/span>\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'title'<\/span> ); ?><\/span>\"<\/span> name<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_name( 'title'<\/span> ); ?><\/span>\"<\/span> value<\/span>=\"<?php echo<\/span> $instance<\/span>['title'<\/span>]; ?><\/span>\"<\/span> \/>\r\n    <\/p<\/span>>\r\n\r\n    <!-- Picture URL: Text Input --><\/span>\r\n    <p<\/span>>\r\n        <label<\/span> for<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'picture'<\/span> ); ?><\/span>\"<\/span>><?php _e('Picture URL:'<\/span>) ?><\/span><\/label<\/span>>\r\n        <input<\/span> class<\/span>=\"widefat\"<\/span> id<\/span>=<\/span>\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'picture'<\/span> ); ?><\/span>\"<\/span> name<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_name( 'picture'<\/span> ); ?><\/span>\"<\/span> value<\/span>=\"<?php echo<\/span> $instance<\/span>['picture'<\/span>]; ?><\/span>\"<\/span> \/>\r\n    <\/p<\/span>>\r\n    \r\n    <!-- Name: Text Input --><\/span>\r\n    <p<\/span>>\r\n        <label<\/span> for<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'name'<\/span> ); ?><\/span>\"<\/span>><?php _e('Name:'<\/span>) ?><\/span><\/label<\/span>>\r\n        <input<\/span> type<\/span>=\"text\"<\/span> class<\/span>=\"widefat\"<\/span> id<\/span>=<\/span>\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'name'<\/span> ); ?><\/span>\"<\/span> name<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_name( 'name'<\/span> ); ?><\/span>\"<\/span> value<\/span>=\"<?php echo<\/span> $instance<\/span>['name'<\/span>]; ?><\/span>\"<\/span> \/>\r\n    <\/p<\/span>>\r\n    \r\n    <!-- Introduction: Text Input --><\/span>\r\n    <p<\/span>>\r\n        <label<\/span> for<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'introduction'<\/span> ); ?><\/span>\"<\/span>><?php _e('Introduction:'<\/span>) ?><\/span><\/label<\/span>>\r\n        <input<\/span> type<\/span>=\"text\"<\/span> class<\/span>=\"widefat\"<\/span> id<\/span>=<\/span>\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'introduction'<\/span> ); ?><\/span>\"<\/span> name<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_name( 'introduction'<\/span> ); ?><\/span>\"<\/span> value<\/span>=\"<?php echo<\/span> $instance<\/span>['introduction'<\/span>]; ?><\/span>\"<\/span> \/>\r\n    <\/p<\/span>>\r\n    \r\n    <!-- Location: Text Input --><\/span>\r\n    <p<\/span>>\r\n        <label<\/span> for<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'location'<\/span> ); ?><\/span>\"<\/span>><?php _e('Location:'<\/span>) ?><\/span><\/label<\/span>>\r\n        <input<\/span> type<\/span>=\"text\"<\/span> class<\/span>=\"widefat\"<\/span> id<\/span>=<\/span>\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'location'<\/span> ); ?><\/span>\"<\/span> name<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_name( 'location'<\/span> ); ?><\/span>\"<\/span> value<\/span>=\"<?php echo<\/span> $instance<\/span>['location'<\/span>]; ?><\/span>\"<\/span> \/>\r\n    <\/p<\/span>>\r\n    \r\n    <!-- Email: Text Input --><\/span>\r\n    <p<\/span>>\r\n        <label<\/span> for<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'email'<\/span> ); ?><\/span>\"<\/span>><?php _e('Email:'<\/span>) ?><\/span><\/label<\/span>>\r\n        <input<\/span> type<\/span>=\"text\"<\/span> class<\/span>=\"widefat\"<\/span> id<\/span>=<\/span>\"<?php echo<\/span> $this<\/span>-><\/span>get_field_id( 'email'<\/span> ); ?><\/span>\"<\/span> name<\/span>=\"<?php echo<\/span> $this<\/span>-><\/span>get_field_name( 'email'<\/span> ); ?><\/span>\"<\/span> value<\/span>=\"<?php echo<\/span> $instance<\/span>['email'<\/span>]; ?><\/span>\"<\/span> \/>\r\n    <\/p<\/span>>
<?php
<\/span>}<\/span><\/span><\/pre>\n
<\/span> You can get the full script of the author-widget.php<\/code> from the below Download Source Code link<\/i>.<\/p>\n
<\/span> Now open the function.php<\/code> file of current theme and include the author-widget.php<\/code> file by the following code.<\/p>\n
\/**
 * Add the Custom Author Profile Widget
 *\/
<\/span>require <\/span>get_template_directory<\/span>() . <\/span>'\/widgets\/author-widget.php'<\/span>;<\/span><\/span><\/pre>\n
<\/span> Go to the WP Admin Widgets<\/b> section (http:\/\/localhost\/nitya\/wordpress\/wp-admin\/widgets.php<\/a>).  <\/p>\n