Monday 24 August 2015

FadeIn FadeOut divs using Next Previous button using jQuery

Hello,

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
    <script type="">
    $(document).ready(function(){
       
        $(".alldivs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".alldivs div:visible").next().length != 0)
            $(".alldivs div:visible").next().fadeIn(1000).prev().fadeOut(1000);
        else {
            $(".alldivs div:visible").fadeOut(1000);
            $(".alldivs div:first").fadeIn(1000);
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".alldivs div:visible").prev().length != 0)
            $(".alldivs div:visible").prev().fadeIn().next().fadeOut(1000);
        else {
            $(".alldivs div:visible").fadeOut(1000);
            $(".alldivs div:last").fadeIn(1000);
        }
        return false;
    });
       
       

   
});
    </script>
</head>

<body>

FadeIn FadeOut divs using Next Previous button using jQuery
<div class="alldivs">
     <div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

</body>
</html>

Show Hide divs using Next Previous Button using Jquery

Hello,

You want to Make Show And Hide Your div content using jquery. Next and Previous.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
    <script type="">
    $(document).ready(function(){
       
        $(".alldivs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".alldivs div:visible").next().length != 0)
            $(".alldivs div:visible").next().show().prev().hide();
        else {
            $(".alldivs div:visible").hide();
            $(".alldivs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".alldivs div:visible").prev().length != 0)
            $(".alldivs div:visible").prev().show().next().hide();
        else {
            $(".alldivs div:visible").hide();
            $(".alldivs div:last").show();
        }
        return false;
    });
       
       

   
});
    </script>
</head>

<body>

show hide divs using Next Previous button using jQuery
<div class="alldivs">
     <div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
     <div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

</body>
</html>

Sunday 16 August 2015

Insert Post Data FrontEnd side with Custom Field and Validation in Wordpress

Hello,

First create template file in in your wordpress theme.

<?php /* Template Name: Account*/ ?>

after go to pages in wordpress create page in  your page and set template Account in wordpress.

after go to your post when you added insert data in frond end side. go to screen option
and checked custom fields.

here I am create email address,first name,last name,and phone.

you can also inset data in texonomy.

<?php /* Template Name: Account */

get_header(); ?>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#appoment_date').datepicker({
        dateFormat : 'yy-mm-dd'
    });
    jQuery("#appmoment_form").validate({
   
        // Specify the validation rules
        rules: {
         
            f_name: "required",
            l_name: "required",
            email: {
                required: true,
                email: true
               
            },
            time_appoment:"required",
            c_email:{
               
                 equalTo: '#email'
            },
            appoment_date:{
                 required: true,
                date: true
            },
            phone:"required",
             center_term: {
                required: true,
            },
            casetype: {
                required: true,
            }
         
         
        },
       
        // Specify the validation error messages
        messages: {
            f_name: "Please enter your first name",
            l_name: "Please enter your last name",
            email: "Please enter a valid email address",
            appoment_date:{
                required:"Please enter date",
                date:"Please validate date"
            },
            phone:"Please enter Phone Number",
            center_term:"Please select the center",
            casetype:"Please Select Reson for visist",
            c_email:"Please Conform Email Address"
        },
       
        submitHandler: function(form) {
            form.submit();
        }
    });
    jQuery('#appoment_date').change(function () {alert('changed');
    if (document.getElementById("appoment_date").value === "") {
                document.getElementById("time_appoment").disabled='true';
    } else {
    document.getElementById("time_appoment").disabled='';
 
  }

  });
});
</script>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">

