Thesis 2.0 Guide – How to make a Popular Post Box

thesis 2.0 Popular Post

Thesis 2.0 Popular Post

Popular posts boxes or widget are something that the vast majority of blogs use but they often come with a little price.

They impact the sites speed by sending lots of requests to the database in order to work out what information should be displayed.

Since Thesis 2.0 introduced the Query box which is basically your door to the WordPress Database it allows you to do some interesting things.

Although this will still increase the number of queries, the fact is they will be significantly less than your average plugin.

This Tutorial is going to show you how to make a popular post box box using the Thesis 2.0 Query box and the Auto Featured Image box . Which can be found in the DIY WP Store.

Let’s Begin

How to create a popular post box for Thesis 2.0

In order to follow this tutorial you will need the following.

  • Query Box (included in Thesis 2.0)
  • Auto Featured image Box (Found in Store)

This tutorial recommends purchasing the Auto featured image so you don’t hurt your sites speed because the images will be regenerated to the exact size.

Step 1

Head over to your HTML editor. Add a new box and select a container.

Name it Popular Posts Container and place it in your sidebar.

Give the container a class of popular_posts_container

thesis 2.0 popular post container

This will house the rest of our boxes.

Next Add a new box and select a Query Box.

Name the Box Popular Posts so you can easily recognise it.

Then Drag and drop the Query Box using shift Click to your sidebar column.

Popular Post container and Query box Thesis 2.0

So our query box is now inside its container.

Step 2

Open up the Query Box options panel by selecting the button that appears when you hover over the Box.

Configure the Options like so:

  • Select Post Type – Posts
  • Select Query Type – Recent Posts
  • Number of Posts to Show – Optional but I selected 5
  • Order – Descending
  • Order By – Comment Count
  • HTML Class – Your choice but I used popular_posts

That’s it for the Options.

Step 3

Open up the Query box and drag everything except the Headline to the tray

thesis 2.0 query box sub boxes

When removing sub boxes, just left click and drag. A message box will pop up and drop the image there.

Now we need to create a container for the Headline.

Add a new box and select container and add the following information.

thesis 2.0 popular post headline container

Drag this container and drop it inside the Popular Post Query box.

Then put your headline box inside it like so.

thesis 2.0 popular post headline container and headline box

The headline box inside a container.

Now what we should have is just a list of titles which will display in your sidebar un-styled.

Step 4

If you Purchased the Auto Featured Image Box then you can create a new box and select the Auto featured Image box.

Configure your options.

Take note of the class, this will be used later when we add some CSS.

thesis 2.0 popular post auto featured Image

Options for the Auto Featured Image box, you can select whatever image size you want and this box will automatically resize your featured image exactly. Thus no penalty for badly sized images.

Once you have your options set, drag and drop the box above the Headline container inside the Query Box like so.

Popular Post box with featured image and title

The auto featured image box must be placed above the Headline so our CSS will work correctly.

Step 5

Finally we need to add a title so for this we will use a Text Box.

You can create these via the add box section.

Add the following information to the Text box:

  • Inside the text area paste <h3>Popular Posts</h3> You can change this as you wish.
  • Check the box to disable the wordpress Auto P.
  • Give it a class of pp_title

Once you have constructed your HTML it should look like this.

Popular Post box with all sub boxes

As you can see we have all the boxes required and ready for styling.

Once your Happy with all the above Hit the save button.

Step 6

Now for some CSS.

Head over to your CSS editor and Select a new Single Elements styles package.

Add the following information to the Package tab.

thesis 2.0 popular post CSS package

Note the Class we added to the Query box, when adding the CSS selector you must add the (.) for a class.

Then select the Additional CSS tab and paste the following.

.popular_posts_container {
    padding: 10px;
}
.query_box.popular_posts {
    display: inline-block;
    padding: 10px 0;
}
.popular_post_title {
    display: inline;
    font-size: 14px;
    text-align: left;
}
.popular_post_img {
    float: left;
    line-height: 0;
    margin-right: 10px;
    position: relative;
    top: 6px;
}
.popular_post_img img {
    border: 3px solid #DDDDDD;
    outline: 1px solid #BBBBBB;
}

