We’re delighted to introduce two new professionally designed blog Starter Sites to the GeneratePress Premium Site Library, Archive and Headline. 

WordPress has its roots as the premiere platform for bloggers, and two decades after its founding, it’s still the fastest and easiest way to start a new content-heavy site. 

Of course, any blog must be performant to keep readers engaged, and choosing the right theme is paramount.  GeneratePress adds less than 10kb to your page size, ensuring your site loads quickly and performs flawlessly. Paired with GenerateBlocks, a powerful and lightweight block-based plugin, GeneratePress makes building stunning, performant websites simple without sacrificing functionality. 

Archive: The Flexible Wireframe Starter Site

The Archive starter site is a minimalist’s dream. Built as a wireframe, Archive provides a clean, versatile foundation that you can mold to fit your brand’s unique vision. Whether you’re running a personal blog, a niche news site, or a professional portfolio, Archive’s unstyled structure allows you to customize colors, fonts, and layouts with complete freedom. 

With Archive, you’re starting with professional, clean layouts that are already optimized for performance and SEO. Want to experiment with bold typography or a vibrant color palette? Archive’s flexibility makes it easy to create a blog that’s uniquely yours, all while maintaining the speed and accessibility that GeneratePress is known for.

Headline: Bold, Visual, and Customizable

If you’re looking for a starter site with a bit more flair, Headline is the perfect choice. This visually striking template comes preloaded with royalty-free images and a carefully curated color scheme, giving your blog a professional, polished look right out of the box. Headline is fully customizable, so you can tweak the colors, swap out images, and adjust fonts to align with your brand.

Headline is ideal for bloggers who want to make a strong first impression with eye-catching visuals and a modern design. Whether you’re covering lifestyle, travel, or tech, this starter site leverages GeneratePress’s lightweight framework to ensure your content loads quickly and ranks well on search engines. With GenerateBlocks, you can easily modify Headline’s layouts, add dynamic elements like featured posts or author boxes, and create a blog that’s as functional as it is beautiful.

Why GeneratePress and GenerateBlocks Are a Blogger’s Best Friend

Blogging is all about delivering content that’s timely, engaging, and easy to find. GeneratePress and GenerateBlocks are the ultimate tools for achieving this. Here’s why:

• Unmatched Performance. GeneratePress is designed with speed in mind. Your blog loads lightning-fast, critical for user experience and SEO.
• SEO-Friendly Architecture. GeneratePress adheres to WordPress coding standards and uses schema.org markup to enhance how search engines interpret your content. This makes it easier for your blog posts to rank higher on Google and other search engines.
• Effortless Customization with GenerateBlocks. With lightweight blocks, GenerateBlocks transforms the WordPress block editor into a powerful design tool. You can build complex layouts, add dynamic content, and create custom blog templates without touching a line of code.
• Starter Sites for Quick Setup. Archive and Headline are part of GeneratePress’s extensive library of over 100 pre-built starter sites. These templates save hours of development time, allowing you to launch a professional blog in just a few clicks.

Things You’ll Love About These Starter Sites

Homepage Hero Area Establishes Trust

Drive your site visitors to your top stories fast, with a clear call to action to help them find your latest posts or critical information.

Made with GenerateBlocks Free

These Starter Sites are built with GenerateBlocks Free. If you’re a GeneratePress Premium user, you can use these Starter Sites easily, leveraging GeneratePress Elements for greater control over how blocks are used throughout the site. 

Responsive Experience for All Devices

With mobile page views topping 60% of global traffic, your site must work well for all screen sizes. These Starter Sites are built with that requirement in mind.

Category-Driven Navigation

Allow your site visitors to browse by categories to dive deeper into topics of interest.

Intuitive Menus and Footer Navigation

Both the header menu and footer navigation make finding information easier than ever, with clear navigation to social media sites and intuitive site information architecture.

Clutter-free Single Post Pages

Your content is the star of the show with clear and clean single post pages.

How to Get Started with Blog Starter Sites

We recommend installing any starter site on a fresh WordPress installation. If you decide to install it on an existing site, your settings will be overwritten. 

To get started, Go to Appearance > GeneratePress. Make sure the Site Library is Activated. 

Next, click the link to go to the Site Library. 

Choose Archive or Headline from the GeneratePress Starter Site Library.

Review the plugins required for the Starter Site, then click “Get Started.”

You’ll need to confirm that the process will overwrite existing site content.

Click “Begin Import.” The process of downloading content to your site will take a few moments. 

Once you’ve done this, click “View Site” to see your new site! You can then edit each page within the site editor and customize colors and fonts to match your brand.

GeneratePress Makes Professional Sites Easy for Any Blog

Ready to launch your next blog? With Archive and Headline, GeneratePress makes it easier than ever to create a professional, high-performing WordPress site. Archive offers a flexible wireframe for those who love to customize every detail, while Headline delivers a visually stunning starting point with royalty-free images and customizable colors. Both starter sites are built on the lightweight, SEO-friendly foundation of GeneratePress and enhanced by the power of GenerateBlocks.

WordPress remains the ultimate platform for blogging, and GeneratePress is the ideal theme to bring your content to life. Whether you choose Archive’s minimalist wireframe or Headline’s bold visuals, you’ll be launching a blog that’s fast, SEO-friendly, and ready to engage your audience. Start building your dream blog today with GeneratePress and GenerateBlocks!

This is an alpha release. Please only install on test/staging sites for now. This release can be downloaded in your account.

• Feature: Add proper pagination to key Dashboard
• Fix: Early load_plugin_textdomain call

When it comes to building a WordPress website that’s fast, flexible, and visually cohesive, the GenerateBlocks Pattern Library stands out as a game-changer. Paired with the lightweight and highly customizable GeneratePress theme, this library of over 200 pre-designed patterns simplifies the web design process while ensuring your site maintains a consistent aesthetic. 

In this post, we’ll explore the benefits of using the GenerateBlocks Pattern Library, how it inherits styles from the overall theme, and why starter sites built with core GeneratePress styles allow the pattern library to seamlessly adopt your site’s design.

What is the GenerateBlocks Pattern Library?

The GenerateBlocks Pattern Library is a collection of mid-fidelity wireframe patterns designed to help you quickly build pages and sections of your website. These patterns are essentially pre-built block layouts that you can insert into the WordPress Block Editor with a single click. 

From hero sections to pricing tables, testimonials, and call-to-action blocks, the library offers over 200 professionally crafted designs that are both responsive and customizable.

Unlike rigid templates with strict designs, these patterns are built to be flexible, allowing you to adapt them to your brand’s unique style. In fact, just previewing the Pattern Library will clearly indicate how the patterns within the Pattern Library will look when you insert them into a page or post. For example, here’s what the Pricing Tables look like when using two different Starter Sites from the GeneratePress Site Library.

