I want to add Bootstrap to a WordPress child theme that I edit using Elementor.
To do that, I used both CDN and bootstrap local files but neither worked. For the local files, I created a bootstrap folder in my child theme folder where I had only three folders : functions.php, screenshot.
Then, inside the bootstrap folder I created two other folders CSS and JS.
So now I have :
- Child theme folder > boostrap > css
- Child theme forlder > bootstrap > js
In the CSS folder, I uploaded the “bootstrap.min.css” file and in the JS folder, I uploaded the “bootstrap.bundle.js” file.
After that, I modified the functions.php file with the code below, but this does not work when I add custom HTML using Elementor. Did I miss something in the code or is there anything else I should do ?
I have a little experience with HTML, CSS and Bootstrap, but I’m a novice in PHP and JavaScript.
function child_enqueue_styles() {
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/bootstrap/js/bootstrap.bundle.js', array( 'jquery' ),'',true );
wp_enqueue_style('bootstrap5-css', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
wp_enqueue_style( 'my-site-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_MY_SITE_VERSION, 'all' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );
It’s been 3 hours now that I’m trying to implement this, and it’s driving me crazy.
Thank you very much for your help !
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
get_template_directory_uri() always points to the parent theme.
To get the child theme use get_stylesheet_directory_uri().
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0