I'm rather new to the whole wordpress scene so I dont"t really know the do's and dont's of wordpress of whats possible and what not.
I am trying to build a custom theme from a pre-build one called illdy. And i want to load a jquery script in the footer for changing the menu styles on scroll by toggling a class. but the script won't load. i've used wp_enqueu_script and a link to the google ajax library, and put my script in a function in my functions.php to include it in the footer.
i don't know if this is even possible, any help will be appreciated.
Did you follow this?
Usage
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Links a script file to the generated page at the right time according to the script dependencies, if the script has not been already included and if all the dependencies have been registered. You could either link a script with a handle previously registered using the wp_register_script() function, or provide this function with all the parameters necessary to link a script.
This is the recommended method of linking JavaScript to a WordPress generated page.
Please note:
The function should be called using the wp_enqueue_scripts action hook if you want to call it on the front-end of the site, like in the examples above. To call it on the administration screens, use the admin_enqueue_scripts action hook. For the login screen, use the login_enqueue_scripts action hook. Calling it outside of an action hook can lead to problems, see the ticket #11526 for details.
function themeslug_enqueue_style() {
wp_enqueue_style( 'core', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
To make a theme compatible with child themes, you can use functions to determine the correct path to the core stylesheets ( without using #import in the CSS ):
function themeslug_enqueue_style() {
if ( is_child_theme() ) {
// load parent stylesheet first if this is a child theme
wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . 'style.css', false );
}
// load active theme stylesheet in both cases
wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
From:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
and
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
Related
I am newbie of wordpress.
There are always some JS and Css from CDN in Wordpress, theme or plugins, like:
https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css
Unfortunately, those external CDNs resource are quite slow in our country, and will caused our site serious delay.
Is there anyway to replace it with a local server copy please?
How should I do it please?
Thanks in advance.
One solution you got in comments that how to load jQuery locally and in case you have any other scripts or styles which are not available locally by default from WordPress so you can use wp_enqueue_script.
/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );`
Well you can always override your current themeto enqueue your css and js. Basically go to :
wordpress/wp-content/themes/(the theme your using)/functions.php
You will need to modify the "functions.php" file and add an action in order to enqueue your new scripes and styles.
function mynew_scripts() {
wp_enqueue_script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js');
wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css');
//And for local file use get_template_directory_uri() to get the path
wp_enqueue_script('yourjsfile',get_template_directory_uri().'/yourthemedir/assets/js/yourjsfile.js');
wp_enqueue_style('yourcssfile',get_template_directory_uri().'/yourthemedir/assets/js/yourcssfile.css');
}
add_action('wp_enqueue_scripts', 'mynew_scripts');
check up these functions wp_enqueue_script , wp_enqueue_style
I am trying to speed up the website and get 100/100 on here:
page speed insights - website www.chrispdesign.com
I have tried moving the coding etc but on my wordpress website i cant seem to quite find the correct place to put it. If I have had it in the right place it wont work.
Also I cannot
find Remove render-blocking JavaScript:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
on any of the wordpress pages only on the view page source?
I have tried a few options on autoptimize plugin etc.
and attempted what the guy on this link did:
https://moz.com/community/q/fixing-render-blocking-javascript-and-css-in-the-above-the-fold-content
Tried a few techniques but no no avail.
Anyone got some ideas?
Many thanks
Shaun
If you want to move javascript files to bottom, you need to deregister it (for jquery), and after register/enqueue it with wp_enqueue_script(set the last parameter at true)
<?php
function move_js_files(){
// Deregister jquery load by default
wp_deregister_script( 'jquery' );
wp_deregister_script( 'jquery-core' );
wp_deregister_script( 'jquery-migrate' );
// Register it by yourself and enqueue with last parameter at true
wp_register_script('jquery', includes_url() . '/js/jquery/jquery.js');
wp_enqueue_script('jquery', includes_url() . '/js/jquery/jquery.js', array(), false, true);
wp_register_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js');
wp_enqueue_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js', array('jquery'), false, true);
// Exemple with a custom script in theme, no need to deregister
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-min.js', array( 'jquery' ), false, true );
}
// Only load on frontend
if(!is_admin()){
add_action( 'wp_enqueue_scripts', 'move_js_files', 0 );
}
You also need to check that all your javascript files (in theme and plugins) that use jQuery was also moved to bottom.
This works for me, with a few sites on Google Page Speed.
Hope this could help !
You could try to add the defer attribute to the script tags that need to be defered until page has loaded, see:
http://www.w3schools.com/TAgs/att_script_defer.asp
I turn to this awesome community , after days of trying to fix this bug, my problem is really simple, but it has got to me. I am trying to enqueue a Java script to my Theme my login Plugin while using the evolve theme.
here is the code snippet that does that, and i used the global function to check if the function is being loaded , and it is not being loaded. 'a' does not change to true.
For some reason it looks like 'wp_enqueue_scripts is not working. I have tried to also add wp_head() with no luck.
<?php
$GLOBALS['a'] = 'false';
add_action( 'wp_enqueue_scripts', 'load_location' );
function load_location() {
$GLOBALS['a'] = 'true';
wp_register_script('load_location_test',get_template_directory_uri().'/load_location.js', array('jquery'),'1.1',true);
wp_enqueue_script('load_location_test');
}
?>
<?php echo $GLOBALS['a'] ?>;
Thanks in advice
The link is http://www.meetntrain.com/register
So, for your enqueue to work, you need to add the code in your functions.php file or in your plugin.
add_action( 'wp_enqueue_scripts', 'load_location' );
function load_location() {
wp_register_script('load_location_test',get_template_directory_uri().'/load_location.js', array('jquery'),'1.1',true);
wp_enqueue_script('load_location_test');
}
This will add the JS file to all your pages. If you want to target a specific page, you can either do it via JavaScript or directly in your PHP file.
If your theme uses body_class(), you can target that specific page by the class. You should then wrap your JS like:
if( $('body.classUsed').length ){
// Your JS code here
}
Note that the file will still be enqueued all the time. Alternately, if you want to add the JS file only to a specified page, you can wrap it in an is_page() condition:
add_action( 'wp_enqueue_scripts', 'load_location' );
function load_location() {
if( is_page('your-page') ){
wp_register_script('load_location_test',get_template_directory_uri().'/load_location.js', array('jquery'),'1.1',true);
wp_enqueue_script('load_location_test');
}
}
You should look at the docs or at the files of other plugins, walkthroughs online, etc, to understand more. wp_enqueue_scripts is a hook you're using to load your Javascript, and you have the basic right idea, but try something a little more like this inside your functions.php:
function my_custom_scripts() {
wp_register_script( 'custom-js', 'js/custom.js' );
wp_enqueue_script( 'custom-js', 'js/custom.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
Change out the "js/custom.js" for wherever your directory has your JS file.
Another option, if this is proving too tough, is to put a direct link to the JS file at the bottom of your footer.php. Like <script src="/path/to/my/file.js"></script>.
I do find the enqueuing scripts thing a little weird sometimes though, hope this helps you get it figured out.
I've been following some inst given on a previous thread (How do I add a simple jQuery script to WordPress?), but I can't get them to work, and my wordpress theme (self built) doesn't even seem aware that there is any javascript being added.
I'm trying to add a short jQuery script that toggles a responsive navigation menu on and off.
So far, I've created a folder for my javascript files at - (/wp-content/themes/lucie-averill-photography/js/script.js)
In my script.js file, I have:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
In my functions file I have added:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/script.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
None of this has had any effect whatsoever on my theme – can anyone see what might be wrong here?
Thanks.
I have a custom js file as part of my wordpress installation, which is registered and enqueued using functions.php as normal. I have registered this particular script to load within wp_footer rather than within wp_header. However, I also have a plugin that is putting js into wp_footer, and by default it is loading this below my script. I need to force my script to load last. Is there soemthing simple that can be done to achieve this? It seems like something fairly routine to me?
Here is my code:
function scripts() {
// Register scripts
// js
wp_register_script('custom', get_bloginfo('template_url'). '/js/custom.js', false, false, true);
// Enqueue scripts
wp_enqueue_script('custom');
}
add_action('wp_enqueue_scripts', 'scripts');
The current order of the scripts goes, but I need to force my script to load after the plugin:
<script>/my_script.js</script>
<script>/plugin_script.js</script>
Thanks in advance!
Just set the $priority parameter to a ridiculously high value:
add_action( 'wp_enqueue_scripts', 'scripts', 999999 );
To be the very last in the queue (though one can never be sure) use php's PHP_INT_MAX constant:
add_action( 'wp_enqueue_scripts', 'scripts', PHP_INT_MAX );
Edit cf. discussion in comments. Note that the following is NOT the recommended way of enqueueing scripts in the footer.
add_action( 'wp_print_footer_scripts', 'so26898556_print_footer_scripts', ( PHP_INT_MAX - 2 ) );
function so26898556_print_footer_scripts()
{
echo '<script src="' . get_bloginfo( 'template_url' ) . '/js/custom.js"></script>';
}