<?php
// Start the loop.
        /*
while ( have_posts() ) : the_post();

// Include the page content template.
get_template_part( 'content', 'page' );

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

// End the loop.
endwhile;*/
?>
       
        <form method="post" id="appmoment_form">
       
        <?php $terms = $categories = get_terms( 'your-custom-texonomy', 'orderby=count&hide_empty=0' ); ?>
        <select name="center_term" id="center_term">
        <option value="">Select a Center</option>
      <?php   foreach ( $terms as $term ) { ?>
        <option value="<?php echo $term->name ?>"><?php echo $term->name ?></option>
        <?php } ?>
     
        </select>
       
       
      <input type="text" id="appoment_date" name="appoment_date" placeholder="Select a date" />
     
      <select name="time_appoment" id="time_appoment" disabled="disabled">
      <option>Select a Available Time</option>
      <option value="12PM to 1 AM">12PM to 1 AM</option>
      <option value="">1PM to 2 AM</option>
      <option value="">2PM to 3 AM</option>
      <option>3PM to 4 AM</option>
      <option>4PM to 5 AM</option>
      <option>5PM to 6 AM</option>
      <option>6PM to 7 AM</option>
      <option>7PM to 8 AM</option>
      <option>8PM to 9 AM</option>
      </select>
      <input type="text" name="f_name" id="f_name" placeholder="First Name" />
      <input type="text" name="l_name" id="l_name" placeholder="Last Name" />
      <input type="text" name="email" id="email" placeholder="Email Address" />
      <input type="text" name="c_email" id="" placeholder="Conform Email Address" />
      <input type="text" name="phone" id="phone" placeholder="Phone" />
      <?php $texonomys1 = $categories = get_terms( 'your-custom-texonomy', 'orderby=count&hide_empty=0' ); ?>
      <select name="casetype" id="casetype">
      <option value="">Reason for Visit</option>
      <?php   foreach ( $texonomys1 as $texonomy1 ) { ?>
       <option value="<?php echo $texonomy1->name ?>"><?php echo $texonomy1->name ?></option>
       <?php } ?>
      </select>
      <input type="submit" name="submit" />
        </form>
        <?php
       if (isset( $_POST['submit'] ) ) {
// create post object with the form values
                    $appoment_date =    $_POST['appoment_date'];
                   
                    echo $appoment_date;
                 
                   
                    $firstname = $_POST['f_name'];
                    $lastname = $_POST['l_name'];
                    $email_address = $_POST['email'];
                    $phone = $_POST['phone'];
                    $term = $_POST['center_term'];
                    $texonomy1 = $_POST['casetype'];

        $my_cptpost_args = array(
           
            'post_title' => 'test',
            'post_status'   => 'publish',
            'post_type' => "pgs_appointments",
            'post_date' => $appoment_date,
            'tax_input'    => array( 'your-custom-texonomy' => array( $texonomy1 ),'your-custom-texonomy' => array( $term ) ) //here insert two texonomy data.
           
           
        );
        $email_address = sanitize_email($email_address);
        $first_name = sanitize_meta( 'first_name', $first_name, 'user' );
        $lastname = sanitize_meta( 'lastname', $lastname, 'user' );
        $email_address = sanitize_meta( 'email_address', $email_address, 'user' );
        $phone = sanitize_meta( 'phone', $phone, 'user' );

// insert the post into the database
            $cpt_id = wp_insert_post($my_cptpost_args, $wp_error );
         add_post_meta($cpt_id, 'first_name', $first_name, true);//here insert two custom field data.
         add_post_meta($cpt_id, 'email_address', $email_address, true);//here insert two custom field data.
         add_post_meta($cpt_id, 'lastname', $lastname, true); //here insert two custom field data..
         add_post_meta($cpt_id, 'phone', $phone, true);//here insert two custom field data.
       
           
        }
        ?>
   
</main><!-- .site-main -->
</div><!-- .content-area -->

<?php get_footer(); ?>


Thursday 6 August 2015

Add Jquery Datepicker 6 Month Plus From Current Date Example

Hello,

Some time you want to add that you can display date from current  to 6 month any other month
and other are disable than i have do in my example. you can set maxDate parameter in you
datepicker. if you want to disable current before all date then set minDate:'0'  you can check
below example i think it can help you. remove all parameter than it will display simple datepicker.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({ minDate:'0',maxDate: '+6m' });
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"/></p>



</body>
</html>

Please check that example and see it it can use full.

Monday 27 July 2015

Order By Custom Field Using Meta Key In Wordpress

Hello

Order By Custom Field Using Meta Key In Wordpress

In some case you can to get post value using meta box in order by ascending order and descending order

<?php

$dancequery = array('post_type'=> 'dance',
'tax_query' => array(
array('taxonomy' => 'hip_hop','field' => 'id','terms' =>'hip_hop',),
),
'posts_per_page'=>12,
'post_status' => 'publish',
'paged' => $paged ,
'meta_key' => 'price',
'orderby' => 'meta_value_num',
'order' => 'DESC'
);
query_posts( $dancequery );

?>

