• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

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

  • Category Archive Entries In Equal Height Columns
  • Essence Pro Category Archive Posts In 3 Columns
  • Genesis Blog Page Template Grid With Equal Height Entries
  • Genesis Blog Page Template In Columns

Blog Page CSS Grid Columns Essence Pro Theme

Reader Interactions

Comments

  1. Juliana Soto says

    March 25, 2021 at 1:38 pm

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

    Thank you!

    Log in to Reply
    • Brad Dalton says

      March 25, 2021 at 2:06 pm

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

      .blog .entry {
          margin-bottom: 20px;
          background-color: #f5f5f5;
          padding: 20px;
      }
      Log in to Reply
  2. JohnnyB Rad says

    July 24, 2020 at 2:28 am

    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

    Log in to Reply
    • Brad Dalton says

      July 24, 2020 at 2:42 am

      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.

      Log in to Reply
    • Brad Dalton says

      July 24, 2020 at 12:02 pm

      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/

      Log in to Reply
      • JohnnyB Rad says

        July 25, 2020 at 6:11 am

        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

        Log in to Reply
        • Brad Dalton says

          July 25, 2020 at 8:44 am

          Do you want to keep the breadcrumbs or remove them?

          Log in to Reply
          • JohnnyB Rad says

            July 25, 2020 at 8:54 am

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

          • Brad Dalton says

            July 25, 2020 at 8:57 am

            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.

          • Brad Dalton says

            July 25, 2020 at 9:06 am

            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 says

    October 6, 2019 at 12:23 pm

    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.

    Log in to Reply
  4. Philip Wragg says

    October 4, 2019 at 3:13 am

    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.

    Log in to Reply
    • Brad Dalton says

      October 4, 2019 at 3:21 am

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

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.