WordPress

Joel Rivera
Joel Rivera
29,401 Points

BootStrap 3 and WordPress

How can I implement BootStrap 3 and WordPress? I like all the cool features of BootStrap and wanted to have there features on a WordPress Site.

4 Answers

Kevin Korte
MOD
Kevin Korte
Treehouse Moderator 28,054 Points

There is just basically one extra step. You have to download your Bootstrap files from their site, you'll basically have your CSS file, JS file, and glyphicons.

Now when you start building your theme, in your function.php file, you'll need to enqueue the stylesheet, and the script using the appropriate enqueue call and function. Here is a sample of what the entire script might look like. I used this in the past.

 <?php

//Load the theme CSS
function theme_styles() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
}
//Load the theme JS
function theme_js() {
    //Adds JQuery from Google's CDN. Code pulled from www.http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/
    if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
    function my_jquery_enqueue() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false, null);
    wp_enqueue_script('jquery');
}
    wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );
    wp_enqueue_script( 'midwayjs', get_template_directory_uri() . '/js/midway.min.js', array('jquery'), '', true );
}

add_action( 'wp_enqueue_scripts', 'theme_styles' );
add_action( 'wp_enqueue_scripts', 'theme_js' );

Now, in your header.php file you'll need to include the hook <?php wp_head(); ?> and in your footer.php file include the hook <?php wp_footer();?> and where you place those hooks is exactly where WP is going to dump your enqueued scripts and styles.

Yeah, I am using the same thing in the You Are Theme project, though I load the JS and CSS in one function. This is my implementation, in my functions.php file:

function theme_css_js() {
    wp_enqueue_script('theme_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
    wp_enqueue_script('youare_js', get_template_directory_uri() . '/js/youare.js', array('jquery'), true);
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap_theme', get_template_directory_uri() . '/css/bootstrap-theme.min.css');
    wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );
    $y_alt_stylesheet = get_option('Y_alt_stylesheet');
    if ( $y_alt_stylesheet && !($y_alt_stylesheet == 'Select a stylesheet:') ) {
        wp_enqueue_style('altstylesheet', get_template_directory_uri() . '/' . $y_alt_stylesheet);
    } else {
        wp_enqueue_style('altstylesheet', get_template_directory_uri() . '/1_default_colors.css');
    }
    if ( is_singular() ) wp_enqueue_script( 'comment-reply' );
}

add_action( 'wp_enqueue_scripts', 'theme_css_js');
Leslie Hui
Leslie Hui
3,330 Points

""" if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); """ what does this line means?

Actually what is the difference when you load the css and js in the header.php vs function.php?

Thanks in advance!

Leslie Hui
Leslie Hui
3,330 Points

"""php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); """

what does this line means?

Actually what is the difference when you load the css and js in the header.php vs function.php?

Thanks in advance!

Joel Rivera
Joel Rivera
29,401 Points

Thank you both. I'm going to try out these tips.