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();
Related
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 );
I added custom javascript to a wordpress theme through the wp_enqueue_script()
function.
I placed my file in theme-folder/js/my-javascript.js
But it would not be found by wordpress! I would see the script tag in the html source inserted by wordpress, but clicking on it would take me to a "not found page". I looked around everywhere to see if this was some caching issue. Turned off caching, still nothing.
Finally, I ended up placing my-javascript.js file in the root of theme-folder, instead of 'js' folder. And now my js file was being found and loading.
But now a new problem I don't understand.. I would edit my file and the changes wouldn't reflect! I would have to change the file name of my js file everytime I made a change, renaming the file in my enqueue script function as well...I just wanted to get this task done.
So why does this happen? The site is hosted on dreamhost, and I suspect they used a one-click installer. Does dreamhost do some sort of caching on its own? and that's why?
Am I dumb? or does wordpress somehow know that I hate it?
Edit:
This is how I'm loading the script and how I left it working, but why won't my script refresh when I make changes and why doesn't it work when I place it in theme's 'js' folder?
/* Add floater script */
function add_floater_div_script(){
/* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); */
if ( is_page(1208) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), '', true);
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
Edit: Changed code from "array ( " to "array(" because someone thought this was a problem. I did a quick check myself and PHP is ok with this space so this does not explain the weird wordpress behaviour I'm trying to solve.
Yeah, caching gets really annoying, Though hard reloading should solve the prob but we can't expect client to do it everytime. And WordPress has added a way to take care of that :)
wp_enqueue_script accepts 4th parameter as version number...
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
So just update version after each update...
For development, Just set it as time()... So that it is reloaded every single time and never cached...
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
Your code will look something like this...
/* Add floater script */
function add_floater_div_script(){
/* wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true); */
if ( is_page(1208) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array('jquery'), time(), true);
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
BE SURE TO REMOVE time() FROM PRODUCTION VERSION.
Or your file will never be cached by browser... Just set the version of your theme after dev is complete, so that every new version gets JS updated.
Try by wrapping your enqueue action in a function that you'll call on after_setup_theme hook in your functions.php
<?php
add_action( 'after_setup_theme', 'yourtheme_theme_setup' );
if ( ! function_exists( 'yourtheme_theme_setup' ) ) {
function yourtheme_theme_setup() {
add_action( 'wp_enqueue_scripts', 'yourtheme_scripts' );
}
}
if ( ! function_exists( 'yourtheme_scripts' ) ) {
function yourtheme_scripts() {
if ( is_page( 1208 ) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '', true );
}
}
}
Also be sure you're on page with id of 1208 to see if the script is actually loaded (because of the conditional).
And do a hard refresh (Ctrl+Shift+R).
The most common issue I see is an error in how you're enqueueing the file. Can you post code in your functions.php file that's enqueuing the JS file? Always be sure to reference the codex and other developer materials as well: https://developer.wordpress.org/themes/basics/including-css-javascript/
For future reference, it should look something like this:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/my-javascript.js');
Edit: After OP posted their code I saw they have a space after array which is causing an error, here is the correct code:
function add_floater_div_script() {
if ( is_page( 1208 ) ) {
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js', array( 'jquery' ), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'add_floater_div_script' );
add_action('wp_enqueue_scripts', 'load_scripts', 12);
function load_scripts() {
wp_enqueue_script('filename', get_template_directory_uri() . '/js/filename.js', array(), '1.0.0', true );
}
This is the proper way to import js in wordpress..
An really easy way to prevent caching of loaded resource files like Javascript-files is to add an random value after the filename that is to be included like so:
wp_enqueue_script( 'custom-floater', get_template_directory_uri() . '/custom-floater-8.js' . '?' . rand(), array('jquery'), '', true);
The PHP function
rand()
generates a random number and is appended to the file name after a '?' as query string. This forces reloading of the file every time the webpage is loaded.
Of course dismiss it for the production version.
Sometimes the issue could be simple somewhere a duplicated declaration of the name of the enqueue_script.
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater-
8.js', array('jquery'), '', true);
...
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/custom-floater-
8.js', array('jquery'), '', true);
Don't use twice the same name 'custom-script' for example. The second will not be loaded.
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
);
I am new to Wordpress and I need to convert a PSD int a Wordpress theme.
For that I downloaded a naked wordpress theme to start with and I tried to add my own css style in function.php as follows:
function naked_scripts() {
// get the theme directory style.css and link to it in the header
wp_enqueue_style( 'main-style', get_template_directory_uri() . '/style/main.css' );
wp_enqueue_style( 'responsive-style', get_template_directory_uri() . '/style/responsive.css' );
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/style/bootstrap.min.css' );
// add fitvid
wp_enqueue_script( 'jquery-js', get_template_directory_uri() . '/js/jquery.js', array( 'jquery' ), '1.10.2', true );
// add theme scripts
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.0.3', true );
}
add_action( 'wp_enqueue_scripts', 'naked_scripts' ); // Register this fxn and allow Wordpress to call it automatcally in the header
but in the browser I did not get my style and I have his error:
GET http://rota.alwaysdata.net/wp-content/themes/theme1/style/main.css?ver=4.1
what's ver=4.1 ??
It's a cache-buster added by WordPress. You can set it to any number you want using the $ver argument in wp_enqueue_style
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
The ?ver=X.XX has NO effect on the content of the stylesheet.
CSS Cache-busting references:
http://css-tricks.com/snippets/wordpress/prevent-css-caching/
https://www.mojowill.com/developer/get-your-wordpress-css-changes-noticed-immediately/
I suggest if it's your first time creating a wordpress template using these resources:
Underscores blank wordpress theme:
http://underscores.me/
Lynda.com underscores tutorial:
http://www.lynda.com/underscores-tutorials/WordPress-Building-Themes-from-Scratch-Using-Underscores/163092-2.html
This is what i used to make my first wordpress project and it worked out grate , here is the result: ibreatheart.com
Hope it helps .
how do I actually add jQuery to html5blank wordpress theme by toddmotto?
I'm quite new to wordpress so I'm not really sure how does this work.
For normal html, I'll just link a script tag of jquery and another script tag with $(document).ready.. . . . . and start the jquery codes.
Would really love if someone who had experience using html5blank theme could shed some light.
Thanks much!
The WordPress recommends add jquery from WordPress itself.So you can add jquery using following way.
Add code to your current theme functions.php file.
function func_add_my_jquery() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'func_add_my_jquery' );
I load all my scripts from functions.php by using wp_enqeue_script. This will avoid duplicate loading.
If you only want to load Query, you can do this by:
function load_my_scripts() {
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'load_my_scripts' );
This will load the jQuery that follows WP. You can see other default scripts you can load here:
If you want to load other JS scripts, then you must use this:
function theme_name_scripts() {
wp_register_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array('jquery') );
wp_enqueue_script( 'my-script' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
The array('jquery') is for dependencies and in this case means that jQuery must be loaded before this script can be loaded.
If you want to register a newer version of jQuery, you first have to deregister the loaded jQuery:
wp_deregister_script( 'jquery' );