How to create category dropdown menu in Wordpress
WordPress Guides Uncategorized

Easiest way to create a Category Dropdown menu in WordPress.

Spread the love

Category dropdown menu is  a must have option for any blog. A lot of bloggers use Category dropdown menu to organize the content. All of the Content Management Systems (CMSs) provide a way to organize content as per blogger’s and reader’s comfort.

WordPress is one of the powerful Content Management System (CMS) and powers almost 35% of the websites on internet. The reason for such a huge success of WordPress is, it is very easy to understand and use. Anyone without any technical or coding background can create an attractive website within a day or two. As a blogger, I chose WordPress because of its hassle-free platform.

Despite so many advantages WordPress has some limitations too. No one is perfect in this world and we can’t blame WordPress. I was stuck with a very small requirement and WordPress was helpless to give any direct solution. In other words, I was helpless to find a solution in WordPress.

What is problem?

I write a lot of content on WordPress. I observed that When content base grows, one must arrange it properly in some indexed and sorted way. It makes easier for readers to browse your blogs without feeling irritated. After all, readers are always important, and they are the judge for a blogger’s success.

I wanted to manage my articles by Category as it can be one of the popular criteria to divide blogs. I was surprised to know that there was no direct way to create a Category dropdown as a header menu item in WordPress.

 I managed to create custom dropdown using PHP, but I started looking around in forums for answer. I posted my question, “How to create Category Dropdown menu without any coding?”. I found the answer. It is indirect but very simple. I thought it should be shared with others so to save their precious time.

How to create a Category dropdown menu without any coding?

WordPress has a very simple, inbuilt way to create a dropdown menu and add Categories as display value. You have to follow these 3 easy steps.

Step-1

Open your WordPress admin panel and navigate to menu, under Appearance. If you have multiple Menus, select an Active Menu or the menu which you are going to customize and include brand new Category Dropdown.

Create a Category Dropdown in wordpress -1

 

Step-2

Create a Custom Link and name it, “Categories”. WordPress provides custom link feature to add URL as menu item. Bloggers use it to navigate to their personal profiles, outbound “About Us” pages and some other page that is not available as out of the box menu item.

You must provide URL and link text while creating Custom Link (Category dropdown Menu). Provide URL as ‘#’ and Link text as ‘Categories’, Or any label of your choice.

You are populating link URL as ‘#’ which will work, just as placeholder. Remember, you don’t want to navigate any other page, but to open a dropdown field. Website developers use ‘#’, as a placeholder for buttons and links and later using JavaScript code they update the link URL dynamically. For your better understanding, you can check few code samples here.

Create a Category Dropdown in wordpress -2

Step-3

After creating the Custom Link, you must click ‘Add to Menu’. Once brand new “Categories” menu item is added to Header, you will have to add all the existing categories under this ‘Categories’ dropdown menu. WordPress has made it easier to cascade available menu items. This is mere drag and drop job. 

This is how menu structure should look like after adding “Categories” menu item and all sub item values inside it.

Create a Category Dropdown in wordpress -3

I was relieved to see this indirect, but simple way to create a Category dropdown menu. We can create such menu items by writing few lines of code as well, but this looks more natural and easier to tweak.

Best part of this out of the box option is, you can update at single place and it will reflect everywhere. Usually it is best practice to avoid playing with WordPress code until and unless you are good in PHP and HTML. Beauty of this easy method is, we can use it any where in header or footer and will return the awesome collection of blogs based on opted categories.


How to remove the description from Category Dropdown menu item?

While creating a Category, usually we provide a relevant description. This description is important in terms of SEO. But problem with this description is that it appears in Category menu item as well. Check this screenshot. This doesn’t look useful.

How to remove description from Category Menu

How to remove unnecessary description from Category Menu item?

WordPress doesn’t provide direct way to disable description from Category dropdown menu. But there is a simple way to do it. This involves small CSS code. 

Using custom CSS, we can disable the description from appearing it in dropdown but it will still appear on detail page of that particular category. Isn’t is what we want?

All you have to do is, navigate to Customize option and add this to Custom CSS section and Done. Even if you are not aware of CSS or any coding, you can still do it by pasting this code. No need to update or make any logical conclusion on this code.

.nav-content {
   display: none;
} 

Wrapping Up

So this is how a beautiful category navigation can be created. We divided this task into two parts.

  • Creating Category Dropdown 
  • Disabling Category menu description (optional and require small CSS code)

This category dropdown is helpful in terms of visitor convenience as well as SEO. Google also prefers to index sites with proper navigation linking and document categorization.

Also Read: Beginner SEO guide: How to Optimize your blog?


Alok Rai
A passionate tech blogger who loves to read and write about technology, interesting concepts, and science. Additionally, I love to code and recently develop a mobile app, "The Mutual Fund Journal" for Indian users and working on it to extend for all.

One Reply to “Easiest way to create a Category Dropdown menu in WordPress.

  1. Well, I was able to create category drop-down menu but wasn’t sure how to hide the description. Thanks for providing the css to hide description from category menu.

Leave a Reply

Your email address will not be published. Required fields are marked *