Showing posts with label Create Simple Text With Image Widget In Wordpress. Show all posts
Showing posts with label Create Simple Text With Image Widget In Wordpress. Show all posts

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.