A New Era for the Genesis Framework: Recapping the Biggest Changes and How to Work with Them

/ By / Genesis Framework / 11 Comments

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 13 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 16 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 28 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 31 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 473

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 13 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 15 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 16 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 28 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 30 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 31 in /home/customer/www/carriedils.com/public_html/wp-content/plugins/gistpress-master/includes/class-gistpress.php on line 559

It’s been roughly one year since WP Engine acquired StudioPress, the makers of the Genesis Framework. There’s been a lot of forward progress, but it may have left some people feeling unsure about how to work with Genesis or best take advantage of new features

In this post, I’d like to talk about some of those changes and how you can start using them as you customize or develop child themes.

Note: This post contains affiliate links. Every time you click on one and buy something, a hole opens up in my roof and dollar bills rain down on my head. Unfortunately, it’s never enough money to fix the hole.

Summary of features discussed in this article:

New features in Genesis 2.8 to 3.1

Theme Onboarding (Introduced in Genesis 2.8)

Imagine a world where you install a child theme and … it actually looks like the demo! As of Genesis 2.8, developers can take advantage of a “theme onboarding” feature that gives end users a one-click option for installing recommended plugins, importing demo content, setting up the home page (or other pages), and creating/assigning a menu.

Brilliant.

Using theme onboarding

While Genesis supports this lovely feature, it’s up to theme developers to add onboarding to Genesis child theme(s) they create. You can only take advantage of this one-click setup if you’re working with a theme that specifically implements this.

At the time of this writing (and to the best of my knowledge), these are the StudioPress themes that currently include support for one-click setups:

If you know of other themes that support it or are a third-party theme developer and would like me to include your theme in the list, leave a comment.

Who benefits from theme onboarding?

  • People who sell Genesis child themes: Your support costs just went down thanks to the ability to walk your users through theme setup with a single click.
  • People who buy Genesis child themes: With a single click you can have your site set up to look like the demo, complete with imported sample content, images, and a menu. Of course, you still need to put in your own content, but this gives you a great starting point.

Genesis and Gutenberg (WordPress 5.0)

Unless you’ve been hiding under a rock or are simply new to the world of WordPress, you’ve heard about Gutenberg, a “block” editor that gives users a more intuitive way to create rich content.

This is less about what Genesis brings to the table and more about what Genesis child themes make available, specifically support for certain blocks and corresponding block styles.

While you can use the new editor with any StudioPress theme, the following ones have additional support built in for wide image alignment and block-editor styles to match front-end styles (essentially giving you a more realistic preview of what your published content will look like).

* These themes also showcase block-based home page layouts.

Atomic Blocks plugin

In addition to default blocks provided by Gutenberg, there are also a variety of plugins that provide additional blocks you can use in your content. Plenty of them work just fine with Genesis, but the one I want to specifically call out is Atomic Blocks.

It includes things like a Call-To-Action block, a Pricing Table block, an Accordion block, and blocks for other types of popular content.

In case you didn’t know, Atomic Blocks is also part of the WP Engine family. This is excellent because it means there’s plenty of reason to believe that Atomic Blocks will continue to evolve (and that it will work seamlessly with Genesis).

Block-based homepage layouts

While we’re on the topic of home page layouts with Gutenberg, here’s how you can leverage the block editor to create one in any child theme.

Block-based layouts for any page

The idea of skipping the widgets and using blocks to layout a homepage is fantastic. AND, I probably don’t need to add (but will anyway) that you can use the block editor to create fancy page layouts for any page or post. 🙂

Before moving on, I’d be remiss if I didn’t drop a link to Bill Erickson’s articles on Gutenberg and his Developer’s Guide to Gutenberg Theme Development. He dives deep into code samples and explanations you’ll want to read if you’re creating child themes and want to maximize their Gutenberg-ness.

Genesis and AMP (Introduced in Genesis 3.0)

AMP is a technology created by Google to optimize a site for fast, nearly instant loading, and smooth-loading web pages across all devices. With Genesis 3.0 comes AMP specific tools to detect if the AMP plugin for WordPress is active on a site, and if so, output AMP compatible code.

StudioPress Developer Docs

Using Google AMP with Genesis

The idea of AMP is a little contentious, but, for site owners wanting to use it, Genesis has made it easier for you. Go here for instructions for implementing AMP on your site. Note that not all child themes are built in a way that’s compatible with AMP (for example, AMP doesn’t allow for the use of JavaScript, so if you’ve got a child theme loading any JS, too bad). Genesis doesn’t fix that for you (though Genesis does include a script for a responsive menu you can leverage in a child theme).

