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
function bootstrap_scripts() { wp_enqueue_style( 'bootstrap-styles', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.2.0', 'all' ); wp_enqueue_style( 'bootstrap-style', get_stylesheet_uri() ); wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.2.0', true ); } add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );
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
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array(), '4.2.0', 'all' );
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.




by Norm Euker