How can I enqueue this particular script in functions.php?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" crossorigin="anonymous"></script>
function enqueue_my_scripts() {
wp_enqueue_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery'), '1.3', true);
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
Can you try this
Related
I am trying to enqueue my custom javascript code in WordPress' functions.php file,
I am doing the following,
function background_animation_script() {
wp_register_script('background_animation', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
}
function hero_animation_script() {
wp_register_script('hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery','background_animation_script'), '1.0', true);
}
function custom_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('background_animation_script');
wp_enqueue_script('hero_animation_script');
}
add_action('wp_enqueue_scripts', 'custom_scripts');
But, for some reason, the custom scripts are not getting loaded onto the page, but the jquery is. Any help with this is highly appreciated. Thanks!
use the below function for add jquery in plugin
function custom_scripts() {
wp_enqueue_script( 'background_animation_script', plugins_url('/assets/js/jquery.backgroundPosition.js', __FILE__),array('jquery'),'1.0', true);
wp_enqueue_script( 'hero_animation', plugins_url('/assets/js/background-animation.js', __FILE__), array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');
I am able to put bootstrap.min.js with dependency on the native wordpress jquery, but Jquery 1.11.1 does not appear in the source code and Font Awesome also does not work correctly
I've tried some code from other questions in stackoverflow, but I still can not resolve my question
I put some comments in the code below:
UPDATED CODE
function enqueue_jquery() {
// deregister jquery ok
wp_deregister_script('jquery'); // unregister the WP-provided jQuery version
// tag is not added in code
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/js/jquery.js',
array(), // don't make jquery dependent on jquery...!
'1.11.1',
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');
function enqueue_styles_scripts() {
//its OK
wp_enqueue_style(
'style-theme',
get_stylesheet_uri(),
array('bootstrap-css')
);
//its OK
wp_enqueue_style(
'bootstrap-css',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
//its OK
wp_enqueue_style(
'stylish-portfolio',
get_template_directory_uri() . '/css/othercss.css'
);
//I changed the directory of the files to css and fonts folders and it worked correctly
wp_enqueue_style(
'font-awesome',
get_stylesheet_directory_uri() . '/css/font-awesome.css'
);
//Appears in header but is working correctly
wp_enqueue_script(
'bootstrap-js',
get_template_directory_uri() . '/js/bootstrap.min.js',null
);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_scripts');
//Its Ok
function wpse_ie_conditional_scripts() { ?>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php
}
add_action( 'wp_head', 'wpse_ie_conditional_scripts' );
?>
So the problem is that 'jquery' is already registered and queued by WP. What I have done in the past is first unregister the WP-provided jquery, and then enqueue my own version. WARNING: test this out thoroughly, because you will now be upgrading jQuery for the whole WP installation!
wp_deregister_script('jquery'); // unregister the WP-provided jQuery version
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/js/jquery.js',
array(), // don't make jquery dependent on jquery...!
'1.11.1',
true
);
Alternatively, you could load a second version of jQuery in no-conflicts mode, but that is not a really good idea...
Hope this helps!
I was able to resolve without using function to unregister the native wordpress jquery and register my theme jquery
//Without using function
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.11.1');
wp_enqueue_script('jquery');
function enqueue_styles_scripts() {
//its OK
wp_enqueue_style(
'style-theme',
get_stylesheet_uri(),
array('bootstrap-css')
);
//its OK
wp_enqueue_style(
'bootstrap-css',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
//its OK
wp_enqueue_style(
'stylish-portfolio',
get_template_directory_uri() . '/css/othercss.css'
);
//its OK
wp_enqueue_style(
'font-awesome',
get_stylesheet_directory_uri() . '/css/font-awesome.css'
);
//its OK
wp_enqueue_script(
'bootstrap-js',
get_template_directory_uri() . '/js/bootstrap.min.js',null
);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_scripts');
//Its Ok
function wpse_ie_conditional_scripts() { ?>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php
}
add_action( 'wp_head', 'wpse_ie_conditional_scripts' );
?>
After switching to storefront theme leaflet map has disappeared.
link how it looks
functions.php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
/* wp_enqueue_style( 'bootstrap', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' ); */
wp_enqueue_style( 'leaflet.css','http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css');
}
function theme_scripts(){
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js', array('jquery'), '1.12.2', false);
wp_enqueue_script('bootstrap-js', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), false);
wp_enqueue_script('leaflet.js', 'http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js' ,false);
wp_enqueue_script('main.js', get_template_directory_uri(). '/js/main.js');
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
Bootstrap is commented because it breaks website view (it becomes smaller). But without commenting map is not working nevertheless.
I have added link to the map page. I dot not know is it proper way.
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ; ?>/css/bootstrap.min.css">
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri() ; ?>/js/main.js"></script>
You must have following javascript instruction to create a map
var map = L.map('mapid').setView([latitude, longitude], zoom);
See documentation
If you are using a Wordpress plugin, you should refer to its documentation
A look into the console would have been useful:
TypeError: $ is not a function
Change in main.js this line:
$( document ).ready(function() {
to
jQuery( document ).ready(function($) {
I'm trying to use a script called show_post.js on my Wordpress site. I've successfully loaded it directly in header.php:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="wp-content/themes/tutorial_theme/scripts/show_post.js"></script>
However, when I'm trying to do it via functions.php and wp_enqueue_script it won't work. Here is my functions.php file:
<?php function wpdocs_scripts_method() {
wp_enqueue_script('show_p', '/wp-content/themes/tutorial_theme/scripts/show_post.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
?>
What am I doing wrong here?
Add Script like
wp_enqueue_script('show_p',get_template_directory_uri().'/scripts/show_post.js', array( 'jquery' ));
Try this:
function theme_enqueue_scripts() {
wp_register_script("show_p", get_template_directory_uri() . '/scripts/show_post.js', array('jquery'));
wp_enqueue_script('show_p');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');
I would like to use http://jqueryui.com/dialog/ on my wordpress site but I can't figure out how to add it.
I created a file Chameleon/js/popup.js with the code:
jQuery(document).ready(function($) {
$( "#dialog" ).dialog();
});
Then I added to functions.php
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'popup', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/popup.js', // this is the location of your script file
array(' <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">') // this array lists the scripts upon which your script depends
);
and in my post template I added the code:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
but it doesn't work.
add path as like this
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_style( 'themeslug-jquery-css', '//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'themeslug-stylesheet', get_template_directory_uri.'/resources/demos/style.css' );
wp_enqueue_script( 'themeslug-popup', get_template_directory_uri() . '/js/popup.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-main', '//code.jquery.com/jquery-1.10.2.js', array('jquery'), '' );
wp_enqueue_script( 'themeslug-jquery-ui', '//code.jquery.com/ui/1.11.2/jquery-ui.js', array('jquery'), '' );
}