Did you ever wonder how popular sites highlight new posts for returning visitors? Clearly highlighting new posts to returning visitors is a great way to help users find new content and increase your pageviews. In this article, we will show you how to highlight new posts for returning visitors in WordPress.
Why Highlight New Posts for Returning Visitors?
Returning visitors are usually users who like your content and come back looking for more. However, most of these users only spend a few seconds, and they leave if they don’t find anything interesting.
By highlighting new content, you can point user’s attention to the latest content. This will not only help you increase your pageviews, but it will also help users find new content.
Method 1: Highlight New WordPress Posts with a Plugin
In this method, we will be using a plugin to highlight new posts for returning users. This method is easier to implement, and we recommend it for beginners.
First thing you need to do is install and activate the Mark New Posts plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to visit Settings » Mark New Posts to set up plugin.
First you need to choose marker placement. The plugin can show new post marker before the post title, after the post title, or both.
After that you need to choose a marker type. There are a number of choices. By default the plugin will show a small image as the marker.
You can choose to show a circle, a custom image, ‘New’ text, or a flag.
Lastly, you need to select when you want the marker to disappear. If you check the box next to ‘Mark posts as read only after opening’ option, then plugin will keep showing unread posts as new to your users.
This can be a bit annoying for your users. We recommend leaving it unchecked so that your users are only notified about new posts since their last visit.
Don’t forget to click on the save button to store your settings.
That’s all, the plugin will now highlight new posts for returning users with your selected marker type.
Method 2: Highlight New Posts by Adding Code Manually
This method requires adding code to your WordPress site. If you are confident about adding code snippets to your WordPress site, then you can try this method.
As always, make sure you backup WordPress before adding code snippets to your site.
First thing you need to do is copy and paste this code in your theme’s functions.php file or a site-specific plugin.
function wpb_lastvisit_the_title ( $title, $id ) { if ( !in_the_loop() || is_singular() || get_post_type( $id ) == 'page' ) return $title; // if no cookie then just return the title if ( !isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '' ) return $title; $lastvisit = $_COOKIE['lastvisit']; $publish_date = get_post_time( 'U', true, $id ); if ($publish_date > $lastvisit) $title .= '<span class="new-article">New</span>'; return $title; } add_filter( 'the_title', 'wpb_lastvisit_the_title', 10, 2); // Set the lastvisit cookie function wpb_lastvisit_set_cookie() { if ( is_admin() ) return; $current = current_time( 'timestamp', 1); setcookie( 'lastvisit', $current, time()+60+60*24*7, COOKIEPATH, COOKIE_DOMAIN ); } add_action( 'init', 'wpb_lastvisit_set_cookie' );
This code looks for a cookie called lastvisit when a user arrives on your website. If it does not find the cookie, then it sets the cookie with the current time.
If it finds the cookie, then it adds ‘New’ to the title of the articles published since user’s last visit.
Notice that there is a new-article
class in the <span>
tag around ‘New’. You will use this class to style the text using CSS.
We used the following CSS for our demo. Simply copy and paste it in your theme or child theme‘s stylesheet.
.new-article { background: #feffdd; padding: 3px; border: 1px solid #eeefd2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-left:5px; font-size: small; font-weight: bold; }
This is how it looked on our demo website.
We hope this article helped you highlight new posts for returning visitors in WordPress. Play around with the code, change the highlighted text and CSS to meet your needs.
You may also want to take a look at our guide on how to show last visited posts to a user.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
keramzyt says
Is any way to set this cookie and functionality to different subpages on website?
Peter says
Hi
I use WP for a static website and show posts in a sidebar using the Recent Posts widget.
I would like visitors to the site to be able to see new posts by highlighting them in some way in the sidebar e.g. showing “New” against the title of the post.
Is there any plugin that will support this? The Mark New Posts widget only shows that the item is new once you have opened the post from the sidebar.
Many thanks
Peter
محمود says
it didn’t work in my site…
please help.
S says
Forgot to mention, as mentioned above, most websites have more than one theme per post/page, so this may not work in that instance. Have a wonderful day.
S says
Thank you for all your help. However, this needs to be in a short video and explained in slow detail. This is complicated and for developers that are used to coding, not for the average joe building a website. I always appreciate your emails so much
WPBeginner Support says
Please use the first method which uses a plugin.
Admin
simpson says
Hello
this tutorial not works for me can u help me?
sam says
Hi
This is awesome but doesn’t work for me on wordpress multisite
Thanks
Sam says
This does not work for multisite network. Can you please advise. I appreciate your help by adding a tutorial for multisite.
Thanks
mthcsn says
Great stuff! Thanks!
Although, I think the cookie is expiring rather fast. I think it was meant to be ‘time()+(60*60*24*7)’ so it expires after a week. Otherwise, it expires only after slightly less than 3 hours.
Danny van Kooten says
Great idea – I turned this into a quick plugin so it’s even easier to integrate. It’s available from the WP.org repository: http://wordpress.org/plugins/highlight-new-posts/
Suggestions are very welcome.
simpson says
pls update plugin
Dennis Does Cricket says
Can you please show pics of what the intended outcome is?