Harper - Blog Page Layouts

Harper has 7 blog page layouts:

Please note that the blog page layouts are intended to be used on a separate "blog" page, not the homepage. Instructions for using these layouts on the homepage can be found at the bottom of this tutorial.

How to use the blog layouts on the blog page

1. Go to WordPress > Pages > Add New.

2. Give your page a name, i.e. "Blog"

On the right side of your screen, find the Template section and select your desired blog page layout.

3. Click Publish to save your page.

Full width grid or alternating list layouts

There are two layouts that require one additional step beyond the above.

Full Width Grid: Select the "Blog - Grid" layout. Then, change the individual page layout to Full Width.

Alternating List: Select the "Blog - List" layout. Then, change the individual page layout to Full Width.

Troubleshooting

Is your blog page not displaying the way it should? Here are some common issues + how to solve them:

  • Duplicate blog posts on the blog page: Go to Settings > Reading. Make sure that your Blog page is NOT selected under "Posts page."
  • Blog page layout is not applying to the blog page: Same as above — go to Settings > Reading. Make sure that your Blog page is NOT selected under "Posts page."
  • Images not aligning correctly: Go to Genesis > Theme Settings > Content Archives. Under "Featured Image Size", select Left. Left is the default alignment set by the Harper theme, so you'll only need to change this to Left if you previously changed it to something else.

Using the Blog Layouts on the Homepage

If you'd like to use the different blog layouts on the homepage, that is possible, but requires some code modification. We'll walk you through it below!

1. First, go to Settings > Reading and make sure "Your Latest Posts" is selected.

2. Go to Appearance > Theme Editor > front-page.php.

3. Scroll to the very bottom of the file. Look for  genesis();

4. Directly ABOVE that line, you'll paste a snippet of code for your chosen blog layout. Here are the code snippets:

5. Click on your chosen layout above, copy the code, and paste the code snippet above genesis();. Click Update File to save.

6. Lastly, click here and copy the CSS snippet. This will ensure your entry meta displays correctly. Go to Appearance > Customize > Additional CSS and paste the code in the box.

Full width grid or alternating list layouts

There are two layouts that require one additional step beyond the above.

Full Width Grid: Add the Grid code snippet. Then, change the default page layout to Full Width.

Alternating List: Add the List code snippet. Then, change the default page layout to Full Width.