I need to remove all theme (both child and parent) css styles from a singular page using functions.php in a child theme. Here’s what I’m currently adding to the child’s functions.php
// import parent and child theme css
function theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));}
// remove the parent & style css
function PREFIX_remove_scripts() {
wp_dequeue_style( 'parent-style' );
wp_dequeue_style( 'child-style' );
wp_dequeue_style( 'parent-style-css' );
wp_deregister_style( 'parent-style' );
wp_deregister_style( 'child-style' );
wp_deregister_style( 'parent-style-css' );
I want to apply this PREFIX_remove_scripts function to only one page on the site. How can I best accomplish this? Or is there another suitable way? Many thanks in advance!
You can use conditional tags to target the specific page you need to remove the styles on. You can use is_page()
to target a page page (as opposed to another post type) and pass a page ID, slug, title, or no argument to target any page.
function wpse_217881_remove_scripts() {
// Check for the page you want to target
if ( is_page( 'About Me And Joe' ) ) {
// Remove Styles
wp_dequeue_style( 'parent-style' );
wp_dequeue_style( 'child-style' );
wp_dequeue_style( 'parent-style-css' );
wp_deregister_style( 'parent-style' );
wp_deregister_style( 'child-style' );
wp_deregister_style( 'parent-style-css' );
}
}
I’m assuming you already are, but to be explicit, you should be calling the function that dequeue/deregisters the styles from an action hook – in this instance wp_enqueue_scripts
.
From the wp_enqueue_scripts
docs:
Despite the name, it is used for enqueuing both scripts and styles
add_action( 'wp_enqueue_scripts', 'wpse_217881_remove_scripts' );
// Optionaly add a priority if needed i.e:
// add_action( 'wp_enqueue_scripts', 'wpse_217881_remove_scripts', 20 );