{"id":1751,"date":"2018-07-02T06:59:36","date_gmt":"2018-07-02T01:14:36","guid":{"rendered":"https:\/\/themebeez.com\/?p=1751"},"modified":"2020-09-17T08:58:12","modified_gmt":"2020-09-17T03:13:12","slug":"how-to-create-custom-widget-in-wordpress","status":"publish","type":"post","link":"https:\/\/themebeez.com\/blog\/how-to-create-custom-widget-in-wordpress\/","title":{"rendered":"How To Create Custom Widget in WordPress"},"content":{"rendered":"\n<p>Looking to create a create custom widget in WordPress ? Let&#8217;s start! As you all may know,widgets in WordPress are the components by the use of which one can add contents and features in the site. Widgets are placed inside defined widget areas such as sidebar, footer, header etc.<\/p>\n\n\n\n<p>For example, you may find advertisement on the header of websites of news portal, online magazine and some blogging websites. The advertisement is actually a widget and the part of header where the advertisement is displayed is actually a widget area.<\/p>\n\n\n\n<p>By default WordPress comes with standard widgets such as Search, Calendar, Recent Posts, Recent Comments etc&#8230; All the WordPress widget appear in the user&#8217;s Administration Screen at <strong>Appearance &gt; Widgets<\/strong>. In WordPress version 4.9.6, there are altogether 17 widgets. They are: Archives, Audio, Calendar, Categories, Custom HTML, Gallery, Image, Meta, Navigation Menus, Pages, Recent Comments, Recent Posts, RSS, Search, Tag Cloud, Text and Video.<\/p>\n\n\n\n<p>If you are using a WordPress theme for your site, then you might find other widgets except the default ones. You&#8217;ll also find different widget areas where you can place widgets as your wish.<\/p>\n\n\n\n<p>Today however, we are discussing about creation of custom widget. So let&#8217;s hop into creating a widget.<\/p>\n\n\n\n<p>The first thing to know is that you can write you widget creation code in functions.php file or some other file which you can later include in functions.php file.<\/p>\n\n\n\n<p>To create a widget, we need to create a class which extends the core&nbsp;class of WordPress called WP_Widget. The class contains four functions, <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>__construct(), widget(), form() and update().<\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>In function __construct(), we define the base ID, name, description etc&#8230; of the widget. The base ID uniquely identifies the widget. The name sets, the name of the widget and description <g class=\"gr_ gr_14 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Grammar multiReplace\" id=\"14\" data-gr-id=\"14\">sets<\/g> the short description of widget describing the purpose of the widget.<\/li><li>In function widget(),&nbsp; we write the markup for displaying widget contents.<\/li><li>Then In function form(), we create form using which contents are created.<\/li><li>In function update(), we save or update the contents created using form.<\/li><\/ul>\n\n\n\n<p>Now let&#8217;s create a text widget similar to the default Text widget in WordPress. The PHP code need for the Text widget is as below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Name_of_Widget extends WP_Widget {\n\n    function __construct() {\n        parent::__construct(\n            'widget-id',  \/\/ Base ID\n           __( 'Name of Widget', 'text_domain' )   \/\/ Name of Widget\n        );\n    }\n\n    public $args = array(\n        'before_title'  => '&lt;h4 class=\"widget-title\">',\n        'after_title'   => '&lt;\/h4>',\n        'before_widget' => '&lt;div class=\"widget-wrap\">',\n        'after_widget'  => '&lt;\/div>&lt;\/div>'\n    );\n\n    public function widget( $args, $instance ) {\n        echo $args&#91;'before_widget'];\n        if ( ! empty( $instance&#91;'title'] ) ) {\n            echo $args&#91;'before_title'] . apply_filters( 'widget_title', $instance&#91;'title'] ) . $args&#91;'after_title'];\n        } \n        echo '&lt;div class=\"textwidget\">';\n        echo esc_html__( $instance&#91;'text'], 'text_domain' );\n        echo '&lt;\/div>';\n        echo $args&#91;'after_widget'];\n    }\n\n    public function form( $instance ) {\n        $title = ! empty( $instance&#91;'title'] ) ? $instance&#91;'title'] : esc_html__( '', 'text_domain' );\n        $text = ! empty( $instance&#91;'text'] ) ? $instance&#91;'text'] : esc_html__( '', 'text_domain' );\n        ?>\n        &lt;p>\n            &lt;label for=\"&lt;?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>\">&lt;?php esc_attr_e( 'Title:', 'text_domain' ); ?>&lt;\/label>\n            &lt;input class=\"widefat\" id=\"&lt;?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>\" name=\"&lt;?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>\" type=\"text\" value=\"&lt;?php echo esc_attr( $title ); ?>\">\n        &lt;\/p>\n        &lt;p>\n            &lt;textarea class=\"widefat\" id=\"&lt;?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>\" name=\"&lt;?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>\" type=\"text\" cols=\"30\" rows=\"10\">&lt;?php echo esc_attr( $text ); ?>&lt;\/textarea>\n        &lt;\/p>\n        &lt;?php\n    }\n\n    public function update( $new_instance, $old_instance ) {\n        $instance = array();\n        $instance&#91;'title'] = ( !empty( $new_instance&#91;'title'] ) ) ? sanitize_text_field( $new_instance&#91;'title'] ) : '';\n        $instance&#91;'text'] = ( !empty( $new_instance&#91;'text'] ) ) ? sanitize_text_field( $new_instance&#91;'text'] ) : '';\n        return $instance;\n    }\n\n}<\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Note: Before saving or updating unsafe data, unsafe data must be properly sanitized i.e. data must be validated. And while displaying data, proper escaping must be done.<\/p>\n\n\n\n<p>After creating the custom widget, it should be registered. Otherwise it won\u2019t appear in your Administration Screen at Appearance &gt; Widgets. To register the custom widget, following code is needed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'widgets_init', function() {\n    register_widget( 'Name_of_Widget' );\n});<\/code><\/pre>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>In this way, you can create <g class=\"gr_ gr_5 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep\" id=\"5\" data-gr-id=\"5\">custom<\/g> widget in WordPress. If you are looking for <g class=\"gr_ gr_6 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep\" id=\"6\" data-gr-id=\"6\">best<\/g> free <g class=\"gr_ gr_4 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"4\" data-gr-id=\"4\">wordpress<\/g> themes of 2018 that already have great widgets &amp; features then make sure you check this article for\u00a0<a href=\"https:\/\/themebeez.com\/blog\/best-free-wordpress-themes\/\" class=\"rank-math-link\"><g class=\"gr_ gr_7 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins replaceWithoutSep\" id=\"7\" data-gr-id=\"7\">best<\/g> free WordPress themes<\/a>.<\/p>\n\n\n\n<p>If you liked this article, then please share it.<\/p>\n\n\n\n<p>And if you have any questions, then comment below. You can follow us on <a href=\"https:\/\/www.facebook.com\/themebeez\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">Facebook<\/a> for more updates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Looking to create a create custom widget in WordPress ? Let&#8217;s start! As you all&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5158,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[29,30,13],"class_list":["post-1751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorial","tag-custom-widget","tag-widget","tag-wordpress"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts\/1751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/comments?post=1751"}],"version-history":[{"count":4,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts\/1751\/revisions"}],"predecessor-version":[{"id":10105,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts\/1751\/revisions\/10105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/media\/5158"}],"wp:attachment":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/media?parent=1751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/categories?post=1751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/tags?post=1751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}