If you’re a developer and want to know more on the subject of AMP, look no further than Bill Erickson’s article on Building a Native AMP WordPress site.

Who benefits from Genesis AMP Support?

Custom loop with query_args (Introduced in Genesis 3.0)

For many moons, Genesis had a documented “Easter Egg” you could use in conjunction with the Blog Page template (page_blog.php) to generate a custom loop. This was done by creating a page and a custom field with the name query_args and then assigning that field a particular value.

It was an easy way to create an archive for a particular category, tag, etc.

Over 5 years ago, Bill Erickson educated me on why I shouldn’t use the Genesis Blog Page Template. I listened and stop using that Easter Egg awhile back.

In Genesis 3.0, the page_blog.php template was removed, but support was added to use the query_args custom field on any page to invoke a custom loop.

Here’s a quick rundown of how it works.

function genesis_do_loop() {
if ( is_singular( 'page' ) && genesis_get_custom_field( 'query_args' ) ) {
$paged = get_query_var( 'paged' ) ?: 1;
/*
* Convert custom field string to args array.
*/
$query_args = wp_parse_args(
genesis_get_custom_field( 'query_args' ),
[
'paged' => $paged,
]
);
genesis_custom_loop( $query_args );
} else {
genesis_standard_loop();
}
}
view raw loops.php hosted with ❤ by GitHub

When the genesis_loop is run, there’s a conditional on line 22 that checks whether or not the loop is being run on a single page and whether there’s a custom field with the name “query_args”. If so, it takes the value of that field and passes it as an argument into genesis_custom_loop.

