Have you found that over time you enjoy adding custom CSS to your WordPress website? Have you found that adding custom CSS classes has become easier over time as well? CSS can be used to manipulate all sorts of functionality all over your website. Today I am going to show you how to add a custom CSS class to WordPress menus.
This tutorial is perfect for those of you who have been trying to figure out how to add classes to your menus, but you aren’t quite sure where or how to do it. There are a few different CSS classes you could add to a WordPress menu, but let’s focus on adding “first” and “last” CSS custom classes to a WordPress menu.
Aside from this technique, there are also other ways to add custom styles to WordPress.
What is a Custom CSS Class?
CSS, or ” Cascading Styles Sheets,” is a way to apply style rules to HTML content. When you apply custom rules you give your website the ability to do different things outside the default settings offered.
You can add custom CSS to just about any part of a site, as long as you know how to access the stylesheet.
Add .First and .Last Custom CSS Class to Menus
Sometimes you come across a design requirement while working on a website that you have to perform a little differently than normal.
Say you are working on a website for a client and need to add a WordPress custom CSS class in a different way than you normally would because you are going to be handling that website over when finished and will not have access anymore.
You can easily go into the WordPress admin area and add a custom CSS class to the first and last menu items, but since the client will more than likely rearrange the WordPress menu over time this probably wouldn’t be the best option.
That being said, in this article I will show you how to add these classes by combining filters with the .first and .last CSS class.
You can complete this task a couple of different ways, so let’s look at both of them.
Access Functions.php File
Your first option is to go open the functions.php file located in the WordPress website backend. Not to be confused with the WordPress configuration file. To access the file, just click on Appearance > Editor.
Once you are in the WordPress website files section of the site click on the Theme Functions (functions.php) file to open it up.
With the functions.php file now opened simple add the following code into the file
Use CSS Selectors
Another option for styling the menus and adding WordPress CSS classes is to use CSS selectors. These selectors will work in most (if not all) modern browsers. Add these selectors if you want to perform the function this way:
Just replace “yourmenuid” with the actual menu ID and you are all set.
Please note that if you are using Internet Explorer (especially an older version), then you will probably want to use the first option, as the CSS selector option probably won’t work properly.
I hope this article has shown you a way to easily add WordPress custom CSS classes to menus.
Below this, you will also find a list of default WordPress generated CSS classes. This list should come in handy when you are styling your WordPress menu, and also when styling or working with WordPress CSS classes across the board.
Default WordPress CSS Body Class Styles
Default CSS WordPress Post Styles
Default CSS WordPress Post Formats
Default CSS WordPress Menu Styles
Default CSS WordPress WYSIWYG Editor Styles
Default CSS WordPress Widget Styles
Default CSS WordPress Form Styles
Final Thoughts
Adding a custom CSS class to a WordPress menus does not have to be difficult. It is all a matter of knowing what to access, and what class codes to add to your stylesheet.
Change colors, styles, text, padding, margins, and just about anything else you want in your WordPress headers by adding custom CSS classes.
I hope this tutorial was easy to follow and showed you just how much you can accomplish when you add a custom CSS class to WordPress menus.
Have you ever added custom CSS classes to a stylesheet before? Did you find it difficult or were the directions easy to follow?
Author: Jeremy Holcombe
Growing up in Hawaii, Jeremy started his freelance writing career doing resumes, business plans, article writing, and everything in between. He now specializes in online marketing and content writing and is part of the Content Marketing Team at GreenGeeks.