Putting Bootstrap Menus into your BlankSlate Wordpress Theme

If you’re using Wordpress and you’re anything like me, the first thing you want to do is strip out all of the Wordpress. There are a lot of developer themes out there for rapid prototyping, but my favorite by far is BlankSlate.

BlankSlate pretty much strips you down to bare markup and doesn’t do much else. Brava. That’s what you want. Nothing. So the next thing you’re probably doing is integrating a responsive framework on top of the bare bones. Bootstrap is what I (and most other people) use for that.

I don’t feel like making a plugin just for a top menu, but if you download this file tree and drop it into your themes/blankslate folder, overwriting the header.php and functions.php templates when asked, you can generate Bootstrap menus using the standard Wordpress menu creator. When you save your menu you’ll see three options under Theme Location: Bootstrap default menu, Bootstrap fixed-top menu, and Bootstrap static-top menu. The menus are created by Wordpress but use markup, styles, and javascript of the Bootstrap top navbar.

Some notes:

  1. This will create theme subfolders for /css/, /js/, /images/, and /template-parts/. If you don’t want to use that structure you’ll need to adjust the functions.php, header.php, and all the includes in the templates inside of the template-parts folder.
  2. To change the logo just overwrite your own logo to /images/logo.png
  3. This menu DOESN’T include Bootstrap subnavigation right now. If you need subnav you’ll need mess around with the core wp_nav_menu() functionality. Looks like a bit of a pain but it can be done.
  4. Everything will still work when you inevitably change the theme name, as long as you keep the structure you’re fine. If you’re doing your own structure you already know enough to update these files.
  5. It’s simple to use your existing Bootstrap themes. Just overwrite the bootstrap-theme.min.css and add your own bootstrap-theme.min.map file
  6. This project uses Bootstrap version 3.3.7. If you want to use a different build just use the same filenames and overwrite. If you’re a huge stickler for semantics you can update the wp_register_script() and wp_register_style() statements in the blankslate_load_scripts() function inside functions.php template (starting at line 16) to reflect the correct version.

Super easy. Now you’ve got a standard, responsive Bootstrap menu going. Next up, the layout.