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.
Related
I'm making a WordPress theme by myself since I'm working for the first time in Wordpress I've watched some tutorials about it.
I have page.php header and footer and ofc an index. I insert the content from the pages with this:
<?php echo get_post_field('post_content', $post->ID); ?>
but I tried the get_post in a while loop with same result..
Everything is fine but when I want to use a plugin I can't add to my page... When I insert the shortcode of it it shows only the shortcode string... There are some plugins where I can click a "view" option and it would show a page with my plugin (for example a calendar) but that page is empty...
When I activate an original theme it works instantly... So I'm sure something is missing from my theme something which can load the plugins but I couldn't find solution for it.
Any ideas?
Did you add the <?php wp_head(); ?> function before the head area of the html document is closing? It imports important scripts and styles from wordpress itself (and probably also from the plugins).
See here:
https://developer.wordpress.org/reference/functions/wp_head/
Before closing the body area, the template should also include
<?php wp_footer();?>
See here:
https://developer.wordpress.org/reference/functions/wp_footer/
Woocommerce is not loading my assets. I can see all my other theme assets files like css, js and all that works perfectly. I have my header and footer in place on the checkout page, in my header.php I got my <?php wp_head(); ?> in place and that seems to work alright except for Woocommerce.
Currently my checkout is loading purely the html without any assets. JS wont work (eg. clicking to toggle coupons field), css wont load.
How may I solve this? tried to override the form-checkout.php (https://github.com/woocommerce/woocommerce/blob/3.8.0/templates/checkout/form-checkout.php) and force my get_header and get_footer, without any success.
maybe try to find if for some reason your theme is disabling it?
look for code like this - add_filter( 'woocommerce_enqueue_styles', '__return_false' ); OR define( 'WOOCOMMERCE_USE_CSS', false );
A client has requested that I place an html file on their Wordpress site, but I'm having trouble accomplishing this. The html file contains custom css and javascript in addition to custom meta tags. So if I just copy and paste the contents of the file into a page, it will obviously conflict with CSS and JS loaded by Wordpress. I would like add an add_action function to recognize the page I want custom html on and then only load that and not any Wordpress or theme data.
This is as far as I have gotten on my own.
add_action('wp_enqueue_scripts', 'toggle_theme', 1);
function toggle_theme() {
global $post;
$slug = $post->post_name;
if($slug = 'dream-vacation') {
}
}
I have been able to recognize the page I want to customize, but I can't figure out how to make it a clean page and load up the custom html I need.
Stop loading the page with WordPress.
Delete WordPress page with /dream-vacation/ slug.
Save page as /dream-vacation/index.html
Hi I have a WooCommerce plugin activated and a Mystile theme. I want to add a custom js file located at mystile/includes/js/custom-script.js. Ive read on how to add files through using wp_enque_script but it is not loading the js files when I view page source.
I have this code block on functions.php of my current theme which is Mystile, which should have added my custom js file
function add_custom_assets(){
//Load masonry CSS and JS files
wp_enqueue_script('masonry', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
the above code does not work and I cannot see my JS file in source. I really dont know what I am doing wrong. I even tried wp_register_scripts but its the same thing.
The only change I did to the current theme was that I copied the templates folder from the woocommerce plugin directory to my current theme and renamed it woocommerce to override certain stuffs. Any suggestions
you should specify unique handles (so stuff don't get overridden)
function add_custom_assets(){
wp_enqueue_script('my-custom-script-handle', get_stylesheet_directory_uri().'includes/js/custom-script.js',array('jquery'), '1', true);
}
add_action('wp_enqueue_scripts','add_custom_assets');
This is not a ideal solution but a hack and it does work. Enqueue the script as wp_enqueue_style rather than wp_enqueue_script. It does load the script but is a very dirty solution. Still the question is open though
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.