scottiescotsman scottiescotsman - 1 year ago 87
CSS Question

How to integrate bootstrap navbar style into wordpress

I am having trouble integrating my style into wordpress. I know there is an option to do this within wordpress itself, and it does work but doesn't look connected to the navbar. All I want to do is add a class of "sliding-middle-out" to each navbar link.

<div class="collapse navbar-collapse" id="mainNavbar"><!-- NAVBAR COLLAPSE -->

<div class="site-nav"><!-- SITE NAV -->


$args = array(

'theme_location' => 'primary'



<?php wp_nav_menu( $args ); ?>

</div><!-- ./SITE NAV -->

</div><!-- NAVBAR COLLAPSE -->

Would I need to specify each link individually or ?, as that wouldn't be practical within a theme.

Lee Lee
Answer Source

You can add quite a few bits of info to the menu markup, for a full list see here:

However, to add classes to the actual <a> tags, you'll need to create a navigation walker, which is quite complex.

Here's some info about Walkers in Wordpress:

And a very simple example that should add your desired class. You'll need to place this in your theme's functions.php file:

class Walker_Menu extends Walker {

    // Tell Walker where to inherit it's parent and id values
    var $db_fields = array(
        'parent' => 'menu_item_parent', 
        'id'     => 'db_id' 

     * At the start of each element, output a <li> and <a> tag structure.
     * Note: Menu objects include url and title properties, so we will use those.
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $output .= sprintf( "\n<li><a href='%s'%s>%s</a></li>\n",
            ( $item->object_id === get_the_ID() ) ? ' class="sliding-middle-out current"' : ' class="sliding-middle-out"',


And then add the walker class to your menu call:

$args = array(
    'theme_location' => 'primary',
    'walker' => new Walker_Menu
wp_nav_menu( $args );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download