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.
- 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.
- To change the logo just overwrite your own logo to /images/logo.png
- 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.
- 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.
- 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
- 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.