Showing off the posts that were newly published on your website is one way to welcome your loyal readers, keep them updated, and make sure they don’t miss out on your latest content.

In this step-by-step guide, we will show you how to highlight new posts for returning visitors in WordPress.

Why Highlight New Posts on Your WordPress Site?

Highlighting new posts on your WordPress site helps returning visitors easily discover your new content. This way, they won’t miss out on any fresh information or updates you’ve added to your blog.

Labeling new posts improves the user experience on your WordPress website. When a returning visitor reaches your website, they can easily spot which posts they haven’t read yet, saving them a lot of time and increasing your pageviews.

A good user experience on your site not only keeps visitors happy but also helps with WordPress SEO. When your site is easy to use, it improves your search engine rankings and increases the likelihood of visitors finding your content.

With that in mind, let’s see how you can highlight new posts for returning visitors in WordPress.

We will show you two methods: one with a WordPress plugin and the other with code. You can jump to a specific method using the quick links below:

Method 1: Highlight New WordPress Posts With a WordPress Plugin

This first method uses the Mark New Posts plugin. We recommend it for beginner bloggers because it’s very simple. This plugin will add a label to show which blog posts your site visitors haven’t seen yet.

Firstly, you need to install and activate the Mark New Posts plugin. If you need guidance, see our step-by-step guide on how to install a WordPress plugin.

After that, go to Settings » Mark New Posts from the WordPress admin area. You will now see the plugin’s settings page.

What you want to do now is select where to display the ‘New’ label. You can select After post title, Before post title, or Before and after post title.

We find that adding the label after the post title will look like a notification and grab users’ attention the most, so that’s what we’ve chosen.

Next, you need to choose what the marker looks like in the Marker type setting. The options include “New” text, “New” text legacy, Orange circle, Flag, Picture, or None.

Be sure to explore each option to see which one looks best with your website design.

Another setting you can configure is the background color for the new post’s title. If you enable this, then when a reader visits a new post, they will see that the post title section has a background color. We didn’t find this setting necessary, so we disabled it.

In the ‘Consider a post as read’ setting, you can choose when to turn off the new post label: after it was opened, after it was displayed in the list, or after any web page of the blog was opened.

We suggest going with ‘after it was opened.’ This means that if a visitor hasn’t read several posts and opens one, then the new post label for the other articles won’t disappear.

Next, you can select how many days the post should stay highlighted as new, show all existing posts as new to new visitors, and disable the new label for custom post types.

The last two settings are pretty advanced.

One is to ‘Allow outside the post list,’ which means you can highlight posts outside of the loop, like in widget-ready sidebar areas. Be cautious about enabling this setting, as it may create unwanted WordPress errors.

The other is ‘Use JavaScript for showing markers’, which is only recommended if the plugin is not compatible with the theme or other plugins being used on your blog. In most cases, you will want to keep this setting disabled.

Once you are done configuring the plugin settings, just click ‘Save.’

And that’s it! Go ahead and visit your website in incognito mode to see if the new labels for recent posts are live.

Here’s what it looks like on our demo website:

Method 2: Highlight New Posts by Adding Custom Code

Are you unhappy with the new post label options given by the previous plugin? If so, then you can highlight new posts using custom code instead.

For beginners, this method may seem intimidating. But don’t worry because we will use the WPCode plugin to safely insert code snippets in WordPress without breaking your website.

WPCode also makes it easy to manage multiple custom code snippets, which will be handy in our case since we will be using more than one.

The first thing you need to do is install WPCode in WordPress. For setup instructions, go ahead and check out our article on how to install a WordPress plugin.

Next, go to Code Snippets » + Add Snippet from your WordPress dashboard. After that, select ‘Add Your Custom Code (New Snippet)’ and click the ‘Use snippet’ button.

Now, let’s add a title to your code snippet so that it’s easier to find it later on if needed. For this, you can name it something like ‘WordPress Last Visit Title Modifier.’

Then, select ‘PHP Snippet’ in the Code Type dropdown.

After that, you can copy and paste the code snippet below:

