Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

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.

Mark new posts settings

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.

New post highlighted

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.

Highlighting new since last visited articles in WordPress

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

14 CommentsLeave a Reply

  1. 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!

  2. 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

  3. 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.

  4. 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

  5. This does not work for multisite network. Can you please advise. I appreciate your help by adding a tutorial for multisite.

    Thanks

  6. 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.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.