WordPress Wednesday:: How to Create Popular Posts Section Using Code

Have you ever wondered what all the symbols and terms like <>, </a>, =, “, href, and img src mean when it comes to coding?

Today I’m going to explain a teeny tiny snippet of how to read/write code to help you create a customized popular posts section for your blog.

Wordpress Wednesday

Now, before I go any further, let me give a little disclaimer. I am not a super tech savvy person and don’t claim to be. I’m not super knowledgeable when it comes to coding, but I know enough to create/make certain things work. So with that said, I may not be the best at explaining this, but hopefully this will be somewhat helpful/useful for you.

Now, if the very idea of code gives you the heebie jeebies, I totally understand. I was once there. But let me reassure you that it’s not as scary as it looks. I’ve actually come to really like it, just wish I knew a whole lot more.

It’s important to give your readers a visual idea of what your blog is all about and visually showcase some of your previous posts. A great way to do that is with a ‘popular posts’ section of your blog. There are several plugins you can install to generate popular posts from your blog. For me, I never really could find one that had both the visual component with the ability to customize which posts appear. So, I decided to manually create/code this section. Here’s what it looks like on my blog sidebar.

Coding Popular Posts

To create any sort of section on your blog that is made up entirely of code, you’ll need to insert a text widget into your sidebar. Click on Appearance on  the lefthand side of your dashboard, then click on Widgets. Scroll down until you find the ‘Text’ widget.

Text Widget

Drag and drop it where you want it to appear on your sidebar. Then give your widget a title. This is how it will appear on your sidebar.

Now to the fun stuff, the code.

Text Widget Code

Above is how all my code appears in the text widget.

The first thing you need to do is upload your images to an image hosting website. I use Photobucket. Today I’m not going to go into how I created the images with the text {that’s a whole other post}. But, you’ll just need to re-size your images based upon how you want them to appear and how large your sidebar is. For me, I put two small images side by side and re-sized each image to 125×125 pixels.

Once you’ve created your images and re-sized them, go ahead and upload them to Photobucket {or a similar site}. We’ll come back to your photos in a minute, but first, let’s talk about code.

For every image you want to appear on your sidebar, below is the code you’ll need to include::

<a href=”http://meganbrookehandmadeblog.com/2012/07/diy-curtain-rod-how-to-make-your-own.html” /><img src=”http://i1190.photobucket.com/albums/z448/meganbrookehandmade/DIYCurtainRodPopularPosts.png”/></a>

The “<” and “/>” you see is distinguishing the beginning and end of each individual code or command. In this case, the code for the image and the code for the link each have < and /> to identify the beginning and end. Think of it like a sentence. You start with a capitol letter and end with a period for each sentence you write.

So let’s start with the first part of the code. In your text widget box you’ll type in <a href=”

“href” is specifying the location of a web source {i.e. the web address for your post}.

Then go to your actual post on your blog that you are wanting to feature and click on the post title so the full web address appears in your web browser.

HTML Address

Copy and paste that web address following “href=.” So now you have <a href=”http://www.{your post web address here}.html” Since that is the end of the command be sure to close your command with />

Are you with me so far? Here’s how the first part of my code would appear for my DIY Curtain Rod post::

<a href=”http://meganbrookehandmadeblog.com/2012/07/diy-curtain-rod-how-to-make-your-own.html” />

Next, you’ll need to include the coding for the image. When you want an image to appear, the first part of that code would be <img src=

“Img src” stands for image source {duh}. You are essentially telling it where the image ‘lives’ and where to pull it from. Go back to Photobucket {or other image hosting site} where you uploaded your photo.

Photo Direct Link

 Find the ‘direct link’ listed for that photo and copy it. For me, that link is located directly underneath that photo in Photobucket.

Paste that link immediately following =” in your code. Like this: <img src=”http://i1190.photobucket.com/albums/z448/meganbrookehandmade/DIYCurtainRodPopularPosts.png”

Then you will add /> following your quotation marks since that’s the end of the image part of the code.

Still with me? If you’ve made it this far, we’re almost done!

The last part of the code has to do with the <a and </a> you see at the very beginning and end. These set of commands distinguish where the entire code starts and stops. Going with the writing analogy, you can think of these like the beginning and ending of a paragraph. Or you can think of it like bookends. Every set of code you write has to have a start and stopping point.

For every image/post you want to appear, you have to have the <a and </a> to distinguish where the code starts and where it stops.

So now your code should look like the below with your individual html web address and image source link included::

<a href=”http://meganbrookehandmadeblog.com/2012/07/diy-curtain-rod-how-to-make-your-own.html” /><img src=”http://i1190.photobucket.com/albums/z448/meganbrookehandmade/DIYCurtainRodPopularPosts.png”/></a>

If you want your images to appear side by side, like mine, keep entering your code in just like the above with your various post links/images. So where your last </a> ends you’ll then start over right next to it with < href= etc.

If you don’t want your images to appear side by side but instead want them to be stacked, just enter <br><br> following each entire section of code. This is telling it to have 2 line breaks {which will leave you space in between each image}.

Whew! I know that was a lot of information and a lot of steps, but hopefully it was helpful.

Feel free to shoot me an email if you have any questions: meganbrookehandmade{at}gmail{dot}com.

Now off you go to code. Good luck!

Check out the previous WordPress Wednesday posts::

WordPress.com vs. WordPress.org

Securing a domain name


Setting up your header and navigation bar

Setting up your sidebar

-Creating a favicon

Sidebar Plugins

Installing Facebook like box and Instagram widget

-Installing Social Sharing bar

How to add a ‘Pin It’ button to posts

How to generate related post thumbnails

How to truncate posts on homepage

Post Signature

You May Also Like:


Leave a Reply

Your email address will not be published. Required fields are marked *