Jump to content


Photo

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


  • Please log in to reply
14 replies to this topic

#1 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 03 February 2016 - 09:09 PM

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):

 

Attached File  Screen Shot 2016-02-03 at 9.02.35 PM.png   542.87KB   0 downloads

 

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 </div> for each new item:

    <!-- 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>

- Alex
Check out the Kolakube blog or follow me on Twitter.

#2 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 08 February 2016 - 05:33 PM

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:

 

Attached File  md-popular-posts.zip   1.63KB   50 downloads

 

Here's a picture of the widget options:

 

Attached File  Screen Shot 2016-02-08 at 5.31.58 PM.png   17.3KB   0 downloads

 

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

 

Attached File  Screen Shot 2016-02-08 at 5.32.30 PM.png   252.53KB   0 downloads

 

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.

 

Attached File  md-popular-posts.zip   1.63KB   50 downloads

 

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).


  • Ray likes this
- Alex
Check out the Kolakube blog or follow me on Twitter.

#3 Ray

Ray

    Brooklyn's Finest

  • + Legacy Member
  • PipPipPip
  • 132 posts
  • LocationLos Angeles

Posted 20 February 2016 - 07:00 PM

Trying this on raylosophy.com

It took 10 seconds to setup and it looks great.

 

Thanks Alex.


I consult, create products and brainstorm all day


#4 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 21 February 2016 - 05:45 PM

Your featured images are perfect for this, nice work!


- Alex
Check out the Kolakube blog or follow me on Twitter.

#5 dman797

dman797

    Member

  • MD Customer
  • PipPip
  • 18 posts

Posted 08 March 2016 - 03:13 PM

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



#6 dman797

dman797

    Member

  • MD Customer
  • PipPip
  • 18 posts

Posted 08 March 2016 - 04:39 PM

actually, the comment count is showing in the widget on the post pages in the sidebar but not in the sidebar on the homepage.



#7 ijsbeer

ijsbeer

    Member

  • MD Customer
  • PipPip
  • 14 posts
  • LocationThe Hague, Netherlands

Posted 31 March 2016 - 11:55 AM

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


Marcel Hoogland | Slimme Schrijver (made with MD) | IJsbeer Communicatie
  • Slimme Schrijver means Smart Writer. I help writers to improve their text and become better bloggers
  • IJsbeer means Polar Bear. I help organizations to improve the trust of their customers, citizens and clients in them.

#8 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 31 March 2016 - 02:19 PM

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.


- Alex
Check out the Kolakube blog or follow me on Twitter.

#9 jjacobo

jjacobo

    Member

  • MD Customer
  • PipPip
  • 19 posts

Posted 28 May 2017 - 04:31 AM

Excelente plugin, pero no entiendo porque no funciona en todas las entradas, es decir, aparece cuando quiere.



#10 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 28 May 2017 - 09:39 AM

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?


- Alex
Check out the Kolakube blog or follow me on Twitter.

#11 jjacobo

jjacobo

    Member

  • MD Customer
  • PipPip
  • 19 posts

Posted 28 May 2017 - 10:42 AM

Hi, Alex!

I show you two images, is better te google translate. :P

 

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

 

¿Can you see?

 

 

Attached Files



#12 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 29 May 2017 - 10:51 AM

Wow your site is fast!

 

That does help me more, thank you! :)

 

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. :)


- Alex
Check out the Kolakube blog or follow me on Twitter.

#13 jjacobo

jjacobo

    Member

  • MD Customer
  • PipPip
  • 19 posts

Posted 29 May 2017 - 11:35 AM

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.



#14 Anwar

Anwar

    Advanced Member

  • MD Customer
  • PipPipPip
  • 75 posts

Posted 27 July 2017 - 06:20 AM

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.



#15 Alex

Alex

    Kolakube Staff

  • Kolakube Admin
  • 3,484 posts

Posted 31 July 2017 - 12:07 PM

Hey Anwar, absolutely, I've made a note of this and would be happy to modify it to work with views count.


- Alex
Check out the Kolakube blog or follow me on Twitter.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users