This members-only tutorial provides the steps to add a hero section on the homepage with a transparent site header overlay with the header and logo shrinking when scrolling down. We shall register home-hero widget area set transparent background for the site header set hero image as background covering both the site header and hero section […]
Flexbox
Stately’s Home Middle 1 widget area in 75 / 25 layout
Updated on May 13, 2019 This members-only tutorial provides the steps to re-arrange two widgets placed in Stately’s Home Middle 1 widget area from the default 50 – 50 into 75 – 25. Before: After: We shall edit the code that adds flexible-widgets class to all the home-middle widget areas such that this class does […]
Site Title on left, Primary Nav in the middle and Header Right widget area on the right in Genesis Sample
This tutorial provides the steps to customize Genesis Sample 2.6.0 to show the primary nav menu horizontally centered and Header Right widget area at the right. From 959px and below the elements will be set to be shown one below the other. Step 1 Activate Header Right widget area. In functions.php comment out or delete […]
Horizontal Opt-in Form below Site Header in Genesis Sample
This is an updated version of Horizontal Opt-in Form in Genesis using eNews Extended plugin and Flexbox for Genesis Sample 2.6.0. Step 1 Install and activate Genesis eNews Extended plugin. Step 2 Add the following in Genesis Sample’s functions.php: // Registers `horizontal-opt-in` widget area. genesis_register_widget_area( array( ‘id’ => ‘horizontal-opt-in’, ‘name’ => __( ‘Horizontal Opt-in’, ‘text-domain’ […]
How to swap the position of title area and nav menu for RTL in Genesis
In the members-only forum, a user asked: Hello all, My one frustration with WordPress themes today is the lack of full integration with RTL languages. Can someone or you Sridhar please advise on how to best implement this on Genesis, how to change the logo/header, so that the logo is on the right of the […]
Utility Bar in Atmosphere Pro
In the comments section of Utility Bar in Altitude Pro, a user asked: I love the utility bar tutorials Sridhar. Is it possible to create one for Atmosphere Pro on desktop and mobile as well, or is that not possible? This tutorial provides the steps to register Utility Bar Left and Utility Bar Right widget […]
Equal height Content and Sidebar in Genesis Sample 2.6.0
Looking to set the same height for content and sidebar in Genesis? Flexbox to the rescue. This tutorial provides the code change to replace floats with Flexbox in Genesis Sample 2.6.0’s CSS for equal height (determined by whichever is taller) content and sidebar columns. In the 960px min-width media query inside style.css, replace /* Content […]
Utility Bar in Genesis Sample
Updated on April 14, 2020 In my members-only forum, a user asked: Hi Sridhar Considering all the tutorials you have written for utility bars it won’t surprise you that somebody wants one for the new sample child theme! If one of the existing tutorials will work instead please let me know. However, although I can […]
Left aligned Site Title with Centered Navigation in Genesis
This tutorial provides the CSS to keep the site title aligned to the left and horizontally center the nav menu within the site header’s wrap in Genesis Sample 2.6.0. Using CSS Grid Works in all modern browsers. Does not work in IE 11. Title area and primary nav will continue to appear left and right […]
Jetpack-like Related Posts without Jetpack in Genesis
Jetpack’s Related Posts module has a “large and visually striking layout” option that shows related posts at the bottom of content like this: This tutorial provides the steps to show a similarly styled three related posts below the comments section on single posts in Genesis based on the code by Nick Croft and improvements by […]
Recent Comments