How to install bootstrap in child theme

Question

Something is going wrong when I try to use the bootstrap nav with a child theme and I can't figure it out for the life of me.

The parent theme is called Revera.

This is a bootstrap theme. It includes bootstrap.min.js and bootstrap.min.css files. However, the version used appears old and I think it is what is causing the bootstrap Navbar I added to not quite work (it seems to function, but the styling isn't right. The three bars for the mobile menu are missing and the word "Toggle Navigation" shows up inside the nav button) .

What I would like to do is use an updated version of bootstrap with a child theme. But every way I've tried to achieve this doesn't seem to work. In the functions.php of the child theme I have:

function enqueue_child_theme_styles() {

    wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script( 'bootstrap-js' );
    wp_enqueue_style( 'bootstrap-css' );    
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);

The above code doesn't seem to do anything however. I've tried all kinds of things to try and troubleshoot this, but nothing seems to work. What am I missing?

Answer 1

get_template_directory_uri always returns the parent theme's URI.

From the docs:

In the event a child theme is being used, the parent theme directory URI will be returned

You probably want get_stylesheet_directory_uri.

add_action('wp_enqueue_scripts', 'wpse174502_styles', PHP_INT_MAX);
function wpse174502_styles()
{
    wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
    wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');
}

Whenever you're debugging enqueues be sure to...

1. Check the rendered page source. are the assets you expected being included?
2. Check the developer tools console in your browser of choice. Are there errors? Are those errors related to your assets?

Answer 2

Ok I found the problem was multi-part, but a large part was rookie mistake.

The permissions on the bootstrap files I had included in the child-theme were not set correctly. They returned a 403 forbidden error when trying to enqueue. I didn't realize it because the parent bootstrap files were still being enqueued. It wasn't until I deregistered the parent file stylesheets that I realized the error.

My final code:

function enqueue_child_theme_styles() {

//deregister the parent bootstrap style and script  
wp_deregister_style( 'bootstrap' );
wp_deregister_script( 'bootstrap' );

//enqueue my child theme stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('theme') );

//enqueue bootstrap in the child theme 
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri().'/bootstrap/js/bootstrap.min.js', array('jquery'), NULL, true);
wp_enqueue_style('bootstrap-css', get_stylesheet_directory_uri().'/bootstrap/css/bootstrap.min.css', false, NULL, 'all');

}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);