These days I recommend using the Genesis Framework for WordPress and in the sites I build I incorporate the new Bootstrap v4 grid system into that.
10. The complicated bit – the menu and Bootstrap walker
Converting menus from a flat HTML design into a fully functional WordPress menu can often be quite tricky if you’re trying to reproduce the design exactly. You’ll notice that most Bootstrap HTML templates you buy from the Theme shops don’t use the default Bootstrap navbar – because it does look a bit plain and boring. Especially the Bootstrap 2 version.
Most themes use the popular Superfish menu javascript plugin. It’s easy to get the .js and .css files for it enqueued like the others mentioned earlier, but you need to get WordPress to output its menus with all the css classes that the Superfish styling and jQuery is based upon.
Another important consideration is what you’re going to do with dropdown menus when your site is viewed on a mobile/tablet that doesn’t have a mouse hover function to reveal the menu. The standard Bootstrap functionality is that you have to click on the link in order for the dropdown sub-menu to appear. That may be considered good practice, but you hardly ever see it out ‘in the wild’ on many websites. Far more commonly you see menus where you hover on an item to reveal its children, OR click on it to visit its hyperlink. That’s no good for our nice responsive mobile phone menu though. You can’t hover on an item, you can only click it – so is that going to open the submenu, or just act as a regular hyperlink?
I don’t think that there’s yet a really intuitive WordPress solution to all this. The best bet at the moment is to make your parent menu item’s link ’empty’ i.e. just put a ‘#’ instead of a url. Now it only has one function – which will be to open/close its child sub-menu. This means you might have to end up with a parent menu item of ‘About Us’, and then 3 or 4 sub-menu items – one of which might also be ‘About Us’ if you wanted an About Us page.
So for example you would have to set up your WordPress menu like this
-Home
-About Us – link to ‘#’
— About Us – link to ‘/about-us’ page
— Our Staff – link to ‘/about-us/staff’ page
— Contact Us – link to ‘/about-us/’ page
-What We Do – link to ‘/what-we-do’ page
-Donate – link to ‘/donate’ page
Of course this is all much easier if your menus aren’t going to have any dropdown sub-menus in them. That’s certainly a direction that a trend in web design is moving towards because of the fact that dropdown menus don’t work all that great for responsive design. In order to future-proof your site though, it’s a good idea to plan for how dropdowns would work just in case you need to add one. This is especially true if you are setting up a CMS system for a client to use – as it’s hard to prevent them from setting up sub-menus from within the Dashboard>Appearance>Menus screen.
What is a WordPress Walker?
When it comes ot setting up menus in WordPress, you’ll come across many mentions of ‘walkers’ – these are essentially PHP functions that take the standard WordPress menu output of divs, classes, ul, li etc – and rewrite them so they are formatted in a way that your site’s .js and .css files expect them.
Bootstrap in particular has a very specific way that its navbars have to be laid out, and css classes that they need to have. If your menu doesn’t follow the same structure then the Bootstrap files won’t know what to do with it and it won’t work.
Superfish menus play nicer with WordPress ones out of the box, and don’t necessarily need their own ‘Walker’ file. Let’s have a look at the two of them, even though we aren’t actually using the native Bootstrap menu on this site we’re building.
I’m going to assume that you know how to create a menu in WordPress, and have assigned your main navigation menu as the ‘Primary’ one.
You should also add this code to your functions.php in order to enable your theme to support WordPress menus. It seems a bit silly that a theme wouldn’t do this by default, but if your menus aren’t appearing on your site then make sure you’ve got this code included:
function register_my_menus() {
register_nav_menus(
array(
'primary' => __( 'Primary' ),
'secondary' => __( 'Secondary' )
)
);
}
add_action( 'init', 'register_my_menus' );
1. The native Bootstrap menu solution
As mentioned earlier, although Bootstrap is a hugely popular framework, it’s often its menus that are the bits that designers tend to disregard for something that looks nicer. Having said that though, the Bootstrap ones are great for mobile/tablet screen sizes and they have already figured out a solution for how to deal with those pesky dropdown menus.
Writing your own ‘Walker’ file is a very complicated business, but as with most things in WordPress/Bootstrap – someone has already done it and you can happily copy theirs.
Here’s a version that works well with Bootstrap v2. If you are using Bootstrap v3 then this may need a bit of tweaking, or you can just do a Google search for ‘Bootstrap 3 WordPress walker’.
Paste this code into your functions.php file:
/*** Add Bootstrap dropdown-menu class to submenu items **/
/**** See https://gist.github.com/johnmegahan/1597994 and http://goodandorgreat.wordpress.com/2012/01/12/update-2-using-twitter-bootstrap-dropdown-menus-with-wordpress/ */
add_action( 'after_setup_theme', 'bootstrap_setup' );
if ( ! function_exists( 'bootstrap_setup' ) ):
function bootstrap_setup(){
add_action( 'init', 'register_menu' );
function register_menu(){
register_nav_menu( 'top-bar', 'Bootstrap Top Menu' );
}
class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl( &$output, $depth ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent- \n";
}
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$li_attributes = '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = ($args->has_children) ? 'dropdown' : '';
$classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '
As you can see – that’s all a bit of a mouthful, but I’ve tried it out and it does work.
2. The Superfish menu solution
This is one that most Bootstrap HTML templates use as you can style Superfish easily in all manner of ways and it looks much nicer on desktop sites. Getting it to work well on mobile sites – with dropdown menus – is the key. It can be a bit complicated – which is why some template themes don’t even have dropdown menus. I tend to use the same mobile menu on all the sites I build as once you’ve got something that works and that you understand, it’s better to stick with that than build one from scratch every time. That means its collapsed/mobile version doesn’t always look exactly the same as the mobile version of the HTML theme I’m converting – but it looks and works just fine.
A Superfish menu has a class of ‘sf-menu’. All of its .css and .js files rely on that class so you need to make sure that your WordPress menu will output it too. Fortunately you don’t need a long and complicated Walker function to do that, you can just assign directly from within your WordPress header.
First up, we need to revisit the header.php file we made earlier and remove the hardcoded menu HTML from there and replace it with this:
'primary', 'menu_class' => 'sf-menu', ) ); /*add sf-arrows to menu_class as well to enable them */?>
You can see here that this wp_nav_menu function is adding the ‘sf-menu’ class to the menu – which is exactly what we need. As mentioned in the comment at the end, if you want the little triangular carets to denote that a menu item has a child sub-menu – then the code should read 'menu_class' => 'sf-menu sf-arrows'
I have also added that mobnav-btn div – which is custom to my own menu. It will be set to hidden (i.e. the CSS is display:none) for the desktop version, but will appear when the navbar collapses on smaller screens. This is the button that will open the dropdown menu which the Primary menu will now be housed in.
// Add superfish mobile functions http://jsfiddle.net/badlydrawnben/c5MJy/
function biscuits_superfishmobile_settings() { ?> menu_item_parent && $item->menu_item_parent > 0 ) {
$parents[] = $item->menu_item_parent;
}
}
foreach ( $items as $item ) {
if ( in_array( $item->ID, $parents ) ) {
$item->classes[] = 'has-children sf-with-ul';
}
}
return $items;
}
add_filter( 'wp_nav_menu_objects', 'biscuits_add_menu_parent_class' );
Right – we’re nearly there. Let’s just check that the superfish.js file itself was enqueued in Step 6 – which it was. And that the base superfish.css file was imported. The last two things are to add the CSS styling for the mobile version of your menu. You can add this code to your style.css sheet, or enqueue/import a separate new menu.css file and put it in there. This is set to collapse the menu only on smartphones like iPhones, not on tablets. If you want your menu to collapse at a wider level (useful if you have a lot of items in it and they look ugly when floating) then just increase the 488px figure in the media query at the start:
@media only screen and (max-width: 480px) {
#mobnav-btn {
display: block;
font-size: 20px;
font-weight: bold;
background-color: #002469;
color: white;
padding: 10px;
cursor: pointer;
margin-top:15px;
text-align:center;
margin-bottom:15px;
}
.mobnav-subarrow {
display: block;
background-color: #0f3975;
opacity: .3;
border-bottom: 1px solid white;
border-top: 1px solid black;
height: 20px;
width: 30px;
background-position: top left!important;
position: absolute;
top: 8px;
right: 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.sf-menu {
width: 100%!important;
display: none;
}
.sf-menu.xactive {
display: block!important;
}
.sf-menu li {
float: none!important;
display: block!important;
width: 100%!important;
background: #B2BDD1;
}
.sf-menu li:hover ul { display: none; }
.sf-menu li a {
float: none!important;
border-left:none;
}
.sf-menu ul {
position:static!important;
}
.xpopdrop ul {
}
.sf-arrows .sf-with-ul {
padding-right: 0;
*padding-right: 0; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
.sf-arrows .sf-with-ul:after{
top:1.5em;
}
ul.sub-menu > li > a{
text-indent:1em;
}
And finally – we’ve got the superfish.js script loaded, but we need to ‘attach’ it to our Primary menu so it knows which HTML items on the page it needs to work its magic on. Here’s the code to add to your functions.php:
//Add superfish to page
function biscuits_superfish() {
jQuery('.menu > ul').superfish({
delay: 1000, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: true // disable drop shadows
});
}
jQuery(document).ready(function() {
jQuery.noConflict();
biscuits_superfish();
});
Rest assured that the hardest bits are over – making the other templates is fairly straightforward and intuitive and doesn’t involve too much of this PHP and Javascript stuff I promise! Check out Part 5 for how to do that.
