How to Create Custom Widget WordPress |
X

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.

Introduction

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.

widget

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' ] ); ?>
      </div> 
      <?php 
      if( !$custom )
      echo $after_widget;
}

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

form

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 ); ?>

      <p>
      <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" />
      </p>
      <p>
      <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>
      </p>
      <p>
      <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>
      </p>
<?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.

update

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.

register_sidebar(array(
 '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.

Sidebar.php

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.

commenter

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

2 comments

  1. commenter

    Hi,

    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 *

Menu

Sidebar