WPEngine Style Blog Page With 2 Columns & Sidebar Then 3 Columns

This download folder includes a custom blog page template like the WPEngine blog page :

The template includes code to :

• Display the first 3 posts in 2 columns with the first post twice the width as the 2nd and 3rd posts.
• Display a custom primary sidebar
• Display a full screen width subscribe widget including styling for the Genesis eNews subscribe widget
• Display all posts after the full width subscribe widget in 3 columns.
• Display posts in 2 columns on ipads and 1 column on hand held mobiles.
• Display posts in 3 columns on all other paginated pages for the blog page template.
• Enables you to display any element including posts and widgets in any order at any screen width

And here’s what the screenshot app didn’t pickup showing the footer subscribe widget on the first page of the archive only.

Demo Video

Shows the blog page template displaying posts in 2 to 3 columns with a full width of screen Genesis eNews subscribe widget within the loop on the first page of the archive.

Tested using the Monochrome Pro child theme by StudioPress however should work in most Genesis child themes without modification. Includes a small amount of theme specific CSS.

Installation Steps

There’s 3 steps :

1. # Upload the file named page_blog.php to your child theme folder like this

 


2. # Copy and paste the PHP code ( without the opening PHP tag ) and paste it at the end of your child themes functions file

 


3. # Copy and paste the CSS from the style.css file to the end of your child themes style sheet and clear caching

 

Note : You can then select the Template named Blog from the drop down menu on the page attributes box on the edit page screen of your blog page and populate the 2 widget areas with the Genesis eNews widget which will both need to be configured.

Download Folder