Recently I have had several readers ask me how I customized my Recent and Popular Post Widgets; therefore, the I am writing this tutorial to explain how because some of the most useful WordPress plugins are Rob Marsh’s Popular, Random, Recent, and Similar Posts Plugins. All are efficient and completely customizable, especially for Thesis WordPress theme users. All you need to know is a some CSS for Rob’s plugins, and since most Thesis users are not completely CSS savvy I am writing a tutorial on how to customize the plugins to fit your needs.
Getting started
First and foremost, you will need to download whichever plugin you desire: Popular Posts, Recent Posts, Random Posts, Similar Posts, or Recent Comments. After doing this you also need to add Rob’s Post Plugin Library.
A little about each plugin
- Popular Posts – This plugin displays a list of the posts from your blog which have been viewed the most.
- Recent Posts – This plugin displays a list of the most recent posts to your blog.
- Similar Posts – This plugin displays a list of posts which are related or similar to the current post.
- Random Posts - This plugin displays a list of posts chosen randomly from your blog.
- Recent Comments – This plugin displays a list of the most recent comments to your blog.
- Post Plugin Library – This plugin provides a library of essential routines for the Post Plugins: Similar Posts, Recent Posts, Random Posts, Popular Posts, and Recent Comments. It does nothing on its own but is required if you use the other plugins.
Once you have decided which plugin suits your needs, all that’s left is learning about the customization.
Customizing the plugins
An Array of Options
Each plugin comes with an array of choices already installed by the author. From placing the plugin on specific pages, to excluding or including different categories. The video below explains some of those choices.
[YT video="LNbLrDqJElk" /]
Focusing on the Output
Just as I showed you in the video, there are loads of options available for you, but we are going to focus our attention on the output section of the plugin. We are going to use some of the output options to customize the plugin to fit our needs. Since there are numerous options available, I will ultimately let you decide which you would like to use, but first allow me to show you one way that will get you started.
In order to maintain an XHTML valid markup, always start off with <li> in your coding here. This is because the widget starts with <ul>, which must always be followed with <li>. For basic purposes, I will give you a code to input and start off with. However, I encourage you to play around with the different outputs to fit your needs.
A Little Output Code
<li>
<h4>{link}</h4>
<p>{excerpt}</p>
<p class="meta" >{commentcount} Comments — {postviews} Views — {date}</p>
</li>
Place the above code in your Output Template section. (Where I mentioned we would focus our attention in the above video). Here you do not need to necessarily need to make any more adjustments, unless you really want to get ruthless with your output. Which I highly suggest you try!
After placement of that code, you will end up with something that resembles the image to the right. It won’t look exactly like the image, because your global site settings (i.e. your <li> <h4> & <p> settings) may be different than mine.
Customizing with Thesis
Lastly, the fun part. One of the most awesome features of Thesis is the ease of customizations by using the custom.css and custom_functions.php file editors. For those of you familiar with CSS styling, then you should be good to go with this tutorial. For those of you that are not, I will supply a general customization for you, but I encourage you play around with the code to make it fit your site!
CSS:
/* Customizing the Post Plugin Widgets — By: Justin Kopepasah — kopepasah.com */
.custom #NAMEOFPLUGIN li { border-bottom: 0.1em solid #999; }
.custom #NAMEOFPLUGIN li:hover { background:#ddd; }
.custom #NAMEOFPLUGIN h4 { font: 2.2em "Myriad Pro", Gill Sans, Ariel, sans serif; }
.custom #NAMEOFPLUGIN p { font: 1.2em; }
.custom #NAMEOFPLUGIN p.meta { font: 1em; }
At this point, you may be wondering why I put #NAMEOFPLUGIN. Since I do not know which plugin each person chooses, I simply put #NAMEOFPLUGIN as a general reference. Each plugin has its own id already input:
- Popular Posts =
#popular-posts - Recent Posts =
#recent-posts - Similar Posts =
#similar-posts - Random Posts =
#random-posts
These are the #NAMEOFPLUGIN references I mentioned. Simply pick the one you are using and exchange the code. This should start you on your journey with customizing Rob Marsh’s popular, random, recent, and similar posts plugins.
Conclusion
WordPress plugins and widgets are great for users who know little about coding. But making those plugins look and feel the same as ones blog can sometimes be a hefty task. However, as you can see, there are numerous customizations one can do with these Rob Marsh’s Post Plugins when using Thesis.
I hope that you have found my tutroial useful. If you have any questions, please start a discussion below so we can solve your, and others, problems below.