// Define a function to modify post titles based on the last visit
function wpb_lastvisit_the_title($title, $id) {

    // Check if not in the loop, a singular page, or a page post type; if true, return the original title
    if (!in_the_loop() || is_singular() || get_post_type($id) == 'page') return $title;

    // Check if no 'lastvisit' cookie is set or if it is empty; if true, set the cookie with the current timestamp
    if (!isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '') {
        $current = current_time('timestamp', 1);
        setcookie('lastvisit', $current, time() + 60 * 60 * 24 * 7, COOKIEPATH, COOKIE_DOMAIN);
    }

    // Retrieve the 'lastvisit' cookie value
    $lastvisit = $_COOKIE['lastvisit'];

    // Get the publish date of the post (in Unix timestamp format)
    $publish_date = get_post_time('U', true, $id);

    // If the post was published after the last visit, append a new span to the title
    if ($publish_date > $lastvisit) $title .= '<span class="new-article">New</span>';

    // Return the modified or original title
    return $title;
}

// Add a filter to apply the 'wpb_lastvisit_the_title' function to 'the_title' hook with priority 10 and 2 parameters
add_filter('the_title', 'wpb_lastvisit_the_title', 10, 2);

What this snippet does is modify WordPress post titles based on a user’s last visit.

It checks if the page is a blog post or not, and if not, then it will display the original title as is. But if it is a blog post, then the title will be modified.

Then, the snippet ensures the lastvisit cookie exists. If it doesn’t, then the code creates it and sets it to the current time. The function then compares this lastvisit time with the post’s publish date and adds a ‘New’ label to the title if the post is newer than the last visit.

Once you have inserted the code snippet, just scroll down and select ‘Auto Insert’ for the Insert Method.

Other than that, make sure to choose ‘Frontend only’ for the Location. This means the code will only run on the part of your WordPress blog that visitors interact with and not in your admin panel or other places.

With that done, you can make the code ‘Active’ and click ‘Save Snippet.’

Now, repeat the step to add a new custom code snippet. This time, the code will style the ‘New’ label that is added to recent post titles based on the last visit of a user.

So, you can name it something like ‘Post Title New Label Style’ and the Code Type should be ‘CSS Snippet.’

You can then copy and paste the following lines of code into the Code Preview box:

/* CSS to style the "New" label in blog post titles */
.new-article {
    background-color: #4CAF50; /* Green background color */
    color: #ffffff; /* White text color */
    padding: 2px 5px; /* Padding around the label */
    margin-left: 5px; /* Adjust the margin to your preference */
    border-radius: 3px; /* Rounded corners for the label */
    font-size: 12px; /* Adjust the font size to your preference */
}

This code snippet essentially customizes the ‘New’ post label using a custom background color, text color, padding, margin, border radius, and font size.

Feel free to adjust these elements to your preferences as you go along. Just make sure to use hex color codes or RGB values for the background and text colors.

In the Insertion section, select ‘Site Wide Header’ as the Location. After that, make the code ‘Active’ and click ‘Save Snippet.’

And that’s it! To see if the code works, you can publish a new blog post and view the post in mobile or desktop in incognito mode.

If the code is successful, then you should see a ‘New’ label next to your recent post titles.

Learn More Ways to Optimize Your WordPress Blog

Besides highlighting new posts for returning website visitors, there are other ways you can do to improve your blog and get people to stay on your site longer.

For example, you could display posts related to the one that the visitor is currently reading. This way, you can keep them engaged by presenting content that aligns with their interests.

Or, you could create a sticky floating footer bar to capture email addresses or promote special offers. This bar remains visible as visitors scroll down the page. You can use it to provide a constant reminder to subscribe or take advantage of your offer, increasing conversion rates.

You may also want to add a font resizer for accessibility purposes. This allows visitors to adjust the font size on your website to their preference, making it easier for them to read your content.

If you have lots of blog content, you may want to create custom pages that display blog posts if they have a specific custom field.

Let’s say you have a custom field for ‘Recipe Difficulty.’ You could create a page that displays all blog posts tagged with ‘Recipe’ and that also have the custom field value of ‘Easy.’ This way, visitors looking for easy recipes can find them all in one place.

Here are other tips you can check out to further optimize your WordPress blog:

