Popular posts widget with images for WordPress. How create without plugin?

A simple and easy widget of popular posts sort by number of comments with their thumbnail

 

1.Step – create file popular-post-widget.php and place it in the directory wp-content/themes/yourthemename/inc/popular-post-widget.php (if you do not have a inc folder, create it yourself)

2.Step – Paste the code below into your popular-post-widget.php file

<?php

class popularPostWithThumbnail  extends WP_Widget {
 
	// inherit the parent __construct
	function __construct() {
		parent::__construct(
			'popular_post_with_thmb', // Widget id 
			'Popular post with thumbnail', // Widget title 
			array( 'description' => 'Display most popular post with their thumbnails' ) // Widget description
		);
	}
 

	// Front-end

	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] ); 
		$posts_per_page = $instance['posts_per_page'];
 
		echo $args['before_widget']; //html part before widget
 
		if ( ! empty( $title ) )
			echo $args['before_title'] . $title . $args['after_title']; //display widget title
 
		$new_query = new WP_Query("posts_per_page=$posts_per_page&orderby=comment_count"); //Select the most popular post from DB by the number of comments
		if( $new_query->have_posts() ):
			?>


<ul class="post-with-thmb">
    <?php while( $new_query->have_posts() ): $new_query->the_post(); ?>


    <li class="post-with-thmb-item">

        <a href="<?php the_permalink() ?>" class="post-with-thmb-entry"
            title="Open post <?php esc_html(the_title() ) ;?>">
            <img src="<?php echo get_the_post_thumbnail_url( $post->ID, 'thumbnail'); ?>" width="150" height="150"
                class="post-with-thmb-img" alt="<?php esc_html(the_title() ) ;?>"
                title="<?php esc_html(the_title() ) ;?>" />
            <div class="post-with-thmb-title"><?php the_title() ?></div>
        </a>

    </li>

    <?php endwhile; ?>
</ul>



<?php
		endif;
		wp_reset_postdata(); //Reset the cycle
 
		echo $args['after_widget']; //html part after widget
	}
 
	
    // Back end
	
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		if ( isset( $instance[ 'posts_per_page' ] ) ) {
			$posts_per_page = $instance[ 'posts_per_page' ];
		}
		?>

<p>
    <label for=" <?php echo $this->get_field_id( 'title' ); ?>">Wdget Name</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( 'posts_per_page' ); ?>">Number of posts:</label>
    <input id="<?php echo $this->get_field_id( 'posts_per_page' ); ?>"
        name="<?php echo $this->get_field_name( 'posts_per_page' ); ?>" type="text"
        value="<?php echo ($posts_per_page) ? esc_attr( $posts_per_page ) : '5'; ?>" size="3" />
</p>
<?php 
	}
 
	//Save widget settings
    
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		$instance['posts_per_page'] = ( is_numeric( $new_instance['posts_per_page'] ) ) ? $new_instance['posts_per_page'] : '5'; // по умолчанию выводятся 5 постов
		return $instance;
	}
}
 

//Register Widget

function popular_post_with_thmb_register() {
	register_widget( 'popularPostWithThumbnail' );
}
add_action( 'widgets_init', 'popular_post_with_thmb_register' );

3.Step – plug widget code. To do this, add to the bottom of your theme function.php code below

require get_template_directory() . '/inc/popular-post-widget.php';

 

Stylize our widget

You can change the look of your widget as you wish. The code below will make your widget look like the one in the screenshots

Put code below in your theme style.css file

/* Post > popular post */
.post-with-thmb {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px;
  justify-content: space-between;
}
 
.post-with-thmb-item {
  flex: 1 1 auto;
  margin: 0 5px;
  flex-basis: 250px;
  background: #002333;
  padding: 10px;
  border-radius: 5px;
  margin-bottom:10px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.post-with-thmb-item:hover {
  background: var(--main-hover-color);
  transition:1s;
}

.post-with-thmb-entry {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-content: flex-end;
  align-items: center;
}

.post-with-thmb-title {
  font-size: 1rem;
  color: #c8c8c8;
  margin-top: 10px;
}

@media (max-width: 48em) {
    .post-with-thmb {
      justify-content: center;
    } 

    .post-with-thmb-item {
      width:100%;
    }
}

That’s it. You can go to the admin panel of your site and in the widgets tab you will find a new widget “Popular post with thumbnail”

You can paste it into one of the available sidebars. Також вам може бути цікаво How to add a new sidebar for yours theme. WordPress