wp_enqueue_script - Additional Jquery Does Not Appear in Source Code - wordpress

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' );
?>

Related

enqueue bootstrap not working

I am theming out a bare-bones WordPress theme but I am having trouble enqueuing bootstrap.min.js. All the other scripts I have enqueued work perfectly but for some reason the bootstrap js isn't. Find my code snippet below.
function html5blank_header_scripts()
{
if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
wp_enqueue_script('conditionizr'); // Enqueue it!
wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
wp_enqueue_script('modernizr'); // Enqueue it!
wp_register_script('bootstrap', get_template_directory_uri() . '/js/lib/bootstrap.min.js', array(), '3.3.5'); // Conditionizr
wp_enqueue_script('bootstrap'); // Enqueue it!
wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('html5blankscripts'); // Enqueue it!
Bootstrap relied on jQuery being loaded first so make sure you enqueue bootstrap with jQuery dependency.
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.35', true );

script not loading in functions.php

I am working on an underscores WordPress theme and I cannot seem to get any custom script to show results when I load the page. I have attempted to include a simple script 'test.js' in functions.php to test it out. All the other scripts work just fine. Any help would be appreciated:
function blake_eric_scripts() {
/**
* Enqeue bootstrap javascript
*/
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), '3.3.6', true);
/**
* Enqeue bootstrap styles
*/
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', array(),
'3.3.6', 'all' );
wp_enqueue_script( 'blake-eric-test', get_template_directory_uri() . '/js/test.js', array('jquery'));
/**
* Enqeue styles.css
*/
wp_enqueue_style( 'blake-eric-style', get_stylesheet_uri() );
wp_enqueue_script( 'blake-eric-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'blake_eric_scripts' );
Here is the simple jQuery script "test.js":
$(function(){
$('#main').addClass('test-class');
});
Thanks!
replace your test.js with following set of codes :-
jQuery(function(){
jQuery('#demo').addClass('test-class');
});
This types of error generally occurs because of conflict with others js files.
By default Wordpress runs jQuery in no-conflict mode, so you can't use the $ sign and define a function like this
$(function(){
$('#main').addClass('test-class');
});
Instead what you can do is
jQuery(function($){
$('#main').addClass('test-class');
});
if you include the $ sign inside the parenthesis you can use it on the rest of the function.
for more details check here

adding jquery ui to wordpress site

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'), '' );
}

Enqueueing IE conditional stylesheets in WordPress the right way

I know this question has been asked before on stackoverflow, but for the life of me I cannot get my conditional stylesheet to load and work for all versions of IE. I appreciate any help given in advance, it's really been getting to me, and I'm not sure what to do from here. I also tried loading the IE stylesheet in the header but that didn't seem to work either. My theme is not a child theme.
Here's my functions code:
function theme_styles() {
global $wp_styles;
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'glyphicons_css', get_template_directory_uri() . '/css/glyphicons.css' );
wp_enqueue_style( 'glyphiconssocial_css', get_template_directory_uri() . '/css/social.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
/**
* Load our IE-only stylesheet for all versions of IE:
* <!--[if IE]> ... <![endif]-->
*
* NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before
* calling the wp_enqueue_style() function. If you are trying to load a stylesheet for all browsers
* EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to
* properly handle non-IE conditional comments.
*/
wp_enqueue_style( 'ie_css', get_template_directory_uri() . '/ie.css', array('bootstrap_css', 'main_css') );
$wp_styles->add_data( 'ie_css', 'conditional', 'IE' );
} add_action( 'wp_enqueue_scripts', 'theme_styles' );
That method works fine. Note that commented styles seem to be invisible in FF Firebug, in Chrome developer tools on the other hand they are displayed.
add_action( 'wp_enqueue_scripts', 'so27214782_wp_enqueue_scripts' );
function so27214782_wp_enqueue_scripts()
{
global $wp_styles;
wp_enqueue_style( 'so27214782_ie', get_template_directory_uri() . '/ie.css', array(), '27214782', 'all' );
$wp_styles->add_data( 'so27214782_ie', 'conditional', 'IE 6' );
}
I don't see anything that might hamper your function. Here is how twentyfourteen load the conditional stylesheet
// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style', 'genericons' ), '20131205' );
wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );

