Custom Layout Options in Genesis

layout-options

Genesis comes with a great feature called Layout Options. This allows content creators to specify the layout of the specific page or post they’re writing. By default it comes with all the different ways you can display one, two, or three columns.

You can unregister the defaults, and you can create your own layout options.

I used this on a recent project to create an Archives layout option. When this is selected, the page content is replaced with a thumbnail and excerpt of three children pages (example).

There’s two steps: register the layout, then use it in your theme.

Register A New Layout

Here’s what I used to create a layout called Sidebar/Content Archive. Place this in your functions.php file:

The first parameter is the layout slug, and the second parameter is an array that contains the label and the image.

Implementation

To figure out what layout a current page is using, use this function: genesis_site_layout();

Once you’ve registered a new layout, you need to decide what you’re going to do with it. In my case, I wanted the Sidebar/Content Archive layout to replace the loop with a listing of children pages. So, I removed the default loop and created a custom one that checked the page layout.

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and the Genesis framework. He contributes to the WordPress community through free themes, plugins, tutorials, and core patches. He's also a cofounder of the BIL Conference (the open analog to the TED Conference).

Looking for more great tutorials? See them all!

Comments

  1. Jamie says:

    great job on that project!

    would you mind sharing a little how you added the ‘intro box’ as you have done such a beautiful clean job with the coding? it would be a great help

  2. Hi Bill,

    Is there a way to have the genesis Archives page to display a compact Archives by Year/Month that displays like this>>

    2011: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
    2010: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
    2009: Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

    I have been searching for a way to do this for 3 weeks now and the only reference that I can come up anything related to this specifically is 2 Plugins which are both outdated and have not been maintained for 3-4 years – Smart Archives > http://hypertext.net/lab/smartarchives/demo/
    The other is Compact Archives > http://rmarsh.com/plugins/compact-archives/

    I have actually contact the Dev of Compact Archives and asked for assistance to get the PHP code for my functions file but He has some terminal Illness for the past 3 years now for that reason he does not do it anymore.. Sad.

    Thank you Bill,

    Cam

    • Bill Erickson says:

      While it’s doable, coming up with the actual code is beyond the scope of what I offer for free through the blog (it would take a while to come up with it).

      Just because those plugins are old doesn’t necessarily mean they are outdated. I’d start by installing those plugins and see how they’re built, and see if there’s any deprecated functions or things that could be done better now.

  3. Tim Osborn says:

    Hi Bill,

    Thanks for your great resources – what is the difference between a Genesis Layout and a WP post template? I understand that a layout has a funky thumbnail, but besides this, I’m not sure why I’d use a Layout.. I usually unregister all but the fullwidth and either a left or right sidebar.

    TIA, Tim

    • Bill Erickson says:

      Technically a Genesis layout is simply a class on the body tag and it determines which sidebars are loaded. It gives you an easy way to define the different ways a page can be displayed. I usually disable all the three column layouts and only leave Full Width Content, Content Sidebar, and Sidebar Content.

      Personally I think page templates are best when there’s actually different functionality associated with it. For instance, the Archive page template displays a sitemap. So if I want to change the functionality or content displayed on the page, I usually use a page template. But if I want to change the layout (how the page content is displayed, rather than changing the content itself), I’ll use Genesis layouts.

      You can also add your own layouts, and in template files force a certain layout to be used. So if I build a “Landing” page template, I’ll often put this in the theme file to ensure it is a full width page: https://gist.github.com/2710376

Speak Your Mind

*

If you'd like to include code in your post, please post it to http://gist.github.com and include a link.