if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>




  • check this type code. price yon can add your meta key create in post.
    i am also give example with taxonomy you can get value form particular taxonomy and particular
    meta key order by i have meta key price.

    it's working proper check out.

    Monday 20 July 2015

    How To Create Wordpress Theme

    Hello

    Here I want Create Example of Wordpress theme.

    You want to create your own wordpress theme then you can know create basic file.

    1)header.php
    2)footer.php
    3)style.css //Most Impotant
    4)index.php
    5)sidebar.php //optional
    6)functions.php // optional

    this 6 file needed for custom theme in Wordpress

     I am Create Wordpress Theme My Own I give Example for that you can change and
    and create your own.

    1) header.php

    <html>
    <head>
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"/>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
    <a id="logo"href="<?php echo site_url(); ?>"><h1><?php bloginfo('name'); ?></h1></a>

    <img id="header_image" src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
    </div>
    <nav>

      <?php wp_nav_menu(); ?>

    </nav>

    2)footer.php

    <div id="footer">
    <h1>FOOTER</h1>
    <?php if (  dynamic_sidebar( 'widgetized-area' ) ) : ?>
    <?php endif; ?>
    </div>
    </div>
    </body>
    </html>

    3)sidebar.php

    <div id="sidebar">
    <?php if (  dynamic_sidebar( 'footer-id' ) ) : ?>
    <?php endif; ?>
    </div>

    4) index.php

    <?php get_header(); ?>
    <div id="main">
    <div id="content">
    <h1>Main Area</h1>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <h4>Posted on <?php the_time('F jS, Y') ?></h4>
    <p><?php the_content(__('(more...)')); ?></p>
    <hr> <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
    </div>
    <div id="delimiter">
    </div>
    <?php get_footer(); ?>

    5)functions.php

    <?php
    $args = array(
    'width'         => 980,
    'height'        => 198,
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
    );
    add_theme_support( 'custom-header', $args );


    function register_my_menu() {
      register_nav_menu('header-menu',__( 'Header Menu' ));
    }
    add_action( 'init', 'register_my_menu' );

    if (function_exists('register_sidebar')) {

    register_sidebar(array(
    'name' => 'Widgetized Area',
    'id'   => 'widgetized-area',
    'description'   => 'This is a widgetized area.',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>'
    ));
       
        register_sidebar(array(
    'name' => 'Footer',
    'id'   => 'footer-id',
    'description'   => 'This is a widgetized area for Footer.',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>'
    ));

    }
    ?>


    6)style.css

    body { text-align: center; }
    #wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
    #header { border: 2px #a2a2a2 solid; width:1196px; height:296px;}
    #content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
    #sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
    #delimiter { clear: both; }
    #footer { border: 2px #a2a2a2 solid;width:1196px; height:296px; }
    .title { font-size: 11pt; font-family: verdana; font-weight: bold; }
    #logo{
        float: left;
        position: absolute;
        color: #fff;
    }
    #header_image{
        width:100%;
        height:100%;
    }
    .menu-menu-1-container li {
        display: inline-block;
        margin: 10px;
    }
    .widget_nav_menu li{
        display: block;
    }
    .widget_categories li{
        list-style: none;
    }
    #footer .widget_nav_menu{
        float: left;
    }
    #footer .widget_categories{
        float: none;
    }

    In functions.php file I create code for Add Menu:- register_my_menu FUNCTION
    CREATE WIGET ARE FOR SIDEBAR AND FOOTER ->register_sidebar FUNCTION
    AND ADD NEW HEADER FOR add_theme_support ADDED IN FUNCTIONS.PHP

    SIDEBAR I AM ADDED FOOTER WIDGET IN WIDGET AREA.
    FOOTER I AM ADDED Widgetized Area SIDEBAR


    Wednesday 1 July 2015

    Get Post Title or Post Permalink using Post Name in Wordpress

    Hello

    You can get post title and permalink any one you want from post it easy to get this.

    I have one example post that can be useful that.

    you can also also use in search. and simple any where in wordpress.

    Simple Get Wordpress.

    $city_name = array("Bab Ezzouar","Babol","Babruysk","Bago City");

    foreach($city_name as $city){
     echo $city;
    $posts = get_posts(array('name' => $city, 'post_type' => 'your-postname-here','post_status'=>'publish'));



    foreach ($posts as $post) {
      echo $title = get_the_title($post->ID);
      echo    $permalink = get_permalink($post->ID);
       

        break; //use this to limit to a single result
    }
    }

    check out your wordpress. cityname enter your post name and post type check out result


    Monday 22 June 2015

    How To Add Taxonomy In Multiple Post In Wordpress

    Hello

    Some Time Same Taxonomy use in multiple post. for example onw taxonomy like music

    I Want to use multiple post like WordPress default post,musician,or another post.

    I have Solution for that check below code

    <?php
    register_taxonomy('music',array('musician','post','page'), array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'query_var' => true,
        'rewrite' => array( 'slug' => 'music' ),
      ));
    ?>

    here  music is your taxonomy name. in your array add your post i have added post,musician,page etc

    this code add to your theme in function.php or plugin file.

    that can be worked

    Friday 19 June 2015

    Wp Query Get Child Post Or Page Of Current Page Or Post In Wordpress(Parent Post)

    Hello

    I am Giving example of how to get  parent post of child post or page.

    I have top market post type. i am create child post in this i have code to get child post of current parent post.

      $args = array(
        'post_type'      => 'top_markets',
        'posts_per_page' => -1,
        'post_parent'    => $post->ID,
        'order'          => 'ASC',
        'orderby'        => 'menu_order'
     );


    $parent = new WP_Query( $args );

    if ( $parent->have_posts() ) : ?>

        <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>

            <div id="parent-<?php the_ID(); ?>" class="parent-page">

                <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>


            </div>

        <?php endwhile; ?>

    <?php endif; wp_reset_query(); ?>


    if you to want current page child page in wordpres check this code in your template file.

    $args = array(
        'post_type'      => 'page',
        'posts_per_page' => -1,
        'post_parent'    => $post->ID,
        'order'          => 'ASC',
        'orderby'        => 'menu_order'
     );


    $parent = new WP_Query( $args );

    if ( $parent->have_posts() ) : ?>

        <?php while ( $parent->have_posts() ) : $parent->the_post(); ?>

            <div id="parent-<?php the_ID(); ?>" class="parent-page">

                <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>


            </div>

        <?php endwhile; ?>

    <?php endif; wp_reset_query(); ?>

    Thursday 11 June 2015

    Create Simple Text With Image Widget In Wordpress

    Hell All,

    I am have simple text widget With image. you can upload image and you can add link on
    image you can add class and id on image also you can add height and width in widget.

    Please Check My Widget Image you can understand that.




    I am create plugin for it. in pluun in folder => create folder myWidget => create file
    =>myWidget .php and same folder create js file => upload-media.js

    after you can check code in file

    in myWidget .php file add this code

    <?php
    /**
    * Plugin Name: My Widget
    * Plugin URI: http://myphpinformation.blogspot.in/
    * Description: This plugin for widget.
    * Version: 1.0.0
    * Author: jaydisinh Parmar
    * Author URI: http://myphpinformation.blogspot.in/
    */ 
    function ctUp_wdScript(){

                    wp_enqueue_script('jquery');
                    wp_enqueue_script('media-upload');
                     wp_enqueue_script('thickbox');
                    wp_enqueue_script('upload_media_widget', plugin_dir_url(__FILE__) . 'upload-media.js', array('jquery'));
            }
            add_action('admin_enqueue_scripts', 'ctUp_wdScript');
                    function my_admin_styles() {
            wp_enqueue_style('thickbox');
            }

    add_action('admin_print_styles', 'my_admin_styles');
        

    ?>

    <?php
    class My_Widget extends WP_Widget {
        
        
        function __construct() {
    parent::__construct(
    'my_widget', // Base ID
    __( 'A Text Widget', 'text_domain' ), // Name
    array( 'description' => __( 'Just Text Widget', 'text_domain' ), ) // Args
    );
            
           
            
    }
        
        public function widget( $args, $instance ) {
            
            echo $args['before_widget'];
            
            if ( ! empty( $instance['title'] ) ) {
    echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title'];
    }else{
    echo __( 'Hello, World! HappY', 'text_domain' );  
    }
            if ( ! empty( $instance['desc'] ) ) {
    echo $args['before_title'] .$instance['desc']. $args['after_title'];
    }
            
            if ( ! empty( $instance['height'] ) ) {
                
                $height = $instance['height'];
                }else{
                    
                    $height = "300";
                }
                
                if ( ! empty( $instance['width'] ) ) {
                
                $width = $instance['width'];
                }else{
                    
                    $width = "300";
                }
                
                if ( ! empty( $instance['link_url'] ) ) {
                
                $link_url = $instance['link_url'];
                }
            
           
             if ( ! empty( $instance['image'] ) ) {
                echo $args['before_title'];?>
    <?php if($link_url){ ?><a href="<?php echo $link_url; ?>"><?php } ?><img src="<?php echo  $instance['image']?>" height="<?php echo  $height; ?>" width="<?php echo  $width; ?>" class="<?php echo  $instance['image_class']?>" id="<?php echo  $instance['image_id']?>" /><?php if($link_url){ ?></a><?php } ?>
                <?php $args['after_title'];
    }
        }
        
        
                
        
        public function form( $instance ) {
            $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'text_domain' );
            $desc = ! empty( $instance['desc'] ) ? $instance['desc'] : '';
            $image = ! empty( $instance['image'] ) ? $instance['image'] : '';
            $link_url = ! empty( $instance['link_url'] ) ? $instance['link_url'] : '';
            $height = ! empty( $instance['height'] ) ? $instance['height'] : '';
            $width = ! empty( $instance['width'] ) ? $instance['width'] : '';
            $image_id = ! empty( $instance['image_id'] ) ? $instance['image_id'] : '';
            $image_class = ! empty( $instance['image_class'] ) ? $instance['image_class'] : '';
        ?>
        
            <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>"/>
    </p>
            
             <p>
    <label for="<?php echo $this->get_field_id( 'DeScription' ); ?>"><?php _e( 'DeScription:' ); ?></label> 
    <textarea class="widefat" id="<?php echo $this->get_field_id( 'desc' ); ?>" name="<?php echo $this->get_field_name( 'desc' ); ?>"><?php echo esc_attr( $desc ); ?></textarea>
    </p>
            
            <p>
    <label for="<?php echo $this->get_field_id( 'link_url' ); ?>"><?php _e( 'On Image Link Url:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'link_url' ); ?>" name="<?php echo $this->get_field_name( 'link_url' ); ?>" type="text" value="<?php echo esc_attr( $link_url ); ?>"/>
    </p>
            
            <p>
    <label for="<?php echo $this->get_field_id( 'height' ); ?>"><?php _e( 'Image Height:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'height' ); ?>" name="<?php echo $this->get_field_name( 'height' ); ?>" type="text" value="<?php echo esc_attr( $height ); ?>"/>
    </p>
            
            <p>
    <label for="<?php echo $this->get_field_id( 'width' ); ?>"><?php _e( 'Image Width:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'width' ); ?>" name="<?php echo $this->get_field_name( 'width' ); ?>" type="text" value="<?php echo esc_attr( $width ); ?>"/>
    </p>
            
            <p>
    <label for="<?php echo $this->get_field_id( 'image_id' ); ?>"><?php _e( 'Image ID:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'image_id' ); ?>" name="<?php echo $this->get_field_name( 'image_id' ); ?>" type="text" value="<?php echo esc_attr( $image_id ); ?>"/>
    </p>
            
             <p>
    <label for="<?php echo $this->get_field_id( 'image_class' ); ?>"><?php _e( 'Image Calss:' ); ?></label> 
    <input class="widefat" id="<?php echo $this->get_field_id( 'image_class' ); ?>" name="<?php echo $this->get_field_name( 'image_class' ); ?>" type="text" value="<?php echo esc_attr( $image_id ); ?>"/>
    </p>
            
            <p>
               <input name="image" class="my_upload_image_button" type="button" value="Upload"/>
               <input class="widefat upload_image" id="<?php echo $this->get_field_id( 'image' ); ?>" name="<?php echo $this->get_field_name( 'image' ); ?>" type="text" value="<?php echo esc_attr( $image ); ?>" readonly=""/>
               <?php if(!empty($image)){ ?>
               <img src="<?php echo esc_attr( $image ); ?>" height="100" width="100" />
               <?php } ?>
            </p>
        
            
    <?php 
            
            }
            
            public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
            $instance['desc'] = ( ! empty( $new_instance['desc'] ) ) ? ( $new_instance['desc'] ) : '';
            $instance['image'] = ( ! empty( $new_instance['image'] ) ) ? ( $new_instance['image'] ) : '';
            $instance['link_url'] = ( ! empty( $new_instance['link_url'] ) ) ? ( $new_instance['link_url'] ) : '';
            $instance['height'] = ( ! empty( $new_instance['height'] ) ) ? ( $new_instance['height'] ) : '';
            $instance['width'] = ( ! empty( $new_instance['width'] ) ) ? ( $new_instance['width'] ) : '';
            $instance['image_id'] = ( ! empty( $new_instance['image_id'] ) ) ? ( $new_instance['image_id'] ) : '';
            $instance['image_class'] = ( ! empty( $new_instance['image_class'] ) ) ? ( $new_instance['image_class'] ) : '';

    return $instance;
    }

        
    }

    add_action( 'widgets_init', function(){
         register_widget( 'My_Widget' );
    });

    ?>

    after in your upload-media.js file add this code

    jQuery(document).ready(function($) {
      $(document).on("click", ".my_upload_image_button", function() { 

    window.send_to_editor = function(html) {
    imgurl = jQuery('img',html).attr('src');
    $('.upload_image').val(imgurl);

            tb_remove();
    };

    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
      });
    });

    after this active plugin in My Widget. go to Appearance and check the in widgets => check
    A Text Widget add in sidebar.