In GenesisWP Facebook group, a user asked: I’m looking to make the Foodie Pro navigation menu look like this on mobile–with search bar visible while collapsed (example site that client wants mobile menu to look like: http://deliciouslysprinkled.com/). Any suggestions? Thank you! We can remove the search form from being injected inside the primary navigation’s list […]
Search Results for: youtube
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 […]
Grid of CPT entries with title and excerpt sliding up on hover in Genesis
Updated on June 26, 2017 A user recently wrote me: Hi Sridhar, I find your tutorials very helpful. I was hesitant to signup and pay the $47/month, but it’s money well spent every month. Thank you! I have a request. Can you help me or put out a tutorial to accomplish what I’m seeing here?: […]
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 […]
How to Filter Posts by Categories using FacetWP in Genesis
Updated on July 05, 2017 FacetWP is a premium plugin for setting up fast and easy facets (filters) of various kinds like select menus, checkboxes and radio buttons. This tutorial covers the steps to display categories’ checkboxes in a text widget on Posts page, archives and search results pages using FacetWP. Posts can be filtered […]
How to dynamically generate Front page widget areas via Customizer in Genesis
In the members-only forum, a user asked: Last year I bought a third party childtheme – Summation by EngageWP. summation It has a pretty unique feature: In Genesis Theme settings, it adds a setting where you can define the number of widget areas you’d like to have dynamically created for your frontpage. Fill in – […]
How to display ACF Repeater items in a carousel using SlickJS
In the members-only forum, a user asked: I’m wanting to build a site similar to this http://kevita.com/products/master-brew-kombucha/ with a full width top image and slider below with product info using advanced custom fields and slick or soliloquy. Thank you! In this tutorial, I would like to share a custom Page Template that outputs rows of […]
Unobtrusive page transitions in Genesis with smoothState.js
smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. In this tutorial I discuss implementing smoothState.js in Genesis. Since the HTML content of initial page (ex.: front page) will be replaced with that of the later page (ex: an inner page) using Ajax, going back to the […]
Offscreen Login widget in Infinity Pro
One of the built-in features of Infinity Pro is the Offscreen Content widget area whose widgets will appear in a full screen overlay when a button is clicked on the header. In this tutorial, I show how we can change the ios-more ion icons icon (the three dots) with a ion icon’s log-in icon followed […]
Gradients animation in Genesis using Granim.js
Granim is a lightweight Javascript library for animating gradients. In this tutorial, we are going to set it up as a background of a custom Home Hero widget area below the header on the front page in Genesis. Note: The actual animation will be smoother unlike what got captured in the below screencast. See the […]
Recent Comments