I am reading on Google that CDN links are better to use because of speed and an extra layer of security. I am new to WordPress Dev. I placed the CDN links in a JS file and enqueued. However, it's not taking effect on my site.
custom-js.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
functions.php
<?php
function load_css_js() {
wp_register_style( 'child-css', get_stylesheet_directory_uri() . '/style.css', false, NULL, 'all' );
wp_enqueue_style( 'child-css' );
wp_register_script( 'child-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery' ), NULL, false );
wp_enqueue_script( 'child-js' );
}
add_action( 'wp_enqueue_scripts', 'load_css_js' );
?>
1) Before anything else. Are you attempting to build a Child theme on top of a Parent theme that does not all ready use Bootstrap?
2) Have your set up your Child themes style.css (see Child Themes link below)?
Loading Scripts/Stylesheets:
You should have something similar to these functions inside your functions.php file.
Generally speaking you shouldn't need to load jQuery though, it's all ready there by default (see Codex: Default Scripts Included and Registered by WordPress) so check a page with DEV Tools to see if it's loading (unless you want to use another CDNs Library, then you need to disable the default one so you don't have jQuery loading twice.
Codex: Function Reference/wp enqueue script
Codex: Child Themes
Codex: Function Reference/wp enqueue style
Enqueue JS
function my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js', '2.1.3', true );
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array('jquery'), '3.3.5', true );
}
add_action('wp_enqueue_scripts', 'my_scripts');
Enqueue CSS
function my_styles() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_styles');
Related
I'm having trouble getting Jquery to work in my theme.
I have the following three files: functions.php, jquery.min.js (located in js folder and has jquery 3.5.1 copied into it), scripts.js (in the js folder)
functions php code is this:
function include_jquery(){
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', '', 1, true);
add_action('wp_enqueue_scripts', 'jquery');
}
add_action('wp_enqueue_scripts', 'include_jquery');
Code for the scripts.js file is this
$(document).ready(function(){
alert('test');
})
thank you in advance
link to the site I am testing it on https://testthemedesign.littleseabear.com/
First thing I want to suggest that you need to enqueue 'jquery' on wp_head' not in 'wp_footer' so replace that last parameter of your code 'wp_enqueue_script' with "false".
Now the actual problem is that you have to register that new jquery.js file as jquery in wordpress, And then enqueue it.
Following is my changes in your code :
function include_jquery(){
wp_deregister_script('jquery');
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery.min.js', '', 1, false );
wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'include_jquery');
One more thing if you are using any child theme then replace that get_template_directory_uri with get_stylesheet_directory_uri
wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js', '', 1, false );
Following a tutorial that recommends the following code to link JS/jQuery to WordPress, within functions.php:
<?php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/bootstrap.min.js', array( 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
?>
But something is wrong, either the jQuery or the bootstrap.min.js did not link properly, possibly both. How can I ensure that both are linked?
I am trying to load a separate javascript file mobile-menu.js to my Wordpress theme. When I look at the console, it says, "jQuery is not defined." However, I know that I enqueued my script files correctly. Any ideas?
HTML file:
<!--this line wasn't here originally-->
<div id="switchmenu"><!--switchmenu begin-->
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</div><!--switchmenu end-->
functions.php file:
function lapetitefrog_scripts() {
wp_enqueue_style( 'lapetitefrog-style', get_stylesheet_uri() );
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'lapetitefrog_scripts' );
mobile-menu.js file:
jQuery(document).ready(function($) {
$('#menu-icon').click(function() {
$('#switchmenu').slideToggle("fast");
});
});
Add wp_enqueue_script('jquery'); before you enqueue your scripts.
First Make sure that jquery file is include in the header, and your file requied jQuery
wp_enqueue_script(
'lapetitefrog-mobile-menu',
get_template_directory_uri() . '/js/mobile-menu.js',
array('jquery'),
'1.0',
true
);
Second you should start your javascript file like:
(function($) {
$(document).ready(function() {
.......
});
})(jQuery);
OR
// Use jQuery in place of $
jQuery(document).ready(function() {
.....
});
You can try:
enqueue Jquery first.
wp_enqueue_script('jquery');
and then enqueuing the latter script with JQuery dependency in 3rd argument i.e array('jquery') that's what mostly people forget.
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array('jquery'), '1.0', true );
Wordpress ships with jQuery by default
// Adds jQuery
add_action('init', 'childoftwentyeleven_down');
function childoftwentyeleven_down() {
// register your script location, dependencies and version
wp_register_script('down',
get_stylesheet_directory_uri() . '/js/down.js',
array('jquery') );
// enqueue the script
wp_enqueue_script('down');
}
The error jQuery is not defined might also appear with jQuery code embedded in your template parts.
This happens when jQuery is added to the footer of the page, while the embedded script tries to execute in the middle of the page.
If this is the case, you need to load jQuery in the header with wp_enqueue_script().
So the last parameter needs to be false here:
wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery.js', array(), time(), false );
Now the code executes in the right order and jQuery will be defined.
Another solution would be to move the embedded script to a Javascript file that will also be added with wp_enqueue_script() to the footer of the page. This is up to you.
I converted bootstrap theme to wordpress. Now, I have a problem in loading the bootstrap scripts and style.
This is my code in functions.php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/jquery.min.js', array( '' ) );
wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/clean-blog.min.js', array( '' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
and i add this in my header
<?php wp_enqueue_script("jquery"); ?>
Additional question:
What is the difference between wp_register and wp_enqueue?
Please help me. Im beginner in using bootstrap.
All you need to do is enqueue them. Also, I recommend getting rid of your jquery import (the second wp_enqueue). WordPress includes jQuery by default, and you're already including it in the first script (because you have listed it as a dependency). Here's an example, but this enqueues jquery twice (the native jquery, and the bootstrap jquery):
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap-jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js' );
wp_enqueue_script( 'blog-scripts', get_stylesheet_directory_uri() . '/js/clean-blog.min.js' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
The only reason you'd need to register the scripts before enqueue-ing them, is if one of the scripts is a dependency. From the docs:
wp_register_script() registers a script file in WordPress to be linked
to a page later using the wp_enqueue_script() function, which safely
handles the script dependencies.
Scripts that have been pre-registered using wp_register_script() do
not need to be manually enqueued using wp_enqueue_script() if they are
listed as a dependency of another script that is enqueued. WordPress
will automatically include the registered script before it includes
the enqueued script that lists the registered script's handle as a
dependency.
you cas use "wp_enqueue_style" and "wp_enqueue_script".
for example:
function reg_scripts() {
wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');
I am trying to create a theme from scratch using the foundation framework which it works great out of the box, but when I need to include the foundation JavaScript scripts, it shows as if they've been loaded, but nothing working, first the top bar doesn't work, I have tried to unregister the jquery which comes pre-loaded with WordPress and use the one from Google cdn as I have read that's a sure way for the top-bar and other scripts to work, but nothing so far works
here is my code in the functions.php
// Enqueue scripts essential for foundation framework to act responsive
function responsive_scripts_basic()
{
//register scripts for our theme
wp_deregister_script('jquery');
wp_register_script('foundation-mod', get_template_directory_uri() . '/javascripts/vendor/custom.modernizer.js',
true );
wp_register_script('foundation-topbar', get_template_directory_uri() . '/javascripts/foundation/foundation.topbar.js',
true );
wp_register_script('foundation-main', get_template_directory_uri() . '/javascripts/foundation/foundation.js',
true );
wp_register_script('zepto', get_template_directory_uri() . '/javascripts/vendor/zepto.js',
true );
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
true );
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'foundation-topbar' );
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'zepto');
wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic' );
I have used the same method for the stylesheets, and no problem at all, any experience on this? I thought it was going to be easy to build a theme with this framework, but it's getting rather complicated to be fair.
Well the order in which the js files are "enqueued" is very important.
First you do "enqueue" the modernizer, then jQuery/zepto, then Foundation.min.js and then the topbar extension:
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'foundation-topbar' );
Please see the zurb Foundation Installation docs, with the order of the scripts in mind.
Also to get the foundation thing started, you need a script element most likely at the very end of your PHP produced HTML:
<script type="text/javascript">
$(document).foundation();
</script>
As wordpress is (as I know) pushing jQuery into noConflict mode, you may have to write this like
<script type="text/javascript">
jQuery(document).foundation();
</script>
EDIT: Zepto has no noConflict function, leaving $ being jQuery or whatever it was set. To keep it simple, choose jQuery and use the fully qualified jQuery(document).foundation() syntax!