How to hide plugins style sheets in wordpress - php

i want to hide few plugins style sheets to reduce load on our Index page and categories pages. Actually we want to display plugin style sheet only on Post not on other pages.
we have used following code in plugin, but it doesn't work. please help how to use it.
if( is_single() || is_singular('post') ) wp_enqueue_style('savrix-style.css');

If you are modifying your own plugin I see no reason your code wouldn't work. The is_single() condition is not needed, and will result in the stylesheet being loaded on custom post types and other singles that you don't intend.
However your wp_enqueue_style call is incomplete, so unless you have a wp_register_style call somewhere else defining the handle and URL of the stylesheet you need to change it to something along these lines:
if (is_singular('post')) {
wp_enqueue_style('savrix-style', plugins_url('savrix-style.css', __FILE__);
}
However, I get the impression that you are actually trying to remove a stylesheet included by a thirdparty plugin. It is generally a bad idea to modify a third-party plugin, as your modifications will be lost on the next update... it is very difficult to maintain that sort of modifications in the long run.
Instead make a new plugin and modify whatever you need from there.
What you want to achieve can be accomplished by:
Create a new folder in the wp-content/plugins folder, fx. my_load_reducer.
Inside that folder create a new file called my_load_reducer.php
Paste this in the file:
<?php
/*
Plugin Name: My Load Reducer
Description: Removes unneeded and unwanted stylesheets from other plugins
Version: 0.1
*/
//Use a class to avoid conflicts
class my_load_reducer {
function __construct() {
//Hook into wp_enqueue_scripts with a high priority
add_action( 'wp_enqueue_scripts', array($this, 'deregister_styles'), 1000 );
}
function deregister_styles() {
//Check that current post is not a single post
if (!is_singular('post')) {
//deregister the stylesheet - this removes the twentyfifteen
//main stylesheet - obviously you need to substitute the handle
//of the stylesheet you actually want to remove
wp_deregister_style( 'twentyfifteen-style' );
}
}
}
//Instantiate the class
$my_load_reducer = new my_load_reducer();
Activate the plugin through the wordpress admin.

You can remove perticular plugin css on selected page.
below code is remove plugin css to other pages and display only on post pages:
/*disable loading plugin css to page and load on post page*/
add_action('wp_print_styles', 'my_deregister_styles', 99999);
function my_deregister_styles()
{
if(!is_single())
{
wp_dequeue_style('plugin-css-handle');
wp_deregister_style('plugin-css-handle');
}
}
where 'plugin-css-handle' is perticular plugin's css handle which you want to remove.

Related

Wordpress - Create Page with custom CSS and JS only

I am creating a Wordpress plugin that adds a page that embeds a React app.
On plugin activation, a post is inserted with wp_insert_post() function, and then the load_app_template() function is triggered to set the post template.
This template contains wp_head() in the head section and my React app.
The problem is that some other plugins are loading some JS and CSS in the head that are disturbing the React app behavior. I am trying to remove all JS and CSS given by Wordpress & other plugins and add my own.
If I remove wp_head() from the post template, then I cannot register styles and scripts with my plugin through wp_register_script.
How to remove all JS and CSS from Wordpress and plugins and add my own from my plugin ?
There could be two ways :
Remove wp_head() and manually add links to my JS and CSS in the HTML template. I can do that for Jquery and Bootstrap but I don't know how to put links of JS files from my plugin directory.
Keep wp_head(), deregister all CSS and JS and add my own afterwards with Wordpress hooks. I am not able to remove some Javascript from other plugins with this solution. I tried deregistering all following this answer.
Thank you !
Try to remove unnecessary scripts and styles using wordpress hooks
(this might help you figure out how to do so: https://wordpress.stackexchange.com/questions/233140/how-can-i-get-a-list-of-all-enqueued-scripts-and-styles) if your template is used on page.
You can remove unused CSS/JS from that page. Put this code on your function.php
function remove_unused_css_js() {
// remove only from that page
if(get_the_ID() == 'Your Page ID'){
wp_dequeue_style('css-id'); // remove css
wp_dequeue_script('js-id'); // remove js
}
}
add_action( 'wp_print_styles', 'remove_unused_css_js', 100 );
Hope this will help.

Call function from main WordPress theme in a plugin

I have a function in my theme functions.php file which returns a value:
function my_theme_function() {
return "100";
}
Anywhere in my theme templates I can simply do this...
echo my_theme_function()
...and I see the number 100 on the page. That's cool.
But in my plugin I would have expected to be able do also get access to this function by echoing my_theme_function() but instead I get a 'call to undefined function' error.
The strangest part is I'm certain this was working a couple of days ago, but I've not touched the code since. I suspect some WordPress shenanigans, but I don't know why or how to get around this.
The reason you may take this result can be the order in which the theme and the plugins are loaded.
For example, your plugin can get loaded before the theme, and obviously, in this case, the function it is not available in your plugin source code.
The solution to this issue are the WordPress Hooks. I don't know what is your plugin code style, but you can bootstrap your plugin in the init hook or even better in the after_setup_theme.
So for example, let's say, you need your plugin should run once your theme is loaded by the WordPress. You can use the following code to do so:
function my_theme_is_loaded() {
// Bootstrap your plugin here
// OR
// try to run your function this way:
if ( function_exists( 'my_theme_function' ) ) {
my_theme_function();
}
}
// You can also try replace the `after_setup_theme` with the
// `init`. I guess it could work in both ways, but whilw your
// plugin rely on the theme code, the following is best option.
add_action( 'after_setup_theme', 'my_theme_is_loaded' );
What the above code does, is like you say to your plugin, wait until the theme is totally loaded, and then try to run my plugin code that rely on the theme code.
And of course, I suggest either wrap your theme function in a plugin function like that:
// This way, your plugin will continue running even if you remove
// your theme, or by mistake your rename the function in the theme
// or even if you totally decide to remove the function at all in the
// side of the theme.
function function_from_theme() {
if ( function_exists( 'my_theme_function' ) ) {
return my_theme_function();
} else {
return 0; // Or a value that is suitable with what you need in your plugin.
}
}
This is going to protect your site against theme de-activation or theme change. In this cases, you are going to have a plugin looking for a function in your theme, and while you change the theme or deactivate your theme, your plugin will break your site.

Wordpress plugin - how to disable js/css per page

With Wordpress you have good/bad plugins, some being much more economical than others. By economical I mean that they only call the CSS and JavaScript required for the function when the page is loaded where that function is enabled. Others don't discriminate and call the code on all pages. This can have a negative effect on page load speed/performance.
I have some plugins that are heavy in CSS and are laden with reems of jQuery/Javascript files - I only want them to be enabled on particular pages (not home). In hand I have the page ID and alias. Looking in the plugin folder I also see the main php file that includes all the JS / CSS. Within that file I tried something like is_page() but it seems to have no impact as if is_page has not yet been set.
<?php if ( is_page( '3486' ) ) { exit; } ?>
exit on a line by itself kills the page indicating that the script is being called.
The question, "How and where do you place an if statement that will prevent the plugin CSS/JavaScript from being called on all pages but a particular one (or perhaps an array of pages)?
I could name the plugin but the question is really more generic to any plugin.
You can use wp_deregister_script, this will remove unwanted JS,CSS from specific pages.
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript()
{
if ( is_page('YOUR PAGE NAME') )
{
wp_deregister_script( 'WORDPRESS JS file NAME' );
}
}
Refer : https://codex.wordpress.org/Function_Reference/wp_deregister_script

Want to overwrite functions written in woocommerce-functions.php file

I want to modify/overwrite functions written in woocommerce-functions.php file but I don't want to modify woocommerce-functions.php file. That is I want to achieve this in plug-in or in my theme.
It is possible to override woocommerce functions, I did this recently and added all of my woocommerce extended functionality to my theme's functions.php file so that the woocommerce plugin files remained untouched and are safe to update.
This page gives an example of how you can remove their action and replace it with your own -
http://wordpress.org/support/topic/overriding-woocommerce_process_registration-in-child-theme-functionsphp
This page gives an example of extending upon their functions without removing their function, as well as using child themes -
http://uploadwp.com/customizing-the-woocommerce-checkout-page/
Hope this helps :)
WooCommerce provides a templating system. It is possible to override woocommerce functions. great way to customize WooCommerce without modifying core files, is to use hooks -
If you use a hook to add or manipulate code, you can add your custom code to your theme functions.php file.
Using action hooks -
To execute your own code, you hook in by using the action hook do_action(‘action_name’);.
See below for a great example on where to place your code:
add_action('action_name', 'your_function_name');
function your_function_name()
{
// Your code
}
Using filter hooks-
Filter hooks are called throughout are code using apply_filter(‘filter_name’, $variable);
To manipulate the passed variable, you can do something like the following:
add_filter('filter_name', 'your_function_name');
function your_function_name( $variable )
{
// Your code
return $variable;
}
Here you can get WooCommerce Action and Filter Hook - https://docs.woothemes.com/wc-apidocs/hook-docs.html
If you have a child theme, you can copy the relevant file to your theme and rewrite the copy. The copy will be used in preference to the WooCommerce version.
I was needed to add "Play" button for videos on mobile devices (by default this button is shown just on desktop).
I was needed to override the function in wp-content/themes/gon/framework/theme_functions.php:
function ts_template_single_product_video_button(){
if( wp_is_mobile() ){
return;
}
global $product;
$video_url = get_post_meta($product->id, 'ts_prod_video_url', true);
if( !empty($video_url) ){
$ajax_url = admin_url('admin-ajax.php', is_ssl()?'https':'http').'?ajax=true&action=load_product_video&product_id='.$product->id;
echo '<a class="ts-product-video-button" href="'.esc_url($ajax_url).'"></a>';
}
}
I found this instruction which states If you use a hook to add or manipulate code, you can add your custom code to your theme’s functions.php file.
I already had wp-content/themes/gon-child/functions.php, (ie the original gon theme had been copied to gon-child), so what I did was:
// Enable tour video on mobile devices
remove_action('ts_before_product_image', 'ts_template_single_product_video_button', 1);
add_action('ts_before_product_image', 'ts_template_single_product_video_button_w_mobile', 1);
function ts_template_single_product_video_button_w_mobile(){
global $product;
$video_url = get_post_meta($product->id, 'ts_prod_video_url', true);
if( !empty($video_url) ){
$ajax_url = admin_url('admin-ajax.php', is_ssl()?'https':'http').'?ajax=true&action=load_product_video&product_id='.$product->id;
echo '<a class="ts-product-video-button" href="'.esc_url($ajax_url).'"></a>';
}
}
?>

Adding stylesheet from plugins folder to front end, inside of plugin

I'm creating a wordpess plugin and I need the stylesheet to be loaded onto the front-end (included in wp_head). The plugin's stylesheet is vital so it will show up on the front-end.
How can I achieve this?
I've tried several methods such as enqueing but it doesn't show up. Perhaps I'm placing the code in the wrong file?
As you can see below, I do enqueue the scripts and styles but it only shows up on the edit screens and not on the front-end like i need it too.
function input_admin_enqueue_scripts()
{
// register scripts
wp_register_script('input-icon_field', $this->settings['dir'] . 'js/input.js', array('input'), $this->settings['version']);
wp_register_style('input-icon_field', $this->settings['dir'] . 'css/input.css', array('input'), $this->settings['version']);
// scripts
wp_enqueue_script(array(
'input-icon_field',
));
// styles
wp_enqueue_style(array(
'input-icon_field',
));
}
try removing array from wp_enqeue_script
function input_admin_enqueue_scripts() {
// register scripts
wp_register_script('input-icon_field', $this->settings['dir'] . 'js/input.js', array('input'), $this->settings['version']);
wp_register_style('input-icon_field', $this->settings['dir'] . 'css/input.css', array('input'), $this->settings['version']);
// scripts
wp_enqueue_script('input-icon_field');
// styles
wp_enqueue_style('input-icon_field');
}
and add an action to this function like so
add_action('wp_enqueue_scripts', 'input_admin_enqueue_scripts');

Categories