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

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.