I've got a site with an instance of WooCommerce running on it. On the Product Archive page there's a noticeable delay when the mouse leaves a product and the overlay disappearing. I'd like to reduce that delay to about 0.1s
URL: http://economistfoundation.org/the-library/
I've tried looking through the various CSS files in the main theme and the woocommerce plugin to see if there's a 'transition' with 0.5s or similar that controls .thumb-overlay, but can't find anything that seems relevant.
I wondered if the setting might be in Javascript, but there are so many files where it might be stored I'm at a loss.
I've looked at the page using the Firebug inspector and .thumb-overlay has a style attribute that moves between 'display: block' and 'display: none', and as you move the mouse over an attribute of 'opacity' rapidly counts from 0 to 1.
Does anyone know where the delay value might be stored?
It is in your wp-content/themes/agent/woocommerce/woocommerce-custom.js file at line 19.
jQuery(document).on( 'mouseenter', '.products .product', function() {
jQuery(this).find('.thumb-overlay').stop(true, true).fadeIn();
});
jQuery(document).on( 'mouseleave', '.products .product', function() {
jQuery(this).find('.thumb-overlay').stop(true, true).fadeOut();
});
EDITED
Child themes only override files in the main theme directory (like header.php) that are called in with functions like get_template_part or get_header, etc.
The correct way to add scripts to WordPress is with wp_enqueue_script. If your parent theme uses this, you can override the JS files by using wp_dequeue_script and enqueuing your own.
Like so...
<?php
add_action( 'wp_enqueue_scripts', 'so28089698_script_fix' );
function so28089698_script_fix()
{
wp_dequeue_script( 'parent_theme_script_handle' );
wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/scripts/yourjs.js', array( 'jquery' ) );
}
If the parent theme isn't using wp_enqueue_script, it's probably hooking into wp_head (or wp_footer) to echo out the scripts there. So you'd use remove_action to get rid of those functions echoing the scripts out, and then enqueue your own script.
If the script is hard coded into the template file, you'll just need to replace that template file in your child theme without the script tag.
If they used wp_enqueue_script calls that utilize get_stylesheet_directory_uri, then you shouldn't have to do anything. Since this isn't happening, you'll just have to poke around and see what the theme author did.
Related
On wordpress, using GeneratePress free template, I'm trying to push my custom script after all others.
The big problem is that all the scripts of a plugin (Visual Portfolio) are always loaded at the very end, after my scripts.
I tried to put a very high $priority parameter in the add_action() functions but it doesn't work.
function register_scripts_and_styles() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', null, true);
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles', 99999 );
Do you have any idea how to fix this problem?
Thank you very much.
Here's idea, js and css files in WP use different technique to figure out in what order js\css files should be loaded.
here's function
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array('js-handle-of-some-dependency','js-handle-of-some-other-dependency'), true);
Each script has it's handle, it's first argument to this function, in your case it's custom-js.
Based on digging into plugin's code it's main js has handle visual-portfolio
So you can just enqueue your script with setting it's handle as dependency.
And final solution will be:
function register_scripts_and_styles() {
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery', 'visual-portfolio' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles' );
I've also added jquery as dependency as I guess you are using jQuery in your js code, you can remove it if not.
I've also set version to '1' - it's a query string version which will be applied to your JS code so when you do update and move code live you can force user's browsers to load a fresh one just changing version here.
And see last argument true, it denotes that your script will be injected in footer.
If your code relies not only on main.js of this plugin you might need to add more dependencies as this plugin enqueues bunch of scripts, see whole list of them in /wp-content/plugins/visual-portfolio/classes/class-assets.php from line 350, at the end of register_scripts method of class defined in this file. So you really can put exactly all script's handles on which your custom js code relies and WP will figure out right order of linking those files to page for you.
Happy codding :)
How to use functions.php to add all the .css to child themes at one time?
If it is not possible at once, how is right way to do it one by one?
Theme: Generatepress
https://sk.wordpress.org/themes/generatepress/
Child: Hand made by Codex
https://codex.wordpress.org/Child_Themes
Adding one CSS file isn't recommended, it's better if you register each new custom CSS individually.
Keep in mind, a child theme will automatically inherit all of the parent's CSS. You should only register CSS files you custom wrote.
This is an example function of loading a CSS file located in the CSS directory within the child theme. It loads a custom file 'CustomFooter.css' on a page with an ID of 45.
add_action( 'template_redirect', 'footer_css' );
function footer_css() {
if (is_page(45)) {
wp_enqueue_style('CustomFooter-style',
get_stylesheet_directory_uri() .
'/CSS/CustomFooter.css?v=1.1', array( 'parent-style'));
}
}
Bit is a basic question here but can someone confirm that this statement be confirmed: WordPress Pages (certain templates created within) can pull different CSS and JS?
Or - does WordPress only permit universal CSS + JS to be pulled across the entire site?
Thanks for clearing this up.
Depends on what plugin and themes you use. The WordPress/PHP functions wp_enqueue_style() and wp_enqueue_script() can be used literally by everyone (core, themes, plugins, you) to request WordPress to load styles or JavaSctript. You can combine this with WordPress functions to check whether the current page is something you want to filter for (post type, post, front-page, category archive, template, etc.). Here is an example to load a custom style if on front page :
if (is_front_page()) {
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
}
You will have to hook this piece of code to the wp_enqueue_script action so that WordPress executes it at the appropriate time. Here is an example using an anonymous function:
add_action('wp_enqueue_scripts', function() {
if (is_front_page())
wp_enqueue_style('custom-frontpage', 'my/path/to/frontpage.css');
});
You can also register your code as a "normal" function and pass the functions name to add_action() instead.
Edit: Enabling and disabling plugins is a bit more difficult, since you can never know how they implement their features without examining the source code. Here are my thoughts on this:
The plugin likely uses the above method (wp_enqueue_styles, wp_enqueue_scripts) to register it's styles and scripts. The plugin, since it assumes to be needed on all pages and posts, does this on every page without the conditional checking described earlier.
You could do one of the following to stop the plugin from doing this:
Identify the place where the plugin loads the styles and scripts and add the if-statement to only do so if the post-ID matches your desired post-ID. This method is bad since your changes are lost every time the plugin is updated.
Write a "counter plugin" (you could just add it to your theme or find a plugin that allowes you to add PHP to your page) that "dequeues" the style and script added by the plugin with inversed conditional tag
The counter-plugin approach would look as follows:
function custom_unregister_plugin() {
if (not the desired blog post) {
wp_dequeue_style('my-plugin-stylesheet-handle');
wp_dequeue_script('my-plugin-script-handle');
}
}
Make sure this function is executed after the enqueuing-code of your plugin by giving it a low priority in the same hook (999 is just an example, test it yourself):
add_action('wp_enqueue_scripts', 'custom_unregister_plugin', 999);
With wp_enqueue_style() you can add stylesheet (https://developer.wordpress.org/reference/functions/wp_enqueue_style/)
You can use it after detecting which template is used
function enqueue_custom_stylesheet() {
if(get_page_template() == 'contact.php')
wp_enqueue_style( 'contact-style', get_template_directory_uri().'/contact.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_stylesheet' );
You can use wp_enqueue_style for your CSS, wp_enqueue_script for your JS, wp_localize_script to pass variables from PHP to JS.
You can call these with hooks like:
funtion enqueue_my_stuff()
{
// your enqueue function calls
}
add_action('wp_enqueue_scripts','enqueue_my_stuff'); //front end
add_action('admin_enqueue_scripts','enqueue_my_stuff'); //admin panel
add_action('login_enqueue_scripts','enqueue_my_stuff'); //login screen
I am working on a WP plugin that uses bootstrap. However, it seems to be having a very strange affect on the page. You can see it here:
My Test Page
If you go to this page, then go to another, you will see that the page goes back to normal.
How can I prevent bootstrap from affecting the WP elements on the page?
add_action( 'wp_enqueue_scripts', 'bootstrap_css', 150 );
function bootstrap_css(){
// add pages for bootstrap leave out site address, just the path e.g.
$pages= array( '_3_8_0/rentals/','add_page_url' );
$path=$_SERVER['REQUEST_URI'];
if( !in_array($path, $pages) ):
wp_dequeue_style( 'bootstrap_handle' ); // look up handle for stylesheet
endif;
}
You can do something like the above to de_queue the bootstrap css on pages that you dont want it on. The problem is Bootstrap is not really designed for singular page use with a existing theme and will share a lot of common identifers with what your theme uses e.g. "content"
its either that or remove bootstrap altogether (just de-queue it) and style the page yourself. To be honest bootstrap is a heavy load for the use case here.
Not sure if I worded it correctly but basically I wanted to load plugin CSS/JS on pages only that uses the actual plugins.. I have gotten a lot of it done by search thru the plugin files for any handles used in wp_enqueue_script within the plugins and simply wp_dequeue_script them in functions.php
However, there are some enqueues for style that include a .php and not a css file, for example.. in the plugin it enqueues a file
wp_enqueue_style("myrp-stuff", MYRP_PLUGIN_URL . "/myrp-hotlink-css.php");
so I've tried:
wp_dequeue_style('myrp-stuff');
wp_deregister_style('myrp-stuff');
It doesn't work
However, when the page/post is rendered it shows as
<link rel='stylesheet' id='myrp-stuff-css' href='http://www.modernlogic.co/wp/wp-content/plugins/MyRP/myrp-hotlink-css.php?ver=3.4.2' type='text/css' media='all' />
It addes -css to the id and it refuses to dequeue/deregister and be moved.
I have also tried the following with no luck
wp_dequeue_style('myrp-stuff-css');
wp_deregister_style('myrp-stuff-css');
Any suggestions?
Scripts and styles can be enqueued in any order and at anytime before wp_print_* actions are triggered. Which can make it difficult to remove them from the queue before output.
To make dequeue work consistently hook into into wp_print_styles or wp_print_scripts with a high priority, as this will remove the scripts and styles just before output.
For instance in your plugin loader code or template's functions.php file you could have a function and action hook like this:
function remove_assets() {
wp_dequeue_style('myrp-stuff');
wp_deregister_style('myrp-stuff');
}
add_action( 'wp_print_styles', 'remove_assets', PHP_INT_MAX );
Setting a high priority (third argument to add_action) when hooking into the action will help ensure that the callback remove_assets gets called last, just before scripts/styles are printed.
Note, while this technique is legitimate for removing scripts/styles it should't be used for adding assets. See this Wordpress Core blog post for more info.
Just to be sure, have you placed your code inside a function called by an action like this?:
add_action('wp_enqueue_scripts', 'dequeue_function');
function dequeue_function() {
wp_dequeue_style( array('myrp-stuff', 'myrp-stuff-css') );
wp_deregister_style( array('myrp-stuff', 'myrp-stuff-css') );
}