Microthemer 7.2 released

Microthemer 7.2 delivers page speed performance optimisation right out of the box. Just install it and start designing. Microthemer will automatically organise your CSS styles into folders that load in specific ways on specific pages.

Inline critical CSS, defer non-critical CSS

A small number of styles for critical “above the fold” content (visible without having to scroll) will load in an inline style tag. This removes any network latency associated with external CSS files. Styles for non-critical “below the fold” content load asynchronously, which means they do not block the loading of more critical resources, like text and images. This careful fine-tuning makes Microthemer the best WordPress CSS editor for page speed.

Switch between global and page styles

Switching between page-specific and global styles is a breeze using the new “Auto folder” options in the footer. And what’s more, you can completely customise which pages your Microthemer folders load on. It can be a single page, multiple pages, posts with a certain category, search results, date archives, custom posts, you name it.

Note: on new Microthemer installs the “Auto folder” option will be enabled by default and the switch will be set to “Page”. But if you’re upgrading Microthemer from a version prior to 7.2, the “Auto folder” option will not be enabled by default. This is just to keep the behaviour consistent with previous expectations, and allows users to try out automatic folder placement when they are ready.

Faster page speed without layout shift

You can adjust Microthemer’s threshold for “below the fold”. The default is 1440 pixels, but you can lower that via the preferences if you want to load more styles asynchronously. The default value of 1440 pixels is fairly conservative. Some npm packages (e.g. Critical, CriticalCSS, Penthouse) have a default threshold of 900px. However, the downside to setting the below fold threshold too low is that it can cause cumulative layout shift issues (CLS).

Cumulative layout shift is when elements on the page visibly jump around. It can happen if elements styled with asynchronous (delayed) CSS are actually visible on screen when the page first loads. For instance, the critical CSS places elements in one position, but the asynchronous CSS then changes their position. CLS is one of Google’s core web vitals, which count towards your site’s overall page speed score.

Microthemer avoids the possibility of CLS on most screens by setting the fold threshold fairly high. To be really safe, for e.g. 4K screens, you could set the threshold even higher, to 2160px. However, there is a counter argument. Are users looking at the whole screen when a page first loads, or mainly at the logo, navigation, and hero section at the top? Some people define below the fold as any element positioned more than 600px from the top, presumably because they are referring to the user’s area of focus rather than total screen size. I’m still researching this. I’m yet to find broad consensus. I’ve opted for a default threshold of 1440px in Microthemer because I want to make sure that improved page speed doesn’t introduce any new problems.

You are free to experiment by placing more CSS in asynchronous folders and seeing what affect this has on your PageSpeed metrics such as FCP (First Contentful Paint) vs CLS (Cumulative Layout Shift). You want to bring down your FCP score as much as possible, but without increasing your CLS score.

Load Microthemer CSS in the Gutenberg editor

The Gutenberg editor has different HTML mark-up compared to the final output on the site frontend. As such, it’s not currently possible to select Gutenberg editor elements for editing with MT in the same way that you select elements on the frontend. However, if you add a custom CSS class to a Gutenberg block (e.g. my-custom-class), and then you target that element in Microthemer by its class alone (.my-custom-class), you can choose to load the containing folder on both the frontend and the backend Gutenberg editor. That way, you can have consistent styling in both contexts.

To enable this functionality, you first need to enable support for loading Microthemer CSS in the admin area by setting the following preference to yes: Support admin area style loading.

You can then go ahead and set the following condition on your folder:

\Microthemer\is_public_or_admin(5)

This would make the folder load it’s CSS on a page with an id of 5, on the frontend and the Gutenberg “Edit Page” screen.

Of course you need to know the page id. One way to get that is by looking at the classes added to the body tag. Use Microthemer’s Inspect option in the footer to open up the HTML pane. Use Ctrl + F to open the search feature and type <body. If you see mt-5 or mtp-5, then the current page id is 5. The number will be different for each page.

Theme the WordPress admin area

If you enable the Support admin area point and click editing option in the preferences, you can use Microthemer to create an alternative theme for the WordPress admin area. This is helpful if you want to white-label WordPress, or simply introduce some company branding.

Again the “Auto folder” switch for Global (all admin pages) and Page will come in very handy. When Page is selected, Microthemer will automatically organise your styles into a folder for a type of admin screen. For instance, Microthemer will target Edit Posts as well as Edits Pages as you are likely to want to apply similar styling to both.

Container queries

Container queries allow you to apply different styling depending on the size of a designated HTML element. They differ from media queries, which only allow you to apply different styling depending on the size of the browser viewport. Learn how to work with container queries using Microthemer.

Other enhancements in this release

• Improved Compatibility PHP 8.2
• Added UI support for :is and :where pseudo classes.
• Support for conditionally loading CSS on specific pages only.
• Optimisation to ensure that there is zero performance gain from deactivating Microthemer and using the code for simply loading frontend assets. The same standalone PHP class is now used for both scenarios.

Changes in this release

• The options for leaving Microthemer are only at the bottom right of the interface, they are not in the settings menu anymore.
• Microthemer’s default selector labels do not include the parent context, to make them shorter and more readable.
• Microthemer only minifies published CSS and JS files, and those preferences are enabled by default. Draft CSS files are beautified.

Try the online demo

Launch demo

Get Microthemer

View price plans