I want to include bootstrap inside my WordPress installation. I know how to include scripts and styles to a theme, but this isn't what I want.
I've looked to the WordPress core files and I've tried to add the bootstrap files to the script-loader.php file but they will not be loaded. Is there any way to add these files to the WordPress core loaded styles and scripts?
for example, I've added this line to the default wordpress stylesheet/script loader function:
$styles->add( 'bootstrap', "/includes/css/bootstrap$suffix.css" );
$scripts->add( 'bootstrap', "/includes/js/bootstrap$suffix.js", array( 'jquery' ) );
but this will not work.
I would do this by altering your functions.php in your current theme.
There are a 2 functions you should know about. The first one is to add CSS.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Documentation
The second one is to add JS
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
Documentation
Wordpress has a basic documentation on how to do it both:
Documentation
Eventually you going to have something like this:
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Good luck!
Related
I'm successfully using the bootstrap modal package on our website (using wordpress), but the JS is loading on every page, and I only use it on 3 specific pages. I'm looking for the best way to load the JS only on the 3 specific pages in question. The site in question is: https://www.bakashana.org.
The three pages where the Modals operate are: https://www.bakashana.org/sponsor-a-young-woman, https://www.bakashana.org/grantees-with-sponsors, and https://www.bakashana.org/graduates
The Bootstrap package has two files: bootstrap.css and bootstrap.min.js. These files are placed in the css and js folders respectively in my child theme (/wp-content/themes/astra-child/css and /wp-content/themes/astra-child/js).
The Bootstrap is registered and enqueued in my functions.php file as follows:
function themeprefix_bootstrap_modals() {
wp_register_script ( 'modaljs' , get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '1', true );
wp_register_style ( 'modalcss' , get_stylesheet_directory_uri() . '/css/bootstrap.css', '' , '', 'all' );
wp_enqueue_script( 'modaljs' );
wp_enqueue_style( 'modalcss' );
}
add_action( 'wp_enqueue_scripts', 'themeprefix_bootstrap_modals');
I'm a novice at JS and don't know where/how to add code to the functions.php file in order to call only for specific pages to load.
Thanks in advance!
So after some research I figured it out myself, mostly thanks to this link:
https://www.youtube.com/watch?v=Fw6VDOZYqrM
The code uses the if( is_page) as follows:
function themeprefix_bootstrap_modals() {
if( is_page( array (1071, 3725, 3814) ) ) {
wp_register_script ( 'modaljs' , get_stylesheet_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '', true );
wp_register_style ( 'modalcss' , get_stylesheet_directory_uri() . '/css/bootstrap.css', '' , '', 'all' );
wp_enqueue_script( 'modaljs' );
wp_enqueue_style( 'modalcss' );
}
}
I have a wordpress local installation and I am trying to load scripts and styles with wp_enqueue but none of these are working, the front-end is not capturing any of the files,
Here is the code:
<?php
function all_the_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.css' );
wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/css/custom.css' );
wp_enqueue_script( 'bootstrap.bundle', get_template_directory_uri() . '/assets/js/bootstrap.bundle.js' , array ( 'jquery' ) );
wp_enqueue_script( 'custom-scripts', get_template_directory_uri() . '/assets/js/custom-scripts.js', array ( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'all_the_scripts' );
?>
I have double checked everything, all the files are in the correct locations and all required arguments are given, but still no result.
I tried wp_register_script but they say that it is optional and not needed
Use
get_stylesheet_directory_uri()
instead of
get_template_directory_uri()
The get_template_directory_uri() reference to the parent theme if you're developing Child Themes, and get_stylesheet_directory_uri() returns the URI of the current theme.
I am creating my first wordpress theme from a static site I have built which runs on Boostrap delivered by CDN.
Please no suggestions to download boostrap for this project it needs to be delivered via the CDN.
I would like to load boostrap via the CDN using my functions.php file but instead of loading it just displays the text at the top of the loaded page (there is nothing obvious in the inspector pannel and no error message it just appears to dispaly the infomration from functions.php as text).
I have included <?php wp_head(); ?> in header.php
All code from functions.php:
function my_scripts_enqueue() {
wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), NULL, true );
wp_register_script( 'gajax-js', '://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js', array('jquery'), NULL, true );
wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', false, NULL, 'all' );
wp_register_style( 'fontawsome-css', '://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', false, NULL, 'all' );
wp_enqueue_script( 'bootstrap-js' );
wp_enqueue_script( 'gajax-js' );
wp_enqueue_style( 'bootstrap-css' );
wp_enqueue_style( 'fontawsome-css' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );
If you want everything from the CDN, you'll have to get rid of the default jQuery expect on the backend or loginscreen.
After that you just add the CDN without ":"
add_action( 'wp_enqueue_scripts', 'register_jquery' );
function register_jquery() {
if (!is_admin() && $GLOBALS['pagenow'] != 'wp-login.php') {
wp_deregister_script('jquery');
wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', false, '1.11.2');
wp_register_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'));
wp_register_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
wp_register_style( 'fontawsome-css', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js');
wp_enqueue_style('bootstrap-css');
wp_enqueue_style('fontawsome-css');
}
}
Read the wordpress codex several times and I was still unable to link the files so that my dropdown menu could work. Is there anything I need to do that is not in the functions.php?
<?php
function load_js() {
wp_enqueue_script( 'mytheme-jquery', get_template_directory_uri() . '/js/jquery-2.1.4.min.js', array( 'jquery' ) );
wp_enqueue_script( 'mytheme-bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'load_js' );
?>
it will probably something stupid as ussual but.. I can't get my style.css or custom.css to override the bootstrap css. I don't wanna put all my custom css in my header file because that is not really the way to do it I suppose..
Now I Tried to add it in my functions.php like this:
//Enqueue scripts and styles
function horizon_scripts() {
//Load the theme CSS
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css');
wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css');
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/css/custom.css', array(), '1.0.1', 'all' );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
So it loads my bootstrap css first and then the style.css and custom.css but that didn't quite hit it..
So any help would be appreciated :)
You should be using get_stylesheet_directory_uri(). Here's just the css, without your js:
function horizon_scripts() {
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'main', get_stylesheet_uri(), array('bootstrap') );
wp_enqueue_style( 'custom', get_stylesheet_directory_uri() . '/custom.css', array('main') );
}
add_action( 'wp_enqueue_scripts', 'horizon_scripts' );
Note that the third parameter of wp_enqueue_style() is "dependencies". Read more in the Codex.