function genesis_custom_loop( $args = [] ) {
global $wp_query, $more;
$defaults = []; // For forward compatibility.
$args = apply_filters( 'genesis_custom_loop_args', wp_parse_args( $args, $defaults ), $args, $defaults );
$wp_query = new WP_Query( $args ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited -- Reset later.
// Only set $more to 0 if we're on an archive.
$more = is_singular() ? $more : 0; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited -- Handle archives.
genesis_standard_loop();
// Restore original query.
wp_reset_query(); // phpcs:ignore WordPress.WP.DiscouragedFunctions.wp_reset_query_wp_reset_query -- Making sure the query is really reset.
}
view raw loops.php hosted with ❤ by GitHub

From there, the custom loop runs and — with no code — you get a custom query. Pretty cool.

Templates Files in the Root Directory (Introduced in Genesis 3.0)

In Genesis 3.0, the following template files were removed:

  • 404.php
  • page.php
  • page_archive.php
  • page_blog.php
  • search.php
  • single.php

These templates existed for backward compatibility and weren’t needed (the index.php in Genesis, which calls the genesis() function handles all scenarios those templates would be needed for.

But removing these templates caused breakage for some older themes and customizations added by users. So, one day after they were removed, these four were added back in (version 3.0.1):

  • 404.php
  • page.php
  • search.php
  • single.php

What about the other two? In both cases, the Genesis development team put code in place to “gracefully migrate” pages using page_blog.php or page_archive.php.

I have a feeling that the 4 remaining templates will be pulled from Genesis at some point in the future. I’m unaware of how child themes were relying on those templates in a way that would cause breakage, but I’d certainly steer clear of them in the future.

If you’re appropriately using the WordPress Template Hierarchy and following Genesis Child Theme Best Practices, you’ve got nothing to worry about.

In the past, if you wanted to customize the copyright or “credits” text that appears in the footer of a website, you had to manually make the change in the code, using the genesis_footer_creds_text() filter or use the Genesis Simple Edits plugin.

Praise the Lord and pass the apple pie because now you can easily change that text from within the Theme Customizer. Go to Appearance > Customize to launch the customizer and, from there, go to Theme Settings > Footer.

Screenshot showing Customizer > Theme Settings > Footer

Note that the genesis_footer_creds_text() filter NO LONGER “WORKS.” If you were using that filter to customize the footer creds, those customizations should automatically be pulled into the customizer upon updating to Genesis 3.1. Use the customizer moving forward to make changes to footer text.

Toggle breadcrumbs, the title, or featured images (Introduced in Genesis 3.1)

  • Toggle on/off breadcrumbs on a per-page basis. You can turn on (or off) breadcrumbs for an entire site via the Theme Customizer, but now you can also toggle them on a per page basis.
  • Toggle on/off page or post title. This is awesome! Let’s say you want to include the post title as part of the actual post content for some reason (i.e. you’re using the cover image block at the top of a post and it includes the title). In that case, you wouldn’t want to display the post title. In the past, you could achieve this programmatically or by using Bill Erickson’s Genesis Title Toggle plugin. But now? This feature is baked right into Genesis core.
  • Toggle on/off featured images. Displaying featured images on archives is another site-wide setting available from the Theme Customizer. This new setting enables you have a featured image that displays on a content archive, but doesn’t display on the post itself.

To put it shortly (or not)…

Genesis is not dead. Far from it. While a lot of new front-facing features were added over the past year, many changes in the framework happened behind the scenes. For instance, deprecated code (such as XHTML output) was completely removed, the organization and structure of the code was overhauled, and there was a decisive move to follow a more object-oriented approach.

With a customer base of some 250k+ users, making big changes to software (especially removing some components of backwards compatibility) was risky, but the Genesis development team has done a solid job of mitigating those risks. I appreciate that they’re moving the software forward with a continued focus on leanness and performance.

Now comes the part of educating folks on how to leverage these changes. I’m attempting to do that a little bit with this article, but here are some other developers and resources you can look to for help.

Happy customizing!

11 thoughts on “A New Era for the Genesis Framework: Recapping the Biggest Changes and How to Work with Them”

  1. David

    Thanks, Carrie. I found this via the FB group and was particularly wondering about the ability to toggle a page title. You say it’s “baked into the core of Genesis”. I just started a theme based on Genesis Sample 3.1 and do not see that in the sidebar while editing a page. I assume these controls should be in the right sidebar. I want to remove “Home” from the title of my home page, but leave the paragraph of entry copy. I used to do that with custom CSS, but if there really is a checkbox on the editing page for this, then super. But where is it?

    Reply
    1. David

      OH wait. I just found it. It’s the Genesis icon at the top of the page that shows the new Genesis sidebar. All set.

      Reply
  4. Nahuai Badiola

    Great summary Carrie!

    I’ve been actively following all the updates of the last year and it’s exciting to see all the improvements they have done. And all the integration around the block editor.

    I also love Genesis onboarding. As developer gives you tools to make the client life easier.
    Plus, leaving the theme like in the demo un 1-click is like magic. Specially for users that don’t want to “fight” with widgets, HTML….

    BTW, I also keep a list of the Gutenberg optimized child themes on my notes app (and web).
    I paste it here in case you want to include some of them (there are also some of 3rd-party).

    Genesis Sample
    Authority Pro
    Essence Pro
    Monochrome Pro
    Revolution Pro
    Breakthrough Pro
    Magazine Pro
    Infinity Pro
    Altitude Pro
    Hello! Pro 3 (Brand ID)
    Refined Pro (Restored 316)
    Market Pro (Restored 316)
    Divine Pro (Restored 316)
    Corporate Pro (SEO themes)
    Studio Pro (SEO themes)
    Mai Lifestyle Pro (BizBudding)
    Jessica Woo (9seeds)
    Aspire Pro (Appfinite)

    The ones with Genesis onboarding (and block based homes) are the same you mention + Hello! Pro 3 from Brand ID (kudos for them).

    See (read) you in the next Genesis Shapers meeting. 🙂

    Reply
  5. David Hedley

    Hi Carrie, I’d love to get your thoughts on where we go from here in 2022 with the Genesis Framework, and whether you feel using Genesis Sample as a starting point for a new production site is still a safe option given the launch of full site editing? I really do not want to lose the genesis way of doing things, but also need to ensure a certain degree of future-proofing for client websites.

    Reply
    1. Carrie Dils

      Hey David, you are not alone with your questions! WP is a bit of a moving target at the moment and finding the balance between the “old” and “new” is a frustration many devs (myself included) are feeling. I think we’re in a transitional period where the shelf life of a theme is shorter, so while future-proofing is still the ideal, set expectations that shelf life is probably ~2 years.

      Some things we do know:

      * GF will continue to be maintained. It is stable and therefore still a legitimate choice for new builds
      * FSE replaces a lot of what Genesis fundamentally does (hooks/filters)
      * Theme.json is a path to a hybrid approach to incorporating new WP features into “classic” themes

      I’m still using Genesis on new builds and trying to take the hybrid approach. This is largely just a practical move as I’m not ready to increase production time with my own learning curve. I’m trying to stay on top of what’s coming down the pipeline for my own knowledge, but have limited time to explore new workflows. So, for the time being, I’m still liking Genesis + theme.json.

      I have more thoughts and probably ought to just write a post. LOL

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Carrie Dils uses Accessibility Checker to monitor our website's accessibility.