I didn’t add the h3 title CSS because this will assume the size already in use by the Sidebar.

Don’t forget to add the reference to your reference sheet.

Once complete it should look something like this.

thesis 2.0 Popular Post final result

Look pretty cool huh!

So if your looking to relinquish that popular post plugin and dive in to thesis 2.0 query boxes then your in the right place.

Let me know if you have any problem via the forum.

If you havn’t got the auto featured Image box yet, you can read more about it here.
Don’t have Thesis check it out here

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

17 comments… add one
  • Reeses Thesis Nov 16, 2012, 9:06 pm

    This one is really nice. I love the amount of customization we can do on Thesis 2 vs 1.x. It’s just mind blowing to be honest.

    FYI, I’m making a section with just your tutorials on the tutorials page at Reese’s Thesis. I really appreciate the effort you put in to make these happen.

    @reesesthesis on Twitter

    • Matthew Horne Nov 16, 2012, 9:09 pm

      Thanks, I havn’t even started yet with tuts, just a few released so far and soo many more to come, plus more boxes. To help tackle those issues that people face with wordpress itself.

      You will see what I mean in time by that.

      Things that should exist but dont exist to the average user and require knowledge of php or hours of google to solve.

      I aim to tackle those issues.

      P.s the Auto featured image is premium.

      • Reeses Thesis Nov 16, 2012, 9:25 pm

        I agree with you. In most cases it takes hours on Google to find these awesome functions to customize WP. I know there are plugins, but I don’t like using them too much because they are often bloatware. Boxes for Thesis 2 are a great solution in my opinion. You put it where you want and only there; without bloating the code of other pages that will not be utilizing that specific code.

        I placed your Auto Featured Image box under premium. I could have sworn I put it under that category… LOL

        I can’t wait to what you have coming.

        @reesesthesis on Twitter

        • Matthew Horne Nov 16, 2012, 9:28 pm

          Certainly, that auto featured image box kicks the crap out of timthumb, which is just a disatstrous script that is soo bad for performance. But my box is super light using aqua resizer which is a script that uses already existing wordpress functions. So no extra coding or junk in the trunk as they say.

          Getting the principals together and working as intended was not so easy though.

  • Vishal Rai Nov 17, 2012, 4:18 am

    Thesis 2.0 is really much better than Thesis 1.x . In starting I feels it too odd and hard to understand but after doing many experiments on my Test site it is a real easy stuff.

    Thesis Box has a 20% more faster and 10% less resource usage than WordPress Plugins.

    And good Job Matthew , your prices are very good and work are awesome.

    • Matthew Horne Nov 17, 2012, 11:02 am

      Yes the boxes are much more efficient that plugins and because you can physically place them exactly where you want.

  • Jessore Host Nov 19, 2012, 2:02 am

    Thanks for the effort you took to expand upon this post so thoroughly. I will keep it in my RSS.
    I will look forward to your future posts.

    • Matthew Horne Nov 19, 2012, 12:09 pm

      No problem, there are so many things that can be done by mixing and matching boxes.

  • Alkaline Healing Jan 26, 2013, 8:31 am

    How do you link the article titles? With your contribution the final result shows they aren’t links, only the auto featured thumb links to the article

  • Joshua Serrano Aug 31, 2013, 4:44 pm

    Hey how can i position the widget so it can be under my optin and also how can i make the text size smaller?

    • Matthew Horne Sep 4, 2013, 10:57 pm

      Just position the main box under the widget where your optin form is. As for styling purposes I would have to see the site, but I am currently on the road and unable to check this out for you.

      Regards

  • Simon Dec 8, 2013, 7:04 pm

    On my site, I use a popular posts plugin, but I can’t switch to this article’s suggestion because I like it listing the *comment-count for each popular post. Is there any way to do this with your article?

    See my site.

  • Pablo Teixeira Feb 9, 2014, 1:38 pm

    Hi, Matthew.

    Is there any way to delete a specific post from the list?

  • Tom Mar 4, 2014, 11:24 pm

    Hey Matthew.. Thanks, great article, I was scratching my head for a bit as to where have the box options gone, (just up graded to 2.1) anyway found your article and I’m now enlightened, wow the endless possibilities. . Thanks again..

Leave a Comment