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);
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
Since this post got flagged as off-topic on WordPress StackExchange, I'll try my chances here.
My original post on StackExchange
Recently I tried integrating a mailchimp popup. The code is directly generated by mailchimp, I'm not editing it whatsoever.
I've tried implementing it several ways.
On the page via RAW JS.
Via a plugin called "Header & footer scripts".
Via a custom JS box in the Theme Options (this rendered a syntax error.)
via wp_enqueue_scripts in my child functions.php, which also generates an error in the console.
This is the script:
<script type="text/javascript"
src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-
dojo-config="usePlainJson: true, isDebug: false"></script><script
type="text/javascript">require(["mojo/signup-forms/Loader"],
function(L) { L.start({"baseUrl":"mc.us18.list-
manage.com","uuid":"d86301311141426b96c33360e","lid":"c46a6060b8"}) })</script>
I'm not really sure if I'm allowed to ask this question here, but I'm at my wit's end.
As far as I'm aware there is a syntax error in the code somewhere, but then again I wonder, why would MC push out code with an error.
I've already contacted MailChimp about this issue, they told me that the code looks fine and that there is nothing wrong with it.
There is nothing wrong with the code itself. The problem is when you copied and pasted you introduced line breaks which were not there. I ran the following and it works.
add_action( 'wp_head', function() {
?>
<script type="text/javascript"
src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script
type="text/javascript">require(["mojo/signup-forms/Loader"],
function(L) { L.start({"baseUrl":"mc.us18.list-manage.com","uuid":"d86301311141426b96c33360e","lid":"c46a6060b8"}) })</script>
<?php
} );
Observe data-dojo-config and mc.us18.list-manage.com
Probably you have configured your editor to do auto word wrap on hyphens which will not work when editing code.
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.
I am trying to get my custom javascript (jQuery) to load correctly in Wordpress.
I know you have to use wp_enqueue_script() to do this correctly. However the problem I have is that the result is not my script, but in the place I should have javascript I have the code for a 404 page !
I've tried two ways of enqueueing the script :
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),1);
just above wp_head()
and :function my_script_load() {
wp_enqueue_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'),null);
}
add_action('init', 'my_script_load');
in functions.php
both methods have the same effect. When I inspect the HTML in firebug I find the script is corredtly referenced :
<script src="http://localhost/wordpress/wp-content/themes/doric2011/javascript/sitescript.js" type="text/javascript">
however when I inspect the script itself I find the following (an extract) :`
Page not found | Nick Kai Nielsen
and so on... It is a HTML output for a 404 page, but occupying a space where javascript should be...
Needless to say the script does not work.
I have only had this problem since updating to 3.1 and it does the same thing if I try loading highslide.js and highslide.config.js (professionally written scripts). The script I wish to load is already working on my site and I want to go on using it in the new theme I am developing.
has anyone any idea of what is happening ? And, of course, what should I do about it ?
This is a local installation - I'm not risking breaking my site until this is sorted out.
Try:
add_action('init', 'my_script_load');
function my_script_load() {
wp_register_script('sitescript', get_bloginfo('template_directory').'/javascript/sitescript.js', array('jquery'), true);
wp_enqueue_script('sitescript');
}
Assuming your javascript file is in the proper location (and the URL isn't pointing to a spot where the JS file isn't...) try this:
function add_my_scripts() {
$templatedir = get_bloginfo('template_directory');
if(!is_admin()) {
wp_register_script( 'sitescript', $templatedir . '/javascript/sitescript.js');
wp_enqueue_script( 'sitescript' );
}
}
add_action( 'init', 'add_my_scripts');