• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » News & Updates

    Per Page CSS

    Published: Jul 16, 2020 by Skylar · Leave a Comment

    This tutorial features the Feast Plugin, which enhances and extends your theme to improve SEO, pagespeed, accessibility and user experience.

    The per-page CSS lets you add custom CSS to specific pages, to help improve pagespeed.

    This is in contrast to the "Additional CSS" page, which loads styling across your entire site, even when it's not used, and results in this warning from Google Pagespeed Insights:

    For example, the Modern Homepage Styling Guide can be applied to just the homepage instead of loading on categories and posts.

    Note: This is a step that can help mitigate the warning above, but will not resolve it entirely. That will require a separate theme update down the road.

    Jump to:
    • Where
    • Why (part 1)
    • Why (part 2)
    • Convert the Modern Homepage
    • Minification and Critical Path CSS
    • Disabling

    Where

    A text box has been added to the bottom of the block editor to place your custom CSS:

    You should use this for any page that you have page-specific styling that isn't used on the rest of the site, including:

    • contact
    • about
    • recipe index
    • landing pages for photography services, newsletters, shop pages, media kits

    Why (part 1)

    We're continuing to refine the way that we style the themes and plugin, by removing unnecessary CSS. This will help to address the "Remove unused CSS" warning in Google's Pagespeed Insights tool:

    The theme stylesheet is a "monolithic" file that contains styling for every page on the site, including the homepage, category pages, posts and other components such as the enews widget, forms and plugins - even when those things aren't present on the page. This isn't great.

    By enabling per-page CSS, we can strip away unused styling from the theme stylesheet in the future.

    Why (part 2)

    Currently, styles from the theme's stylesheet and the "Additional CSS" screen are not loaded into the block editor.

    This means that any styling you add to specific pages are not reflected in the block editor, only the front-end.

    The styling in the per-page CSS textbox is loaded into the block editor as well as the front end, creating a more consistent post editing experience.

    Convert the Modern Homepage

    The first place that this can be used is on the Modern Homepage, to apply the custom Modern Homepage styling to the block editor so that it display more inline with the front-end:

    This video shows how to pull the styling out of style tags in a Custom HTML block, but the same can be done to other pages (eg. "About", Contact) so that their page-specific styling isn't loading site-wide.

    Note: we'll need to release an update to apply the entry-content class to the block editor for some of the content-specific styling to work in the block editor.

    Minification and Critical Path CSS

    The per-page CSS is loaded using regular <style> tags in the website header, and should be picked up by WP Rocket.

    If using critical path CSS from WP Rocket, you'll want to generate post-specific critical path CSS for the pages that you add per-page CSS to:

    WP Rocket settings sidebar in block editor

    We don't recommend or support any other caching plugins.

    Disabling

    We've departed from the standard policy of having to enable this in the Feast Plugin, to having it automatically enabled.

    You can add a code snippet to disable it with:

    add_filter( 'feast_block_editor_per_page_css', '__return_false' );

    More

    • GA4
    • Modern 404
    • Focus
    • Process Shots

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.