Buttons, taglines, and headlines inherit from the Global Styles set in the Starter site.

The Pattern Library is included with GenerateBlocks Free  and GenerateBlocks Pro, making them an invaluable tool for anyone looking to streamline their workflow without sacrificing design quality. GeneratePress One sites in the Site Library are built with GB Pro Patterns. They also come with their own local patterns that contain extra styles relevant to that design.

Key Benefits of Using the GenerateBlocks Pattern Library

Saves Time and Effort

Building a website from scratch can be time-consuming, especially when designing complex layouts. The Pattern Library eliminates hours of manual block assembly by providing ready-to-use designs. Whether you’re creating a homepage, blog archive, or product page, you can import a pattern and customize it to fit your needs in minutes.

Ensures Design Consistency

One of the biggest challenges in web design is maintaining a cohesive look across all pages. The Pattern Library is designed to inherit styles from your GeneratePress theme, meaning fonts, colors, and typography settings automatically apply to every pattern. This ensures your site looks polished and professional without manual tweaking.

No Coding Required

With the Pattern Library, you don’t need to touch a line of code to create stunning layouts. The patterns are built using GenerateBlocks, a lightweight block plugin that integrates seamlessly with the WordPress Block Editor. Simply point, click, and customize to achieve your desired design.

Responsive and Accessible

Every pattern is 100% responsive, ensuring your site looks great on desktops, tablets, and mobile devices. Plus, GeneratePress’s commitment to accessibility means patterns are usable for all visitors, including those using assistive technologies.

Endless Customization Options

While the patterns provide a solid starting point, they’re not set in stone. You can tweak colors, spacing, typography, and more using GenerateBlocks’ intuitive controls. This flexibility allows you to tailor each pattern to your brand while maintaining the efficiency of a pre-built design.

Boosts Workflow with GenerateCloud

For advanced users, the Pattern Library integrates with GenerateCloud, a feature that lets you create and share your own custom pattern libraries across multiple sites. Build your go-to patterns once, store them in the cloud, and deploy them anywhere with ease.

How the Pattern Library Inherits from the GeneratePress Theme

The magic of the GenerateBlocks Pattern Library lies in its style inheritance system, which ensures patterns align perfectly with your site’s overall design. Here’s how it works:

Theme Styles as the Foundation

The GeneratePress theme sets global styles for your website, including:

• Font Families. All headings (H1, H2, etc.) and paragraph text inherit the fonts you’ve chosen in the WordPress Customizer.
• Typography Settings. Sizes, line heights, and letter spacing defined in the theme apply automatically to pattern elements.
• Color Palette. Your theme’s primary colors, link colors, and background colors are inherited by patterns, ensuring visual harmony.

For example, if your theme uses a bold sans-serif font for headings and a soft blue for links, every pattern you insert will adopt these settings. In the case you want to modify styles locally, it is easy to do once placed on the page. 

Minimal Local Block Styles

Patterns in the library use minimal local block styles (e.g., padding or spacing) to avoid overriding your theme’s settings. This means the majority of a pattern’s appearance through typography, colors, and layout comes directly from your theme or global styles, reducing the need for manual adjustments.

Global Styles Integration (Pro Feature)

With GenerateBlocks Pro, patterns leverage Global Styles, a system that lets you define reusable style rules (e.g., button designs, container widths) that apply site-wide. For instance, if you create a Global Style for a primary button with a black background and white text, every pattern containing a button will use that style automatically. This is especially powerful for maintaining consistency across complex sites.

Starter Sites and Core GeneratePress Styles

GeneratePress offers a Site Library with over 100 pre-built professionally designed starter sites, ranging from blogs to eCommerce stores and restaurants, and online learning sites. These starter sites are crafted using the core GeneratePress theme and GenerateBlocks, ensuring they’re lightweight, fast, and fully customizable. Here’s how they tie into the Pattern Library:

Built with Core Styles

Starter Sites rely on the same global styles (fonts, colors, typography) as the rest of the GeneratePress ecosystem. When you import a starter site, it sets up a foundation of theme styles that the Pattern Library inherits. For example, if a Starter Site uses a modern sans-serif font and a teal color scheme, any pattern you add later will automatically adopt these characteristics.

Seamless Pattern Integration

Because both the Starter Sites and patterns are built with GenerateBlocks, adding a pattern to a Starter Site is effortless. The pattern slots into your site’s design without clashing, as it pulls styles directly from the theme and global settings. This makes it easy to extend a starter site with new sections, like a testimonial block or a pricing table, while keeping everything cohesive.

Dynamic Block Elements

Starter sites often include Dynamic Block Elements, a premium feature that lets you create reusable templates for headers, footers, post meta, and more. These elements also inherit theme styles, ensuring that patterns you add align with the site’s core design. For instance, a pattern for a blog post grid will match the typography and colors of a starter site’s single post template.

No Bloat, Just Speed

Unlike many other themes’ starter templates, GeneratePress starter sites are lean, with a default installation under 10KB. This lightweight foundation means patterns load quickly and don’t slow down your site, even when you stack multiple sections on a page.

Why This Matters for Your Website

The combination of the GenerateBlocks Pattern Library, theme style inheritance, and starter sites creates a unified design ecosystem that’s both powerful and user-friendly. Here’s why this approach is a win for web creators:

Consistency Without Effort

You don’t have to manually style every pattern to match your site. The inheritance system ensures that your brand’s look, whether it’s a minimalist blog or a vibrant eCommerce store, carries through effortlessly.

Scalability for Any Project

Whether you’re building a single site or managing multiple client projects, the Pattern Library and starter sites scale with you. Use GenerateCloud to share your own patterns across sites, or import a starter site to kick off a new project in minutes.

Performance-First Design

GeneratePress has a core theme size of just 7.5KB and minimal HTTP requests. Patterns and starter sites maintain this performance focus, ensuring your site stays lightning-fast even with complex layouts.

Empowers All Skill Levels

Beginners can import a starter site and add patterns without coding, while developers can dive into global styles and custom CSS for pixel-perfect control. The system grows with your expertise.

How to Get Started

Ready to harness the GenerateBlocks Pattern Library? Here’s how.

Install GeneratePress

Download the free GeneratePress theme from WordPress.org and activate it in your dashboard under Appearance > Themes.

Upgrade to GeneratePress Premium

Purchase GeneratePress Premium, or GeneratePress One, to unlock the Site Library, Pattern Library, and advanced modules. Install the premium plugin via Plugins > Add New and upload the plugin. 

Add GenerateBlocks

