Genesis Explained: The Genesis Theme Framework

Genesis Theme FrameworkThere is a lot of confusion about how Genesis works, and I think that results in more than a little frustration for developers starting work on the framework.

In a traditional theme they start by copying key components into new files. For example, they might look for a single.php, page.php or index.php to start customizing single post pages. In Genesis most of these files don’t exists, or if they do exist they have a single line of code

<?php

genesis();

In the child theme there may only be a style.css and functions.php file. The functions.php may have a single line of code in it. From this tiny bit of coding there are huge changes in the look and feel of the theme, but very little for developers to copy and modify.

This system actually allows for much more efficient coding, but only when the basic concepts are clearly understood. To that end, I am starting a new series that will help explain how one can use the framework to quickly develop or modify child themes.

Understanding the Framework

Genesis is a Framework, think of it like Legos or some other similar toy. It has a platform that the various pieces fit onto and those pieces can be removed or moved. Like Legos, some pieces have to fit in certain places, while other pieces can be added almost anywhere.

Image Created by Dee Teal based on this explanation and used with her permission.

The basic platform cannot be altered though, so lets look at that platform.

<?php
/**
 * WARNING: This file is part of the core Genesis framework. DO NOT edit
 * this file under any circumstances. Please do all modifications
 * in the form of a child theme.
 *
 * Initialize the framework from template files.
 *
 * @package Genesis
 */

/**
 * This function is used to initialize the framework in the various
 * template files. It pulls in all the basic, necessary components
 * like Header/Footer, the basic markup structure, and hooks.
 *
 * @since 1.3
 */
function genesis() {
	get_header();

	do_action( 'genesis_before_content_sidebar_wrap' );
	?>
	<div id="content-sidebar-wrap">
		<?php do_action( 'genesis_before_content' ); ?>
		<div id="content" class="hfeed">
			<?php
				do_action( 'genesis_before_loop' );
				do_action( 'genesis_loop' );
				do_action( 'genesis_after_loop' );
			?>
		</div><!-- end #content -->
		<?php do_action( 'genesis_after_content' ); ?>
	</div><!-- end #content-sidebar-wrap -->
	<?php
	do_action( 'genesis_after_content_sidebar_wrap' );

	get_footer();
}

This is framework.php file, one of 3 files that are essentially unalterable. Right off the page you will notice that the file should not be edited, actually no core Genesis file should be edited. Any changes will be undone on an upgrade, instead all work should be done via a child theme. Get down to line 19, that is where the action starts. The function genesis(); is invoked in nearly every standard template file. It loads this file. At the top and bottom should be two familiar functions “get_header()” and “get_footer()” They load the header.php file and footer.php file. Those are the other two files that can’t really be changed, they make up the core platform of the framework.

Within the header and footer there is html structure and “do_action()” functions. These are the “hooks” that actions are attached to. In other words, they are the little bumps that the other Lego pieces attach to.

This file has 7 hooks, but some of those will have hooks loaded onto them depending on what functions are being added by actions. I’ll be explaining actions later, but for now I’ll simplify this by showing the typical hook structure.

The full hook layout can be found on the My StudioPress site. There are a lot of great articles over there explaining some keys to working with Genesis.

Here is a simplified reference in the order the hooks load, starting with the hooks that load the actual framework

  • genesis_pre
  • genesis_pre_framework
  • genesis_init
    • header.php
      • genesis_title
      • genesis_meta
      • genesis_before
      • genesis_before_header
      • genesis_header
        • genesis_site_title
        • genesis_site_description
      • genesis_after_header
    • framework.php
      • genesis_before_content_sidebar_wrap
      • genesis_before_content
      • genesis_before_loop
      • genesis_loop
        • genesis_before_post
        • genesis_before_post_title
        • genesis_post_title
        • genesis_after_post_title
        • genesis_before_post_content
        • genesis_post_content
        • genesis_after_post_content
        • genesis_after_post
          • genesis_before_comments
          • genesis_comments
            • genesis_list_comments
            • genesis_before_pings
            • genesis_pings
              • genesis_list_pings
            • genesis_after_pings
            • genesis_before_comment
            • genesis_after_comment
            • genesis_before_comment_form
            • genesis_comment_form
            • genesis_after_comment_form
        • genesis_after_endwhile
        • genesis_loop_else
      • genesis_after_loop
      • genesis_after_content
        • genesis_sidebar
          • genesis_before_sidebar_widget_area
          • genesis_after_sidebar_widget_area
        • genesis_sidebar_alt
          • genesis_before_sidebar_alt_widget_area
          • genesis_after_sidebar_alt_widget_area
      • genesis_after_sidebar_content_wrap
    • footer.php
      • genesis_before_footer
      • genesis_footer
      • genesis_after_footer
      • genesis_after

