Home php wordpress How to create widget in wordpress

How to create widget in wordpress

23:13
Read
23:13
wordpress allows us to create custom widget by using plugin or theme files in wordpress. we create a simple widget for display list of posts (posts, products, posts.. etc) in front end.

please follow below steps to create widget in wp

create 'widget' folder in your plugin folder 'wp-content/plugins' and create index.php in that.

 Display a form in admin section for configuring:

sample purpose we taken following post types options if you want to add any custom post type please add another option to it. it is automatically working in front end.
  1. posts
  2. pages
  3. products
public function form( $instance ) {
  $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'My Posts', 'text_domain' );
  $custom_posts = ! empty( $instance['custom_posts'] ) ? $instance['custom_posts'] : esc_html__( '', 'text_domain' );
  $custom_posts_max = ! empty( $instance['custom_posts_max'] ) ? $instance['custom_posts_max'] : 10;
  ?>
  <p>
  <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label> 
  <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
  </p>
  <p>
  <label for="<?php echo esc_attr( $this->get_field_id( 'custom_posts' ) ); ?>"><?php esc_attr_e( 'Post Types:', 'text_domain' ); ?></label>
  <select name="<?php echo esc_attr( $this->get_field_name( 'custom_posts' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'custom_posts' ) ); ?>" class="widefat">
   <option value="">Select</option>
   <option value="post" <?php if($custom_posts == 'posts'){echo 'selected="selected"';}?>>Posts</option>
   <option value="page" <?php if($custom_posts == 'pages'){echo 'selected="selected"';}?>>Pages</option>
   <option value="product" <?php if($custom_posts == 'product'){echo 'selected="selected"';}?>>Products</option>
  </select>
  </p>
  <p>
  Max Posts: <input type="text" id="<?php echo esc_attr( $this->get_field_id( 'custom_posts_max' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'custom_posts_max' ) ); ?>" value="<?php echo $custom_posts_max;?>" />
  </p>
  <?php 
 }
 

display a widget in your front end based on what you are configuring:

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'];
  }
  
  //get posts list in front end
  if( !empty($instance['custom_posts']))
  {
   
   $posts = get_posts(array('post_type'=>$instance['custom_posts'],'posts_per_page'=>$instance['custom_posts_max']));
   if($posts)
   {
    echo '<ul style="list-style:none;">';
     foreach($posts as $post)
     {
      echo '<li>->&nbsp;'.$post->post_title.'</li>';
     }
    echo '</ul>';
   }else{
    echo esc_html__( 'No Posts Are Available.', 'text_domain' );
   }
  }
  echo $args['after_widget'];
 }

update functionality:

public function update( $new_instance, $old_instance ) {
  $instance = array();
  $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? $new_instance['title'] : '';
  $instance['custom_posts'] = ( ! empty( $new_instance['custom_posts'] ) ) ? $new_instance['custom_posts'] : '';
  $instance['custom_posts_max'] = ( ! empty( $new_instance['custom_posts_max'] ) ) ? $new_instance['custom_posts_max'] : '';
  return $instance;
 }

Register widget using add action:

// register Foo_Widget widget
function register_my_widget() {
    register_widget( 'My_Widget' );
}
add_action( 'widgets_init', 'register_my_widget' );

Full Code Here

please copy and paste following code in your index.php file. 
<?php 
/** 
* Plugin Name: My Widget
* Description: Simple widget by using wordpress
* Author: Tester
*/
/**
 * Adds Foo_Widget widget.
 */
class My_Widget extends WP_Widget {

 /**
  * Register widget with WordPress.
  */
 function __construct() {
  parent::__construct(
   'foo_widget', // Base ID
   esc_html__( 'My Widget', 'text_domain' ), // Name
   array( 'description' => esc_html__( 'My Widget Title', 'text_domain' ), ) // Args
  );
 }

 /**
  * Front-end display of widget.
  *
  * @see WP_Widget::widget()
  *
  * @param array $args     Widget arguments.
  * @param array $instance Saved values from database.
  */
 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'];
  }
  
  //get posts list in front end
  if( !empty($instance['custom_posts']))
  {
   
   $posts = get_posts(array('post_type'=>$instance['custom_posts'],'posts_per_page'=>$instance['custom_posts_max']));
   if($posts)
   {
    echo '<ul style="list-style:none;">';
     foreach($posts as $post)
     {
      echo '<li>->&nbsp;'.$post->post_title.'</li>';
     }
    echo '</ul>';
   }else{
    echo esc_html__( 'No Posts Are Available.', 'text_domain' );
   }
  }
  echo $args['after_widget'];
 }

 /**
  * Back-end widget form.
  *
  * @see WP_Widget::form()
  *
  * @param array $instance Previously saved values from database.
  */
 public function form( $instance ) {
  $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'My Posts', 'text_domain' );
  $custom_posts = ! empty( $instance['custom_posts'] ) ? $instance['custom_posts'] : esc_html__( '', 'text_domain' );
  $custom_posts_max = ! empty( $instance['custom_posts_max'] ) ? $instance['custom_posts_max'] : 10;
  ?>
  <p>
  <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label> 
  <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
  </p>
  <p>
  <label for="<?php echo esc_attr( $this->get_field_id( 'custom_posts' ) ); ?>"><?php esc_attr_e( 'Post Types:', 'text_domain' ); ?></label>
  <select name="<?php echo esc_attr( $this->get_field_name( 'custom_posts' ) ); ?>" id="<?php echo esc_attr( $this->get_field_id( 'custom_posts' ) ); ?>" class="widefat">
   <option value="">Select</option>
   <option value="post" <?php if($custom_posts == 'posts'){echo 'selected="selected"';}?>>Posts</option>
   <option value="page" <?php if($custom_posts == 'pages'){echo 'selected="selected"';}?>>Pages</option>
   <option value="product" <?php if($custom_posts == 'product'){echo 'selected="selected"';}?>>Products</option>
  </select>
  </p>
  <p>
  Max Posts: <input type="text" id="<?php echo esc_attr( $this->get_field_id( 'custom_posts_max' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'custom_posts_max' ) ); ?>" value="<?php echo $custom_posts_max;?>" />
  </p>
  <?php 
 }

 /**
  * Sanitize widget form values as they are saved.
  *
  * @see WP_Widget::update()
  *
  * @param array $new_instance Values just sent to be saved.
  * @param array $old_instance Previously saved values from database.
  *
  * @return array Updated safe values to be saved.
  */
 public function update( $new_instance, $old_instance ) {
  $instance = array();
  $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? $new_instance['title'] : '';
  $instance['custom_posts'] = ( ! empty( $new_instance['custom_posts'] ) ) ? $new_instance['custom_posts'] : '';
  $instance['custom_posts_max'] = ( ! empty( $new_instance['custom_posts_max'] ) ) ? $new_instance['custom_posts_max'] : '';
  return $instance;
 }

} // class Foo_Widget

// register Foo_Widget widget
function register_my_widget() {
    register_widget( 'My_Widget' );
}
add_action( 'widgets_init', 'register_my_widget' );
please set my widget in your Appearance --> widgets --> widget area    
Tags :

No comments:

Subscribe to: Post Comments ( Atom )
Powered by Blogger.