• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

Add Popular Posts With Featured Image To Sidebar (With Free Plugin)

UPDATE: Want the MD Popular Posts plugin? Get it here.

With this quick tutorial you can add a list of posts—popular, hand-picked, part of a series—and list them in your sidebar with a featured thumbnail image.

These are what I created for the Gutsy Geek design and mocked up in a quick demo below (see blue image boxes in the sidebar):

View attachment 927

You can add as many of these boxes to your sidebar as you want. Here are the steps to adding them:

1. Add the following CSS to your child theme's style.css file:

.popular-post {
background-color: #fff;
display: block;
text-align: center;
}

.popular-post-title {
padding: 13px 20px;
overflow: hidden;
position: relative;
}

2. Create your images and upload them to the Media Library. Recommended image size of 360x110

3. Go to Appearance > Widgets and add a Text widget to the sidebar. Paste the following HTML into the text widget:

<div id="sidebar-popular-posts" class="sidebar-popular-posts">

<!-- Post 1 -->

<a href="#link" class="popular-post mb-single box-style">

<img src="#imageurl" alt="Popular Post Title" class="popular-post-image" width="360" height="110">

<p class="popular-post-title">Popular post title</p>

</a>

<!-- Post 2 -->

<a href="#link" class="popular-post mb-single box-style">

<img src="#imageurl" alt="Popular Post Title" class="popular-post-image" width="360" height="110">

<p class="popular-post-title">Popular post title</p>

</a>

<!-- Post 3 -->

<a href="#link" class="popular-post mb-single box-style">

<img src="#imageurl" alt="Popular Post Title" class="popular-post-image" width="360" height="110">

<p class="popular-post-title">Popular post title</p>

</a>

</div>

The code is all done for you, just swap out the anchor link, text, and image. To add more items, copy and paste the following code before the closing for each new item:

CSS:
    <!-- Post X -->

    <a href="#link" class="popular-post mb-single box-style">

        <img src="#imageurl" alt="Popular Post Title" class="popular-post-image" width="360" height="110">

        <p class="popular-post-title">Popular post title</p>

    </a>
 
Last edited by a moderator:

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,645
Reaction score
1,877
UPDATE: NEW POPULAR POSTS PLUGIN

Today I was putting together a new site for an MD Service Plan customer and one of the features they wanted was a popular posts listing. I came back to this tutorial to copy this code and realized that it would be much easier to just create a simple widget that could list popular posts automatically.

I whipped it up, tested it on his site, and it looks good! I was able to display a simple list of popular posts that show a Featured Imagepost title, and comment count.

So if you want a plugin that automatically lists your site's X most popular posts by comments download and install the plugin:

md-popular-posts.zip

Here's a picture of the widget options:

View attachment 932

...and what it looks like on the site:

View attachment 933

Featured Images not displaying correctly?

If you already have existing posts with featured images, the images may display at different sizes. To correct this and make all the images (if any) appear at the recommended 360x110 size, download and run the Regenerate Thumbnail plugin. Note that this plugin will regenerate all of your uploaded images so be cautious before running this.

md-popular-posts.zip

or, you can merge the plugin file into your MD child theme if you don't want to install another plugin (with zero performance hit).

 
Last edited by a moderator:
  • Like
Reactions: Ray
Comment

Ray

Well-known member
Staff member
Md
Messages
431
Reaction score
213
Location
Los Angeles
Website
raylosophy.com
Trying this on raylosophy.com

It took 10 seconds to setup and it looks great.

Thanks Alex.

 
Last edited by a moderator:
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,645
Reaction score
1,877
Your featured images are perfect for this, nice work!

 
Comment

dman797

Member
Messages
18
Reaction score
5
Hey Alex, thanks for the plugin. How do you get the comment count to show? I don't see it on my page or Ray's page.

Also, what is the optimal image dimensions for a feature image?

Thanks

-Drew

 
Comment

dman797

Member
Messages
18
Reaction score
5
actually, the comment count is showing in the widget on the post pages in the sidebar but not in the sidebar on the homepage.

 
Last edited by a moderator:
Comment

ijsbeer

Member
Md
Messages
17
Reaction score
4
Location
The Hague, Netherlands
Question: Is there a way to change the order of the posts? I mean, what makes a post popular... I've got some posts I want to display but they're not showing up yet.

Marcel

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,645
Reaction score
1,877
Hey Marcel,

This plugin determines popularity based on comments count. In a more polished version, it'll probably use a better metric like pageviews to list. To create a list of your own handpicked posts, you can place the HTML and CSS included in the first post in a Text widget.

 
Comment

jjacobo

Member
Messages
19
Reaction score
1
Excelente plugin, pero no entiendo porque no funciona en todas las entradas, es decir, aparece cuando quiere.

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,645
Reaction score
1,877
Hey Jacob, I only speak English and running your question through Google Translate left me unclear with what you're trying to ask. Can you do your best to ask the question here in English?

 
Comment

jjacobo

Member
Messages
19
Reaction score
1
Hi, Alex!

I show you two images, is better te google translate.
default_tongue.png


In the first capture, the plugin work, but in the two capture, the plugin isn't work

¿Can you see?

View attachment 1108

View attachment 1109

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,645
Reaction score
1,877
Wow your site is fast!

That does help me more, thank you!
default_smile.png


When I go around your site I see that the popular posts are showing on your sidebar on every page. Do you have a cache plugin installed? I think it just needs to be cleared so all of your pages update to the newest version of your site, which has the popular posts plugin on it.

It works for me.
default_smile.png


 
Comment

jjacobo

Member
Messages
19
Reaction score
1
I use a Rocket, and  before the capture, was cleared the cache, but still I can't see.

And no is the fast I need.

 
Comment

Anwar

Well-known member
Md
Messages
161
Reaction score
45
Hey Marcel,

This plugin determines popularity based on comments count. In a more polished version, it'll probably use a better metric like pageviews to list. To create a list of your own handpicked posts, you can place the HTML and CSS included in the first post in a Text widget.
Hi Alex,

Any change you will change the metrics of the plugin in the coming months? I don't have any comments on my blog (like alot of MD customer I guess), so determing popularity based on pageviews would make more sense.

 
Comment

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,645
Reaction score
1,877
Hey Anwar, absolutely, I've made a note of this and would be happy to modify it to work with views count.

 
Comment
Top