GridTab is a lightweight jQuery plugin to create grid based responsive tabs. In this tutorial, we shall display a grid of featured images of posts which when clicked will slide reveal details panel showing a larger image, title and read more button linking to their respective single post. When the panel is open, users can navigate to previous and next posts using the left and right controls or close it with the x icon. Additionally, we'll enable automatic scrolling to the current tab. Screenshots: When clicked, Screencast: Summary of steps:
- Register a custom GridTab widget area
- Enqueue GridTab's CSS and JS (incl. the initialization file)
- Create a custom template for Flexible Posts Widget to output posts (can be Pages or CPT entries) in HTML markup needed by GridTab
- Display a Flexible Posts Widget's widget to which the above template is applied in the widget area below the header
While the tutorial has been written for Genesis Sample child theme, it should work with minor adjustments in any Genesis child theme.
Step 1a) Upload gridtab.min.css to child theme's
cssdirectory (create, if not existing). b) Upload gridtab.min.js to child theme's
jsdirectory. Create a file named say, gridtab-init.js in the same location having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.