Wow, that’s a lot of hooks. Each on of those can have additional functions added. just a few lines of code can move entire sections of the site around. The next part in the series will be about actions. After that I’ll explain how to read the Genesis files to lear how to quickly find the right code to copy into your theme for editing.

If you still feel a little lost, don’t worry too much, each step in this series will help explain the framework more clearly, but this foundation will also make it easier to understand the next article.

Comments

  1. Glad I could be part of the inspiration for this post, Nick. Looking forward to part two….

  2. NickMack says:

    Nick, thank you SO much for this post. Definitely looking forward to part two!

  3. Hi Nick
    Thanks for getting me underway with Genesis.
    Not with it just yet, but you have to start somewhere.

    I see that your site is still on the move.
    It’s a bit like gardening – always something to do. LOL

    Was a time that all you ever saw was Thesis, but now… Genesis is starting to take over.

  4. Great information! I’ve been looking for something like this for a while now. Thanks!

  5. FINALLY, somebody is explaining this in a language I can understand :) Thank you so much! One question… What determines which hook to add your new function to?

    • nickthegeek says:

      Kari, That’s a great question. The next part of the series will talk about actions, it is written and scheduled for tomorrow morning. It is more of a general introduction to add and remove actions, with the next part set to address actions within the Genesis Framework, really it will be tying this tutorial and tomorrow’s together. I hope those three articles will work together to really remove the veil from the Framework.

  6. Hi! So I purchased the Family tree child them for my wordpress blog and I love it. However, I’m confused as to how I can add my logo to the top of the page as a header? Please help I’m completely lost. Thank you.

  7. I’m loving the explanations – the more I play around with Genesis and the child themes the more I LOVE it!

  8. Thanks for this series Nick. I’m loving Genesis more everyday. This really helps in learning how to get up under the hood.

  9. Jezella says:

    Hello Nick. I really do feel that I have to add a comment here. I am a firm believer that Genesis is an outstanding piece of software and you helped me on the Genesis site. In the case of the Genesis website, I will admit that help files are available but poorly written from a beginners point of view where they left me feel extremely frustrated. I feel that what you are producing here is outstanding and I congratulate you for the time you are devoting here.

    I shall be following your extremely clear and well written tutorials and I would urge that the Genesis management asks you to produce something similar on their site. Thesis is well documented where I feel that Genesis from a software point of view has the edge but fails on documentation.

    I suspect that many people would agree with what I say and especially those that are new to Genesis. I would ask that this comment remains as replies are probably inevitable where my true hope is that Genesis take a leaf from your efforts of documentation as this can only be of benefit to the developers of this fine software and its users.

    I have learnt more from 15 pages of your site than I have from scouring the internet where that includes the help pages at Genesis.

    Well Done.

    • nickthegeek says:

      Thanks,

      I know that Dev.SP is working towards some more in depth articles with more clear documentation. There are a couple of other aspects surrounding Dev.SP that are intended to help make Genesis easier to work with. But thanks very much for the encouragement.

      • HawaiiAna says:

        Well guys, I’m writing this a year later and can tell you that tutorials on studiopress site still suck. Big time. Sorry for my language, but I read every one of them and was left extremely frustrated with how little info they actually give. Honestly, it’s like they’re guarding some sort of top secret…
        Anyway, so-o-o-o-o glad to have found this site!!!!!
        Thank you, thank you, thank you for writing these articles! Should be part of Dev.SP tutorials.

        • The tutorials on the StudioPress site are specific how to posts. So, if you need to know how to setup a specific child theme, they have tutorials for that. If you need to know how to remove the post meta, yep tutorial for that. Because of that it isn’t really possible to write how to do anything and everything. It would be a nightmare to try and navigate that, so they aren’t all inclusive, but the stuff that we answer all the time in the forums.

          For my part, I’m trying to write a more comprehensive development guide. It doesn’t focus so much on how to do specific tasks, but how to take this information and use it to accomplish almost any task. My end goal and the SP tutorials end goal are different because I’m writing for a different user. My series is really way to complex for someone who just purchased Genesis and wants to move their navigation menu. So in that way it makes sense that they are different.

  10. celeste says:

    Hi Nick,
    this information looks terrific! I have been struggling with Genesis and streamline for a couple of months, and I think this is just what I need.
    I look forward to delving into the next articles in the series, I think they may be a life-saver.
    Many thanks!

  11. Hi Nick, once again you’re probably the most helpful person around when it comes to Genesis support. Your articles have really clarified alot for me.

    I’ve been playing around with using custom fields to switch certain hooked in files on & off and managed to get it working.

  12. Nick, another big thank you for this article. Having the hooks all listed out with a bit of hierarchy to them is SOOOoooo much better than the way they get listed on dev.SP.

    I might suggest bolding the ones that have actions already attached to them… and even better note what those actions are. For me, finding which hook to remove something from still takes a lot of digging. For example, if my thought is “I don’t want to show the post date” I never know “where” to remove actions from… so I have to dig through each php file to find it.

    • nickthegeek says:

      That is a really good idea, I think I can use the abbr tag to make a nice list for that. Though I might just make that as a unique post in the future.

  13. Hi Nick
    I am new to Genesis and i musy say I am struggling however every time I have contact with you it becomes clearer. As you say it is a bit confusing to start with but as the penny keeps dropping (about 20 times a day) you can see what an amazing platform it is. i also appreciate your prompt response on the fourm to what must seem like silly questions alot of the time

    I will convet my site over once i have mastered it . i have set up a trial site to play with first cheers and thanks again sas ef̱charistó̱

  14. I was hesitant to switch to a WordPress theme framework because I could stumble my way around altering a typical wordpress theme to my liking. Now that I have taken the time to learn the very basics of how Genesis operates I am beginning to become more and more comfortable with creating child themes. I still have a LONG way to go but with the information that you are providing here and what can be found on the Dev.SP I am slowing getting better at creating exciting themes for me and my clients!

    Keep up the good work!

  15. John Wallace says:

    Thanks for the great tutorial series. I am a bit confused about the difference between add_action and do_action. For example, I’m creating a category for “testimonials” and titling each one by the name of the person giving the reference. I would like to display these in a loop on a category page but would like to move the name of each post (person giving the reference) to the bottom of the post, put it in smaller print, and justify it right. It seems like it should be a simple cut and paste but I’m having a hard time getting a handle on this one. Any advice would be appreciated. Thanks.

    • add_action() tells WordPress to run a function on do_action().

      Another way of saying it is “do_action( ‘hook’ )” is the hook and “add_action( ‘hook’, ‘action’);” is the instruction for what to put on the hook; while function action(){ } is what is actually put on the hook.

  16. John Wallace says:

    Perfect. So do_action is just the hook and add_action is both the hook and the function. Why couldn’t the wp codex make it so simple?

    PS: I managed to move my titles (it was a piece of cake after you explained this). All I had to do was track down the function in post.php. Thanks!

  17. Eka Diatmika says:

    Hiii Im Eka from Bali, Im beginner for Genesis Framework. Im confusing about a single.php in Genesis Framework. If I want to add a javascript code at the end of the in single.php where I should put it in Genesis Framework ??? can you help me?

    Kind Regards

    Eka

  18. Thanks so much Nick. Can’t wait to start experimenting. Gotta catch up on php first though. Definitely helpful, will check out the rest of the series and your blog. I want to learn how to optimize everything myself so I will read up as much as I can.
    Cheers mate,
    Nicolas

  19. Chad Redling says:

    Super helpful. Just started to dive deeper in WP and stumbled up the Genesis framework. I really like it, thanks for a nice explanation for a framework newbie.

  20. Thanks man. Great job.

  21. This is a great help…. i’m a wordpress fan, but this genesis logic was totally unfamiliar with my until now wp knowledge!

  22. Hi Nick,

    Thanks a ton-and-a-half for this tutorial series — now I get it! The link to the studio press documentation for all the hooks has moved since you posted this to: http://my.studiopress.com/docs/hook-reference/