Install the free GenerateBlocks plugin for core block functionality. For access to the full Pattern Library and Global Styles, upgrade to GenerateBlocks Pro and install the downloaded Pro plugin. 

Import a Starter Site (Optional)

Go to Appearance > GeneratePress > Site Library, choose a starter site, and import it. This will set up your theme styles and give you a head start.

Explore the Pattern Library

In the WordPress Block Editor, open the GenerateBlocks panel (click the GenerateBlocks icon button in the top bar) and browse the Pattern Library. Insert a pattern, customize it, and watch it inherit your theme’s styles instantly.

A Workflow Revolution

By inheriting styles from the GeneratePress theme and seamlessly integrating with starter sites, the Pattern Library empowers you to create stunning, consistent, and high-performing websites with minimal effort. Whether you’re a hobbyist, freelancer, or agency, this system saves time, boosts creativity, and ensures your site stands out.

Ready to transform your web design process? Dive into GeneratePress One today, and let the Pattern Library bring your vision to life, faster and smarter than ever before.

When it comes to building a high-performing WordPress website, speed and efficiency are non-negotiable. A slow site can lead to higher bounce rates, lower conversions, and even impact your SEO rankings. 

That’s where the powerful combination of GeneratePress and Perfmatters comes in. By pairing the lightweight, performance-focused GeneratePress theme with the optimization powerhouse Perfmatters plugin, you can create a WordPress site that’s blazing fast, user-friendly, and optimized for both site visitors and page speed measurement. In this post, we’ll explore how to use these two tools together to maximize your site’s performance.

Why Choose GeneratePress and Perfmatters?

GeneratePress is a lightweight WordPress theme designed with speed and flexibility in mind. With a base install that scores 100/100 on mobile for Google’s Core Web Vitals, GeneratePress ensures minimal code bloat and optimal performance out of the box. Its modular system means only the features you need are loaded, keeping your site lean. Features like streamlined SVG icons, system fonts by default, and dynamic CSS further enhance its performance credentials.

Perfmatters is a performance plugin created by web performance experts to fine-tune your WordPress site. It focuses on reducing HTTP requests, optimizing code, and eliminating unnecessary scripts to improve load times and user experience. With features like lazy loading, script and CSS management, local font hosting, preloading, etc., Perfmatters complements GeneratePress by taking optimization to the next level.

Together, these tools form a performance-driven duo that ensures your site is fast, responsive, and ready to impress both users and search engines. In fact, the developers behind Perfmatters have been using GeneratePress exclusively since 2017 to build and power their own WordPress sites. Most debugging, development, and testing with Perfmatters is actually first done in GeneratePress.

Key Benefits of Using Perfmatters with GeneratePress

Enhanced Speed and Core Web Vitals Compliance

GeneratePress is already optimized for speed, and Perfmatters adds an extra layer of fine-tuning, especially once you start adding additional third-party plugins, scripts, etc. For example, Perfmatters’ ability to defer or delay JavaScript, remove unused CSS, and lazy load images can significantly reduce initial load times and improve metrics like Largest Contentful Paint (LCP), First Contentful Paint (FCP), and Time to First Byte (TTFB). 

Granular Control Over Scripts and Assets

Perfmatters’ Script Manager allows you to disable scripts on a per-page or site-wide basis, which is particularly useful for GeneratePress sites that are using third-party plugins such as WooCommerce, form plugins, etc. This ensures that only essential scripts load, reducing bloat and improving performance.

Seamless Integration

Perfmatters is designed to work with any theme, including GeneratePress, and has been rigorously tested for compatibility. Both GeneratePress and Perfmatters support professional website development standards to ensure that your site serves up exactly what is needed for your site visitors without extraneous scripts or unnecessary functionality. 

Local Font and CDN Optimization

Both tools emphasize efficient asset delivery. GeneratePress makes it easy to switch to a system font stack or host Google Fonts locally with a single click. Perfmatters offers options to host fonts locally and integrate with third-party CDNs for faster asset delivery.

You should choose one method, either in GeneratePress or Perfmatters. Our recommendation is to use GeneratePress settings for local fonts unless you’re using plugins that are making calls to Google fonts. In that case, Perfmatters provides granular control over local fonts.

Reduced HTTP Requests

By combining GeneratePress’ minimal code base with Perfmatters’ features like minifying CSS/JS, disabling unnecessary WordPress features, you can drastically reduce HTTP requests, leading to faster page loads. Some of these features can include dashicons, emojis, or other embeds. Of course, be sure that your site does not require these. 

Database Optimization

Perfmatters also includes a database optimization capability. Over time, WordPress site databases can become cluttered with post revisions, auto-drafts, and other unnecessary data, and database tables can benefit from optimization. An optimized database can improve performance, especially for backend performance.  

How to Set Up Perfmatters with GeneratePress

Always back up your site before making performance optimizations, and test changes thoroughly to ensure compatibility with your setup. To get the most out of this combination, follow these steps to configure Perfmatters alongside GeneratePress:

Step 1: Install GeneratePress and Perfmatters

Download and install the free version of GeneratePress from the WordPress repository or upgrade to GeneratePress Premium for additional features like hooks and advanced customization. Follow the installation guide to get started.

Purchase and download Perfmatters, then install and activate it via your WordPress dashboard. Enter your license key to unlock all features.

Step 2: Configure GeneratePress for Optimal Performance

Upon install, GeneratePress and GenerateBlocks are set to support site performance, but there are a few tweaks you might want to make to improve overall speed and performance. 

In the WordPress Customizer, go to General. Ensure that CSS Print Method is set to External File for dynamic CSS generation to ensure compatibility with Perfmatters’ Remove Unused CSS feature.

Switch to a system font stack or host Google Fonts locally to eliminate third-party font requests.

For GenerateBlocks, ensure background images are set to inline HTML for lazy loading compatibility. You can also use Perfmatters’ CSS background image feature to still lazy load images if you can’t inline a specific image.

Step 3: Optimize with Perfmatters

Here are recommended Perfmatters settings to complement GeneratePress, based on best practices from Perfmatters.

General Settings

• Disable Emojis. Enable to remove a small JavaScript file if you’re not using emojis on your site.
• Disable Dashicons. Enable, but test to ensure it doesn’t break frontend elements.

Javascript Assets

• Defer JavaScript. Enable to fix render-blocking resource warnings. Exclude GeneratePress-specific files like /generatepress/assets/js/menu.min.js if issues arise (e.g., mobile menu toggles not working).
• Delay JavaScript. For heavy third-party scripts such as Google Analytics or Adsense, this can improve page load speed. Exclude critical scripts to avoid issues like double-click bugs on iOS. You can also utilize their quick exclusions (drop-down) for popular product JS exclusions like GeneratePress. Perfmatters will show this quick exclusion when you’re using GeneratePress.
• Minify JavaScript. Enable to remove unnecessary characters in JS files that aren’t already minified by the developers.

CSS Assets

• Minify CSS. Enable if your cache plugin doesn’t handle this to remove unnecessary characters in CSS files that aren’t already minified by the developers.
• Remove Unused CSS. Enable, but exclude dynamic stylesheets from heavy page builders if needed. For GeneratePress, this feature works smoothly due to its lightweight nature.

Lazy Loading

Starting with version 5.5, WordPress automatically adds the loading=”lazy” attribute to <img> tags that have both width and height attributes, effectively enabling lazy loading for images by default. This feature is automatically applied to images inserted in posts and pages. 

Native lazy loading isn’t very customizable out of the box and is very broad in terms of its viewport. You’ll see a lot better performance if you utilize the lazy loading in Perfmatters, which works on  images, videos, and iFrames. You’ll also have more control over optimizing your LCP, with features like Exclude Leading Images. And if an image is missing height and width attributes, Perfmatters can automatically add these if this setting is toggled on.

For background images set in your stylesheet, enable Perfmatters’ CSS Background Images option or use GeneratePress’ inline HTML setting.

Fonts

Hosting Google Fonts locally can be done with GeneratePress as well as Perfmatters. In Perfmatters, you can also disable Google Font loading if another plugin is calling for them on your site.

CDN

If you’re using a content delivery network (CDN), enter your network’s details to Enable CDN rewrite if using a third-party CDN. If you’re using Cloudflare, you can skip this section. If you’re using Cloudflare, turn off Rocket Loader for better performance.

Script Manager

Under Tools, enable the Script Manager, then visit the home page of your site. You’ll see the Script Manager available on the top admin bar. Use this to disable unnecessary plugins or scripts on specific pages. 

For example, disable WooCommerce scripts on non-shop pages where these scripts are unnecessary. Note this will remove the cart from the menu, but for some pages that might make sense. Another common example is a contact form plugin, which many times loads scripts site-wide.

Preloading

Preload critical above-the-fold images and exclude them from lazy loading to improve Largest Contentful Paint scores. You can utilize their Preload Critical Images feature and their Exclude Leading Images feature (you can change the values for each). Or, you can even preload assets/images manually in a certain location and per device (mobile/desktop). If you need to go a step further, you can utilize one of their many filters to further fine-tune your LCP images based on post types, above the fold content, etc.

While speculative loading has been added to WordPress in version 6.8, Perfmatters provides more granular control for a better, and faster, experience for your site visitors. Your site can automatically prerender URLs in the background after a user hovers over a link, creating almost instantaneous load times. It also helps improve your real-user data regarding page speed metrics of Time to First Byte (TTFB), Largest Contentful Paint (LCP), and Interaction to Next Paint (INP).

Step 4: Test and Fine-Tune

Run a speed test using tools like Google PageSpeed Insights or GTmetrix to measure improvements.

If you encounter issues (e.g., mobile menu not working properly or you see layout shifts), check Perfmatters’ documentation for exclusion recommendations.

Use Perfmatters’ Testing Mode to safely experiment with settings without permanent changes. You can also use their handy query strings like ?perfmattersoff on the end of a URL to test before and after. See more query string variations for JS off, CSS off, etc. in their documentation. Also, remember that Perfmatters never makes any permanent changes to your site. You can always toggle a feature back off if needed.

Tips for Avoiding Common Pitfalls

Exclude Critical Scripts. When using Perfmatters’ Defer or Delay JS features, exclude GeneratePress scripts like menu.min.js to prevent issues with mobile menus or off-canvas panels. Utilize their Delay JS quick exclusions to decrease your troubleshooting time.

Disable CSS Combining. Avoid combining CSS files in other plugins, as this can conflict with GeneratePress’ dynamic CSS and Perfmatters’ Remove Unused CSS feature.

Test Mobile Usability. When using Remove Unused CSS, check Google Search Console for mobile usability errors, especially if optimizing GeneratePress stylesheets.

Clear Cache. After making changes, clear your cache (from plugins like WP Rocket or Breeze) to ensure updates take effect.

Use Compatible Plugins. Pair with lightweight plugins like GenerateBlocks or caching plugins (e.g., WP Rocket, WP Fastest Cache, FlyingPress) that don’t duplicate Perfmatters’ features. 

The nice thing is that Perfmatters is entirely modular. This means it’s pretty much compatible with all other plugins and solutions, as you can turn something off if it conflicts.

Why This Combination Stands Out

While GeneratePress provides a performance-optimized foundation, Perfmatters adds the granular control needed to eliminate bloat and optimize every aspect of your site. Unlike heavier themes or plugins, both are developed by teams passionate about speed and user experience. Both products prioritize speed and lightweight code, ensuring your site is future-proofed for SEO and performance standards.

Plus, both offer top-notch support. GeneratePress’ forums and Perfmatters’ direct developer assistance mean you’re never left struggling with setup or troubleshooting.

If you’re a developer, you can take things even further with GeneratePress’ filters (150+) and Perfmatters’ filters (50+), which allow you to customize just about any feature to do exactly what you need.

Two Performance-Focused Tools that Work Together

Using GeneratePress and Perfmatters together is a match made in WordPress heaven. GeneratePress provides a fast, flexible, and SEO-friendly theme, while Perfmatters fine-tunes your site’s performance with advanced optimization tools. By following the setup steps above and leveraging their complementary features, you can create a WordPress site that’s not only beautiful and functional but also lightning-fast.

Ready to supercharge your site? Get started with GeneratePress and Perfmatters today, and experience the difference a performance-first approach can make.

Special thanks to Brian Jackson from Perfmatters for his insights and help with this post.

At GeneratePress, we’re committed to empowering organizations to create impactful, beautiful websites easily. For organizations doing the important work of improving our environment and the lives of those less fortunate, a fast and easy-to-navigate website is critical.  

Today, we’re thrilled to announce the launch of four new professionally designed Starter Sites designed specifically for charities and nonprofit organizations, helping them amplify their mission and connect with supporters. These templates are built with flexibility, accessibility, and performance in mind, making it simple for charities to establish a professional online presence.

Meet the New Charity Starter Sites

Charity

The Charity Starter Site is a versatile blueprint created for nonprofit organizations of all kinds. With a clean, modern design, it offers a perfect foundation for showcasing your mission, fundraising campaigns, events, and impact stories. Whether you’re just starting out or refreshing your existing site, this template provides a professional look that’s easy to customize.

Youth

Designed for charities focused on youth services, the Youth Starter Site is vibrant and engaging, ideal for organizations supporting education, mentorship, or community programs for young people. Its dynamic layout highlights events, volunteer opportunities, and success stories to inspire action and involvement.

Rescue

For animal welfare organizations, the Rescue Starter Site is a heartwarming template built to showcase adoptable pets, share rescue stories, and promote donation drives. Its warm, inviting design helps animal shelters and advocacy groups effortlessly connect with pet lovers and supporters.

Conserve

The Conserve Starter Site is crafted for environmental charities dedicated to conservation, sustainability, and ecology initiatives. With earthy tones and a focus on impactful visuals, this template is perfect for organizations looking to raise awareness and rally support for environmental causes.

Why Choose These Starter Sites?

Every GeneratePress Starter Site is built with the intent of making fast and beautiful sites easier for everyone. 

• Fast and Lightweight. Built with GeneratePress’s performance-first philosophy, these sites load quickly and provide a seamless user experience.
• Fully Customizable. Easily adapt colors, fonts, layouts, and content to match your charity’s branding using the GeneratePress theme and block editor.
• Mobile-Responsive. Each template is optimized for all devices, ensuring your site looks great whether viewed on a phone, tablet, or desktop.
• Accessibility-Ready. Designed with inclusivity in mind, these sites help ensure your content is accessible to all visitors.
• Donation-Ready. Seamlessly integrate with popular donation platforms or plugins to support your fundraising efforts.

How to Get Started with the Charity Starter Sites

We recommend installing any starter site on a fresh WordPress installation. If you decide to install it on an existing site, your settings will be overwritten. 

To get started, Go to Appearance > GeneratePress. Make sure the Site Library is Activated. 

Activate the GeneratePress Site Library

Next, click the link to go to the Site Library. 

Open the GeneratePress Site Library

Choose Charity, Youth, Rescue, or Conserve from the Site Library.

Choose Starter Site from Site Library

Then click “Get Started,” confirming the site you’ll be importing.

Get Started Importing Starter Site

You’ll need to confirm that the process will overwrite existing site content. Click “Begin Import.” The process of downloading content to your site will take a few moments. 

Click Begin Import After Confirming Overwriting

Once you’ve done this, click “View Site” to see your new site! You can then edit each page within the site editor and customize colors and fonts to match your brand within the Customizer.

GeneratePress Makes Professional Sites Easy for Any Nonprofit Site

With a few easy steps, both professional web developers and small nonprofits building their own sites can enjoy all the benefits of a professionally designed website. 

Where many other page builders and development tools require presentation logic on the site’s front end, GeneratePress does all of the heavy lifting behind the scenes. When you edit your site’s content and layout on the backend, GeneratePress creates all of the end-result code necessary to display your site on the front end of your site. 

For site visitors, 100% of the code is compiled and ready to go. Even with zero coding knowledge, GenerateBlocks puts the power of professional-grade code into your hands. 

The result is the fastest and most performant experience available for even the most high-traffic charity sites. Your donors get blazingly fast results every time. 

• Fix: Layout Element full width editor

Web accessibility ensures that everyone can navigate and interact with your website regardless of ability. As we celebrate World Accessibility Day on May 15, 2025, let’s explore how to create inclusive, high-performing, and accessible websites using GeneratePress and GenerateBlocks. 

These powerful tools empower developers and designers to craft user-friendly sites that conform to accessibility standards, all while maintaining speed and flexibility. Below, we’ll walk through practical steps to leverage these tools for accessibility, with examples and tips to make your site welcoming to all users.

Why Accessibility Matters

Web accessibility is about designing websites that people with disabilities, such as visual, auditory, motor, or cognitive impairments, can use effectively. According to the World Health Organization, over 1 billion people globally live with some form of disability. Accessible websites broaden your audience and improve SEO, usability, and compliance with legal standards like the Americans with Disabilities Act (ADA).

GeneratePress and GenerateBlocks are ideal for building accessible sites. Both prioritize clean code, performance, and accessibility-focused features, making them perfect for creating inclusive digital experiences. With the release of GenerateBlocks 2.1, accessibility has taken center stage, offering enhanced tools like improved ARIA labels and dynamic data support.

Now, let’s explore how to use these tools to create an accessible website, focusing on key Web Content Accessibility Guidelines (WCAG) principles: Perceivable, Operable, Understandable, and Robust.

1. Perceivable: Ensure Content is Accessible to All Senses

The Perceivable principle states that users should be able to perceive your content, whether through sight, sound, or touch. GeneratePress and GenerateBlocks provide tools to make this easier, whether your site visitors are using screen readers, mobile devices, or other assistive technology.

Add Descriptive Alt Text to Images

Alt text describes images for screen readers, helping visually impaired users understand their context. In GenerateBlocks:

• Use the Image Block and add alt text in the block settings under Alt Text.
• Ensure alt text is concise (80–100 characters) and descriptive. For example, instead of “logo,” use “Company X logo with blue text on white background.”
• Leave the alt text blank and add aria-hidden=”true” for decorative images to hide them from screen readers.
• Avoid using images to convey critical information. If unavoidable, pair them with text alternatives using GenerateBlocks’ Headline or Paragraph blocks.
• If an image is a link, use alt text to describe where the link directs the site visitor, rather than describing the image itself.

Use High-Contrast Colors

Color contrast is crucial for users with visual impairments or color blindness. High-contrast colors can also help users browsing in difficult environments, such as those with high sunlight. The WordPress Customizer (Appearance > Customize) lets you set accessible color schemes:

• Navigate to Colors and choose text and background colors with a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (per WCAG 2.1 AA).
• Use tools like WebAIM’s Contrast Checker or the EasyA11yGuide Contrast Checker to verify ratios.
• In GenerateBlocks, apply accessible colors via the Styles > Typography and Backgrounds panel. For example, set button backgrounds to a dark color with white text.

For example, when creating a call-to-action button, use GenerateBlocks’ Button Block and set a high-contrast style. Avoid relying solely on color to convey meaning (e.g., red for “error”); add icons or text labels instead.

Support Screen Readers with ARIA Labels

Accessible Rich Internet Applications (ARIA) labels enhance screen reader compatibility. GenerateBlocks 2.0 simplifies this:

• For Button Blocks without text (e.g., icon-only buttons), add an ARIA label in the block settings (free version) or use Custom Attributes in GenerateBlocks Pro to define aria-label=”Descriptive action”.
• For interactive elements like accordions or tabs, GenerateBlocks Pro automatically applies ARIA attributes to indicate their state (e.g., aria-expanded=”true” for open accordions).
• In GeneratePress, ensure navigation menus use semantic HTML (e.g., <nav>). The theme’s Navigation Search Modal (introduced in GeneratePress 3.3.0) is fully accessible with ARIA support.

