Would you like to apply customized styles to the initial and concluding items within your WordPress menu? One approach is to assign a specific CSS class to the primary and concluding menu items. Nevertheless, if you alter the menu arrangement later on, these items may no longer retain their initial or concluding positions. In this article, we will demonstrate how to incorporate a .first and .last class that will consistently style the first and last items, regardless of any future reorganization of the menu.
Why Style the First and Last Navigation Items Differently? At times, it becomes necessary to apply distinctive styles to the initial and concluding items within a navigation menu. This serves to emphasize important links, such as the link leading to your site’s contact form or the WooCommerce cart page. In such cases, assigning a custom CSS class to the first and last menu items might seem like a straightforward solution. However, modifying the menu’s order later on could potentially disrupt this customized styling. Therefore, we recommend utilizing filters instead. This guide will demonstrate how to style the first and last items of your navigation menu, allowing you to rearrange the menu without compromising the custom styling. You can easily navigate to the desired method using the quick links provided below:
Method 1: Adding First and Last Class Using a Filter (Recommended) Method 2: Styling First and Last Items Using CSS Selectors (No Plugin Required)
Method 1: Adding First and Last Class Using a Filter (Recommended) The simplest way to style your navigation menu items is by applying a filter to your theme. In WordPress tutorials, you’ll often come across code snippets accompanied by instructions to add them to your theme’s functions.php file. However, a potential issue lies in the fact that even a minor error in the custom code snippet can disrupt your WordPress site, rendering it inaccessible. Additionally, updating your WordPress theme can result in the loss of all your customizations. This is where WPCode becomes valuable. WPCode, a free plugin, facilitates the addition of custom CSS, PHP, HTML, and more to WordPress without jeopardizing your site’s functionality. To get started, install and activate the free WPCode plugin. For step-by-step instructions, refer to our comprehensive guide on how to install a WordPress plugin. Once activated, navigate to Code Snippets » Add Snippet.
Sure, here’s a polished version and its translation into academic English:
- Original: Here, simply hover your mouse over ‘Add Your Custom Code.’ When it appears, click on ‘Use snippet.’ To start, type in a title for the custom code snippet. This can be anything that helps you identify the snippet in the WordPress dashboard. After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’
- Revised: Here, hover your mouse over ‘Add Your Custom Code.’ When it appears, click on ‘Use snippet.’ Begin by typing a title for your custom code snippet. This can be any label that assists in identifying the snippet within the WordPress dashboard. Next, open the ‘Code Type’ dropdown and choose ‘PHP Snippet.’
Translation into academic English:
Ensure to place your cursor over the ‘Add Your Custom Code’ option. Once visible, select ‘Use snippet.’ Initiate the process by assigning a title to the custom code snippet. Opt for a descriptive label aiding in its identification within the WordPress dashboard. Following this, access the ‘Code Type’ dropdown and opt for ‘PHP Snippet.’
Certainly! Here’s the polished version and its translation into academic English:
- Original: After that, you are ready to scroll to the top of the screen and click on the ‘Inactive’ toggle so that it changes to ‘Active.’ This creates .first and .last CSS classes for your first and last menu items. You can now use these classes to apply unique styling to these items. To do this, you will need to add a second snippet to your WordPress website. To start, create a new custom code snippet by following the same process described above. After that, type in a title for the