WP SITES

Log in

Genesis Blog Page Template With Equal Height Posts In Grid – Essence Pro

—

by

Brad Dalton

The template in this download folder enables you to customize the blog page in any Genesis child theme.

Blog Page Grid With Posts in Equal Height

In this case, the template is coded to –

  • Full width content
  • Removes the breadcrumbs
  • Adds the blog page to the page attributes box on the Edit Page screen
  • Display each post ( entry ) exactly the same height regardless of title length
  • Sets a default featured image named default.png from your child themes images folder if no featured image added
  • Includes Posts per page setting for the blog page archive template only
  • Includes settings for include and exclude
  • Removes the default half-width-entries class included in the Essence Pro child theme. ( Remove this function if not using Essence Pro )
  • Set content to display with a content limit specific to this blog page
  • Customize/remove the read more text and link

You can also use any of the code from this template to further customize your blog page.

Demo Video #

Shows the blog page displaying posts of equal height regardless of title length.

Tested using the Essence Pro child theme by StudioPress however will work in any Genesis child theme. Some themes may require code tweaking.

Installation Steps #

There’s 2 steps :

Step 1 – Upload the file named page_blog.php to your child theme folder.

Step 2 – Copy & paste the following CSS to the end of your child themes style.css file and flush/clear all caching.

Register for full access

Related Templates

Comments

13 responses to “Genesis Blog Page Template With Equal Height Posts In Grid – Essence Pro”

  1. Juliana Soto Avatar
    Juliana Soto

    Hi! I’ve tried your solution on Authority Pro Genesis Theme and it doesn’t work. Any idea why is that?

    Thank you!

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Juliana. Works just tested it. You may need to add some extra CSS and clear caching.

      [code]
      .blog .entry {
      margin-bottom: 20px;
      background-color: #f5f5f5;
      padding: 20px;
      }
      [/code]

  2. JohnnyB Rad Avatar
    JohnnyB Rad

    Hey Brad:

    Since you have multiple articles achieving my objective, and since the blog-page logic has changed, can you share which updated solutions will best render the Posts Page (blog page) and Archive Pages (categories specifically) in equal-height grid-based columns for Magazine Pro 3.6?

    Thanks

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Johnny. I don’t think i have a tutorial for this for Magazine Pro however this code should work in any theme with a small amount of modification. Otherwise, you can request a additional tutorial.

    2. Brad Dalton Avatar
      Brad Dalton

      Update, i did test the code in Magazine Pro and it works. How many columns did you want? https://wpsites.net/web-design/category-archive-entries-in-equal-height-columns/

      1. JohnnyB Rad Avatar
        JohnnyB Rad

        Hey Brad:

        Thanks for the timely response.

        I experimented with your linked-to archives tutorial before reaching out, and have now uploaded the page_blog.php file and accompanying CSS above for a quick look.

        Both the archives and above articles produce the same results on their respective pages, which are indeed columns but as yet do not fully reflect what I’m aiming for, primarily because of the way Magazine is set up. For examples, with the mentioned articles incorporated, the Titles and Meta info remain above the featured images, and the breadcrumbs occupy the first column of the first row. It seems these issues are not exhibited in the Essence Pro theme.

        In briefest terms, I would like the Archives and Posts pages to render the same as Atomic Blocks Post and Page Grid Block nested inside of the Advanced Columns block, sans all meta and summary info. This produces a minimalist layout with the featured image above the title and a read more button below that. This is much more similar in design to the Essence Pro output above.

        Would a tutorial request of that nature fall within the scope of membership? I can provide screenshots of precisely what I am aiming for if helpful or share access to the staging site if preferable.

        Thoughts?

        Thanks again

        1. Brad Dalton Avatar
          Brad Dalton

          Do you want to keep the breadcrumbs or remove them?

          1. JohnnyB Rad Avatar
            JohnnyB Rad

            I failed to mention the breadcrumbs. Yes, we would like to maintain the breadcrumbs.

          2. Brad Dalton Avatar
            Brad Dalton

            There are no breadcrumbs on the blog page template. How are you setting up the blog page? Do you mean “posts page” using the Reading settings? Please link it.

          3. Brad Dalton Avatar
            Brad Dalton

            Let’s chat over here as it looks like we need to clarify a few issues. Seems you want to display the featured image before the entry title and post info?

  3. Philip Wragg Avatar
    Philip Wragg

    Hi Brad it was to remove the links from the featured image and header. I in fact solved it by partly using another article of yours https://wpsites.net/web-design/how-to-remove-the-link-from-a-featured-image-so-its-non-clickable/ So all ok thank you.

  4. Philip Wragg Avatar
    Philip Wragg

    Hi Brad – I signed up as you had the two perfect tutorials for Essence Pro that I needed, thank you! I have used above code, works perfectly. The client however has requested that there is no ‘detail page’ i.e. disable the links on header and picture. (They require just a minimal amount of info). I cant see a way to edit the page_blog.php to achieve this. (One thing they are running a news blog which does require the ‘detail page’ using default post settings. Grateful for your thoughts and possible solution. Many thanks.

    1. Brad Dalton Avatar
      Brad Dalton

      You want to remove the content and only display the image? What do you mean by detail?

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.