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.
Related
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.
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 want to add a javascript file into Wordpress but i don't want to use a plugin or any theme file like functions.php
How can i do that?
I have already tried using a plugin as well as functions.php, but my client don't want to use either of these.
Add in your theme folder conman file like header, footer etc...
<script src="<?php echo get_template_directory_uri() ?>/foldername/yourfilename.js" type="text/javascript"></script>
Thanks,
<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js" type="text/javascript"></script>
put this line before tag in footer.php
Here I am using bootstrap JS. you have to first put bootstrap.js in JS folder of your theme
I have a problem where I've been able to include a custom css in the section of my wordpress theme with the following code:
function load_my_style_wp_enqueue_scripts()
{
wp_register_style('my_styles_css', includes_url("/css/my_styles.css"));
wp_enqueue_style('my_styles_css');
}
add_action('wp_enqueue_scripts','load_my_style_wp_enqueue_scripts');
But the order in the source code is as follows:
<link rel='stylesheet' id='my_styles_css-css' href='http://...folderA.../my_styles.css?ver=3.1' type='text/css' media='all' />
<link rel="stylesheet" id="default-css" href="http://...folderB.../default.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" id="user-css" href="http://...folderC.../user.css" type="text/css" media="screen,projection" />
I want my_styles_css to be the last file to load, overriding default and user files. I've tried to achieve this by modifying wp_enqueue_style in different ways, but without any success. I've tried:
wp_enqueue_style('my_styles_css', array('default','user'));
or
wp_enqueue_style('my_styles_css', false, array('default','user'), '1.0', 'all');
I've seen some related questions without answer or with these last 2 methods that are still failing for me.
The function above is part of a plugin that I've got enabled in my wordpress installation.
The add_action function has a priority parameter that might help:
$priority
(int) (optional) How important your function is. Alter this to make your function be called before or after other functions. The default is 10, so (for example) setting it to 5 would make it run earlier and setting it to 12 would make it run later.
Default: 10
http://codex.wordpress.org/Function_Reference/add_action
Or you could directly link to your css in your header.php file rather than using wp_enqueue_style, and therefore place it exactly where you want.
Otherwise there seems to be an answer here: How to force wp_enqueue_style to display CSS at the very bottom of the head tag to override all CSS rules?
The correct way to add a stylesheet to your theme is by way of the wp_enqueue_style() function:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
With $deps you specify which stylesheets should be loaded before your custom stylesheet.
What about add_action('wp_head','load_my_style_wp_enqueue_scripts');?
Use wp_head instead of wp_enqueue_scripts.
Why not edit the theme?
You can do this from the Dashboard
Appearance -> Editor -> header.php
Just add your css last.
I have been tearing my hair out trying to move all the JavaScript files from the header to the footer in a WordPress blog I am working on.
Currently I am trying to configure MediaElements.js plugin. I am trying to load all the plugin's JS files in the footer.
I've discovered that the mejs_add_header() function in the mediaelement-js-wp.php loads the javascript and css.
function mejs_add_header(){
$dir = WP_PLUGIN_URL.'/media-element-html5-video-and-audio-player/mediaelement/';
echo <<<_end_
<link rel="stylesheet" href="{$dir}mediaelementplayer.min.css" type="text/css" />
<script src="{$dir}mediaelement-and-player.min.js" type="text/javascript"></script>
_end_;
}
The Javascript isn't being loaded using the WordPress enqueue_script() function. Instead of making changes to this file, is there a way of configuring the plugin to load JS file in the footer?
Appreciate any help.
Haven't heard about that plugin before, but try this somewhere in your functions.php:
remove_action('wp_head', 'mejs_add_header');
add_action('wp_footer', 'mejs_add_header');
And if that doesn't work then try looking for where and how that function is being called.
~ K