Why and How to Add Custom Recent Posts in WordPress

Many of you would have come across a need to display list of recent posts on widgetized area of your website. Displaying recent posts in widgets area is a familiar concept, and you might noticed on many blogs and websites.

Out of the box, the recent posts widget that comes with WordPress is used to display the recent posts in sidebar. However, this option is limited to default post type only. WordPress does not allow you to show custom posts for registered post types on the widget areas of your WordPress blog.

Today, I will also share one trick which can grab visitors attention, and increase conversions in moments.

How to display recent custom posts?

In this tutorial I will share how easily you can display recent posts for custom post types on WordPress blog along with color highlighting for enhanced content navigation.

Before I begin, let me tell you that SavvyTheme is not just a WordPress resource site but it also features daily hand-picked WordPress deals and discounts on premium WordPress products for our visitors. We keep our deals section up-to-date so that our readers can get premium products at reduced price.

On our blog’s sidebar, along with other useful content we display the most recent WordPress deals & coupons using custom recent posts widget. However, this routine practice was not every effective until we implemented this solution wherein the idea was to highlight the key phrases of the recent deals to increase the visibility and grabbing visitors attention.

As you scroll down this page, you would notice that content visible in the sidebar especially fresh deals appears with color schemes. After the color scheme is applied colored tags appear around the key phrases of recent deals.

Here, I am sharing one and only plugin you will ever need for displaying custom posts in sidebar of the WordPress blog…

Recent Posts Widget Extended

This plugin is highly customizable, easy-to-use and comes with lots of options for customizing the appearance. It’s a must have plugin for any WordPress developer or designer.

recent-posts-widget-extended

The plugin adds a widget to your WordPress blog, which allows you to display recent posts for any custom post type. Unlike WordPress recent posts widget, this plugin comes with some advance features to display a list of most recent posts with thumbnail and excerpt, also you can filter the posts based on taxonomy, post type and much more. Go to Appearance -> Widgets, and drag the Recent Posts Widget Extended to sidebar.

recent-posts-widget-extended2

As you would have noticed above, the widget comes with many options that gives you full-control, right from appearance to filtering the posts based on taxonomies and categories. You can set thumbnail height and width, limit text to number of characters, apply custom css, read more button and much more.

Creating custom post type in WordPress was never so easy until we used all-in-one custom post type builder (PTB Plugin) from Themify. The only plugin which comes with powerful features to build custom post types and taxonomies, and empower you to control design template using inbuilt Drag and Drop Builder without having to write any code.

No matter how you built custom posts, either using coding or through any free or premium WordPress plugins, Recent Posts Widget Extended plugin works out of box with any custom post type, even created by another plugin.

Let’s now talk about the trick which can really help to increase conversion…

The trick will help us to apply the colour scheme to all recent posts from coupon post type on the screen. The colour scheme is applied using jQuery.

After highlighting is applied colored tags appear around key phrase of coupon post title.

How to highlight the key phrases of custom recent posts?

Before, I start explaining how to select the text of the custom post title or excerpt in recent custom posts let me tell you why you should implement this solution. The purpose of highlighting the key phrases of the discounted price or percentage off of the recent posts to get people’s attention.

To start with we will first define the expressions. The expressions are used so that we don’t have to hardcode the values. So for example, if the title of the post is “60% OFF Fall Sale! Bluehost hosting plans from $2.95 per month”, it would be converted into “ 60% OFF  Fall Sale! Bluehost hosting plans from $2.95 per month”.

Below you can see how it makes the difference when text is beautified from ordinary look.

recent-posts-color-scheme

Without further ado, let’s see how I implemented this approach on our blog.

1. Write a function in JavaScript to loop through

First, we need to make a function that can loop through the recent post list. We used jQuery to iterate through the elements of the custom posts.

For example, below code will loop through all the hypertext elements of ul which is an inner element of html tag with id #fdeals.

[code type=javascript]
jQuery(“#fdeals ul li h3.rpwe-title a”)
[/code]

We have defines the match expressions instead of hardcoding the values so that matching content will be highlighted automatically.

Next, we have defined the match expressions to compare with the phrases of recent posts.

[code type=javascript]
var keys = [“d% off”, “d% discount”, “%d sale”,
“$d off”, “$d discount”, “$d sale”,
“$d worth”, “worth $d”
];
[/code]

This way you can avoid hardcoding the values for matching.

The expression d% off is to check if the post title has any discount mentioned like 15% off or 20% off etc. in the post title. Similarly, there is another expression $d off which is to check if the post title has any discount rate like $50 off or $100 off etc. in the post title. The expressions are used here to avoid hard-coding the values otherwise it could lead to n possibilities.

Here is how I wrote the function to wrap all the code for highlighting the text.

[code type=javascript]
function format_offer_tags() {
var keys = [“d% off”, “d% discount”, “%d sale”,
“$d off”, “$d discount”, “$d sale”,
“$d worth”, “worth $d”
];
jQuery(“#fdeals ul li h3.rpwe-title a”).each(function (index) {

var head = jQuery(this);
keys.forEach(function (item) {
var text = head.text().toUpperCase();
var fdeals_nums = text.match(/(\d+)(,\d+)*/g);

if (fdeals_nums == null)
return;
for (i = 0; i < fdeals_nums.length; i++) { if (fdeals_nums[i] != null && fdeals_nums[i] != undefined && fdeals_nums[i] != 0) { if (text.indexOf(item.replace(“d%”, fdeals_nums[i] + “%”).toUpperCase()) >= 0) {
console.log(“match: ” + item.replace(“d%”, fdeals_nums[i] + “%”));
var text_to_rep = head.text().substr(text.indexOf(item.replace(“d%”, fdeals_nums[i] + “%”).toUpperCase()), item.replace(“d%”, fdeals_nums[i] + “%”).length);
var text1 = head.text().replace(text_to_rep, “” + text_to_rep.toUpperCase() + ““);
head.html(text1);
text = text1.toUpperCase();
}
else if (text.indexOf(item.replace(“$d”, “$” + fdeals_nums[i]).toUpperCase()) >= 0) {
console.log(“match: ” + item.replace(“$d”, “$” + fdeals_nums[i]));
var text_to_rep = head.text().substr(text.indexOf(item.replace(“$d”, “$” + fdeals_nums[i]).toUpperCase()), item.replace(“$d”, “$” + fdeals_nums[i]).length);
var text1 = head.text().replace(text_to_rep, “” + text_to_rep.toUpperCase() + ““);
head.html(text1);
text = text1.toUpperCase();
}
}
}
});
});
}
[/code]

2. Calling the function

Now that we have a function for formatting the recent posts for custom post type, let just call it.

[code type=javascript]
jQuery(document).ready(function () {
format_offer_tags();
});
[/code]

Key note: We have used jQuery in the example above.

how-to-add-custom-posts-in-sidebar

Which content should you highlight in recent post list?

You can use this approach with little tweak to,

  1. Promote affiliates deal or discount, highlighting discount percent or sales price with different colour and background.
  2. Displaying your top products or services highlighting their names to grab visitors attention.
  3. Recent forums or tickets, highlighting their status, fixed or open etc.

The best example is to use it for your affiliates or products promotions, as people who navigate to your site, are more likely to get attention on through highlighted content.

I recommend to display WordPress recent posts on sticky sidebar of your blog post since sticky sidebar posts will have higher visibility and helps you increase the conversions. To learn how to add sticky sidebar or floating widget on your blog, please check out the following post.

Lastly, please let me know how you liked this article and how would you like to use this idea on your blog? I request you to share this article with other WordPress users using social networks, as it would help them earn more commissions.