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 );
Related
I'm developing a theme and trying to get wp_enqueue_script to work.
But it is not included, except that the CSS file is working.
I have this function:
function KYT_admin_scripts($dir)
{
if('toplevel_page_KYT' != $dir){
}
wp_register_style('KYT-admin', get_template_directory_uri() . '/css/admin.css', array(), '1.0.0', 'all');
wp_enqueue_style('KYT-admin');
wp_register_script('KYT-admin-js', get_template_directory_uri() . '/js/admin.css', array('jQuery'), null, true);
wp_enqueue_script('KYT-admin-js');
}
add_action('admin_enqueue_scripts', 'KYT_admin_scripts');
it's working.
the problem was in:
array('jQuery')
it's should be a Small Latter: array('jquery')
I need to add sync or defer attribute in Stylesheets CSS file which are included by using wp_enqueue_style.
My Code is below.
function my_scripts() {
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '4.4.2');
wp_enqueue_style('my-style', get_stylesheet_uri());
wp_enqueue_style('about-page', get_template_directory_uri() . '/css/about-styles.css', array(), '4.4.3');
wp_enqueue_script('bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151112', true);
wp_enqueue_script('jquery-scrollto', get_template_directory_uri() . '/js/jquery-scrollto.js', array(), '20112', true);
wp_enqueue_style('details-pages', get_template_directory_uri() . '/css/details-pages.css', array(), '4.4.3');
wp_enqueue_style('owl-carousel-css', get_template_directory_uri() . '/css/owl/owl.carousel.css', array(), '4.4.2');
wp_enqueue_script('owl-carousel-js', get_template_directory_uri() . '/css/owl/owl.carousel.min.js', array(), '202', true);
wp_enqueue_script('scripts-js', get_template_directory_uri() . '/js/scripts.js', array(), '20151112', true);
}
add_action('wp_enqueue_scripts', 'my_scripts');
Now I want to add sync or defer attribute in different CSS Style sheets. So please help me, how to add sync or defer attribute. I want to add attributes in just CSS files not in JavaScript files.
Any help will be appreciated.
Thanks.
Try this code
function add_custom_attr( $tag, $handle, $src ) {
$scriptArr = array('bootstrap','my-style','about-page','bootstrap-min','jquery-scrollto','details-pages','owl-carousel-css','owl-carousel-js','scripts-js');
if (in_array($handle, $scriptArr)) {
$tag = str_replace( 'src=', 'sync="false" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_custom_attr', 10, 3 );
Another solution using a different filter, which can be used to target a specific script handle:
function frontend_scripts(){
wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );
function make_script_async( $tag, $handle, $src ){
if ( 'my-unique-script-handle' != $handle ) {
return $tag;
}
return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );
I hope this will help you to solve your problems.
Thank you
This is the script I use to control style and script attributes:
enqueue script
This allows you to selectively add Defer, Async, and Lazy Load to stylesheets and scripts. A perfect way to make Google PageSpeed happy LOL.
Applying proper minification, caching and lazy loading of images, along with managing the styles and scripts with this script, changed our PageSpeed score from 60 mobile / 88 Desktop to 74 Mobile and 96 desktop.
I am using jquery mobile just for the swipe ability for the carousels on the page.
But for some reason when you visit different pages on the site, it keeps (caches?) the previous page data and adds the new data to the bottom of the new page.
Is there some way disable this in jquery mobile? or is there an alternate way to enable swipe to change the carousel slides?
jquery mobile script to swipe slides.
// Mobile Swipe
$j("#main-slider, #testimonial-slider").swiperight(function() {
$j(this).carousel('prev');
});
$j("#main-slider, #testimonial-slider").swipeleft(function() {
$j(this).carousel('next');
});
jquery mobile files enqueued via wordpress functions file along with bootstrap fontawesome and my custom scripts.
function resources() {
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/assets/bootstrap/css/bootstrap.min.css');
wp_enqueue_style('fontawesome', get_template_directory_uri() . '/assets/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css');
wp_enqueue_style('main', get_template_directory_uri() . '/css/style.css');
wp_enqueue_script( 'jquery-mobile-js', get_template_directory_uri() . '/assets/jq-mobile/jquery.mobile-1.4.5.min.js', array('jquery'), '3.3.1' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), '3.3.1', true );
wp_enqueue_script( 'fontawesome-js', get_template_directory_uri() . '/assets/fontawesome/svg-with-js/js/fontawesome-all.min.js', array('jquery'), '3.3.1', true );
wp_enqueue_script( 'scripts-js', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '3.3.1', true );
}
add_action('wp_enqueue_scripts', 'resources');
Found an alternate solution: https://github.com/maaaaark/bcSwipe/blob/master/jquery.bcSwipe.min.js
This person wrote this specifically for Bootstrap 4 Carousel Mobile Swipe.
No need tp use jquery-mobile.js.
Note: if you are using wordpress like I am keep in mind you will need to use jQuery.noConflict();
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' );
?>
I want to use Bootstrap framework for my Wordpress.. how to edit in the functions.php ? i find somewhere tell the code like this
function enqueue_my_scripts() {
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', array('jquery'), '1.9.1', true); // we need the jquery library for bootsrap js to function
wp_enqueue_script( 'bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js', array('jquery'), true); // all the bootstrap javascript goodness
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');
and what is that mean of first paragraph function enqueue_my_scripts() and add_action('wp_enqueue_scripts', 'enqueue_my_scripts'); in the last paragraph ?
Those are called "hooks" and you can read about them here: http://codex.wordpress.org/Plugin_API
Otherwise your code is essentially correct, with one mistake. You have jQuery as a dependency to jQuery, which means it is never loaded and subsequently bootstrap is never loaded:
wp_enqueue_script(
'jquery',
'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
array( 'jquery' ), // <-- Problem
'1.9.1',
true
);
Solution:
wp_enqueue_script(
'jquery',
'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
array(), // <-- There we go
'1.9.1',
true
);
But, there's one more thing. WordPress already has jQuery ready for you to enqueue (i.e. wp_enqueue_script( 'jquery' ); will load the local copy of jQuery). It isn't necessary but I think it is best practice to enqueue a CDN version of a script with a suffix, i.e.:
wp_enqueue_script(
'jquery-cdn',
'//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
array(),
'1.9.1',
true
);
// And then update your dependency on your bootstrap script
// to use the CDN jQuery:
wp_enqueue_script(
'bootstrap-js',
'//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js',
array( 'jquery-cdn' ),
true
);