Integrating Bootstrap into your WordPress theme

I like to use Bootstrap for most custom wordpress themes which is an HTML, CSS, and JS framework for developing responsive, mobile website project.

Here are basic steps to get started using Bootstrap.

  • Download Bootstrap from getbootstrap.com
  • Unzip Bootstrap and add the CSS, JS, and Font files to your theme in the correct directories
  • Open your starter theme, for example, Underscores in your text editor
  • Delete all the unneeded/duplicate CSS styles in style.css from your theme

Enqueue scripts and styles in functions.php

Adding Font awesome

Font awesome gives you scalable vector icons that can be customized.

  • Download Font Awesome from their website
  • Unzip the Font Awesome package and move font-awesome.min.css to your theme /css/ directory
  • Move all font files from the Font Awesome package to your themes /fonts/ directory

Update functions.php

Adding Bootstrap menu to WordPress theme

Create a new file called bootstrap-walker.php in the /inc/ directory
in functions.php require get_template_directory() . ‘/inc/bootstrap-walker.php’;
header.php

Get bootstrap-walker.php from github.

Add the Bootstrap Grid system to WordPress

Read more about using the Bootstrap grid documentation.

This will provide the basics of using Bootstrap in your WordPress theme.

Facebooktwitterlinkedinmail

by Norm Euker