How to Style Your WordPress Site with Global Styles

When you select a theme for your WordPress site, it is important to establish a distinctive look. With Block Themes, you can customize styles to showcase your preferred typography, colors, and layout. Learn how to style your WordPress site with Global Styles.

In this article, we will discuss:

• An Introduction to Global Styles
• Applying Global Styles to WordPress Themes
• Review

An Introduction to Global Styles

Global Styles are new features in WordPress and part of the full site editing experience. To utilize this feature, you need WordPress 5.9 or a higher version and a block theme.

So, what is WordPress Full Site Editing (FSE)? FSE lets you modify your website using blocks (including page templates, footers, and headers). You can achieve this using the block editor that you also use when creating posts and pages. Any changes you make to the elements will reflect across your entire website, so you only need to update them once. As a result, you can save a significant amount of time and trouble.

Applying Global Styles to WordPress Themes

To begin with, you’ll need a theme that supports full site editing. For our example, we will use Twenty Twenty-Two.

How to Access the WordPress Global Styles Editor

To access your Global Styles Editor, follow the steps below:

1. Open an internet browser, navigate to your WordPress website's domain name, and add /wp-admin to the URL (for example: http://yourdomainname.com/wp-admin). 
2. Log in to your WordPress administrator panel with your username and password. 
3. Once logged in, go to Appearance, then select Editor to open full site editing.
   
    
4. Click on the theme, and in the upper-right corner, click on the Styles icon.
   

You have accessed the Global Styles Editor.

How to Apply Global Styles to Theme

Now that you have accessed the Global Styles Editor for your theme, you can start designing your website. Learn how to style your WordPress site with Global Styles:

Style Variations

Block themes in WordPress 6.0 now have a new feature called style variations. These variations offer different options for your block theme, such as combinations of typography, colors, spacing, block settings, fonts, and more. You can switch between these style variations to edit the appearance of your site without affecting your theme.

• Under Styles, you will see an image of your current style variation.
• When you click on Browse styles, you can choose a variation to change the look of your block theme.

Typography

Manage your typography settings for elements of your entire website, such as text, links, headings, and buttons. Define typography settings in Global Styles:

• Click on Typography and choose the element to customize. Doing so will open the Typography panel for the specific element chosen.
• You can update the typography settings, such as the font type and size, appearance, line height, letter spacing, and letter case. While choosing a preferred typography, you will see a preview of how it will look while editing. For example:
  
• You can set the font size (S, M, L, XL). Also, you can use custom values (px, em, and rem).
• For headings, you can use H1 to H6.

Colors

Manage color palettes and default colors for global elements on your WordPress website, which includes your website's background color, as well as colors for text, background, link, captions, button, and heading. 

• Click on Colors. Here, you will see the current color palette your block theme is using. You will also find the elements that you can customize with your preferred color settings.

  Note: If your theme doesn't have color palettes, click on Add custom colors to create a custom palette.

• In the Color settings panel, click on Palette to update the following:
  • Solid tab - Opens by default. 
    • Theme - These colors apply throughout your theme's settings.
    • Default - These colors are for the blocks used on your posts and pages.
    • Custom - Here, you can create your own color palette. Click on the plus icon to proceed.

      Note: You can edit each circle of the Theme and Default colors by clicking the vertical ellipsis icon for Theme or Default, then clicking on the Show details button.

  • Gradient tab - Click on the Gradient tab to add color gradients to your theme.  
    • Theme - These color gradients apply throughout your theme's settings.
    • Default - These color gradients are for the blocks used on your posts and pages.
    • Custom - Here, you can create your own color palette. Click on the plus icon to proceed.
    • Duotone - Allows you to use a double tone or two contrasting colors.
       
      Note:

      • You can edit each circle of the Theme and Default colors by clicking the three vertical dots icon for Theme or Default, then clicking on the Show details button.
      • You also have the option to reset a gradient by clicking the vertical ellipsis for Theme, then clicking on the Reset gradient button.

Layout

The Layout gives you the ability to adjust the width of your website's main content area.

• You can adjust the content and wide width using the following CSS units:
  • PX - defines the font size in pixels
  • % - sets font size in relation to current font size
  • EM - sets relative size (relative to the element's font size)
  • REM - relative to the browser's base font size
  • VW - relative to 1% of the viewport width
  • VH - relative to 1% of the viewport width
• If you want to reset the Content and Wide values, click on the vertical ellipsis next to Dimension, then select Content size or Wide size to revert your changes.
• You can adjust the Padding (blank space) on your website. Note that you can set this on all sides: top, bottom, right, and left.  Moreover, it can be set in the same CSS units mentioned above. 
  • If you want to use a preset slider, click on the back slider icon to adjust the padding in another way. 
• You can also adjust Block spacing (vertical spacing in between blocks). It can be set using the same CSS units mentioned above. 
  • If you want to use a preset slider, click on the back slider icon to adjust the block spacing in another way. 

Blocks

When you click on Blocks, you will see a list of blocks that you can customize for your whole website. Use the search box to easily find the block you want to modify. Click on the block to see what options are available for that specific block. 

Edits you make to the appearance of blocks using Global Styles will affect all blocks of that specific type on your site unless you customize them individually on your page or post.

Review

Learn how to style your WordPress site with Global Styles. With WordPress 5.9 or higher, users can now utilize Full Site Editing (FSE) features. This allows for extensive customization of a website's appearance using blocks, including page templates, footers, and headers. This is achieved through the block editor, ensuring changes are reflected site-wide, saving time and effort.