For example, suppose you create an accessible accordion with GenerateBlocks Pro’s Accordion Block. In that case, the block automatically adds ARIA attributes; however, you can further enhance it by ensuring clear, descriptive titles, such as the question being answered rather than vague terms like “Question 1.”

2. Operable: Make Your Site Navigable for All

The Operable principle ensures users can interact with your site regardless of their input method, whether keyboard, mouse, or assistive device.

Enable Keyboard Navigation

Keyboard accessibility is vital for users with motor disabilities. GeneratePress is built with keyboard-friendly navigation:

• Test your site by navigating with the Tab key. Ensure all interactive elements (links, buttons, forms) are focusable and have visible focus indicators.
• In GeneratePress, you can set link styles in the Customizer under Colors > Body and General > Underline Links. These will inherit to the outline of keyboard-based navigation.
• GenerateBlocks’ blocks (e.g., Buttons, Containers) support keyboard interaction out of the box. For custom elements, use GenerateBlocks Pro’s Custom Attributes to add tabindex=”0″ where needed.

GeneratePress adds skip-to-content link automatically to your site, enabling keyboard navigation that bypasses navigation and will go to the first link within page content. 

Ensure Consistent Navigation

Consistent navigation helps users with cognitive disabilities predict where to find information. With GeneratePress:

• Use the Customizer > Layout > Primary Navigation to create a uniform menu structure across all pages.
• Maintain consistent placement for key elements like the search icon. GeneratePress’ Navigation Search Modal ensures accessibility with a predictable trigger (e.g., data-gpmodal-trigger=”gp-search”).

Support Responsive Design

Mobile users and those with low vision need responsive, scalable designs. GeneratePress and GenerateBlocks’ support of REM units for font sizes ensure that your text will adjust to any browser-based changes in font sizing to make this seamless:

• In any block (e.g., Container, Headline), use the Responsive Controls to adjust font sizes, padding, and margins for desktop, tablet, and mobile.
• Ensure text can be zoomed up to 200% without breaking the layout. Test this in GeneratePress by setting Customizer > Typography > Body to a base font size of at least 16px.
• Avoid sliders due to accessibility and performance issues. Instead, use GenerateBlocks’ Accordion Block to show and hide content interactively.

3. Understandable: Create Clear and Predictable Content

The Understandable principle ensures your site is easily comprehended, especially for users with cognitive or learning disabilities.

Use Plain Language

Ensure your website uses clear, jargon-free text, which benefits all users. With GenerateBlocks:

• Use the Headline and Paragraph Blocks to write concise, descriptive content. For example, instead of “Click here,” use “Learn more about our services.”
• Apply consistent typography via the Customizer. Set a readable font and ensure line spacing is at least 1.5x the font size.

Provide Clear Link Text

Descriptive link text helps screen reader users understand a link’s purpose. In GenerateBlocks:

• Use the Button Block or Paragraph Block with inline links, ensuring text is specific. For example, “View our pricing plans” is better than “Click here.”
• Avoid ambiguous links in navigation menus. In GeneratePress, customize menu items via Appearance > Menus to use descriptive labels.

4. Robust: Build for Compatibility and Future-Proofing

The Robust principle ensures your site works with assistive technologies and remains compatible as technology evolves.

Use Semantic HTML

GeneratePress and GenerateBlocks prioritize semantic HTML, which is critical for screen reader compatibility:

• GeneratePress uses proper HTML5 elements (e.g., <nav>, <main>, <footer>) to structure content logically.
• GenerateBlocks’ blocks output clean, semantic code. For example, the Headline Block defaults to <h2> but can be set to other heading levels for proper hierarchy.
• Instead of overusing ARIA, rely on semantic HTML for clarity and compatibility. For example, use the element for navigation menus rather than a <div> with role=”navigation”. This ensures screen readers correctly identify the navigation section without redundant ARIA attributes.

Structure a page with GenerateBlocks’ Container Block as a <section> and nest Headline Blocks with sequential headings (H1, H2, H3) to maintain a clear hierarchy.

Test with Assistive Technologies

Regular testing ensures your site remains accessible.

• Use screen readers like NVDA (Windows) or VoiceOver (macOS) to navigate your site. Verify that all interactive elements are announced correctly.
• Test with tools like WAVE or Axe to identify WCAG violations. GeneratePress’ clean code minimizes errors, but check for issues like missing alt text or low contrast.
• Leverage GenerateBlocks’ Pattern Library to import accessible starter content, then test and tweak them using accessibility-aware design decisions.

Keep Code Lightweight

Bloat-free code improves performance, which benefits users with low-bandwidth connections or older devices. GeneratePress and GenerateBlocks excel here:

• GeneratePress is just 7.5KB with 2 HTTP requests, ensuring fast load times.
• GenerateBlocks 2.0 decouples HTML and CSS for cleaner output, reducing page weight. Its Global Styles minimize CSS duplication, enhancing performance.
• Use GenerateCloud to share accessible patterns across multiple sites, reducing repetitive coding.

Accessibility Enhancements in GenerateBlocks 2.1

Released in February 2025, GenerateBlocks 2.0 introduces features that make accessibility easier, and the release of GenerateBlocks 2.1 in April 2025 added even more accessibility-focused features ensuring that you can add ARIA labels in both the Pro and free versions. 

• Dynamic Tags. Query nested post meta or user meta for front-end display, ensuring dynamic content (e.g., user profiles) is accessible. You can register custom tags for specific needs.
• Enhanced ARIA Support. Buttons, accordions, and tabs include ARIA attributes by default with customizable options in both GenerateBlocks free and Pro.
• Decoupled HTML/CSS. Cleaner code improves compatibility with assistive technologies and reduces rendering issues.
• Global Styles Integration. Create reusable, accessible styles (e.g., high-contrast buttons) and apply them site-wide, ensuring consistency.

When using dynamic data in GeneratePress, you can easily use any dynamic data to populate ARIA fields. For example, if you create a button and want to ensure it has appropriate ARIA labels, you could easily add content to display “read more about {{post_title}}” in your button ARIA label.

Practical Example: Building an Accessible Homepage

Let’s combine these principles to create an accessible homepage:

Header

• Use the GeneratePress Customizer > Layout > Site Header and Primary Navigation options to establish accessibility-aware settings.
• Ensure the Navigation Search Modal is enabled for accessibility.

Hero Section

• Choose a Hero Section from the GenerateBlocks Pattern Library.
• Ensure that the text in the Hero area has sufficient contrast from the background.
• If the Hero area contains an image, add alt text to the background image.

Content Section

• Ensure all text is easily readable with clear fonts and all links are descriptive. 
• Use Accordion Blocks for FAQs, with clear titles and ARIA attributes.
• Add a Button Block with descriptive text and an ARIA label for icon-only buttons.

