When a static Page (typically titled Blog) is set as the Posts page at Settings > Reading in WordPress, its title will usually appear at example.com/blog. The easiest way to set what appears as the Posts page’s title is to change it in the backend. But for some reason, if you want the frontend title […]
Search Results for: image
Category switcher without page refresh using FacetWP and jQuery Nice Select in Genesis
neilpatel.com/blog has a lovely category selector dropdown which uses jQuery Nice Select to style the select menu in a clean and consistent manner across the various browsers. This tutorial provides the steps to set up the same before the content-sidebar wrap on the Posts page in Genesis using FacetWP and jQuery Nice Select. https://sridharkatakam.com/wp-content/uploads/2018/03/category-selector-genesis.mp4 Step […]
Infinite Scroll in Genesis
This tutorial provides the steps to implement Bill Erickson’s Infinite Scroll in WordPress on the Posts page and archive pages in Genesis with minor improvements. We are going to cover the case where user scrolling acts as the trigger to fade in the subsequent set of posts. If you are looking for a button click […]
Nav menus in columns in a full screen modal upon clicking a floating hamburger icon in Sixteen Nine Pro
This tutorial provides the steps to implement Infinity Pro’s Offscreen Content widget area in Sixteen Nine Pro. We shall place a Navigation Menu widget (and a Text widget) in the Offscreen Content widget area and use CSS Grid to arrange the menu item groups in columns in the full-screen modal. Screencast: https://sridharkatakam.com/wp-content/uploads/2018/03/sixteen-nine-pro-offscreen-widget-area.mp4 While the tutorial […]
WooCommerce product search in Showcase Pro’s header
This article provides step-by-step instructions on implementing the header search from Monochrome Pro in Showcase Pro and displaying WooCommerce’s default product search instead of WordPress’s – covering the site header when a magnifying search icon at the right of nav menu is clicked. Screenshots: Homepage on page load: After clicking on the search icon: After […]
Parallax Scrolling for Front Page sections in Altitude Pro
Altitude Pro’s demo site has fixed background images for Front Page sections 1, 3, 5 and 7. This tutorial provides the steps to set up parallax scrolling (subtle movement of the background image with scrolling) for these sections using Parallax.js. https://sridharkatakam.com/wp-content/uploads/2018/03/altitude-pro-parallax-background.mp4 Step 1 Upload parallax.min.js to Altitude Pro’s js directory. Step 2 Comment out or […]
Flexible Footer Widget Area in Monochrome Pro
Updated on July 22, 2020. Tested in Monochrome Pro v1.5.0. In the comments section of How to replace Footer Widgets in Altitude Pro with Flexible Widgets, a user asked; How can you add a flexible footer widget to Monochrome Pro? This tutorial provides the steps to register a Before Footer widget area in Monochrome Pro […]
Moving secondary sidebar inside Content Sidebar wrap and replacing floats with Flexbox in Genesis
In Genesis Slack chat a user asks: I would like to move the secondary sidebar into the content sidebar wrap, so I have sidebar/content/sidebar within the wrap. Nothing I’ve tried so far seems to work. Any help would be most appreciated. By default, the secondary sidebar is present outside div.content-sidebar-wrap in Genesis 2.5.3. By adding […]
Soliloquy slider in Business Pro
Updated on April 26, 2018 In the members-only forum, a user asked: Hi! I see you have done some tutorials for other themes like Showcase Pro to replace the hero video with a Soliloquy slider. I would like to do the same thing with the Business Pro theme. Could you please provide a tutorial for […]
Font Awesome’s magnifying glass web font as search button text in Genesis
In the comments section of my old How to replace search button text with a icon font in Genesis tutorial, a user asked: I noticed when I enqueue Font Awesome 5, the search icon from this tutorial disappears, does that have something to do with the new icons being SVG? In this tutorial, I share […]
Recent Comments