How to Highlight New Posts for Returning Visitors in WordPress

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.