How to Customize the First and Last Menu Items in WordPress Website

Do you want to make your WordPress menu stand out by styling its first and last items differently? While adding custom CSS classes directly to these items might seem straightforward, reordering your menu can mess up your styling. Here’s a guide on how to ensure your first and last menu items maintain their unique look, regardless of how your menu changes.

Why Customize First and Last Menu Items?

Sometimes, you need certain links in your menu, like your contact form or shopping cart, to catch the eye. Adding distinct styles to the first and last items achieves this. However, simply applying a CSS class directly to these items can lead to issues if your menu order changes.

Method 1: Using Filters (Recommended for Classic Themes)

If your WordPress theme is a classic one, using a filter is a safe and effective way to style your menu items. Here’s how:

1. Install WPCode Plugin: Start by installing and activating the WPCode plugin, which allows you to add custom code snippets without risking your site’s functionality.
2. Add PHP Snippet: Use WPCode to add the following PHP snippet to your theme’s functions.php file:

   php

   function wpb_first_and_last_menu_class($items) {
$items[1]->classes[] = 'first';
$items[count($items)]->classes[] = 'last';
return $items;
}
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');


   This snippet creates .first and .last CSS classes for your first and last menu items.

3. Activate and Save: After adding the snippet, activate it using WPCode and save it to make the changes live.
4. Add CSS Styling: Further customize the appearance of .first and .last classes by adding a CSS snippet via WPCode. For example:

   css

    

   .first a {font-weight: bold;}
.last a {font-weight: bold;}


   Save this snippet to apply bold styling to your first and last menu items.

Method 2: Using CSS Selectors (Works with All Themes)

If you prefer not to use a plugin, you can achieve similar results using CSS selectors directly in your theme’s stylesheet or the WordPress Customizer:

1. Edit Style Sheet or Customizer: Navigate to Appearance > Customize > Additional CSS or directly edit your theme’s style.css file.
2. Add CSS Snippet: Insert the following CSS snippet:

   css

    

   ul#yourmenuid > li:first-child a { /* Replace 'yourmenuid' with your menu's ID */
font-weight: bold;
}
ul#yourmenuid > li:last-child a { /* Replace 'yourmenuid' with your menu's ID */
font-weight: bold;
}


   This code targets the first and last menu items based on their position in the menu structure.

3. Adjust for Block Themes: For WordPress block themes, access the Theme Customizer via https://yourdomainname.com/wp-admin/customize.php and insert the CSS directly into the Additional CSS section.
4. Customize Further: Modify the CSS properties like background color, padding, or border to suit your design preferences. For example:

   css

    

   li:first-child a,
li:last-child a {
background-color: black;
border: none;
color: white !important;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 12px;
}


   Here, we’ve turned the first and last links into buttons with specific styling attributes.

By following these methods, you can effectively customize the appearance of your WordPress menu’s first and last items, ensuring they maintain their distinctive look even as your site evolves.