Updated on May 04, 2018 In the past, I shared a page template for Beaver Builder based on Bill Erickson’s full width landing pages here. Here I cover a similar but slightly better/generic approach that can be used for Beaver Builder, Elementor and theoretically, any other page builder (I have only tested those two) in […]
Featured
How to set up a button to load more posts on the same page using Infinite Scroll in Genesis
This tutorial provides the steps to use Metafizzy/Desandro’s Infinite Scroll Javascript in Genesis to replace the standard pagination on the Posts page and archives with a “Load more posts” button which when clicked loads the next set of posts below the existing ones and so on. We are going to create a `content-archive.php` template part […]
How to add links to Previous Post and Next Post on single Posts in Genesis
Genesis has a handy function called genesis_prev_next_post_nav() which displays links to previous and next posts. To display the prev and next post i.e., adjacent entry pagination on single posts, add this in child theme’s functions.php: // Add single post navigation. add_action( ‘genesis_entry_footer’, ‘genesis_prev_next_post_nav’ ); To give some breathing room below, in child theme’s style.css add […]
Responsive menu inside an off-canvas side menu using Slideout.js in Genesis
Updated on June 12, 2018 In one of my earlier tutorials, I wrote about Slideout in Genesis where the off-canvas side menu was set to show the widgets placed in a custom widget area. In this article, we shall move the mobile responsive menu which appears after clicking/tapping the hamburger menu icon (from 959px and […]
Custom Genesis – Featured Page Widget plugin
Looking to make changes in the output of Genesis – Featured Page widget(s)? Get Custom Genesis – Featured Page Widget plugin from Github This is similar to Custom Genesis Featured Posts Widget plugin, but for the Genesis Featured Page widget(s) instead of Genesis Featured Posts widget(s). Sample usage: How to unlink featured image from Genesis […]
Off-canvas side menu in Genesis using Slideout.js
Update on January 12, 2020: Follow the updated tutorial here instead. Slideout.js is a touch slideout navigation menu for mobile web apps. In this tutorial, I share the steps to display a hamburger menu icon at smaller widths which when clicked/tapped will slide out the widgets placed in a widget area from the side of […]
How to display posts grouped by year in WordPress
In a recent Genesis customization work I took up, the requirement was to display entries of a Custom Post Type grouped by years the posts were published in. The output needs to be the year the latest entry was published in, then an unordered list of titles linking to their permalinks for all entries published […]
Animated Hamburger Menu Icon in Genesis
In Genesis (Genesis Sample, to be precise as well as most other child themes from StudioPress), tapping on the hamburger menu icon at smaller screen widths will toggle the responsive menu and the menu icon does not change i.e., remains a hamburger. It is possible to customize this such that tapping the mobile menu’s icon […]
Genesis Starter 2.3.0
I have released Genesis Starter 2.3.0, a customized version of Genesis Sample 2.3.0 to include Theme Logo support, inline navigation menu, CSS Grid support for structural elements, mobile first CSS and more. This is the successor to my earlier Sample Starter theme. Click here to see the full list of features and download from the […]
Title and Excerpt upon Hover on Featured image using Display Posts Shortcode and CSS Grid in Genesis
A member asked via email: In this tutorial https://sridharkatakam.com/portfolio-grid-showcase-pros-front-page-title-excerpt-hover/ , you place the portfolio in the Widget 4 section of the front page. I need to be able to place multiple portfolios in different places throughout my site. I believe I can figure out how to replace any of the widget areas on the Front […]
Recent Comments