1

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?

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?
  • Thanks for pointing out the difference from get_stylesheet_directory_uri. I gave your code a shot but it still doesn't seem like it's working. When I check the developer tools it shows the broken mobile navigation menu is still being styled by the old version of bootstrap in the parent theme. – Digitaldervish Jan 11 '15 at 7:31
  • @Digitaldervish have you de-registered the original stylesheets first? – Stephen Harris Jan 11 '15 at 16:07
  • I have not... I wasn't aware it needed to be done since most of the code I've seen on how to add stylesheets or scripts doesn't have it. I'll give it a shot, thanks! – Digitaldervish Jan 11 '15 at 20:36
1

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.