Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Greg Schudel
Greg Schudel
4,090 Points
Posted by Greg Schudel
Greg Schudel
4,090 Points

WordPress BootStrap Nav Templating

I'm making my own custom WP theme. I'm looking for best practice/advice here on how to WP template a boostrap nav. A quick search on the internet showed that using something called the wp-boostrap-navwalker.php from github is helpful. Or should I simply use the wp_nav_menus function parameters rather than resort to something that may be less tempered and maybe "questionable"??? I want best practice, not what easiest

When it comes to code

"If it's not a progressive craft, it's crap."

This is the link https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Once again, is this the best practice for implementing a bootstrap nav into a custom (from scratch) theme?

Secondly, is putting a conditional PHP tag that moves the edit bar down for logged in users a good practice as well?

Here is what I have in my functions file for the bootstrap fix

//Register Nav Walker Class Alias for Bootstrap

require_once get_template_directory() . '/wp-bootstrap-navwalker.php';


//adds newly created menus to theme
function gt_register_theme_menus() {

    register_nav_menus(

        array(
            'primary-menu' => __('Primary Menu') // double underscore function this is a localization function for WP
        )


    );

}

and this is in my header.php file

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php wp_title(); ?></title>

    <?php wp_head(); ?>

</head>

<body <?php body_class(); ?> > 


<!--Q: Is the below a good practice for moving the menu down for logged in users???? -->

    <!-- Conditional For Edit Menu to Adjust with Logged in Users -->
    <?php

    if ( is_admin_bar_showing() ) {     

        echo '<style type="text/css"> .navbar.navbar-inverse.navbar-fixed-top {margin-top: 32px;} </style>'; 

    }


    ?>

    <!-- END Conditional Edit for Logged in Users -->


    <div class="navbar navbar-inverse navbar-fixed-top"  >
      <div class="container">



        <div class="navbar-header"> <!-- contains toggle and brand -->

          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>


          <a href="<?php bloginfo('url'); ?>" class="navbar-brand"><?php bloginfo('name'); ?></a>
        </div>

        <div class="navbar-collapse collapse">


<!-- Q: Is this what's best for implementing a bootstrap nav for a WP theme???? -->
            <?php
            wp_nav_menu( array(
                'theme_location'    => 'primary-menu',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                'walker'            => new WP_Bootstrap_Navwalker(),
            ) );

            ?>

         <!--<ul class="nav navbar-nav">
            <li class="active"><a href="<?php bloginfo('name'); ?>">Home</a></li>
            <li><a href="/0/?url=dHVvYmEzMiUvZW1laHQvc2VscG1heGUvbW9jLnBhcnRzdG9vYnRlZy8vQTMlcHR0aA==">About</a></li>
            <li><a href="/0/?url=dGNhdG5vYzMyJS9lbWVodC9zZWxwbWF4ZS9tb2MucGFydHN0b29idGVnLy9BMyVwdHRo">Contact</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="/0/?url=L2VtZWh0L3NlbHBtYXhlL21vYy5wYXJ0c3Rvb2J0ZWcvL0EzJXB0dGg=">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="/0/?url=L2VtZWh0L3NlbHBtYXhlL21vYy5wYXJ0c3Rvb2J0ZWcvL0EzJXB0dGg=">Action</a></li>
                <li><a href="/0/?url=L2VtZWh0L3NlbHBtYXhlL21vYy5wYXJ0c3Rvb2J0ZWcvL0EzJXB0dGg=">Another action</a></li>
                <li><a href="/0/?url=L2VtZWh0L3NlbHBtYXhlL21vYy5wYXJ0c3Rvb2J0ZWcvL0EzJXB0dGg=">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="/0/?url=L2VtZWh0L3NlbHBtYXhlL21vYy5wYXJ0c3Rvb2J0ZWcvL0EzJXB0dGg=">Separated link</a></li>
                <li><a href="/0/?url=L2VtZWh0L3NlbHBtYXhlL21vYy5wYXJ0c3Rvb2J0ZWcvL0EzJXB0dGg=">One more separated link</a></li>
              </ul>
            </li>
          </ul>-->


        </div><!--/.nav-collapse -->
      </div>
    </div>