In a Genesis customization task I completed today, the requirement was to display 4 posts output by Genesis Featured Posts widget. The posts should appear in 4 columns on the desktops and in 3 columns on mobiles with automatic sliding to the left to reveal the fourth post and sliding to the right again in […]
jQuery
How to overlay site header on featured image that fades out on scroll in Genesis
This tutorial provides the steps to overlay site header (automatically sized to half the viewport height) on featured image on single posts and the image fading away on scrolling down with fading in when scrolling up in Genesis. https://sridharkatakam.com/wp-content/uploads/2018/02/hero-featured-image-fade-scroll.mp4 While the tutorial has been written for Genesis Sample, it should work with a few adjustments […]
Auto rotating Genesis – Featured Posts
A user wrote to me, I’ve had numerous instances over the last couple of years where I’ve had to accommodate a client request to have a “testimonial rotator” – not an actual slider or carousel or anything, but just a tool that will display a “testimonial” in a spot (sidebar, or page), fade it out, […]
How to setup sticky elements on scroll in WordPress using Stickybits
In the past, I’ve written about using Sticky-Kit to stick elements as they are scrolled past. In this tutorial I show how Stickybits can be used for the same, specifically to make the primary nav sticky for screen widths > 1023px in Genesis Sample. While the tutorial has been written for Genesis Sample, it should […]
Before and After Slider in WordPress using ZURB TwentyTwenty
TwentyTwenty is a jQuery plugin from ZURB that can be used to show multiple sets of before/after images with the images appearing superimposed on each other. Dragging a vertical bar horizontally left and right reveals the before and after image respectively. In this tutorial, we shall load the files needed for ZURB TwentyTwenty draggable before-after […]
How to auto play videos as they come into view in Genesis
This tutorial provides the steps to: add custom fields to upload/select mp4, webm and ogv video files for Posts using Advanced Custom Fields. replace content archive images with muted looping videos (if set) for each post appearing on the archives on the front end using shortcode built in WordPress. use jQuery Visible to a) play […]
Fixed Background Footer in Genesis
In my tutorial requests Trello board, a user asked: How to create a footer like this https://briangardner.com/ or http://siddharth.is? This tutorial provides the steps to combine footer widgets and footer into a single div, relocate it outside the .site-container, and set it to be fixed so it comes into view with a “revealing” effect. We […]
How to fade in widgets using ScrollMagic in Genesis
This tutorial provides the steps to fade in widget areas on a custom full-width front page in Genesis using the ScrollMagic javascript library. We are going to create 5 front page widget areas and display these on a static front page using this method. Then enqueue ScrollMagic and initialize it like so: create a new […]
Grid Based Responsive Tabs in Genesis using GridTab
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 […]
Off-Canvas content in Genesis using JS Offcanvas
Offcanvas is a jQuery script for setting up fully accessible sidebar or top/bottom sliding (or push) panels with keyboard interactions and ARIA attributes. In this tutorial, we shall register a custom Off-Canvas Content widget area and reveal the widget(s) placed in it from the browser edge when a button is clicked. Screenshots: Screencasts: With a […]
Recent Comments