Remove Header and style.css from Specific Post template

Question

You have to do a couple of things here…

First, you have to create a duplicate of header.php and we’ll name it header-custom-app.php. Now modify the duplicated file and remove the HTML elements you don’t want.

In your template, instead of using get_header(); you would use this:

<?php
/*
 * Template Name: Custom App
 * Template Post Type: post, page, product
 */

 ?>
 <?php get_header( 'custom-app' ); ?>

Having multiple headers, footers and sidebars is acceptable. You can use this exact same method for both get_footer(); and get_sidebar(); if your template needs these or customized versions of these.

Now, for the style.css not being used, I can’t really provide a concrete example because you haven’t provided the code that shows how you currently enqueue it, so what I’m posting here operates on a few assumptions.

Assuming you’re only excluding the style.css from this one template, you could do this:

if( !is_page_template( 'template-custom-app.php' ) ) {
    wp_enqueue_style( 'yourtheme-style', get_stylesheet_uri(), array(), 'x.x' );
}

Obviously change the template-custom-app.php to whatever the name of your template is, change the yourtheme-style and update the x.x to your version number… But what this does is it basically wraps the enqueuing of your style.css in a condition that says ‘if NOT the custom app template, load style.css’.

Alternatively, if your custom app has it’s own CSS stylesheet that it needs you could use:

if( is_page_template( 'template-custom-app.php' ) ) {
    wp_enqueue_style( 'customapp-style', get_stylesheet_directory_uri() . '/css/custom-app.css, array(), 'x.x' );
} else {
    wp_enqueue_style( 'yourtheme-style', get_stylesheet_uri(), array(), 'x.x' );
}

This last snippet assumes you have a css directory in your main theme directory to store secondary CSS files, if it’s just in the root directory then remove the /css from /css/custom-app.css.

Update:

To prevent plugins from applying their scripts you’d simply need to add some dequeue instructions in the same is_template() condition.

if( is_page_template( 'template-custom-app.php' ) ) {
    wp_dequeue_style( 'plugin-style-handle' );
    wp_deregister_style( 'plugin-style-handle' );
    wp_enqueue_style( 'customapp-style', get_stylesheet_directory_uri() . '/css/custom-app.css, array(), 'x.x' );
} else {
    wp_enqueue_style( 'yourtheme-style', get_stylesheet_uri(), array(), 'x.x' );
}

The tricky part here is that you need to obtain the ‘handle’ from these stylesheets that are enqueued via the plugins…

You can search through the plugins looking for their enqueue functions but the easier method would be to look at the source code of your site in the <head> tag and locate the plugin styles you want to remove.

Here’s an example:
<link rel="stylesheet" id="searchandfilter-css" href="https://cgroupdesign.com/wp-content/plugins/search-filter/style.css" type="text/css" media="all">

That’s a stylesheet a plugin is pulling into a site. The id is searchandfilter-css.

So the handle for that stylesheet would be searchandfilter.

If I wanted to dequeue that plugin’s stylesheet I’d use this:

wp_dequeue_style( 'searchandfilter' );
wp_deregister_style( 'searchandfilter' );

You’ll have to go through the source code on that template, in the head tag and in the footer and locate all the stylesheets you want to remove and discern what their handles are.

If you also want to do this with scripts you’d just use:

wp_dequeue_script( 'searchandfilter' );
wp_deregister_script( 'searchandfilter' );

Basically the same deal but change ‘style’ to ‘script’.

Related Posts: