Framework.php of the Genesis Framework

Putting the Framework in Genesis Framework

In the time that I’ve worked with the Genesis Framework, I’ve learned the biggest barrier to entry for folks is understanding how to interact with it. Because the Genesis Framework doesn’t follow the typical templating model of other WordPress themes, it requires a learning curve for both seasoned theme developers and beginners alike.

But once you cross that learning curve, you will soar like the eagle.

Keep reading for a visual step through of the core of the framework and let’s connect the dots.

A Framework of Hooks

All the Hooks! meme

One of the unique things about Genesis is its heavy use of action hooks and filters. Unlike traditional WordPress themes or starter themes like _s, Genesis uses templates sparingly and hooks liberally.

What that boils down to is that most of your basic customizations to a Genesis child theme happen via these hooks versus creating templates.

Let’s peel back the framework files and I’ll show you what I mean.

Framework.php

Here she is, in all her glory.

function genesis() {
get_header();
do_action( 'genesis_before_content_sidebar_wrap' );
genesis_markup( array(
'html5' => '<div %s>',
'xhtml' => '<div id="content-sidebar-wrap">',
'context' => 'content-sidebar-wrap',
) );
do_action( 'genesis_before_content' );
genesis_markup( array(
'html5' => '<main %s>',
'xhtml' => '<div id="content" class="hfeed">',
'context' => 'content',
) );
do_action( 'genesis_before_loop' );
do_action( 'genesis_loop' );
do_action( 'genesis_after_loop' );
genesis_markup( array(
'html5' => '</main>', //* end .content
'xhtml' => '</div>', //* end #content
) );
do_action( 'genesis_after_content' );
echo '</div>'; //* end .content-sidebar-wrap or #content-sidebar-wrap
do_action( 'genesis_after_content_sidebar_wrap' );
get_footer();
}
view raw framework.php hosted with ❤ by GitHub

This file is where the genesis() function is defined; Anytime a template file calls genesis(), it’s loading up this code.

Let’s break down the basic structure.

The function is book-ended by two functions: get_header() & get_footer(). These functions are standard WordPress fare for calling the header.php and footer.php template files.

In-between those functions, we’ve got 7 action hooks and a smattering of HTML markup. These hooks are like little placeholders, or bookmarks, in the code where you can come along later and insert your own bits of code (or pictures of kittens).

Let’s see how this function would translate to an individual post.

Single Post

I dare you – right now – to stop reading this post, go open up the files for the Genesis Framework and look for a template file in the root directory called single.php.

Other than documentation, that file has a single line of code. If you went and looked at the file (or are a Genesis buff), you already know what that code is:

genesis();

Yep. The genesis() function is called which invokes all the good stuff we looked at in framework.php.

How does it look on a single post? Well, something like this:

Example of a single post in a browser

This is a pretty vanilla screenshot, but you can see the post has a header, a content area, and other things below that (like footer widgets and a footer) not captured just because that would make a super long screenshot. The output on this post is a result of the code in framework.php.

Put it Together

There’s a fun little plugin called Genesis Visual Hook Guide that enables you to see where each of those 7 action hooks from framework.php come into play on the page.

It shows other hooks, too, because some of those “original 7” have more hooks that latch onto them. Hooks all day long!

Let’s see what our single post looks like with the Genesis Visual Hook Guide overlay.

Sample Post with Genesis Visual Hook Guide Overlay

Pretty cool. With the hook guide, we can see exactly where on the page a particular hook lives. That means that if we want to add something to the post (e.g. an after entry widget), we look for the spot where we want to put it and then attach a function to that particular hook.

Slow Motion Replay

In case you weren’t duly wowed by the Genesis Visual Hook Guide overlay, I’ll break down the correlation between framework.php and our post one step further.

Using the color codes, you can see what the get_header() outputs on the page, each of the “original 7” hooks, and (if my screenshot was long), what get_footer() outputs.

Genesis Framework with Hook Overlay

If you want to dig into each of these hooks further, open up those framework files and do a search. For instance, if you want to see where that do_action ( ' genesis_before_content' ) is used to hook content, do a search through the framework files for:

add_action ( 'genesis_before_content',

By the way, I purposely left the above statement hanging as there are multiple functions hooking into that spot. Just search for the first part, though, will net you results.

More simply, you could just search for genesis_before_content and see what you get.

You can start with any of these hooks and work your way back through the framework to see what’s going on behind the scenes.

Continue Your Learning

If you’d like to continue learning how to work with and make customizations to the Genesis Framework, I’d encourage you to check out my course in the LinkedIN Learning library (formerly Lynda.com): Customizing Themes with Genesis for WordPress.

p.s. If you don’t already have a LinkedIN Learning membership, here’s a free 30-day trial.

14 thoughts on “Putting the Framework in Genesis Framework”

  1. Happy face! I’ve just printed (yesterday!) some of the genesis files in order to study them and understand the basis. I want to get serious about Genesis! And today in my mailbox, Carie Dills explains it all to me! How wonderful?!

  2. This is a pretty awesome find. I wasn’t aware that you’re a teacher over at Lynda. I just looked up your classes on Genesis and bookmarked them. Nice. I can’t wait to dig into them. Oh, and by the way – thank you for the above post. It’s tremendously helpful.

    Take care,

    Jay G.

  3. Good stuff! The framework hook overlay image is a good one to keep. Also, @GaryJ reminded me recently that if you use the plugin Query Monitor, it shows a list of what functions are being called on each hook. You can filter by a specific hook and even filter by parent theme or child theme. geeky-happy-dancing 🙂

  4. I’ve completed both the Up and Running & Customizing Themes tutorials at lynda.com & they are excellent. Two thumbs up!

  5. Hi Carrie,
    Very nice, short and wise collection of words. You have explained all the stuff so clearly that anybody can edit the theme easily. Also your lectures are awesome.

  6. Thanks Carrie, that is very helpful. I’m afraid I know just enough about Genesis to get myself into trouble quickly. Recently I have been trying to add Google Analytics tracking to my blog (crashing it twice) and finally put it in the header part of the “Header and Footer scripts” which didn’t generate an error but GA still shows “Tracking not installed” for the site. There is some optional PHP code shown over at GA below the tracking code snippet, should I add that.? I sure don’t want to crash my site again!

  7. Thanks Carrie, The tech who helped me the first time (HostGator live chat) recommended that plugin too but when I activated it it generated error messages immediately and locked me out of admin area…this is quite frustrating!

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.