• How to Display Relative Dates in WordPress
• How to Build a Custom Scrollbar in WordPress
• How to Display Post Excerpts in WordPress Themes
• Ways to Create a Mobile Friendly-WordPress Site (Expert Tips)
• How to Highlight Text in WordPress (Beginner’s Guide)

We hope this article helped you learn how to highlight new posts for returning visitors in WordPress. You may also want to check out our expert picks of the best WordPress drag-and-drop page builder plugins and our ultimate guide on how to edit a WordPress website.

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.

The post How to Highlight New Posts for Returning Visitors in WordPress first appeared on WPBeginner.

More than half of all website traffic comes from mobile devices. If your navigation menu doesn’t work well on smartphones and tablets, then a big chunk of your audience may struggle to find their way around your site.

In this guide, we will show you how to easily create a mobile-ready responsive WordPress menu.

Why Create a Mobile-Ready Responsive WordPress Menu?

A well-designed navigation menu will help visitors find their way around your website. However, just because your menu looks great on desktop computers, doesn’t automatically mean it will look good on mobile screens and tablets too.

Mobile users make up around 58% of all internet traffic. That said, if your menu doesn’t look good or work correctly on mobile devices, then you risk losing half your audience due to poor user experience.

This will make it difficult to achieve key goals such as growing your email list, getting sales, and growing your business.

That being said, let’s see how you can create a mobile-ready responsive menu that will look great on smartphones and tablets. Simply use the quick links below to jump straight to the method you want to use.

Method 1: Create a Mobile-Ready Responsive Slide Panel Menu

A responsive slide panel is a navigation menu that slides onscreen when a visitor taps or clicks on a toggle.

In this way, the menu is always within easy reach but doesn’t take up any onscreen space by default.

This is particularly important since smartphones and tablets have much smaller screens compared to desktop computers.

If the menu is constantly expanded, then a mobile user may trigger its links by accident using their device’s touchscreen. This makes slide panels a good choice for a mobile-responsive menu.

The easiest way to add a mobile-ready slide panel is by using Responsive Menu.

Note: There is a premium version of the Responsive Menu with extra themes and additional features such as conditional logic. However, in this guide, we will use the free plugin since it has everything you need to create a mobile-ready menu.

First, you need to install and activate the Responsive Menu plugin. For more details, see our tutorial on how to install a WordPress plugin.

Upon activation, you can use the plugin to customize any WordPress menu you’ve previously created. If you need to create a new menu, then please see our beginner’s guide on how to add a navigation menu in WordPress.

On the other hand, if your WordPress theme already has a built-in mobile menu, then you will need to know that menu’s CSS class so you can hide it.

If you skip this step, then mobile users will see two overlapping menus on your website. For step-by-step instructions, please see our guide on how to hide a mobile menu in WordPress.

With that done, go to the Responsive Menu » Menus page on the WordPress admin sidebar and click on the ‘Create New Menu’ button.

You will now see a few different mobile responsive themes that you can use for your menu.

We are using the ‘Default Theme’ in our images but you can use any theme you want. After making your decision, click on ‘Next.’

You can now type in a name for the menu. This is just for your reference so you can use anything you want.

With that done, click on ‘Link WordPress Menu’ and choose the menu that you want to use.

As already mentioned, if your theme already has a built-in mobile menu, then you’ll need to add its CSS class to the ‘Hide Theme Menu’ field.

If you upgrade to the premium plugin, then you will get a few additional settings. For example, Pro users can hide the menu on particular pages or devices.

When you are happy with how the menu is set up, click on ‘Create Menu.’

You’ll now see a preview of your WordPress website on the right of the screen, and some settings on the left.

To see how your site looks on mobile, click on either the mobile or tablet icon at the bottom left of the screen.

To customize how the menu looks and acts on mobile devices, select ‘Mobile Menu.’

Then, click on ‘Container.’

Here, you will find lots of different settings.

As you make changes, the live preview will often update automatically. With that in mind, it’s a good idea to expand the menu so you can monitor how your mobile menu will look. To do this, simply click on the menu toggle button.

By default, the plugin adds a title and some ‘Add more content…’ text.

You can replace this with your own messaging, or even remove the text completely. To edit the title, click to expand the ‘Title’ section.

You can now type your own messaging into the ‘Title Text’ field.

You can also add a link to the title, or add icon fonts and images.

To customize how the title looks, click on the ‘Styles’ tab.

Here, you can change the background color, the text color, the font size, and more.

If you don’t want to show any title text, then click to deactivate the toggle next to ‘Title.’

If the title isn’t essential, then removing it will create more space for the links and other content in your mobile navigation menu.

To replace the ‘Add more content here….’ text with your own messaging, click to expand the ‘Additional Content’ area.

You can now type in your own text, change the text color, change the text alignment, and more by using the settings in the left-hand menu.

To delete the text completely, simply click to deactivate the toggle.

Once again, this can create more room for the rest of the menu’s content. This is particularly useful on smartphones and tablets, which typically have smaller screens.

By default, Responsive Menu will show all your menu items as a single list. However, you may prefer to show these links in multiple columns.

This can work well if your menu labels are shorter, as it allows you to show more items in a smaller amount of space without the menu looking cluttered.

To try different column layouts, click to expand the ‘Menu’ section.

You can now open the ‘Menu container columns’ dropdown and choose the number of columns you want to use.

At this point, you may see some ‘Update Required’ text. If you see this message, then give it a click to update the live preview with your new column settings.

By default, the plugin also adds a search bar to your WordPress menu. This can help visitors find interesting content but also take up precious onscreen space.

If you prefer, then you can remove the search bar for mobile users by deactivating the toggle next to ‘Search.’

There are a lot of other settings that you can configure, so you may want to spend some time looking through the other options. However, this is enough to create a well-designed mobile-ready menu.

When you are happy with how the navigation menu is set up, click on ‘Update.’

Now, simply visit your WordPress blog using a mobile device, to see the new menu in action. You can also view the mobile version of your WordPress site from your desktop.

Method 2. Create a Mobile-Ready Fullscreen Responsive Menu

Another option is to add a fullscreen responsive menu. This is a menu that automatically adjusts to different screen sizes, so the navigation menu will always look good no matter what device the visitor is using.

Since the menu takes up all the available space, it is easier to navigate on smartphones and tablets, no matter how small the screen.

The easiest way to create a fullscreen menu is by using FullScreen Menu. This plugin allows you to create a fullscreen menu for mobile devices only, or you can show the same menu across smartphones, tablets, and desktop computers, so all visitors have the same experience.

The first thing you need to do is install and activate the FullScreen Menu plugin. You can check our step-by-step guide on how to install a WordPress plugin for more details.

Upon activation, visit the Fullscreen Menu Options page from the WordPress menu and check the following box: ‘Activate Animated Fullscreen Menu.’

We also recommend checking the ‘Show the menu only for Admin users’ box. This allows you to see the changes as you’re configuring the menu, but visitors won’t see the mobile menu until you make it live.

By default, the plugin will show the fullscreen menu on all devices. If you want to show the fullscreen menu on smartphones and tablets only, then check the box next to ‘Mobile only.’

With that done, you’re ready to fine-tune how the menu looks by clicking on the ‘Design / Appearance’ tab.

Here, you can choose the colors, font, and animation settings for the fullscreen menu.

When making these changes, just be aware that ‘Initial Background Menu’ is the menu’s toggle icon. Meanwhile, ‘Opened Background Menu’ is the color of the expanded, fullscreen mobile menu.

After choosing the menu colors, scroll to the ‘Menu Appearance’ section. Here you can change the menu’s font color, font family, and font size.

Just be aware that loading additional fonts could affect your WordPress site performance and speed. This isn’t always a good choice for mobile devices, which typically have less processing power compared to desktop computers. Some visitors may also have a poor mobile internet connection, which will make your site load even more slowly.

With that done, scroll to ‘Animation Settings.’.

To start, you can choose how the menu will expand when a visitor clicks the toggle icon. Simply open the ‘Animation Type’ dropdown menu and choose an option from the list, such as From Top to Bottom or From Left to Right.

When you’re happy with how the menu is set up, it’s time to add some content by clicking on the ‘Menu Content’ tab.

Here, go ahead and open the ‘Select Menu’ dropdown and choose the menu that you want to show fullscreen.

If you haven’t created a navigation menu yet, then check out our guide on how to add navigation menus in WordPress.

If you want to show additional content in the menu, then you can add it in the ‘Free HTML / Shortcodes’ box. This acts as a mini page editor so you can type in text, change the formatting, add bullet points and numbered lists, and more.

There is also a checkbox that will add a link to your privacy policy page. 

Next, you might like to add social media icons to your WordPress menu. These icons will appear in a row at the bottom of the fullscreen menu.

To add these icons, simply click to expand the ‘Social Icon 1’ box.

You can now type in a title for the icon, such as ‘Facebook.’

After that, click on the arrow next to ‘Social Icon’ and choose the icon that you want to show to mobile visitors.

Finally, type the address you want to use into the ‘Social URL’ field.

To add more icons, simply click the ‘Add Another Icon’ button.

Finally, you may want to add a WordPress search bar to help visitors find what they are looking for. To do this, simply check the box next to ‘Add Search Bar.’

By default, the plugin will show a ‘Search something…’ message. However, you can replace this with your own custom messaging by typing into the ‘Search input placeholder’ field.

For example, if you run a WooCommerce store, then you may want to use text such as ‘Start shopping’ or ‘Search for products.’

When you’re happy with how the menu is set up, click on the ‘Save Changes’ button.

Now, simply visit your website using a mobile device to see the fullscreen menu in action.

You can also preview the mobile version of your website using the WordPress theme customizer.

Bonus: How to Add a Mobile-Responsive Menu to Landing Pages

If you are creating a landing page or sales page, then you will want the design to look just as good on mobile devices as it does on desktop.

With that in mind, we recommend creating the page using SeedProd. It is the best WordPress page builder and comes with more than 300+ professionally-designed templates.

After creating a design using SeedProd, you can add a mobile-responsive menu to the page using SeedProd’s ready-made Nav Menu block. This block allows you to create separate menus for both menu devices and desktops.

In this way, you can use a different layout and even show different links depending on the user’s device.

To learn more, please see our guide on how to add custom navigation menus in WordPress.

After adding the Nav block to your design, simply click on the ‘Advanced’ tab.

Here, click to expand the ‘Device Visibility’ section.

After that, click on the ‘Hide on Desktop’ toggle to activate it. Now, this menu will only appear on mobile devices.

You can now add links and change the menu’s layout using the settings in the left-hand menu.

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our beginner’s guide on how to increase your blog traffic or see our expert pick of the best analytics solutions for WordPress users.

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.

The post How to Create a Mobile-Ready Responsive WordPress Menu first appeared on WPBeginner.

A lot of the time, you will want to show the same sidebar across your entire website or blog. However, sometimes you may need to show different sidebar content on some of your posts and pages.

In this article, we will show you how to create and display different sidebars for each post and page in WordPress.

When Would You Need Different Sidebars in WordPress?

Many WordPress themes have a default sidebar location where you can add useful widgets and content. For example, many sites add a search bar to the sidebar or show a list of recent posts.

If your WordPress theme has a sidebar, then by default, it will look the same on all your posts, pages, categories, and archive pages.

However, you may want to display different sidebar widgets on certain WordPress posts and pages.

For example, you might show different content in the sidebar of your most popular posts or display ads that are more relevant to a particular page.

You could even use different contact forms depending on the page’s content.

Having said that, let’s see how to create and display a different sidebar for each post and page in WordPress. Simply use the quick links below to jump straight to the method you want to use:

Method 1: Displaying Different Sidebars for Each Post and Page in WordPress (Easy)

If your theme supports sidebar widgets, then you can easily create multiple sidebars using Lightweight Sidebar Manager. This custom sidebar plugin lets you build as many sidebars as you want and then assign them to different posts and pages.

You can also add them to custom post types or assign a sidebar to all the different pages or posts that have a specific category.

The first thing you need to do is install and activate the Lightweight Sidebar Manager plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to go to Appearance » Sidebars. To create the first sidebar, click on the ‘Add New’ button.

You can now type in a title for the new WordPress sidebar. This is just for your reference, so you can use anything you want.

With that done, open the ‘Sidebar To Replace’ dropdown menu and choose the location where you want to show the sidebar. The options you see may vary depending on your WordPress theme. 

