Exploring WordPress Global Styles

We’re back with the third and final part of our series on the latest WordPress has to offer! In case you missed them, our previous posts covered the Site Editor as well as Patterns. If you haven’t checked them out yet, we highly recommend giving them a read.

If you haven’t heard about block themes yet, you’re not alone. WordPress recently changed the way themes work. We’ve looked at how this powerful new feature is a complete game changer when it comes to designing and building your site. Now, let’s turn our attention to the icing on the cake: the Global Styles menu. Designers, get ready to feel as excited as a kid on their birthday!

What are Global Styles?

The new WordPress site editor gives you an incredible level of control over your site’s layout. But with Global Styles, you can take it even further. All this without knowing a line of code.

As the name suggests, the changes you make will apply to your overall site’s design. So, for example, if the theme you’re using has a default green button, you can easily change it to something that better matches your brand. The same goes for fonts. You can now easily switch fonts for any element or block. Provided they are a part of your theme. Uploading new fonts is something the WordPress community is working on, but it’s not quite ready yet. In the meantime, there is a way to do it using the Create Block Theme plugin.

By applying your style changes in a global way, you’ll end up with a consistent and professional-looking site which can only add to your site’s credibility.

Global Styles in Action

To find the global styles setting, you’ll need to go to Appearance > Editor in your admin menu, wait for the main screen to load, then click inside the page which has loaded.

WordPress Site Editor admin menu
WordPress admin menu

Next, on the top right of your screen, you’ll see the style icon, which is a black-and-white circle-looking thing. Click on it.

WordPress Site Editor Global Styles menu icon
Styles icon in the Site Editor

Here, you’ll see a list of all the different elements of your site which you can customize. Although they are pretty self-explanatory, I’ll explain each a little better.

WordPress Site Editor Global Styles menu
Styles menu in the Site Editor

Browse Styles

The first item you’ll see is “Browse Styles”.

WordPress Global Styles menu
Styles – Browse styles

I should mention that not all themes will have this. If you do see it, you’ll have access to predefined sets of colour palettes the theme author has created for you. It’s really just as easy as a click, and your entire site will transform into something new.

Waverly Theme styles
Waverly theme styles

In our Waverly theme, we offer five additional colour palettes and font combinations for you to choose from. You can use any of these straight out of the box or as a base that you can further customize.

Typography

If I had to pick the top question we get for WordPress theme customization, it would be, “How do I change the font?”. As I mentioned earlier, the WordPress community is currently working on adding a feature where you’ll be able to upload your own fonts, but in the meantime, here’s how to modify them with the ones included in your theme.

Click on the Typography menu in the Styles panel.

WordPress Global Styles menu - Typography highlighted
Styles – Typography menu

Once clicked, you’ll see various typographic elements of your site.

WordPress Global Styles typography menu
Styles – Typography menu

Each item will allow you to change the font from a dropdown list of available fonts in your theme. Appearance allows you to change the weight of your font (bold, italic, bold italic, etc…), line height, and letter spacing.

You’ll also notice that some elements will have additional settings that others don’t. For example, Headings will allow you to change the letter case to uppercase, lowercase, or capitalize. You can then choose to apply your changes to your headings as a whole or fine-grain them for each heading size.

WordPress Global Styles text typography menu
Text typography menu
WordPress Global Styles heading typography menu
Text headings menu

Colors

When it comes to branding your site, nothing could be more important than your site’s colours. With Global Styles, it’s delightfully simple to do.

WordPress Global Styles Color menu
Styles Color menu

An incredibly handy feature is adding in your own colours, which you can later access directly from your post or page editor. You can add as many colours as you need. In the example here, I’ve added a new teal green colour. Adding it here allows me to quickly access it in the other colour menus in this section.

WordPress Global Styles custom color selector
Styles Custom color

And now, if I want to change any colour, I have both the theme’s original colours available as well as my new custom colour.

WordPress Global Styles colors for background color block
Styles – Background Color menu

Layout

The next item under the Styles menu is Layout. This one lets you adjust your various block widths and spacing. Things you may not always consider as design but are incredibly useful for a visually balanced and uncluttered layout.

WordPress Global Styles Layout menu
Styles Layout menu
WordPress Global Styles layout menu settings
Styles Layout settings

Generally, if the theme you selected has a great design, you wouldn’t want to touch these settings, but it’s good to know you do have control should you ever want to change them.

Blocks

Next, we have the Blocks menu. This one is much too large to go over but know that it shows you all the default core WordPress blocks and their settings. The settings can include anything from typography to spacing to colour, depending on the block. I recommended you explore them on your own and tweak them as needed.

WordPress Global Styles Blocks menu
Global Styles Blocks menu

Style Book

The next menu you should know about is the Style Book, which you can find at the top of the Styles panel. It’s the one with the eye icon.

WordPress Global Styles Style Book menu
Global Styles Style Book menu

This menu is so great not only for reviewing your theme’s blocks look but you’ll also be able to review changes you made. I suggest you explore each menu item so you can decide which, if any, need changing.

WordPress Style Book
Style Book

CSS

Another handy menu to explore is the CSS window. In case you have some CSS knowledge and find that the Global styles don’t quite meet your specific needs, this feature allows you to fine-tune your styles further. I love the idea of this but do hope they improve it in future iterations. It’s very basic, so best to use it sparingly.

WordPress Global Styles Additional CSS menu
Additional CSS menu

It’s also a little hidden, so you need to know where to look.

Additional CSS in Styles menu
Additional CSS in Styles menu
Example CSS in Styles Additional CSS menu
Example CSS

From the Style menu, click on the three dots next to the eye icon, which opens a dropdown menu. From the list, click Additional CSS.

Getting Started with Global Styles

Phew! That was a lot to take in, and I appreciate you sticking around. The world of Block Themes brings a plethora of exciting possibilities, granting you more control over your website than ever before.

To dive into this incredible new feature, make sure you have WordPress 5.9 or a newer version installed. You’ll also need to switch to a block theme if you haven’t already done so. If you aren’t using one yet, there are plenty of really great free ones available on WordPress.org. And if you’re looking for something a bit more unique with additional features and patterns, you can always check out our premium themes.

Happy exploring and creating with the power of Global Styles in WordPress!

You Might Also Enjoy