Lately whereas engaged on a customized design challenge, we discovered a necessity so as to add some customized styling to our WordPress navigation menu gadgets. This design specifically required totally different styling for the primary menu merchandise and the final menu merchandise. Now we might simply go within the WordPress admin and add a custom css class to the primary and final menu merchandise. However as a result of we're delivering this to a shopper, it is extremely doubtless that they could rearrange the order of menus sooner or later. Utilizing the admin panel means of including lessons was not essentially the most environment friendly methodology. So we determined to do it through the use of filters. On this article, we are going to present you model your first and final WordPress menu gadgets in another way by including a .first and .final CSS class.
All it's important to do is open your theme’s features.php file. Then paste the next the code:
operate wpb_first_and_last_menu_class($gadgets)
add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');
One other option to model the primary and final menu gadgets in another way can be to make use of CSS selectors which works in most trendy browsers.
ul#yourmenuid > li:first-child ul#yourmenuid > li:last-child
Word: in case you have lots of customers on older browsers (Web Explorer), you then most likely wish to keep away from the next approach.
We hope that this text has helped you. Now we have created a cheat sheet on default WordPress generated CSS classes which can come in useful when styling menu gadgets as properly.
