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.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: