The code in this tutorial enables you to display entries for posts or custom post types in columns styled like a widget area. In the following example, the entries are displayed in 3 columns on the front page of the Infinity Pro child theme by StudioPress.
The code will work in any Genesis child theme.
The code produces a result which is similar to the Genesis featured posts widget however all functionality is far easier to modify and includes pagination.
The code enables you to add the following default functionality modified or unmodified for each post :
- Show entry title
- Display post info
- Add featured image
- Display excerpt with character limit
- Include custom field content
- Display entries in 2, 3, 4 or 6 column grid
- Display working pagination
All functionality listed above can be removed or modified from within the safety of your child theme.
Here’s the demo video showing all the above functionality as well as the mobile responsiveness of the columns.
Video Demo
The video demo shows how the pagination works, what happens when you add a new post to the loop and how the column of entries display full width on screens 800px or less. The first 3 entries in the loop also output custom field content.
Tested using the Infinity Pro child theme by StudioPress. Should work fine in other Genesis child themes which use a front page template with widget areas however the code in front-page.php template and CSS will need modification.
Code Installation
There’s 3 steps :
Step 1 : Copy & paste the PHP code from the functions.php file in the download folder to your themes functions.php.
Step 2 : Copy & paste the CSS from the style.css file in the download folder to the end of your child themes style.css file.
Was This Tutorial Helpful?