When I add the js file by html command, it loads but when I add it by wp command, it doesnt load.
<!-- <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> -->
<?php
wp_register_script( 'foo-stylesa1-slick-jquery', 'https://code.jquery.com/jquery-2.2.0.min.js' );
wp_enqueue_script( 'foo-stylesa1-slick-jquery' );
?>
I use above code snippet in my 2 plugin at the same time.
What is the problem?
You have to use complete register script function, since many times wordpress loads script above jquery and due to this scripts not work.
wp_register_script( 'someScript-js', '/someScript.js' , '', '', true );
Here true is used for loading scripts to the footer section after jquery enqueued.
Or you can directly use jquery enqueue function without loading its from external.
wp_register_script('jquery');
This will directly include jquery for your website.
Related
I am at my wit's end. Of the following two script tags, the first one does not show up in my source code; the second one does. I've tried a number of different ways of presenting it including relative links, the wordpress template URI call, etc, but when the link is VALID it disappears. The same thing happens to my stylesheet. What could possibly cause this? Could it be some sort of security thing?
<script src="https://mywebsite.com/wp-content/themes/aiir-theme/jquery.matchHeight.js" ></script>
<script src="https://mywebsite.com/wp-content/smurf/aiir-theme/jquery.matchHeight.js" ></script>
You shouldn't be "baking in" scripts and styles. Once you get the hang of properly enqueuing your assets, they'll be much easier to load/unload, maintain, manipulate, and otherwise handle - and your future self (and other developers) thank you in advance!
You'll need to make use of the wp_enqueue_scripts Action Hook which uses the wp_enqueue_style() and wp_enqueue_script() functions (which rely on your theme properly utilizing the wp_head() and wp_footer() functions.
add_action( 'wp_enqueue_scripts', 'so_53109688_enqueue_assets' );
function so_53109688_enqueue_assets(){
wp_enqueue_script( 'jquery' ); // Make sure jQuery is loaded
wp_enqueue_script( 'jquery-matchheight', get_stylesheet_directory_uri() . '/jquery.matchHeight.js', array( 'jquery' ), null, true );
wp_enqueue_style( 'jquery-matchheight-styles', get_stylesheet_directory_uri() . '/jquery.matchHeight.css' );
}
I can't attest to why they're disappearing, but if you properly enqueue your assets, they leave a much easier diagnostic trail for bug fixing.
SOLVED!! Someone at the company (not me) installed a plugin that "optimizes" js and css. This was causing it to delete the links from source code; now I can continue with problem solving.
Thanks for the inspiration,
Ric
I have found a lot of conflicting information about this on the internet. Some sites say that Wordpress automatically loads jquery, and others say you have to load it in functions.php
I want to enqueue a script in functions.php that is dependant on jquery. I read that you have to specificy jquery as the $deps parameter
My code is:
wp_enqueue_script( 'my-file', get_stylesheet_directory_uri() . '/js/my-file.js', array('jquery'), null, false);
is specifying jquery in the $deps parameter enough? Will wordpress then automatically load jquery too? Or do I actually have to enqueue jquery as a script as well?
My code above loads "my-file.js" but the script isn't working which tells me that either jquery isn't being loaded or there is sitll a dependency issue.
Wordpress by default register jquery for you
In your jquery script file, you have to use jQuery instead of $ to avoid confliction and you can enqueue your script
dependencies: An array of handles to assets which your script or style depends on. These will be loaded before your enqueued script.
wp_enqueue_script( 'my-file', get_stylesheet_directory_uri() . '/js/my-file.js', array('jquery'), null, false);
Before your script jquery will load.
array('jquery')
You can use this condition before enqueueing the script
if( ! wp_script_is( 'jquery', 'enqueued' ) ) {
wp_enqueue_script('jquery');
}
wp_enqueue_script( 'my-file', get_stylesheet_directory_uri() . '/js/my-file.js', array('jquery'), null, false);
I'm quite new to WordPress and I'm following a Udemy course on theme development and one part involves using the Google Maps API. When I register/enqueue the script, it doesn't appear in the HTML source code when viewing the page. There are also no errors in the developer console either.
This is a snippet from my functions.php:
wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(''), '', true);
wp_register_script('fluidboxjs', get_template_directory_uri() . '/js/jquery.fluidbox.min.js', array('jquery'), '2.0.5', true);
wp_register_script('script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0', true);
wp_enqueue_script('googlemaps');
wp_enqueue_script('jquery');
wp_enqueue_script('fluidboxjs');
wp_enqueue_script('script');
}
add_action('wp_enqueue_scripts', 'lapizzeria_styles');
And this is the HTML that is output below the footer (I believe I should be seeing a link to the Google API here):
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/jquery.fluidbox.min.js?ver=2.0.5'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-content/themes/lapizzeria/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://localhost/udemy/lapizzeria/wp-includes/js/wp-embed.min.js?ver=4.7.4'></script>
Interestingly this line does appears in the head when I enqueue googlemaps:
<link rel='dns-prefetch' href='//maps.googleapis.com' />
As a bit of background on the issue:
The first step in the exercise was to place Google's sample code (script & styles) directly into front-page.php and the map displayed fine.
The second step was moving that code out from the front-page.php and placing it in functions.php, scripts.js, and style.css.
Moving the styles to style.css works fine. Moving the initMap() function to scripts.js works fine. But when attempting to enqueue/register the Google Maps API in functions.php it doesn't seem to be adding the <script> for the Maps API under the footer as it does for other enqueued items.
I'm not sure if it makes a difference but I'm working locally and running MAMP. I've tried clearing my browser cache and using a different browser. I've tried changing the order in which it is enqueued.
EDIT:
One thing I have noticed, is that if I put a dependency in for googlemaps it DOES print the <script> tag I'm expecting but brings up this error in the console: initMap is not a function. My understanding is that Google Maps API shouldn't require jQuery to work so I'm not sure if this bit of extra info is relevant.
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap&ver=4.7.4'></script>
Maybe something fishy going on with the #038; appearing in the line above?
Any help would be appreciated!
I suspect the issue is due to the dependency that has been set for googlemaps. Instead of passing in an empty array to specify no dependencies for the script, the array contains a blank string. The dependency can't be satisfied so the script isn't loaded.
Simply replace array('') with array().
wp_register_script('googlemaps', 'https://maps.googleapis.com/maps/api/js?&key=AIzaSyCCyUD3v8kBVRphqG1RYjYcSKBcyC-prKw&callback=initMap', array(), '', true);
I am implementing an HTML5 map on a WordPress page.
The creator tells me I have to add some custom script to the head section of my WordPress site.
However I don't want the script to be run on every page, but just the one page.
jQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" type="text/javascript"></script>
Scripts:
<link href="lg-map/map.css" rel="stylesheet" type="text/css" />
<script src="lg-map/raphael.js" type="text/javascript"></script>
<script src="lg-map/scale.raphael.js" type="text/javascript"></script>
<script src="lg-map/lg-map.js" type="text/javascript"></script>
What's the easiest way to call this just for the one page? I have tried to create a custom page-template and custom header call but failed due to my knowledge of PHP and how WordPress calls things.
Also, I'm not sure if I have to load the jQuery line as I read that most WordPress has this loaded in?
You should enqueue the script using the following code it your functions.php file. If you have purchased a theme you should put this in your child theme folders functions.php.
function my_scripts_method() {
//Replace 222 with the ID of the page where you want to have this added.
if( is_post( '222' ){
wp_enqueue_script( 'maps-jquery', "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
That being said this appears to be a very new version of jQuery. Wordpress has jQuery preloaded but not that version. You may find conflicts with loading this version while the other version is already there.
This is my first time posting so any advice for how I post is much appreciated.
LINK TO SITE: http://rightbraingroup.com/services-new-css-style/
I am running into a problem trying to get this amazing css function to work - modernizr and the css to load in Wordpress. I tried many things like adding scripts to the header, registering and enqueing the modernizr.custom.js file. I also added . And none of these options worked. I am just learning about modernizr and am truly stuck. Any help is appreciated.
Below are the ways to include js and css into Wordpress without using Enqueing (which is the proper way).
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/component.css" media="screen" />
This is how I registered and Enqued the js file
// script manager template to register and enqueue files
function childtheme_script_manager() {
// wp_register_script template ( $handle, $src, $deps, $ver, $in_footer );
// registers modernizr script, stylesheet local path, no dependency, no version, loads in header
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
// enqueue the scripts for use in theme
wp_enqueue_script ('new_service');
}
add_action('wp_enqueue_scripts', 'childtheme_script_manager');
I keep getting a 404 error or "Resource interpreted as Script but transferred with MIME type text/plain" (used plugin to fix but did not help). If anyone can give a little guidance or direction it would be much appreciated. This is also my first time posting so if you need any more info from me please let me know. Thank you for your time.
Your wp_enqueue_scripts code is correct and Modernizr appears to be loading fine on your site. You need to do a similar invocation for adding stylesheets.
function childtheme_script_manager() {
wp_register_script('new_service', get_stylesheet_directory_uri() . '/js/modernizr.custom.js', array('jquery'), false, false);
wp_enqueue_script('new_service');
wp_register_style('my_style', get_template_directory_uri() . '/css/component.css', array(), false, 'screen');
wp_enqueue_style('my_style');
}
Note, I've left the $deps array empty, if the css has dependencies, you may need to specify those names in the array.