WP SITES

Log in

Blog Page Grid In Genesis

—

by

Brad Dalton

The solution in this tutorial shows you how to display the posts on your blog page ( When using the full width layout ), or any other type of archive, in columns using CSS Grid like this :

The tutorial has been written based on the following question from a member of the Genesis community :

Question about layout of the blog page. Do anyone here know how to make a grid/column styled blog page in the show case pro theme? Guess I need to make changes in the code, but don’t know how. Thanks!

#Installation

There’s 2 simple steps :

Step 1 – In your child themes root directory, create a file named page_blog.php and add the following PHP code to the file.

Note : You can use this template on any archive page type by naming the file according to the WordPress Template Hierarchy and customize further using the code in this tutorial.

Step 2 – Copy & paste the CSS from the style.css file to your child themes style.css file and clear caching.

Click here to access free tutorials

Demo Video

Shows posts displayed in 3 columns on all paginated pages and displaying in a single column on smaller screens.

Related Tutorials

Comments

18 responses to “Blog Page Grid In Genesis”

  1. jdfrazier Avatar
    jdfrazier

    Thought this may be of interest to you…I do use google chrome so caching is an issue, but I cleared all caching…I cleared everything. On my laptop, the blog displays like the original default blog, but when I plug my laptop into a larger monitor using HDMI the blog will change to the Grid format it should be in…on both the laptop and the larger monitor.

    1. Brad Dalton Avatar
      Brad Dalton

      CSS grid does not work using I.E and won’t be included in MS Edge until the 17th of this month.

      1. jdfrazier Avatar
        jdfrazier

        Using google chrome

        1. Brad Dalton Avatar
          Brad Dalton

          What you can do rather than use CSS is use PHP code instead.

  2. jdfrazier Avatar
    jdfrazier

    sorry for the multiple post…something crazy happening on this end

  3. jdfrazier Avatar
    jdfrazier

    I made the mistake of not double-checking that the blog_page.php was uploaded…it is now, the css is added to the style.css, the caching has been cleared. I’ve selected “Blog Grid” in the template, but the blog page is still displaying like the original default blog instead of the grid format.

  4. jdfrazier Avatar
    jdfrazier

    Made the silly mistake of not double checking that the new php file was uploaded. However, I have everything in there now, cleared my caching and it is still displaying like the default blog….grid blog is selected. I have 8 blog posts with content.

    thanks

    1. Brad Dalton Avatar
      Brad Dalton

      It works. Your posts are displaying in columns. make sure you clear all types of caching.

  5. G.Aloe Avatar
    G.Aloe

    Hi, I just inform you that I tested it just now using the Genesis Sample Theme. I tested it for 2 and 3 columns only. Just following your CSS.

    It works very well for the First Page of the Blog Template Page. But when you move in the Second Page, it works BUT the width of every column is not a fraction of the full width. But it is just the full width. So, 2 or 3 columns for the page 2 and maybe also for the other pages, are oversized in width.

    I am still looking for the cause of this in the CSS hierarchy.

    Do you have any idea about why this happens?

    Thank you.

    1. G.Aloe Avatar
      G.Aloe

      I have made another test.

      Instead of
      grid-template-columns: 1fr 1fr;

      Using
      grid-template-columns: 49% 49%;

      it works in all the pages 1, 2, 3, etc.

      1. Brad Dalton Avatar
        Brad Dalton

        You shouldn’t need to do that unless you have added additional CSS which effects your blog page. Link to your blog page please.

    2. Brad Dalton Avatar
      Brad Dalton

      Link to your blog page please. You must have CSS which is causing you a problem. Based on the demo video and thorough testing, the grid columns are perfectly even on all paginated pages of the archive.

      1. G.Aloe Avatar
        G.Aloe

        Hi, today, I tried again, using :

        grid-template-columns: 1fr 1fr;

        cleaning the cache and all the other things.
        Today it works.

        I have not idea why last night it didn’t work. I tested it many times, cleaning cache etc,

        The test that I do is made using ONLY the Genesis Sample Theme. No other external CSS is loaded.

        I see that you changed the code, to use a different class.

        I am working to upgrade my website girolamoaloe.com from the Woocommerce Canvas to Genesis. I realized that I am skilled enough to use all the hooks as genesis use them.

        I am testing genesis in this url: a.girolamoaloe.com

        I had the doubt only about how to make the archive pages (blogs/tags/categories/archive) in 2 columns.

        I have to say that I never used:
        grid-template-columns, grid-gap, grid-columns.

        I even didn’t know they existed.

        The using of your simple solution to make columns on the blog page or in every archive page is really great.

        I see also that the CSS code works very well with and without the sidebar because it uses the class .content

        I am always happy to learn something new 🙂

        Thank you very much.

        G. Aloe

        1. Brad Dalton Avatar
          Brad Dalton

          Thanks for the feedback G. Aloe.

          Please note that CSS Grid columns are not supported in I.E unless you use vendor prefixes and won’t be supported in MS Edge until version 16 is released on the 17th October this year.

  6. jdfrazier Avatar
    jdfrazier

    I added the CSS above to my child theme’s (Altitude Pro) style.css file. Uploaded the file, confirmed that correct style.css file was part of activated theme. When I create the blog page, confirm selection of full width content layout and select “Blog” from the the Template dropdown menu, the page created is still the default blog page of the Altitude Pro child them. Any guidance?

    thank you

    1. Brad Dalton Avatar
      Brad Dalton

      Send me login details please and link to the blog page.

      1. jdfrazier Avatar
        jdfrazier

        I apologize for delayed response. I’ve been pulled away for the past week.

        http://koinoniabuilders.com/blog/

    2. Brad Dalton Avatar
      Brad Dalton

      It uses the default blog page template and looks fine to me however you haven’t added any content to the single posts. I have updated the tutorial with another method which includes a custom page_blog.php file however it produces exactly the same result.

Leave a Reply

Join 5000+ Followers

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