How to add custom widget in WordPress

custom widget in WordPress

That base class also contains information about the functions that must be extended to get a working widget.

This is all that is needed for the first step. Once this widgetizing code is placed in your functions.php file, proceed to Step 2. The remainder of this section is explanation.

This code checks to make sure that the current version of WordPress supports widgets, and then declares an array of values that will be used to create the widgetized area in your theme. Here are the different values:

name the name of the widgetized area as displayed in the WP Admin
id a unique identifier for your widgetized area
description description of the widgetized area
before_widget the markup generated before any user-added widgets
after_widget the markup generated after any user-added widgets
before_title the markup generated before the title of any user-added widgets
after_title the markup generated after the title of any user-added widgets

So, given these parameters, our widgetizing code would result in the following output, say, if the built-in Search widget were added to our widgetized area.

Many of the default WordPress widgets leave something to be desired. Fortunately, it’s super-easy to override any of the default widgets with your own creations. For example, here is one way to replace the default Search Widget with your own version:

Now we need to create custom function to display search form using WordPress Widget function and WordPress Hook.

Put below code in active theme’s function.php file

<?php
 function custom_search_widget() { ?>
  <form action="http://localhost/283/index.php" method="get">
   <div>
    <label for="s">Site Search</label>
    <input id="s" name="s" alt="Search" type="text" />
   </div>
  </form>
  <?php } if (function_exists('register_sidebar_widget'))
  register_sidebar_widget(__('Search'), 'custom_search_widget');

 ?>

/*--add in function.php--*/ 
 if (function_exists('register_sidebar')) { 
          register_sidebar(array( 
           'name' => 'Sidebar Widgets', 
           'id'   => 'sidebar-widgets', 
           'description'   => 'Widget Area', 
           'before_widget' => '<div id="%1$s" class="widget %2$s">', 
           'after_widget'  => '</div>', 
           'before_title'  => '<h2>', 
           'after_title'   => '</h2>' 
          )); 
 }

 
 
         /* ----call this------*/

 
 if ( is_active_sidebar( 'sidebar-widgets' ) ) :
 dynamic_sidebar( 'sidebar-widgets' );
 endif;

I hope you have done it successfully.