Tag: themes

Removing all default WordPress CSS styles

The weet theme is extremely fast. One of the ways to achieve this, is by not loading any of the styles that are shipped with WordPress.

After updating to WordPress version 6.4, I noticed that a stylesheet was loading with this theme. Apparently a new stylesheet was introduced. I used the excellent Query Monitor plugin to tell me where this was loaded. Turns out that a separate stylesheet for components exists.

Query monitor panel showing CSS source link for the wp-components handle

In classic themes you can remove stylesheets with PHP if you know the appropriate handle.

function my_dequeue_styles() {
  wp_dequeue_style( 'global-styles' );
  wp_dequeue_style( 'wp-block-library' );
  wp_dequeue_style( 'classic-theme-styles' );
  wp_dequeue_style( 'wp-components' );
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_styles', 10, 0 );

In that case you also have to provide your own CSS.

It seems that I have to keep my eye on changes in WordPress and update the weet theme accordingly.

Introducing the weet theme

The weet theme is fast and focuses on text. It might appeal to you, if you like a minimalist look or just want a setup, that doesn’t load a lot of stuff you are not using. To achieve these goals, somewhat unusual features were created.

weet is a combination of the words wee and theme. Wee meaning small. It also happens to be the abbreviation for walter.ebert.engineering. I know, wee can also mean piss. So let’s just say it’s not 💩.

This site uses weet with a child theme to customise some stuff: templates, web fonts, CSS, theme images.

Performance is one of the main features of the weet theme. To make it fast, a couple things were done:

  • Write a minimal amount of CSS.
  • Inlining the theme CSS.
  • Use no JavaScript.
  • No support for featured images.
  • Disable the default WordPress styles 😱.

Don’t worry, you can enable the default WordPress styles in the Customiser under “Theme Options” (yes, it is a classic theme). The reason to not load the default styles is performance. I usually only use a handful of blocks, but a lot of code is loading for all blocks. There are some things you can do to improve things, but I decided to remove all styles and write my own styles for blocks. Disabling the WordPress styles saves 110.7 kB and 2 HTTP requests.

Because the size of theme CSS is small it is embedded into the HTML. This also means it cannot be cached. This may sound like a disadvantage, but hear me out. If your HTML page size is under 14 kB (in raw transmitted data), you only need one TCP/IP roundtrip and your webpage can be rendered immediately by your web browser.

People will typically arrive on a page from a search engine or by following a link on social media. This means that they will probably leave the site after reading the page. So there is nothing that needs to be cached.

This brings me to the second major feature. The theme has no header section. Pages start with the headline. People come for the content. Not for your fancy logo, hero image or video, or your navigation to explain how big your website is and how your site is structured. The navigation is put in the footer. There is a skip link to navigation, that appears if you navigate to it with your keyboard. This is technically the header section, but invisible until it gets focus.

So this works for blogs or content focused sites, but might not be a good fit, if you have a large website with a lot of different areas. Mega menus exist for a reason.

The theme options have the following settings:

Theme Options: - Enable default CSS - Show author - Add author page link - Show tags - Show categories

The theme is also accessibility ready. Unfortunately, there are not a lot of themes that are. Last time I checked, it was just 98 out of 5576 themes. These numbers are not shown any more on the WordPress themes page. I wonder why 🤔.

The weet theme is intended to be customised. Either with custom CSS, plugins, or blocks / patterns. I prefer to create a child theme, like for this site. So it could be considered a starter theme to which you add your own flavour. It is also the default theme for my demo/test sites.

You can download the weet theme from wordpress.org or install it directly from your WordPress admin. It is also compatible with ClassicPress.

Je weet toch!