How to Create Custom Widget WordPress - Kvcodes

Congrats, You are Subscribed to Receive Updates.

How to Create Custom Widget WordPress

How to Create Custom Widget WordPress, When we are making a realtime website or premium theme for selling, the Widget is an important feature to provide. You have to provide more widgets to perform several operations like Ads, Subscriber form, Contact form, Social sites links, etc.


Initially, We know that very well, WordPress provides most of the features to expand and create our own things. Let’s Say WordPress provides you the WP-Widget class to extend and we will make our custom features. Commonly the Widget may work like displaying details, or Ads. Here Let  me create an Example Widget for Advertisement.

class KvcodesAd300 extends WP_Widget {

 function __construct() { // Instantiate the parent object
     parent::__construct( false, 'Advertisement 300X250' );

 function widget( $args, $instance ) { // Widget output

 function update( $new_instance, $old_instance ) { // Save widget options

 function form( $instance ) { // Output admin widget options form

And With the above code, you can extend by writing some extra codes in it. The Above code we are extending the WP_Widget and creating our custom class KvcodesAd300. And we have given a title which will be used in the backend widget area to show the title of the widget.

From the Above  class we have three functions Which are used based on the need and our desire. Let’s see each in detail.


This function helps to create front-end output for the users view. Say for example, which will display our ad in the front page. If your Ad is a standard one and dont need to provide option to edit it on the backend, you can directly use the html code here to make it work on. It has two parameters, which will help us to pass variables and custom informations.

$args – handle the widget information parameters such as $before_title, $after_title, $title and $before_widget, All you need to extract and get those informations. Here is a Sample code of it.

function widget($args, $instance){
      extract( $args );
      $title = apply_filters('widget_title', $instance['title'] );
      $custom = $instance['custom'];
      if( !$custom ){
           echo $before_widget;
           echo $before_title;
           echo $title ; 
           echo $after_title;
      <div class="ad-cell">
      <?php echo do_shortcode( $instance[ 'ads300_code' ] ); ?>
      if( !$custom )
      echo $after_widget;

And thats simply the form details output. Let’s see other features of widget.


The backend widget configuration form to handle the customization feature. From our example, We have to provide option to the user to display ad as running from code or image path with some affiliate reference link. Let’s Write the function to create form data’s.

function form( $instance ) {
      $defaults = array( 'title' => __(' Advertisement', 'kvcodes') );
      $instance = wp_parse_args( (array) $instance, $defaults ); ?>

      <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title : </label>
      <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this-     >get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" type="text" />
      <label for="<?php echo $this->get_field_id( 'custom' ); ?>">Custom :</label>
      <input id="<?php echo $this->get_field_id( 'custom' ); ?>" name="<?php echo $this->get_field_name( 'custom' ); ?>" value="true" <?php if( $instance['custom'] ) echo 'checked="checked"'; ?> type="checkbox" />
      <br /><small>if this active the title will disappear</small>
      <label for="<?php echo $this->get_field_id( 'ads300_code' ); ?>">Ads <?php echo $i; ?> link : </label>
      <textarea id="<?php echo $this->get_field_id( 'ads300_code' ); ?>" name="<?php echo      $this->get_field_name( 'ads300_code' ); ?>" class="widefat" ><?php echo $instance['ads300_code']; ?></textarea>
<?php } ?>

And, we have to save the form datas in our site to retrieve it on to the front-end of the website. get_field_id helps you to create custom options , if saved already. Here we have three options title, custom, and ads300_code. Let’s save it by writing update function.


Saving the instance form data’s entered by the user. Let’s see the code here.

function update( $new_instance, $old_instance ) {
     $instance = $old_instance;
     $instance['title'] = strip_tags( $new_instance['title'] );
     $instance['custom'] = strip_tags( $new_instance['custom'] );
     $instance['ads300_code'] = $new_instance['ads300_code'] ;

     return $instance;

And, That’s it for custom Widget Creation, And we need to register an sidebar and display it on front page for better results.

Create Custom Sidebar

You need to use the below code to enable Widget and register widget on your WordPress site.

 'name' => __( 'Sidebar', 'sidebar' ),
 'id' => 'sidebar-id',
 'description' => '',
 'class' => '',
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => '</h2>' ));

And now, its available in the Admin widget area. You have to customize the code in it. After that you have to write the sidebar.php code to display the custom created widget.


Here is your sidebar.php code to display the widget on the site front pages.

dynamic_sidebar( 'sidebar-id' );

That’s it. You can create your own Widget and Sidebar with the above codes. If you really enjoy my article, Just signup for my newsletter and get regular updates from me, Also follow me on social sites to get more informations from me. And if you are interested to work with me, use contact page to get back to me.


About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, PHP and Data Analyst. Database Management Advance Level


  1. commenter


    I am using your code and it is amazing. However can you help me if i want to save those uploaded images into specific folder like: UPLOADS/CUSTOM/sample-image.jpg

    Current: the image has been saved into /wp-content/uploads/year/month/sample-image.jpg

    Here’s my code:

    $value) {
    if ($files[‘name’][$key]) {
    $file = array(
    ‘guid’ => $new_file_path,
    ‘name’ => $files[‘name’][$key],
    ‘type’ => $files[‘type’][$key],
    ‘tmp_name’ => $files[‘tmp_name’][$key],
    ‘error’ => $files[‘error’][$key],
    ‘size’ => $files[‘size’][$key]
    $_FILES = array (“kv_multiple_attachments” => $file);
    foreach ($_FILES as $file => $array) {
    $newupload = kv_handle_attachment($file,$pid);
    function kv_handle_attachment($file_handler,$post_id,$set_thu=false) {
    // check to make sure its a successful upload
    if ($_FILES[$file_handler][‘error’] !== UPLOAD_ERR_OK) __return_false();

    require_once(ABSPATH . “wp-admin” . ‘/includes/image.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/file.php’);
    require_once(ABSPATH . “wp-admin” . ‘/includes/media.php’);

    $attach_id = media_handle_upload( $file_handler, $post_id );

    if ($set_thu) set_post_thumbnail($post_id, $attach_id);
    return $attach_id;

Comment Below

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


Current ye@r *



Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.


Category Posts