In the past, I wrote a tutorial titled Featured Image Background Parallax section on Posts and Pages in Altitude Pro. This tutorial is different in the following ways: Parallax.js jQuery script (more robust) is used instead of JS from Parallax Pro theme Instead of post info/title, entry-specific content (if present) in a custom text area […]
jQuery
Collapsible widget area in Genesis
In a simple website that I finished working on today, I have set up a custom widget area called “Essential Info” populated with three text widgets appearing in columns (using Flexbox) displayed above the site header. Clicking/tapping on a CLOSE button at the top right of the browser window will collapse (slide toggle) the widget […]
How to set up a simple FAQ section in WordPress using jQuery Collapse
In the past, I showed how jQuery Collapse can be used to display ACF Pro Repeater fields in the form of an open/close or expand/collapse section in Genesis here. This tutorial provides the steps for showing a FAQ section from static HTML content using jQuery Collapse. Screenshots: with all the panels closed: with a panel […]
How to slant edges of elements in Genesis
For a while I had this article on viget.com saved in my pinboard. I tried the clip-path CSS code given in that article a few times and wasn’t sure what the values were representing or where they came from plus couldn’t get it working in Firefox. I finally took the time yesterday to research on […]
How to slideToggle a widget area in Genesis
In this tutorial we shall register a custom Top Bar widget area, add it above the header in a closed state and use jQuery to slide open when the bar is clicked in Genesis. The widget area can again be closed in a smooth manner by clicking the bar. Screenshots: Default closed state: When opened: […]
multiScroll in Genesis
multiscroll is a jQuery plugin by Alvaro Trigo to create divided multi-scrolling pages with two split vertical layouts or panels. In this tutorial we shall register a multiscroll Custom Post Type having two custom fields, Left Image and Right Image create a custom Page template having the code to dynamically pull in the Left Image […]
How to Load Posts on Demand using AJAX in Genesis
Update on March 08, 2018: An updated tutorial covering the case of user scroll as the trigger to fade in the subsequent set of posts is here. This article is based on Bill Erickson’s excellent tutorial titled Infinite Scroll in WordPress. We shall add a Load More button below posts on Posts page and Archives […]
Smooth scrolling to top in Genesis after clicking anchor links in headings
In my Facebook group a user asked, I’d like to see a tutorial on how to place an automatic back-to-top icon after each heading in the text (like Yoast has). Thanks! https://yoast.com/use-content-analysis-yoast-seo/ We can use genesis_before action hook to inject a custom div#top above .site-container in Genesis and use JS for scrolling smoothly to that […]
Video Background using Vide for Front Page 1 widget area in Altitude Pro
In one of my earlier articles titled Video Background for Front Page 1 in Altitude Pro I showed how the background image in Front Page 1 section of Altitude Pro can be replaced with a background video using Coverr method. In this tutorial I show how the same can be done in a much simpler […]
Video Background in Genesis using Vide
In the members-only forum a user posted, Sridhar, I want to create a landing page on one of my Genesis sites (using eleven40 – http://my.studiopress.com/themes/eleven40/) that has a landing page with a video background. There are plenty of video background solutions (here is one I found on ProductHunt yesterday – https://rishabhp.github.io/bideo.js/) but I just need […]
Recent Comments