0

I have a 7-page static site I built with a page builder theme, child theme and some plugins. I would like to override all CSS (theme AND plugins) with custom CSS stylesheets on a page-by-page basis.

How can I do this? Can I accomplish this with functions.php and my child theme? Please be explicit in your answer -- I'm still learning Wordpress!

More info: If you're curious, I used a handy tool -- purifycss.online -- to remove unused CSS and saved the CSS stylesheet for each page. I wold like to remove all other CSS and apply these to their proper pages. PurifyCSS links to a blog post that partially describes this process. However, the post describes how to assign each stylesheet to a page type, not a page. I tried to modify the method for my needs but failed.

2
  • Is that really a good idea? I'd build a single CSS that covered all seven pages, even if you do use PurifyCSS to do that, which I'd think wouldn't be much bigger that the individual page CSSes and would be more efficient for people browsing more than one page on your site.
    – Rup
    Commented Aug 16, 2021 at 9:13
  • I agree but my main concern is Google Pagespeed. Though you may be right -- will Pagespeed consider CSS used on other page as unused? Commented Aug 17, 2021 at 10:34

2 Answers 2

0

You can replace the page type condition to match your page by ID or slug instead.

https://www.webperftools.com/blog/how-to-remove-unused-css-in-wordpress/

function enqueue_pure_styles() {
    $suffix = '';
    if (is_front_page()) {
       $suffix = '.front-page';
    } else if (is_page()) {
       $suffix = '.pages';
    } else if (is_single()) {
       $suffix = '.blog';
    } else if (is_archive()) {
       $suffix = '.archives';
    }
    wp_enqueue_style('pure-styles', get_stylesheet_directory_uri().'/styles'.$suffix.'.pure.css');
}

So above code from the reference blog can be modified to check by page slug (or ID).You can save stylesheets for each page with name like

styles.page1.pure.css, styles.page2.pure.css, etc.

Then you can use the following code to enqueue stylesheet based on the current page slug.

function enqueue_pure_styles() {
    $valid_page_slugs = ['page1', 'page2', 'page3', 'page4' ....]; //Just replace wiht you page slugs.
    global $post;

    $post_slug = $post->post_name;

    //Bail early if page is not in the list. Or enqueue some default stylesheet
    if (!in_array($post_slug, $valid_page_slugs)) {
      return;
    }

    wp_enqueue_style('pure-styles', get_stylesheet_directory_uri().'/styles.'.$post_slug.'.pure.css');
}

You can also have some default css in case the slug doesn't match.

4
  • He have already implemented the steps in the blog. Commented Aug 16, 2021 at 9:46
  • Thanks for this, though that is basically the what the blog said. I probably just need to play with it more. -- does this also override plugin CSS? Commented Aug 17, 2021 at 10:37
  • The code I have writen doesnt't remove any CSS. It just adds CSS based on what. The blog already specified about removing the theme CSS. If you are using some plugins , then you need to specify it in question . I have answered what you have asked in the question. Commented Aug 17, 2021 at 13:33
  • I have answered according to what you have asked in the question. Commented Aug 23, 2021 at 15:03
0

You could apply your CSS without using any PHP function making reference to the body class, where page id is:

body.page-id-48>header>div{}

But you might need to use complete selector in order to have more specific selectors

body.page-template-default.page.page-id-182 div#page.site header#masthead.site-header>div{}

Or if you still want to use a PHP function, retrieve page url to know which CSS must be applied:

$page_id = get_permalink( get_the_ID() );
if($page_id==48){
    echo "<style>div{width:100%;}</<style>";}
else{
}

or use:

global $wp;
echo home_url( $wp->request );

to get page slug

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.