Introducing GeneratePress 3.0 – our biggest update ever! With it comes a fresh theme design, modernized flexbox grids, new theme functionality, and overall it’s lighter, faster, and more flexible than ever before.
The GeneratePress Legacy
It has been over 6 years since GeneratePress was launched on WordPress.org. And boy has there been some changes during that time. Not just in WordPress but across all technologies we use to build and view modern responsive websites.
We have seen more and delivered more changes than any other theme in our space. Many have followed our Foundation Theme principles but none have maintained a position in the popular theme list as long as we have.
We believe this is because we have always reliably delivered the most secure, stable, lightweight, accessible, and developer-friendly code we can.
During our years of updates, we have maintained backward-compatibility for 100’s of thousands of websites.
And overall we continued to deliver the fastest theme experience available.
We want to assure you that this legacy lives on and 3.0 will continue to achieve the very highest of standards our users have come to expect. Let’s dive in and take a look at GeneratePress 3.0.
How Big of a Change is 3.0?
It’s huge! Lets begin with some GitHub stats:
- 608 GitHub commits
- 182 changed files
- 17,846 line additions
- 5,166 line deletions
If you’re not a coder then those numbers may mean very little to you. But we can tell you now it’s significantly larger than any previous update we’ve ever done. With this comes a huge responsibility to ensure all existing users will have a trouble-free experience upon upgrading. And we will deliver this by not changing your theme’s behavior unless you choose to do so.
Now let’s take a deeper look at what these changes deliver.
Fresh New Look
Our default install look has held up well over the last 6 years, but with such a significant update we thought GeneratePress deserved a design refresh.
GeneratePress 2.4 Desktop 
GeneratePress 3.0 Desktop 
GeneratePress 2.4 Mobile 
GeneratePress 3.0 Mobile
This new style is the typical design of websites these days. It’s much cleaner, and the header takes up less real estate on desktop and mobile.
It feels great to give GeneratePress a modern look while maintaining backward-compatibility. We’re super excited about this! Of course, the classic design is still 100% achievable and just a few button clicks away.
Flexbox Grid
Changing our grid system from the legacy floats and Unsemantic Grid has been on our roadmap for a long time. The pressing issue was how do we remove that extra weight from the theme without negatively affecting our users who rely on it?
The process began by implementing SCSS to build all our CSS for the theme. This allowed us to split our CSS into parts, and then compile them into complete stylesheets. The result is we could effortlessly maintain two separate main stylesheets in the theme:
- main.css (flexbox version)
- style.css (legacy floats version)
This provided us the solution of a simple option in the Customizer that allows you to change between floats and flexbox.
Existing websites will automatically set floats as the default system in order to maintain backward-compatibility. New sites will default to flexbox, as it’s the future (and it’s so much better).
This update effectively deprecates the float version of the theme. You can change your existing sites to use the flexbox version, but we suggest doing so on a staging site so any issues can be addressed before taking the change live.
Advantages of Flexbox
- Significant reduction in CSS
- Cleaner and lighter HTML by removing helper classes such as
grid-50 - Easier to customize with simple CSS
Moving on we can take a close look at how this and other changes improves the themes performance.
Performance
Performance and the fastest theme debate continues to be the breadwinner of many WordPress technical bloggers. In our own personal tests, we have yet to find any theme in our space that has outperformed GeneratePress 2.4. Make of this what you will but as our community knows, writing the lightest of code has always been our thing. And things just became even lighter.
With that quick interlude over let’s get down to improvements and numbers. NOTE: Quoted file sizes are uncompressed. With GZIP compression you can expect these to be reduced by around 65%.
Fewer requests and 55% savings on Main CSS
Yep – you read that right. And we even surprised ourselves. Let’s take a look how.
Once we were done replacing Floats and Unsemantic Grid with Flexbox, we looked at how the overall CSS payload could be delivered more efficiently. Our approach was to examine the themes CSS and put them into one of three groups:
- Move to a separate Component Stylesheet
- Load CSS dynamically
- Keep it in main.css
Component Stylesheets
To help us simplify our main stylesheet, we moved some components to their own stylesheets, and we load them only if they’re needed.
For example, why should your site load CSS for comments if you’re not using comments? So now, the comments CSS is loaded separately only on pages/posts that have/allow them.
The same goes for all the CSS for your top bar, footer bar, and footer widgets. With Block Elements now a thing, it’s not guaranteed you’ll want to use these elements. Therefore, it only makes sense to load the CSS for them if they’re in use.
Splitting the CSS in this way does incur more network requests. However, they are smaller which is better for servers running HTTP/2.0, or they can be simply combined/minimized using your favorite optimization and caching plugins.
Dynamic CSS
Dynamic CSS has been part of GeneratePress for a long time, and simply writes CSS inline when it is required. This CSS is for optional theme elements and only exists if they are enabled. That includes CSS for the navigation search, back to top button, and the Dropdown – Click options.
If you’re a GP Premium 1.11 user then you have the option to keep it inline or write it to an external CSS file.
Main CSS
With the flexbox option enabled GeneratePress loads a single main.css stylesheet. Lets compare:
GeneratePress 2.4
unsemantic-grid.min.css– 12.3kbstyle.min.css– 26.2kbmobile.min.css– 3.7kb
Total: 3 HTTP Requests 42.2kb
GeneratePress 3.0
main.min.css– 18.9kb
Total: 1 HTTP Requests 18.9kb
Thats a huge 55% saving on a default install of GeneratePress.
And it’s a new main stylesheet that won’t apply to existing websites. Wow, what an opportunity to rebuild major aspects of the theme that we couldn’t touch before!
Other CSS changes
Update RTL Stylsheets
RTL sites now benefit from a new minified stylesheet rtl.min.css. Aside from being more performant, it corrects many styling issues in the legacy stylesheet.
box-sizing: border-box
With Flexbox enabled, all box-sizes will be set to border-box. The noticeable difference will be more accurate container widths where padding is kept on the inside. This will resolve sizing issues where plugin developers opt to leave this out of their code.
Javascript
Following in the footsteps of our CSS, we made a decision to combine the a11y.min.js and menu.min.js files into a single main.min.js file. This applies to both Float and Flexbox versions of the theme.
SVG Icons Now Default
We introduced the SVG Icons options a while ago but kept font icons as the default. As of 3.0, SVG icons are now the default for new theme installs.
Performance Roundup
The file sizes we mentioned aren’t gzipped, which they will be when you serve them on your website. Here’s a completely default install of WordPress and GeneratePress 3.0 – no plugins, content etc..
By default, GeneratePress 3.0 requests only two files, totalling 7.5kb!
That’s right, our main stylesheet is smaller than the style.min.css file WordPress loads by default for block styling…
Making GeneratePress as lightweight as possible, whilst introducing innovations, maintaining functionality, and ensuring backward-compatibility has been a never-ending obsession of ours. With the countless development hours spent shaving down size we are very happy with these results. And we’re not sure things can get much smaller, but it definitely won’t stop us from trying.
New Functionality
As ever with GeneratePress we look to add functionality that can do more than one thing. We’re never going to add single click bells and whistle features. Those kinds of things are not everyone’s requirements and are generally limited in scope. With GeneratePress 3.0 we maintained our ethos. Let’s explore these two new functions.
generate_menu_bar_items
Yes, a new hook! It doesn’t sound exciting, but we personally love this one. With it, we can hook non-menu item elements such as buttons, icons and whatever else your design requires into generate_menu_bar_items. Anything added there will automatically display in your navigation and mobile headers. Better still, GeneratePress will position and style them for you.
Combine this with Block Elements in GP Premium and there are no limitations on what you can add.
Note: The existing mobile-bar-items class no longer exists in the flexbox version due to this filter.
generate_do_template_part()
We’ve introduced a new function which adds the loop to your pages. This is one of the most exciting functions we have added to the theme, as it means we can now filter the loop! Doesn’t sound exciting? That’s fair, but let’s see if we can convince you otherwise.
This function allows you to replace the default template used to display content throughout your posts, pages, and archives.
If you’re a coder, you can just write your own templates and hook them into the theme – no more messing with custom page templates in your child themes!
What if you’re not a coder? Imagine building your custom templates as Block Elements and dynamically displaying them in place of the standard theme loop across your site. You excited now? We sure are.
Old Option Migrations Removed
Prior to GP 2.0, we had the following defaults:
- Font Awesome enabled
- Dynamic CSS cache turned off
- Open Sans as default font family
- Blog post content set to full
The functions that kept these defaults for sites older than 2.0 have been removed in 3.0. This means if you’re updating from a 1.x install:
- Font Awesome will not be active anymore
- Dynamic CSS cache will be turned on
- Your default font family will be set to System Stack
- Blog post content will be set to excerpt
Template Files Changes
There are some template files changes you should be aware of if you’re using a child theme and have overwritten any of the core template files.
Where possible, generate_do_microdata() has been removed from template files. Instead, we’re using the new generate_after_element_class_attribute to append the microdata to the element after the class attribute.
Another change we did was replace the standard get_template_part() function with generate_do_template_part().
Ideally, you should compare your custom template files with the new files in GeneratePress 3.0, and update them as needed.
The following files have been updated:
- archive.php
- 404.php
- content-404.php (new)
- content-link.php
- content-page.php
- content-single.php
- content.php
- header.php
- index.php
- page.php
- search.php
- searchform.php
- sidebar-left.php
- sidebar.php
- single.php
That’s It!
This is a major update that we’re incredibly excited about. It completely modernizes GeneratePress and puts us all in a great position for the future as things continue to evolve.
Thanks for reading, and thanks for using GeneratePress!
Full Changelog
3.0.0
- New: Flexbox layout option – see blog post for more info
- New: Default mobile header when using aligned nav + flexbox layout
- New: generate_before_do_template_part hook
- New: generate_after_do_template_part hook
- New: generate_do_template_part filter
- New: Better option migration system
- New: generate_post_date_show_updated_only filter
- New: generate_navigation_search_menu_item_output filter
- New: style-rtl.min.css and enqueue manually
- New: generate_load_child_theme_stylesheet filter
- New: generate_before_navigation hook
- New: generate_after_navigation hook
- New: generate_page_class filter
- New: generate_is_using_hatom filter
- New: generate_after_element_class_attribute filter
- New: generate_menu_bar_items hook
- New: generate_show_entry_header filter
- New: Container width default set to 1200
- New: Navigation location default set to float right
- New: Navigation color defaults updated
- New: Button color defaults updated
- New: Footer color defaults updated
- New: Site title font size default updated
- New: Search button added to search widget
- New: Archive post navigation design
- New: generate_comments_title_output filter
- New: generate_get_the_title_parameters filter
- New: generate_has_default_loop filter
- New: generate_localize_js_args filter
- New: is-left-sidebar and is-right-sidebar classes added to sidebars
- New: Add aria-label to dropdown menu arrows on mobile
- New: Hide pagination arrows from screen readers
- New: Prepend pagination numbers with “Page” for screen readers
- Fix: Close other sub-menus when opening a new one on touch devices
- Fix: Footer bar menu spacing on mobile
- Fix: Text aligned container width preview in Customizer when using full-width-content
- Fix: Remove disable content title toggle in editor if it doesn’t apply to front-end
- Fix: One container margin based on default content padding
- Fix: Nav aligned left when using RTL languages
- Fix: Wide block alignment in the editor
- Tweak: Update screen-reader-text CSS
- Tweak: Remove all :visited references from dynamic CSS
- Tweak: Make sub-menu dropdown box-shadow harder
- Tweak: Remove content margin-top if it’s the first child in parent
- Tweak: Remove featured image margin-top if it’s the first child in parent
- Tweak: Only print entry-meta wrapper to page if it contains meta
- Tweak: Rebuild navigation search javascript
- Tweak: Remove all esc_attr() functions from CSS and escape entire output
- Tweak: Move all CSS and JS into assets folder
- Tweak: Break all CSS up into individual .scss files
- Tweak: Set SVG icons as default
- Tweak: Move font icon CSS into separate file
- Tweak: Load comments CSS only on pages that have comments
- Tweak: Remove speak CSS from font icons
- Tweak: Load top bar/footer bar/footer widget CSS separately if using flexbox layout
- Tweak: Remove display: inline from alignleft/right classes
- Tweak: Remove parent theme dependencies from styles
- Tweak: Fix footer widget default spacing
- Tweak: Remove HTML comments from end of elements
- Tweak: Combine a11y.js and menu.js
- Tweak: Add correct paragraph margin to block editor
- Tweak: Remove old migrations from 2.0 (font awesome, dynamic css cache, font family and blog post content)
- Tweak: Change Layout metabox option to select dropdowns
- Tweak: Change Page Builder Container label to Content Container
- Tweak: Remove itemprop attributes if microdata is turned off
- Tweak: Un-focus back to top button once the top is reached
- Tweak: Remove close nav search on document click
- Tweak: Set sub-menu open left on RTL languages by default
- Tweak: Remove mixed up alignleft/right classes when using RTL languages
- Tweak: Remove sub-menu open left CSS when using RTL languages
- Tweak: Use aria-label in back to top button instead of screen-reader-text
- Tweak: Hook comments template into generate_after_do_template_part
- Tweak: Use flexbox for author page header
- Tweak: Simplify navigation dropdown CSS
- Tweak: Set variable for get_body_class where necessary
- Tweak: Use separate SVGs for different arrow directions instead of CSS
- Tweak: Use class for navigation sub-menu direction
- Tweak: Clean up sub-menu direction CSS
- Tweak: Remove footer widget and header layout body classes when using flexbox
- Tweak: Close other sub-menus when another is opened
- Tweak: Inherit tagline/main nav/widget title/widget content/site footer font size if not set
- Tweak: Show name/email asterisk only if fields are required
- Tweak: Only remove margin-bottom from last element on page if it’s a paragraph
- Tweak: Remove .wp-smiley CSS
- Tweak: Add single post navigation to generate_footer_entry_items filter
- Tweak: Hook archive post navigation into generate_after_loop hook
- Tweak: Use aria-label for read more links/buttons instead of screen reader text
- Tweak: Move microdata to generate_after_element_class_attribute where possible
- Tweak: Move back to top button CSS to dynamic CSS if enabled
- Tweak: Move navigation search CSS to dynamic CSS if enabled
- Tweak: Move dropdown-click CSS to dynamic CSS if enabled
- Tweak: Remove skip-link-focus.js
- Tweak: Disable old Beaver Builer full-width compat CSS when using flexbox layout
- Tweak: Remove CSS to disable comments link on single posts
- Tweak: Add featured-image class to singular featured images
- Tweak: Don’t output body font family if it’s the default that exists in stylesheet
- Tweak: Allow 0 value in dynamic CSS
- Tweak: Remove mobile navigation static CSS as it’s added dynamically already
- Tweak: Improve checkMobile() javascript performance
- Tweak: Prevent font-size values from being set to 0
- Tweak: Replace deprecate .load() with on(‘load’) in block-editor.js
- Tweak: Change navigation search line-height to 1
- Tweak: Reduce size of author archive avatar
- Tweak: Add padding-left to cancel comment reply link
- Tweak: Update navigation color and header presets
- Tweak: Add [type=”search”] to .navigation-search input CSS selector
- Tweak: Better style GP core button in block editor
- Tweak: Improve comment cookie consent display across browsers
- Tweak: Add is-logo-image class to site logo
- Tweak: Remove type attribute from scripts and styles
- Tweak: Add margins to headings in the editor
- Template change: Removed generate_do_microdata() from sidebar.php and sidebar-left.php
- Template changes: Added generate_do_template_part() to all templates with a loop
Leave a comment