Why does wp_enqueue_script ignore my 'wp_head' hook?

I would like css_head_scripts and js_head_scripts to be appended to wp-head
but Wordpress completely ignores it? Am I missing something?
function css_head_scripts() {
wp_enqueue_style( 'Master Stylesheet', get_template_directory_uri()."style.css" );
}
function js_head_scripts() {
echo '<!--[if lt IE 9]>';
wp_enqueue_script( "HTML5 Shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js" );
wp_enqueue_script( "Respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js" );
echo '<![endif]-->';
}
function js_footer_scripts() {
wp_enqueue_script( "My jQuery", "http://code.jquery.com/jquery-1.10.2.min.js" );
wp_enqueue_script( "Bootstrap", get_template_directory_uri()."/js/bootstrap.min.js" );
}
add_action('wp_head', 'css_head_scripts');
add_action('wp_head', 'js_head_scripts');
add_action('wp_footer', 'js_footer_scripts');
There are a number of issues with the code you've posted.
1) These shouldn't be hooked to wp_head or wp_footer.
The correct hook is wp_enqueue_scripts.
Change:
add_action('wp_head', 'css_head_scripts');
add_action('wp_head', 'js_head_scripts');
add_action('wp_footer', 'js_footer_scripts');
To:
add_action('wp_enqueue_scripts', 'css_head_scripts');
add_action('wp_enqueue_scripts', 'js_head_scripts');
add_action('wp_enqueue_scripts', 'js_footer_scripts');
2) Your handles should be lowercase and shouldn't contain spaces.
For example change:
function css_head_scripts() {
wp_enqueue_style( 'Master Stylesheet', get_template_directory_uri()."style.css" );
}
To:
function css_head_scripts() {
wp_enqueue_style( 'master-stylesheet', get_template_directory_uri()."style.css" );
}
3) A different function can be used for the main stylesheet.
function css_head_scripts() {
wp_enqueue_style( 'master-stylesheet', get_stylesheet_uri() );
}
4) You shouldn't be enqueuing a custom version of jQuery.
Remove wp_enqueue_script( "My jQuery", "http://code.jquery.com/jquery-1.10.2.min.js" );
5) The correct way to load a script in the footer
Change:
function js_footer_scripts() {
wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js" );
}
To:
function js_footer_scripts() {
wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js", array( 'jquery' ), false, true );
}
6) The correct way to add IE conditionals.
function js_head_scripts() {
global $wp_scripts;
wp_register_script( "html5-shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js", array(), '3.7.0' );
$wp_scripts->add_data( 'html5-shiv', 'conditional', 'lt IE 9' );
wp_enqueue_script( "respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js", array(), '1.4.2' );
$wp_scripts->add_data( 'respond.js', 'conditional', 'lt IE 9' );
}
7) Do you need 3 functions for this?
Combine all of this into a single function
If you've been following along so far your completed code should look something like this:
function wpse_scripts_styles() {
global $wp_scripts;
wp_enqueue_style( 'master-stylesheet', get_stylesheet_uri() );
wp_enqueue_script( "bootstrap", get_template_directory_uri() . "/js/bootstrap.min.js", array( 'jquery' ), false, true );
wp_register_script( "html5-shiv", "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js", array(), '3.7.0' );
$wp_scripts->add_data( 'html5-shiv', 'conditional', 'lt IE 9' );
wp_register_script( "respond.js", "https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js", array(), '1.4.2' );
$wp_scripts->add_data( 'respond.js', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'wpse_scripts_styles' );
Further reading: http://codex.wordpress.org/Function_Reference/wp_enqueue_script
UPDATE:
Disappointingly the IE conditional doesn't work.
https://core.trac.wordpress.org/ticket/16024
A work around for this would be to load them in the head with the wp_head action but this isn't ideal. Following on from the example above the method you'd use is:
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' );

Resources