Sridhar Katakam

Genesis and WordPress Tutorials

FastCompany.com inspired layout for Posts page in Genesis

by 2 Comments

One half of Jules question in StudioPress forum is:

... i would like to display the title and the excerpt in “two different columns” like the featured posts on http://www.fastcompany.com/ for example.
Anyone know if it’s possible and how to do it?...

In this article I share the code for home.php (used by Posts page whether it is at yoursite.com or yoursite.com/blog) in which Posts will be arranged like this:

fastcompany-like-layout-multiple-posts

Note:

  • The purpose of this blog post is not so much for the final look but to understand and appreciate how easy it is to use Hooks and Filters in Genesis to produce clean HTML w/o modifying direct templates.
  • Magazine Pro is used as the active theme in this example. Should work with any Genesis child theme.

Step 1

For the social sharing buttons, activate the Sharing module in Jetpack or Jetpack Sharing plugin.

In the sharing settings page, ensure that buttons are set to be shown on Front Page, Archive Pages, and Search Results at the minimum.

Step 2

Add the following in child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Excellent, as always, Sridhar.

    Question: Is this done any differently in Dynamik Website Builder?

    – Peter

    Reply

  • Hi Sridhar,

    This is awesome, thank you for this tutorial, exactly what I was looking for and it works like a charm. I’m wondering how I can transfer this style to a category template page? At the moment, when I click on a category, the posts are shown on the old and by far less nice looking blog template. Is there a quick way of doing that?

    Thanks, Anna

    Reply
    • >