Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible. Let’s take a look at how we can use Sticky-Kit to make webpage elements remain persistent as the user scrolls past them. While there are several similar jQuery scripts out there the nice […]
jQuery
Displaying Posts output by Display Posts Shortcode in Masonry style
On a site that I have recently taken over, the client tried using Essential Grid for displaying groups of Posts (each tagged with a specific term) in Masonry style. But due to some conflict with Optin Monster, only the loader was appearing for non-logged in visitors – not the Posts themselves. In this article I […]
Testimonials Carousel in WordPress using Testimonials by WooThemes, Display Posts Shortcode and Slick jQuery
In this article I show how ‘testimonial’ CPT entries made available by Testimonials by WooThemes plugin can be output using Bill Erickson’s Display Posts Shortcode plugin and displayed as a responsive carousel using Slick jQuery script. The reason for not using Testimonials plugin’s built-in shortcode is because it did not seem possible with the generated […]
How to move an image from bottom to top when scrolling down in Genesis
In a recent project that I completed, keyot.com, the requirement was to move an image of a rocket as the user scrolled down the homepage. This is how I did it using Stellar.js. Step 1 Uploaded jquery.stellar.min.js to child theme’s js directory. Created a file named home-non-mobiles.js in the same location and initialized Stellar like […]
How to populate text area on single Posts with Post Title, Content and custom HTML in Genesis
Earlier today a user contacted me and asked, I am wondering if you are able to help with this. On the site ——.com, my client wants to have a place where users can easily copy and paste the html content of the article …. an example of that can be found on this site: http://www.copyrightfreecontent.com/newsusa/minor-leaguer-caught-new-dream-after-outfield-collision/ […]
How to display a Fixed Mini Header when Scrolling down in Genesis
Update on January 16, 2017: New tutorial > https://sridharkatakam.com/fixed-mini-header-scroll-inline-logo-nav-menu-genesis/ In a recent customization project I took up, client wrote: The other feature we’d like to implement is a sticky header that shrinks after the page has scrolled very much like the page at http://www.marcuardfamilyoffice.com/en/values In this article I share how a sticky mini header consisting […]
Applying Backstretch to multiple Featured images in Genesis
In this article I share how Featured images (if present) linking to corresponding single pages can be displayed above Posts on listing pages in Genesis. Thanks to Luke for the idea that Backstretch’s source can be pulled from data attribute on the webpage. The purpose of this tutorial is only to show how Backstretch can […]
How to use iCheck for customized check boxes and radio buttons in WordPress
iCheck is a fancy and lightweight jQuery plugin that allows you create beautiful and highly customizable checkboxes and radio buttons with 25 built-in options and 6 skins. In this article I share how iCheck can be loaded and used in WordPress. Step 1 Download the zip file from https://github.com/fronteed/iCheck. Step 2 Extract the contents and […]
Recent Comments