WP SITES

2952 Tutorials & 191 Plugins

Front Page Template Showing Genesis Featured Pages & Posts In Responsive Grid

This front page template includes widget areas you can populate with both the Genesis Featured Page and Genesis Featured Posts widgets which will be display in a grid with image hover overlay like this :

Genesis Featured Page Widget Image Hover Overlay

  • The 1st widget area is coded to display featured pages in a 3 column grid with image hover overlay.
  • The 2nd & 3rd widget areas are coded to display featured posts in a 3 column grid with image hover overlay.

Genesis Front Page Grid

By default, the caption is displayed, if added, otherwise the fallback text displayed is the image image description, if added, otherwise the entry title. This is easily changed if needed and support for PHP code modification is included for paid members.

Demo Video #

Shows the featured page and featured post widget entries displaying the featured image with hover overlay text for the entry title, caption or description in a responsive grid.

In this case, only the featured image is shown however the entry title and content can also be included using the widget settings.

Tested using version 3.2 of the Genesis Sample child theme by StudioPress however should work fine in most Genesis child themes.

Installation Steps

There’s 3 steps :

# Step 1 : Upload the files named front_page.php, title-overlay-featured-page-widget.php and title-overlay-featured-post-widget.php to your child themes root directory.

# Step 2 : Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your child themes functions file.

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

Download Folder

You can add drag in the Genesis Featured Page widgets to the 1st widget area named 1 Featured Pages which are configured, as seen in the demo video, like this :

Genesis Featured Page Widget Settings

The Genesis Featured Posts widget settings are configured like this :

Genesis Featured Page Widget Settings

Related Templates

Was This Tutorial Helpful?