Footer

• Use a Grid Block for contact info, social links, and a sitemap.
• Ensure social icons, built with Button Blocks, have ARIA labels like aria-label=”Follow us on Twitter”.

Testing for Accessibility Issues

• Combine Automated and Manual Testing. Automated tools catch ~30-50% of accessibility issues, so manual testing using both screen readers and keyboard navigation is essential.  
• Test Across Browsers and Devices. Accessibility behavior can vary, so test on Chrome, Firefox, Safari, and mobile devices.  
• Involve Real Users. Conduct usability testing with people with disabilities to identify issues that tools might miss.  
• Stay Updated. Accessibility standards are constantly evolving, so it’s essential to regularly check tools for updates and refer to the WCAG guidelines.

Make the Web Accessible with GeneratePress and GenerateBlocks

GeneratePress and GenerateBlocks empower you to build fast, flexible, and accessible websites without sacrificing performance. By prioritizing semantic HTML, ARIA support, high-contrast design, and keyboard navigation, you can create digital experiences that welcome everyone.

GenerateBlocks 2.0 is a powerful WordPress plugin that offers a streamlined set of blocks for creating high-performance websites. Among its versatile features is the Tab Block, a dynamic tool that organizes content into tabbed sections, thereby enhancing user experience and site navigation. 

In this blog post, we’ll dive into how the Tab Block works in GenerateBlocks 2.0, its structure, customization options, and practical applications, ensuring you can leverage it effectively for your website. In the Nova one-page Starter Site, the tab block is used to display product features in a compact and elegant section; therefore, we will use its design and structure as an example. 

The Tab Block in GenerateBlocks 2.0

The Tab Block in GenerateBlocks 2.0 allows you to create tabbed content sections, making it easy to present information in a compact, organized, and visually appealing way. It’s ideal for scenarios where you want to display multiple pieces of content, such as product features, without overwhelming the user with a cluttered layout. By dividing content into tabs, you easily improve readability and engagement, as users can switch between sections with a click. In the Nova Starter Site, the Tab Block is used to showcase product features with a container block showing features and images in the Tab Items area.

Introduced in earlier versions and refined in GenerateBlocks 2.0, the Tab Block is part of our commitment to lightweight, performance-focused design. It’s built to work seamlessly with the WordPress block editor and integrates with GenerateBlocks’ other blocks, like Containers and Buttons, for maximum flexibility.

Structure of the Tab Block

The Tab Block in GenerateBlocks 2.0 is a composite block, meaning it’s made up of nested blocks that work together to create the tabbed interface. Here’s a breakdown of its core components:

Tab Block 

The parent Tab Block wraps both the Tab Menu and Tab Items, ensuring they function as a cohesive unit. It manages interactivity, such as showing or hiding Tab Items when a Tab Menu is clicked. This modular structure allows you to customize every aspect of the tabs, from their appearance to their behavior, without needing custom code.

Tab Menu 

This houses the Tab Menu blocks, which act as the clickable tabs users interact with. Each Tab Menu contains a Text Block styled to look like a tab, displaying the tab’s title, such as each feature. The order of Tab Menus corresponds to the order of the tabbed content within Tab Items.

Tab Items 

The Tab Item blocks hold the content for each tab. Each Tab Item is a Container Block where you can add any content, such as text, images, videos, or other GenerateBlocks blocks. The first Tab Item corresponds to the first Tab Menu, the second to the second, and so on.

The Nova Starter Site contains a Tab Block with four Tab Menus and corresponding Tab Items, styled locally to provide an elegant and interactive way to show product features in action. This Starter Site can be easily customized to match any brand.

How to Add and Set Up the Tab Block

Adding and configuring the Tab Block in GenerateBlocks 2.0 is straightforward. Follow these steps to get started.

Step 1: Insert the Tab Block

Open the WordPress block editor for the page or post where you want to add tabs. Click the Block Inserter (+) and search for “Tabs” under the GenerateBlocks section. Choose the Tab layout you desire: Horizontal, Vertical, or Button tabs. 

Insert the Tabs Block. By default, it comes with two Tab Menus and two Tab Items pre-configured.

Step 2: Set up Styles

When adding a new Tab Menu and Tab Item, GenerateBlocks will duplicate the last grouping. As such, to streamline workflows, build out the individual tab framework first with the styling added to your first tab grouping prior to adding more Tab Menu/Tab Items.

Step 3: Add or Remove Tabs

To add a tab, select the Tab Block or any of its components (Tab Menu or Tab Items). Click the Add Tab Item icon in the block toolbar. This adds a new Tab Menu and a corresponding Tab Item, maintaining the connection between them.

To remove a tab, select the Tab Menu or Tab Item you want to delete and press the delete key or use the List View menu to remove it. Ensure you delete both the Tab Menu and its corresponding Tab Item to avoid mismatches. The order of Tab Menus and Tab Items must match for proper functionality. The first Tab Menu controls the first Tab Item, the second controls the second, and so forth.

Step 4: Add Content to Tab Items

Click on a Tab Item to edit its content. Add any blocks you like, such as Headlines, Paragraphs, Images, or even nested Container Blocks for complex layouts. Repeat for each Tab Item to populate your tabs with relevant content.

Step 4: Customize Tab Menus

Select a Tab Menu and edit its text to reflect the tab’s purpose (e.g., “Tab 1” to “Specifications”). Use the block settings to style the menu, including typography, colors, padding, and borders. In the Nova example, these styles are set locally in the block settings. For consistency, you can duplicate a styled Tab Menu and modify only the text for other tabs.

Customizing the Tab Block

GenerateBlocks 2.0 offers robust customization options for the Tab Block, allowing you to tailor its appearance and behavior to match your site’s design.

Here are the key settings available in the block editor:

1. Default Opened Tab

In the Tab Block’s settings, you can specify which tab is open by default when the page loads. Choose which tab you’d like to see open on default from the drop down. 

2. Transition Effects

Adjust the transition effect when switching between tabs to enhance the user experience. These settings are found in the Tab Block’s default options. 

Dynamic Content Integration

With GenerateBlocks 2.0’s dynamic tags system, you can populate Tab Items with dynamic content, such as post meta or custom fields from tools like Advanced Custom Fields (ACF).

This is particularly useful for creating tabs that display data-driven content, like product specifications or user profiles.

Practical Applications of the Tab Block

The Tab Block’s versatility makes it suitable for a wide range of use cases. Here are some examples of how you can use it on your website:

Product Pages

Create tabs for “Description,” “Specifications,” “Reviews,” and “Shipping” to organize product details clearly. Use dynamic tags to pull in custom fields for specs or reviews.

FAQs

Group related questions into tabs like “General,” “Billing,” and “Support” to make answers easy to find. Combine with the Accordion Block for a nested FAQ structure.

Team or Portfolio Pages

Showcase team members or projects in tabs, with each tab containing a bio, photo, or project details. Add images or videos to Tab Items for a rich presentation.

Tabbed Menus

Design a tabbed navigation menu for categories or services, using the Container-based Tab Button type to include icons or custom layouts. Link tabs to specific sections or pages using hash links.

Educational Content

Organize course modules or tutorials into tabs, allowing users to switch between lessons without leaving the page. Embed videos or interactive elements within Tab Items.

Performance Considerations

GenerateBlocks 2.0 is designed with performance in mind, and the Tab Block is no exception. Unlike some heavier tab implementations, GenerateBlocks’ Tab Block:

• Generates minimal CSS, only for the blocks in use.
• Outputs static HTML/CSS on the frontend for faster load times.
• Avoids excessive JavaScript, relying on lightweight interactions for tab switching.

Tips for Using the Tab Block Effectively

• Keep Tab Titles Clear. Use concise, descriptive titles for Tab Menus to guide users intuitively.
• Optimize for Mobile. Test tab layouts on mobile devices and adjust spacing or font sizes for readability.
• Test Accessibility. Ensure Tab Menus have proper ARIA labels for screen readers, which GenerateBlocks 2.0 supports natively.
• Combine with Other Blocks. Nest Query Loops or Grid Blocks within Tab Items for dynamic or grid-based content displays.

Troubleshooting Common Issues

• Tabs Not Switching. Ensure Tab Menus and Tab Items are in the correct order and haven’t been accidentally deleted or reordered.
• Styling Not Applying. Ensure that styles, whether local or global, are set appropriately. Styles can be set to the Tab Menu and Tab Item Blocks as well as to the content within. Check styles to ensure they’re set correctly.
• Performance Concerns. Minimize nested blocks within Tab Items to reduce rendering overhead.

If you encounter issues, the GeneratePress support team is available via our official support system, and the GeneratePress Facebook Community is available for community support. 

Tabbed Content Creates Engaging Layouts

The Tab Block in GenerateBlocks 2.0 is a versatile and lightweight solution for creating tabbed content that enhances user experience and site organization. Its modular structure, extensive customization options, and performance-focused design make it a standout feature for WordPress developers and designers. 

Whether you’re building product pages, FAQs, or tabbed menus, the GenerateBlocks Tab Block empowers you to create professional, engaging layouts with ease.

We’re thrilled to announce the alpha release of two powerful new additions to GenerateBlocks Pro: the Navigation Block and the Site Header Block. These innovative blocks, included in GenerateBlocks Pro 2.2, are designed to give you even more flexibility and control when building fast, lightweight, and professional WordPress websites using the block editor. 

As part of our ongoing commitment to enhancing the GeneratePress experience, these alpha releases are now available for early adopters to test and provide feedback. You can download the alpha release in your account.

Why These Blocks Are Important

As WordPress transitions to Full Site Editing (FSE), building responsive, accessible, intuitive, and fast-loading navigation and site headers is essential. No longer are headers and navigation relegated solely to the WordPress Customizer. Now, you can easily build headers and navigation with the same block-based methodology used to create any page. This not only simplifies the design process but also ensures compatibility with WordPress’s evolving ecosystem, giving you the freedom to craft modern, future-proof websites with ease.

Navigation Block

The Navigation Block empowers you to create dynamic and responsive navigation menus directly within the WordPress block editor. The block consists of a main Navigation Block and several child blocks. Each block provides extensive controls for styling and customization. With this block, you can:

• Build custom navigation menus with full control over layout, typography, and colors.
• Create full function drop-down navigation for sites with complex information architecture. 
• Ensure responsiveness with specific settings for any viewport, from desktop, mobile, and tablet.
• Choose from numerous lightweight animation effects, including multiple sliding and fading effects. 
• Leverage GenerateBlocks lightweight codebase for optimal performance.

For a deep dive into its features and setup, check out the Navigation Block documentation.

Site Header Block

The Site Header Block takes header customization to the next level, allowing you to craft unique, block-based headers that replace the default GeneratePress site header. Key features include:

• Complete design freedom using the block editor to add logos, menus, buttons, or dynamic content.
• Support for merging headers with page content for stunning hero sections.
• Precise control over editor width to visualize your design accurately.
• Compatibility with GenerateBlocks for dynamic data and advanced layouts.

Learn more about its capabilities in the Site Header Block documentation.

Why Alpha Release?

This alpha release is an exciting opportunity for GeneratePress users to explore these new blocks and help shape their future. By testing them in real-world scenarios, you can provide valuable feedback to ensure the final versions are polished, stable, and packed with the features you need. 

These blocks are built with the same performance-first philosophy that defines GeneratePress, but as alpha versions, they’re still in active development. We encourage you to experiment in a staging environment before deploying to live sites.

How to Get Started

We recommend testing these new blocks in a staging or test environment, especially in the alpha release. Setting up To start using the Navigation and Site Header Blocks:

• Ensure you have the GenerateBlocks plugin installed.
• Download the GenerateBlocks Pro alpha version in your account.

Site Header Block

The Site Header Block can be used as an individual block on each page, as a reusable block, or it can be used within GeneratePress Elements. For a smaller site with just a few pages, a reusable block might be just what you need. For larger sites, make use of Elements for powerful display capabilities. 

For a simple site, place the Site Header Block on the page. Choose if you’d like a Sticky Header in the settings, or leave the setting set to None.

For the Site Header Block, create a new Block Element in Appearance > Elements and create your site header as desired. Choose the display location in the Element settings. 

Navigation Block

The Navigation Block can be used both within the Site Header Block or independently, such as in a site footer. Upon placement, it will retrieve the published pages within your WordPress site. You have the option also to retrieve the classic WordPress menu system, allowing you to customize the look and feel within the block editor. 

Use the block editor to design your navigation or header, referring to the documentation for guidance.

If you’re using another block-based theme, you can still use the Navigation and Site Header blocks by using a Template Part block.

Test your setup and share your feedback with us, or in the Facebook community. 

What’s Next?

The alpha phase is just the beginning. Based on your feedback, we’ll refine these blocks, add new features, and work toward a stable release. Stay tuned for updates, and watch this space for tutorials to get the most out of these innovations.

We can’t wait to see the incredible headers and navigation menus you create with these new blocks! Dive in, explore, and let us know how we can make them even better.

This version is currently in public testing. You can download it in your account.

You can learn more about this release in our release post.

• Feature: Navigation block
• Feature: Site Header block