CODEWITHSUNDEEP
csswordpresstwitter-bootstrap
scottiescotsman
scottiescotsman

Reputation: 73

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 -->

                        <?php

                            $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.

Upvotes: 0

Views: 115

Answers (1)

Lee
Lee

Reputation: 4323

You can add quite a few bits of info to the menu markup, for a full list see here: https://developer.wordpress.org/reference/functions/wp_nav_menu/

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: https://codex.wordpress.org/Class_Reference/Walker

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

<?php
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->url,
            ( $item->object_id === get_the_ID() ) ? ' class="sliding-middle-out current"' : ' class="sliding-middle-out"',
            $item->title
        );
    }

}?>

And then add the walker class to your menu call:

<?php
$args = array(
    'theme_location' => 'primary',
    'walker' => new Walker_Menu
);
wp_nav_menu( $args );
?>

Upvotes: 2

Related Questions