• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Expanding Posts Grid Revealing Full Post When Excerpt Clicked

The code in this download displays excerpts in a grid. When one excerpt is clicked, the full post is displayed underneath the grid like this :

How To Create an Expanding Grid From Excerpt To Full Post

In this screenshot, the 6th excerpt is clicked displaying the full post after the grid of excerpts.

Watch the following video demo to see how it works :

Demo Video #

Shows excerpts for 6 posts displayed in a mobile responsive grid. When any excerpt is clicked, the full post content for that specific excerpt is revealed in full below the grid of excerpts.

Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme.

Installation Steps #

There’s 3 steps :

Step 1 – Upload the file named expanding-grid.php to your child themes root directory or page-templates folder.

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

Register for full access

Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems