Published on Oct 23, 2019

How to add a “New” label to a nav menu item in WordPress

Sridhar Katakam

This tutorial provides the steps to add a New label as part of a menu item text in WordPress.

Step 1

In this example, we shall add the label to the BLOG nav menu item.

Let’s add a blog class to the Blog nav menu item.

While not compulsory, this step makes it easier to target our desired menu item in CSS.

At Appearance > Menus edit your menu.

Click on Screen Options near the top right and tick CSS Classes.

Now enter a custom text that identifies your menu item. For example, blog .

Step 2

Add the following sample CSS (If using Oxygen, in a stylesheet at Manage > Stylesheets) and modify to suit:

.blog.menu-item > a::after {
width: auto;
height: auto;
transform: none;
color: rgb(255, 255, 255);
background-color: rgb(66, 220, 10);
padding-right: 12px;
padding-left: 12px;
margin-left: 8px;
border-radius: 5px;
content: "NEW";
border: none;
}

Replace blog in the above with the CSS class you set for your desired menu item to which you want to add the label.

In

content: "NEW";

change NEW to your desired label text.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right