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!
Table of Contents
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.
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.
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.
Browse Styles
The first item you’ll see is “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.
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.
Once clicked, you’ll see various typographic elements of your site.
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.
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.
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.
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.
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.
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.
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.
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.
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.
It’s also a little hidden, so you need to know where to look.
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!