Now, you can control where the sidebar appears by creating inclusion or exclusion rules. 

To create an inclusion rule, just open the ‘Display On’ dropdown and choose the pages, posts, custom post types, or categories where you want to use the sidebar. 

For example, you might add the sidebar to a specific page, such as your 404 error page, the author archive, or blog page.

Another option is using the sidebar for a particular page, post, or category by selecting ‘Specific Pages/Posts/Taxonomies.’

This adds a box where you can type in the page, post, or category.

To create more inclusion rules, simply click on the ‘Add Display’ Rule button.

This adds a section where you can create the new inclusion rule.

If you prefer, then you can create exclusion rules instead. For example, you may want to show the sidebar on every page except the homepage. 

You can also combine inclusion and exclusion rules to control exactly where the sidebar appears on your WordPress website.

To create an exclusion rule for the sidebar location, just click on the ‘Add Exclusion Rule’ button.

In the new ‘Do Not Display On’ section, open the dropdown menu and select the page or post that shouldn’t use this sidebar. 

You can also exclude the sidebar from WordPress pages that have a specific category by following the same process described above.

After deciding where the sidebar will appear on your WordPress blog, you may want to show different content to different users.

For example, if you have a membership site, then you might use a different sidebar for visitors compared to logged-in members. 

To do this, open the ‘User’ dropdown and choose a role from the dropdown menu. Now, only people with this specific user role will see the sidebar. 

Finally, you may want to type in an optional description. This will only appear in the WordPress dashboard, so it’s a good way to share information with other admins or users on a multi-author WordPress blog. 

If you are going to create lots of sidebars, then you can also use this field to leave yourself notes and helpful reminders.

When you are happy with the information you have entered, simply click on ‘Publish.’

With that done, go to Appearance » Widgets. You will now see all the widget areas that your theme supports by default, plus the new sidebar you created in the previous step.

You can now go ahead and add widgets to the sidebar, just like any other widget section.

For step-by-step instructions, please see our guide on how to add and use WordPress widgets. 

When you are happy with how the sidebar is set up, click on ‘Update.’

Now, if you visit your WordPress blog, you will see the new sidebar live.

To create more theme sidebars, simply keep repeating these steps. 

Method 2: Creating a Different Sidebar With a Page Builder Plugin (Works With Any WordPress Theme)

If your theme doesn’t have a sidebar function, then you can still create different sidebars using a drag-and-drop page builder plugin.

SeedProd is the best and most beginner-friendly landing page builder plugin for WordPress. With this plugin, you can create any type of custom page without writing any code.

It also has dozens of professional site kits and templates that you can easily edit and fine-tune using the drag-and-drop builder.

When designing a custom page, you can choose a layout that has a sidebar.

You then simply find the blocks you want to show in that sidebar and add them using drag and drop.

SeedProd has all the blocks and features you’d expect from a powerful page builder, such as opt-in forms, social profiles, countdown timers, contact forms, buttons, various content blocks, and more. This makes it easy to create powerful and unique sidebars for your WordPress blog.

To learn how to use the SeedProd page builder plugin on your website, you can see our guide on how to create custom sidebars, headers, or footers for each WordPress category and how to create a custom page in WordPress.

Learn More Ways to Customize Your WordPress Sidebar

Want to improve your WordPress sidebar further and make it more useful for your users? Check out these WordPress tutorials:

• How to Add Social Media Icons in Your WordPress Sidebar
• How to Create a Sticky Floating Sidebar Widget in WordPress
• How to Add Featured Posts in the WordPress Sidebar
• How to Use Shortcodes in your WordPress Sidebar Widgets
• How to Create a Collapsible Sidebar Menu in WordPress (The Easy Way)
• How to Add a Login Form in Your WordPress Sidebar
• How to Display Instagram Photos in WordPress Sidebar Widget

We hope this article helped you learn how to add different sidebars to each post or page in WordPress. You may also want to learn how to create a custom Instagram feed in WordPress or see our expert picks for the best block themes for full site editing.

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.

The post How to Display Different Sidebar for Each Post and Page in WordPress first appeared on WPBeginner.