How to load a custom jquery mobile locally - javascript

I've been trying to add a jquery mobile module to my wordpress website - the collapsible content block module. It works great when I enqueue jquery mobile via CDN in functions, ie.
function get_jqm() {
wp_enqueue_script(
'jqm_js',
'http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js',
array('jquery'),
'1.2.0'
);
..but that adds the entire library, and it breaks my links and navigations, and the wordpress admin bar. I've downloaded a custom version of jquery mobile that really only includes the collapsible content block module, but I'm wondering what is the best way to enqueue a local version of jquery mobile plus custom jquery mobile CSS files. I've tried a number of suggestions by googling it but cannot find anything that gets it to work. It only works via CDN.

To register your script, use:
wp_register_script('jqm_js', get_template_directory_uri() . '/path/to/your/local/jquery.js', array(), null, false);
Set the last parameter as true to put the script in the footer and false to put it in the header of your site. 'get_template_directory_uri() returns something like
http://yourlocalsite:8888/wp-content/themes/your-theme/
and then from there you just need to provide the rest of the path to your js.
Then queue it up with:
wp_enqueue_script('jqm_js');
Similarly, you can do this with your CSS:
wp_enqueue_style('app-css', get_template_directory_uri() . '/path/to/your/app-css.css', false, '');

Related

How to integrate baguetteBox.js in the BST WordPress Starter theme?

I am trying to modify the starter WordPress theme BST for a personal project.
In it I want to have a custom page template with bootstrap elements. This page will show various images in the form of galleries.
I also need to import the baguetteBox.js plugin so that I can use its lightbox effect.
The pages have been created in html and they work. The custom page template is created and the design is the same as the html variant.
However when importing the scripts in WordPress (by using wp enque and wp register) the console cannot define baguetteBox. So I guess I am doing something wrong.
Here is the official guide on installing this Bootstrap plugin:
The enqueue code that I am using is placed in the bst-master/function/enqueues.php file:
For baguetteBox.min.js:
wp_register_script('baguetteBox-js', get_template_directory_uri() . '/js/baguetteBox.min.js', false, null, true, array('jquery'));
wp_enqueue_script('baguetteBox-js');
I have also tried without array('jquery') - no changes. I am also not sure where/how to place the "async" part (as recommended by the developers).
For baguetteBox.min.css:
wp_register_style('baguetteBox-css', get_template_directory_uri() . '/css/baguetteBox.min.css', false, null);
wp_enqueue_style('baguetteBox-css');
The problem is with the <script>baguetteBox.run('.tz-gallery', {filter: /.angelov.+\.(gif|jpe?g|png|webp)/i});</script> which I cannot figure out how and where to place so I just tried to add it inside the page template php file and also in the Insert Headers/Footers plugin.
So I figured out my own solution. First of all the classic (and recommended) way of adding scripts for WordPress was failing somehow. So I decided to place the script in the header.php file before the closing head tag and without async. I also moved the script in the js folder of the child theme.
It looks like this:
<script src="<?php echo get_stylesheet_directory_uri();?>/js/baguetteBox.min.js"> </script>
Next I placed the below code in the custom page template file right after the final closing <div> tag:
<script>baguetteBox.run('.tz-gallery', {filter:/.angelov.+\.(gif|jpe?g|png|webp)/i});</script>
And it all worked out like a charm.

Wordpress WooCommerce Product Carousel doesn't show pictures

First of all, I'm not a coding wonder and a starter.
I've a problem that I'm trying to solve for a couple of days. It's about the carousel on WooCommerce. The website is tegelsenlaminaat.nl and an example is: http://www.tegelsenlaminaat.nl/product/hoomline-balmoral-xl-spa/
I get the following error: TypeError: v.carouFredSel is not a function. (In 'v.carouFredSel(w)', 'v.carouFredSel' is undefined)
How can I solve this and what's the problem.
That error means that you're making a call to the carouFredSel function before that function has been registered.
Basically you're trying to call that function before that function exists. It would appear the JavaScript file that creates that function isn't being output to your site.
If you're implementing that directly into your theme you need to make sure you're including the script that registers the function before your script.min.js script.
The github for that plugin has a script titled jquery.carouFredSel-6.2.1-packed.js. You could include that with your enqueued scripts, typically in your functions.php.
That would probably look something like this:
wp_enqueue_script( 'caroufredsel', get_template_directory_uri() . '/assets/js/jquery.carouFredSel-6.2.1-packed.js', array ( 'jquery' ), 6.2.1, true);
wp_enqueue_script( 'script', get_template_directory_uri() . '/assets/js/script.min.js', array ( 'caroufredsel' ), 1.0, true);
That would enqueue both the caroufredsel script if included in your theme's assets/js directory and caroufredsel is dependent on jQuery and your min scripts is dependent on both jQuery and caroufredsel.
For more on enqueing scripts check out this article from my site covering the topic.

Enque Scripts and Styles Wordpress

I'm trying to make this work.. http://jsfiddle.net/EnY74/20/ but I'm new to javascript and didn't realise I needed the external resources.
So I copied the javascript in from jsfiddle into a folder and enqueue the script and it didn't work. (but the enqueue is correct) I then realised I needed external resources.
So now I'm trying to resolve the dependencies the jsfiddle uses so it will work on my site.
-angularjs 1.1.1
-bootstrap-combined.min.css
-jquery-1.9.1.min.js
function wootique_child_scripts() {
// jQuery
wp_enqueue_script('jquery');
// AngularJS not sure if this is right?
wp_enqueue_script('angular-core', '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js', array('jquery'), null, false);
wp_enqueue_script('angular-route', '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js', array('angular-core'), null, false);
wp_enqueue_script('angular-resource', '//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-resource.min.js', array('angular-route'), null, false);
// my custom javascript
wp_enqueue_script('custom-pagination-js', get_stylesheet_directory_uri() . '/js/pagination.js');
}
add_action('wp_enqueue_scripts', 'wootique_child_scripts');
I'm not sure how to include the bootstrap and how to include it here, I'm new to javascript but have a lot of experience with PHP.
Am I recalling the AngularJS correctly? Is the jQuery enqueue correct (I read it's included in wordpress).
I feel quite lost at the moment with this any help would be appreciated specifically with loading the twitter bootstrap thank you.
Your enqueue looks fine.
wp_enqueue_style('bootsrap-style', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')
wp_enqueue_script('bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js')
Keep it up, you are doing fine.

Wordpress plugin using jquery

I'm starting to get into WordPress and looking at developing some plugins.
If I want my plugin to use a specific version of jQuery how do I enable that?
ie. some themes don't use jQuery, some use OLD versions - what if I need a more recent version?
add_action( 'wp_enqueue_script', 'load_jquery' );
function load_jquery() {
wp_enqueue_script( 'jquery' );
}
I've seen the code above suggested - but will that only load whatever jQuery is in the theme folders already (if at all)?
Is it better to include a jQuery.js file with my plugin, and reference it directly from my plugin code? If, so, how would I change the script above, to load MY version of jQuery?
Thank you for any help,
Mark
The latest WordPress 4.0 comes with jQuery 1.11.1.
But in case you want to remove the WordPress default jQuery library with say either a local new JS or a CDN you can do so by placing the following code in either a plugin or your theme's functions.php
function jquery_cdn() {
if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'jQuery_JS_PATH', false, '1.8.3');
wp_enqueue_script('jquery');
}
}
add_action('init', 'jquery_cdn');
References:
http://core.svn.wordpress.org/tags/4.0/wp-includes/js/jquery/
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
http://agilewp.com/how-to/remove-wordpress-jquery-and-use-googles-cdn-version-instead/

Wordpress enqueuing scripts in post

this is a noobish question but I really tried several options, none of them seemed to work. I have a plugin that is a slideshow with some posts, it works just fine on homepage (index). It uses jquery 1.4.2 and a javascript file. The idea is that when I go inside a post, the javascript file is not loaded, imported (inspecting the sources using chrome's webdev I can see the plugin's style.css but not the javascript file).
I tried several options, apparently the jquery used by wordpress is a bit too old and I need 1.4.2.
I tried registering the 1.4.2 jquery (I will refer as jq), and then enqueuing the script file depending on the new jq, in plugin's php file, also enqueuing the style.css. I also tried including the next code inside functions.php, still not working:
add_action('wp_footer', 'load_slideshow_scripts');
function load_slideshow_scripts() {
wp_register_script('slideshow-jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', array(), '1.4.2', false);
wp_enqueue_script('slideshow-js', plugins_url('contest-slideshow/script.js'), array('slideshow-jquery'), '1.0', false);
wp_enqueue_style('slideshow-css', plugins_url('contest-slideshow/styles.css'));
}
I also tried enqueuing the js files in a function that I hooked to init, still no success. I also tried simply enqueuing these files along with the other scripts loaded by default by the theme in functions.php.
The real problem is that the javascript file is not loaded and the slideshow is not working while in single post, otherwise it works
If it's really a jQuery related problem, you should deregister it first. Try out with this:
function modify_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', '//code.jquery.com/jquery-1.11.0.min.js', false, '1.11.0');
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');
This piece of code has to be inside the functions.php of your theme. I used the last 1.x jQuery version but edit it if you need/prefer another one.
Good luck!

Categories

Resources