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.
Related
So ive been putting off using js for a while because everytime I try to figure it out I get more confused, but now I really need it for a site im working on...
I want to hide the page until everything loads (so you don't see elements moving/jumping into place.
I've found various bits on here and around the web, but everytime I go to place the code anywhere that I feel it should go, I get errors.
take this for example:
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
Ive tried going to the functions.php file and adding the js code i've found on the web but always get an error. So where do I copy the code for this, so it affects the CSS ive added?
In wordpress, you need to use a plugin to help you insert your javascript/jquery
Login to wordpress
Go to plugins>>add new
Search for Insert Headers and Footers plugin
Install and activate
Then launch the plugin and insert your javascript.
You will need to select the location of your javascript, either in the tag or just before the closing
When you add javascript to a wordpress website, you want to do it in one of two ways. You can either do it using a hook which is essentially a 'spot' in the code you wish to add to.
This can be done by placing the following in your functions.php
add_action('wp_head', 'wp_54885300_add_js_to_header');
function wp_54885300_add_js_to_header(){ ?>
<script>
window.onload=function() {
document.getElementById('loading-mask').style.display='none';
}
</script>
<?php
}
Alternatively, if you find yourself needing to place lots of javascript into your website, you may wish to link to an external javascript file. This can be done with wp_enqueue_script().
Place the following in your functions.php file to enqueue an external stylesheet to your website.
add_action( 'wp_enqueue_scripts', 'wp_54885300_enqueue_script' );
function wp_54885300_enqueue_script(){
wp_enqueue_script('anyname', 'path-to-file.js', array(''), 'version', false );
}
As others have pointed out, what you are trying to do by hiding everything until the window has completely loaded may not be a good idea for a number or reasons.
But, atleast to the best of my knowledge, this ^^ is the proper way to include JS into a wordpress installation without depending on a plugin to get you started.
i am making my own custom wordpress theme. And I am having a problem with javascript. I have writing code in the functions.php. All css is working, but I cant manage to make a toggle menu (for responsive purpoises). Maybe I am doing something wrong ? I copy my code from function.php at the bottom. P.s. i also created javascript.js for the code. But i can't figure whats the problem.
function pirma_enqueue_styles(){
wp_enqueue_style('custom_s_s',trailingslashit(get_template_directory_uri()) . 'css/style.css'); wp_enqueue_style('javascript',trailingslashit(get_template_directory_uri()) . 'js/js.js');
}
add_action('wp_enqueue_scripts', 'pirma_enqueue_styles');
If you created the resource file javascript.js, you simply enqueued the wrong script (namely js/js.js). Also look out for the correct path: You declared that the file is in the directory js.
Also - and more important in this case - to include scripts you need to use wp_enqueue_script(), not wp_enqueue_style().
I have wordpress account for blogging. Recently I have opted for PopUpAds. I have the javascript code with me which I received from PopUpAds.
Can any one please tell me how to integrate this code into wordpress??
Any informative links will also be very helpful.
Thank You In advance.
It might be the safest ( but not the best ) way to install the plugin which allows you to add inline javascript code.
I.e. something like this - https://wordpress.org/plugins/tc-custom-javascript/
Also, if you can edit functions.php file within your active theme, the quickest way is to add a patch of code there:
<?php //add opening php tag only if there is closing tag at the end of functions.php file
function pop_up_ads_script() {
?>
<script type="text/javascript">
//your script from PopUpAds goes here
//check if PopUpAds code includes also script tags, then avoid adding duplicate tags
</script>
<?php
}
add_action( 'wp_footer', 'pop_up_ads_script' );
For this approach, be careful when editing and saving functions.php, since you might cause error due to bad syntax or typo, so first check if php tags. I
would suggest to do this via FTP access, rather than through built-in WordPress file editor.
Using a Wordpress plugin that lets you insert arbitrary HTML code as a shortcode is the best way to go IMO. That way the external code doesn't mess with the wysiwyg editor. I use this plugin: https://en-ca.wordpress.org/plugins/insert-html-snippet/
If the JavaScript code should be added to the head section of your page, there are plugins that do that as well.
Check out this useful blog post for adding external JS and CSS to Wordpress: http://blog.dynamicdrive.com/add-custom-javascript-css-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.
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!