How to Use Global Styles for Fast WordPress Sites with GeneratePress and GenerateBlocks

Few combinations rival the power of GeneratePress and GenerateBlocks when it comes to building fast, lightweight, and customizable WordPress sites. GeneratePress prioritizes performance while giving you the flexibility to create stunning designs without bloating your site. 

One standout feature that ties them together is Global Styles, which can save you time, ensure consistency, and keep your site running at peak speed. In this post, we’ll explore how to harness Global Styles in GeneratePress and GenerateBlocks to streamline your workflow and optimize your WordPress site.

What Are GeneratePress and GenerateBlocks?

GeneratePress is the theme that works in tandem with the GenerateBlocks plugin. Together, they form a dynamic duo for creating modern, performant websites without relying on heavy page builders. To get the benefits of Global Styles, you’ll need the following installed.

• GeneratePress. This is the free theme available in the WordPress repository. 
• GP Premium. GeneratePress Premium is a paid plugin that extends the functionality of the free theme. 
• GenerateBlocks. This is the free plugin available in the WordPress repository. 
• GenerateBlocks Pro. The Pro version of Generateblocks extends the functionality of the free blocks plugin.

Of course, GeneratePress One will be your best value, as it provides everything you need to take advantage of Global Styles. 

Why Global Styles Matter

Global Styles allow you to define reusable design settings that apply across your entire site or to specific elements eliminating the need to manually style each block or section. 

There are several benefits when using Global Styles.

1. Universal design. By defining Global Styles before you build, decisions are made quickly to ensure site designs adhere to your defined standards. 
2. Consistency. Typography, color, spacing, and design is consistent throughout the site.
3. Simplified maintenance. Site maintenance and brand tweaks are easier as you only need to update the Global Style to affect changes throughout the site.
4. Your site loads faster. CSS files are smaller as styles are defined once and used everywhere.
5. Efficiency. Reduced CSS ensures faster page loading and improves style management.
6. Improved workflow. Collaboration between designers and developers is easier.
7. Scalability. New pages and features align with existing design.
8. Better user interfaces and accessibility. Designers can create a more cohesive experience with proper contrast, fonts, and readability.

Setting Up Global Styles in GeneratePress

Creating Global Styles in GeneratePress and GenerateBlocks is easier than ever. There are two key places where Global Styles are set: theme styles and block styles.  Block styles are handled through GenerateBlocks 2.0 Pro.

Theme Styles 

GeneratePress theme styles are set within the WordPress Customizer. This includes:

• Typography. Set your paragraphs, headings (H1 – H6), and key theme elements including site title, navigation, sidebars, and footer. 
• Colors. Global color palettes set in the customizer are stored as CSS Variables, applicable to theme elements and blocks.
• Layout & Spacing. Controls for overall container width, padding, and spacing.
• Core Block Styles. Some WordPress core blocks inherit styles from the theme’s settings.

To set these global theme styles, go to Appearance > Customize in your WordPress dashboard. By setting these up early, you create a unified palette that integrates with GenerateBlocks later.

GeneratePress lays the foundation for your site’s design, and setting up Global Styles is easier than ever before in GenerateBlocks 2.0 Pro. 

Using Global Style Classes in GenerateBlocks 2.0 Pro

GenerateBlocks takes Global Styles to the next level, allowing you to create reusable block styles that you can apply to any GenerateBlocks instance. GenerateBlocks interface gives you immediate access to over 70 CSS Properties that can easily be set with a few clicks. 

To use Global Styles, you’ll need the Pro version of GenerateBlocks. Once activated, you’re ready to start.

There are two places where you can create a Global Style, either when editing a block or within GenerateBlocks in the right sidebar.

Name the Global Style something that makes sense, an intuitive name that reflects where and how the style is used. For example, if you’re styling a button, a name like “global-cta-button” will help you, and anyone else managing the site to identify how the style should be used.

The style name will be converted to a valid CSS class name. You can prepend your style name with a “.” if you like. If you don’t, GenerateBlocks will add it for you.

As you type a style name, the button will say “Create” if the style name does not yet exist. 

You’ll then be presented with an option to choose one of the following:

