Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Joel Rivera
Joel Rivera
29,401 Points
Posted by 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
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 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.

Véronique Bellamy
Véronique Bellamy
20,810 Points
Véronique Bellamy
Véronique Bellamy
20,810 Points

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
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
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
Joel Rivera
Joel Rivera
29,401 Points

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