Add Separators Between Menu Items in WordPress

Actually, adding separators between menu items in WordPress is pretty simple, but I hope it is worth sharing (at least I would like to have it pinned here for personal use).

So, here’s how to do this step by step:

1. Find in your code the following (or similar) snippet:

 <?php wp_nav_menu('menu=your-menu'); ?>

2. add &after=<li class="menu-divider">|</li> after the name of your menu like this:

<?php wp_nav_menu('menu=your-menu&after=<li class="menu-divider">|</li>'); ?>

3. In order to hide the separator after the last menu item add this to your CSS:

li.menu-divider:last-child {display:none;}

4. Enjoy the result!

Stylesheet loading priority on child theme

Ok, so I have a child theme and when I load it’s style.css it’s loaded before the parent theme style, so on the new style.css I have to add “!important” on most of the rules.

To avoid that, on child theme’s function.php I added this:

[php]

add_action(‘wp_head’,’custom_css’,1);
function custom_css(){
$source = get_stylesheet_directory_uri() . ‘/style.css’;
wp_enqueue_style(‘custom_css’, $source);
}

[/php]

This way, the child themes’ style.css is loaded later and naturally overrides the parent theme.