• Blank style. Start a new style that has no set properties.
• Clone an existing style. Start by choosing an existing style to copy.
• Copy the local block styles. Start by copying the properties of the selected block.
• Move the local block styles. Start by cutting and pasting the properties of the selected block.

When just getting started, it is easiest to start with a blank style. 

You’ll then see all of the style options for the block, and you’ll see the name of your Global Style at the top of the sidebar. You can then start adding styles to the Global Style, and the block you’re working with will also be assigned that Global Style. 

It’s important to have a global mindset when creating Global Styles, and limit the variations that you create. Create only the Global Styles you’ll reuse frequently (e.g., buttons, headings, containers) to avoid clutter and confusion. 

For an example on how we applied this “less is better” mindset to Pro Patterns, our documentation has examples from which you can take inspiration when creating Global Styles for your own project. 

Setting Block Advanced CSS

If one of the standard GenerateBlocks controls does not give you the property you need, simply add the CSS under the block’s advanced selector. There’s no limit to the CSS you can add here, allowing for numerous customizations. Advanced CSS can be applied to both Global Styles as well as Local Styles.

Responsive Design 

Global Styles can easily be applied to any viewport. Apply styles with @media and @container queries by toggling the viewport selector as needed. You have numerous options, including:

• All devices
• Desktop
• Desktop & tablet
• Tablet
• Tablet & mobile
• Mobile

Additionally, you can set specific viewport sizes by creating a new custom at-rule. Simply click “Show at-rule options” on the selector, and click “Create.” 

Two-Click Create

If you’re in the midst of developing a site and realize that a locally created style could benefit other pages on the site, easily convert that local block style into a reusable global style.

Within the block with local styles added, enter the name of the new Global Style and click Create. On the next screen, click the radio button for “Move the local block styles” and then the “Start Editing” button. The Global Style will then be created, and you can make further modifications to the Global Style if needed. The new Global Style will be available to any block anywhere on the site. 

Real-World Example: A Fast Landing Page

Imagine you’re building a landing page. You’ll be developing future landing pages that will also use the same styling and brand identity. Here’s how Global Styles can help. 

Let’s take an example from the Pro Pattern Library and explore the Global Styles used. We’ll take the Page Pattern Home 4 as an example. 

For this page, there are two primary Global Styles to create containers for the content: 

• .gbp-section 
• .gbp-section__inner 

Note the naming convention intuitively tells you what is being styled and where the block is contained. 

For headline and text blocks, we created a similar naming convention identifying that the text is being used within the section and for what purpose. 

• .gbp-section__tagline
• .gbp-section__headline
• .gbp-section__text

For buttons, we created Global Styles clearly identifying the purpose of the button on the page. 

• .gbp-button–primary
• .gbp-button–secondary

For cards, there are Global Styles named:

• .gbp-card
• .gbp-card–border
• .gbp-card__title

These styles are set up for the purpose of reuse. Wherever there is text that has single-use styling, those are handled locally within the individual block. Global Styles however make reusing styling across the page, and also across the entire site, easy. 

If you were to use this Pro Pattern on your site, you could easily edit the Global Styles to fit your brand identity. Then, if you choose any other Pro Pattern for another page, you’ll find it inherits from the changes you’ve made to Global Styles and immediately fit your brand identity. 

As an example, we edited the Global Styles while using Page Pattern 4 from the library, but now want to build another page using About Pattern 3. The Global Styles we’ve established are now used for the second page, making consistent designs a breeze.

If you want to manage Global Styles, do so easily under GenerateBlocks > Global Styles. Here, you can reorder styles for priority, edit style names, or remove styles from your site.

The result? Professional, consistent designs that load lightning-fast.

GeneratePress Global Styles Make Development Easier

GeneratePress and GenerateBlocks make it easy to build WordPress sites that are both beautiful and blazing fast, and Global Styles are the secret sauce that ties it all together. 

By centralizing your design choices, you save time, maintain consistency, and keep your site lean, a win-win for developers and users alike. Whether you’re a beginner or a seasoned designer, mastering Global Styles will elevate your workflow and deliver results that perform as good as they look.