Thanks in advance for any help provided guys.
I have a wordpress Script n styles extension on my wordpress, the previous developer added it.
However I noticed that when I update my script in "Script n Styles", that does not change anything.
Without cache, with cache, refreshing as many times as you want, switching navigators it does not update the script stays the same.
Just take a look:
Script n Styles extension's script here
Script displayed on the page whatever I do in script n style extension
Do you have any ideas where that could come from ? I can send the link of that website if you want! Its afh.asso.fr (the home page only uses that bit of code (its for the "mon afh" little red button on the home page)
Thanks in advance for your help guys, it is really appreciated ! :)
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles() {
// Get the theme data
$the_theme = wp_get_theme();
// Add custom style here in custom.css
wp_enqueue_style('custom', get_stylesheet_directory_uri() . '/css/custom.css', array(), $the_theme->get('Version'));
wp_enqueue_script('jquery');
// add custom javascript here in custom.js
wp_enqueue_script('main', get_stylesheet_directory_uri() . '/js/custom.js', array(), $the_theme->get('Version'), true);
}
Can find more information here:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
Related
I want to put a javascript file as my background on my wordpress website. It is an animated background that is continuously runing (it's the matrix rain). I don't know where should i start to insert the code, i have been looking on internet but there is no tutorial about inserting an animated background on a wordpress theme.
Could you help me please? I think a lot of people are in my situation.
Thanks :)
I take this matrix-rain library as an example https://sigstart.github.io/matrix-rain/.
First you have to save the file https://raw.githubusercontent.com/sigstart/matrix-rain/master/matrix.js as matrix-rain.js in the js folder of the theme.
Then you have to include the JavaScript file.
In functions.php
// Import moment.js
wp_enqueue_script('moment-min-js', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js', array(), '1.0.0', false);
// Import matrix-rain
wp_enqueue_script('matrix-rain', get_template_directory_uri() . '/js/matrix-rain.js', array(), '1.0.0', false);
Then in the template where you want to show the background, for example single-post.php put this:
<canvas id="matrix"></canvas>
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.
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.
I seriously need some help before I loose my mind.
So I want to implement hamburger menu to my wordpress child theme. This one looks nice to me. https://github.com/joncoop/hamburger-menu
I downloaded the zip file, unpacked to to my computer tried it out, works like a charm.
I uploaded the files to my child theme, I did everything by the book.
Through my functions.php file I enqueued the styles and scripts appropriately.
This is the code I used:
function NovelLite_child_add_stylesheet() {
if (!is_admin()) {
wp_enqueue_style('hamburger', get_stylesheet_directory_uri() . "/css/main.css", '', '', 'all');
}
}
add_action('wp_enqueue_scripts', 'NovelLite_child_add_stylesheet');
function NovelLite_child_wp_enqueue_scripts() {
wp_enqueue_script('hamburger', get_stylesheet_directory_uri() . "/js/hamburger-menu.js");
wp_enqueue_script('neki', get_stylesheet_directory_uri() . "/js/jquery-2.1.4.min.js");
}
add_action('wp_enqueue_scripts', 'NovelLite_child_wp_enqueue_scripts');
But it's just not working. main.css stylesheet is working fine, menu looks ok, it gets the hamburger button on mobile device, but when clicked, it doesn't show the menu. This tells me that javascript is not working as it is supposed to. So I'm wondering what could be the problem. I spent 3 days figuring it out and I am stuck.
P.S. Page source shows that scripts are enqueued!
Please help
Thanks in advance
Maybe the problem is in jQuery - your menu needs for it, but you're include it after hamburger js. Try this :
wp_enqueue_script('hamburger', get_stylesheet_directory_uri() . "/js/hamburger-menu.js", array('jquery'));
to tell WP to load WP embeded jquery before hamburger.js and to use it for 'hamburger.js`.
Also if this works, no need to load external jquery here:
wp_enqueue_script('neki', get_stylesheet_directory_uri() . "/js/jquery-2.1.4.min.js");
But if you want to use your jquery file must change hamburger enqueue script to use your jquery file like this:
wp_enqueue_script('hamburger', get_stylesheet_directory_uri() . "/js/hamburger-menu.js", array('neki'));
I'm trying to move jquery to my wordpress footer-page (to optimize pagespeed and keep google happy), but can't quite figure out how to do it.
It looks like jquery.js + 3 other js.files are located in scripts.php (through "wp_enqueue_script"), which in turn is referenced in functions.php.
I'm somewhat comfortable editing wordpress php & css files, but do not know how to write php actually and feel I need a little help so I won't break my site.
How and where do I move javascript so it's loaded last?
wp_enqueue_script can place a script in the footer. You will need to "deregister" it and then re-register and enqueue:
add_action("wp_enqueue_scripts", function()
{
wp_deregister_script('jquery');
wp_register_script('jquery', "path_to_jquery", false, 'whatever', true);
wp_enqueue_script("jquery");
});
The last argument passed as true places the script in the footer. The code above should be placed in functions.php.
Thanks for your help! Although I did try the code, in the end I found a wordpress plugin that seems to do the trick called "scripts-to-footer" - works like a charm so far.