This tutorial provides the code to display Name, Email and Website inputs in a left column and Comment textarea and Submit button in a right column using CSS Grid in Genesis. The fields will be set to appear one below the other 600px and below. and when the name, email and website checkbox does not […]
Premium Content
How to add additional Front page widget areas in Altitude Pro
A user today contacted me asking for help on how to add Front Page 7, 8 and 9 widget areas in Altitude Pro. This members-only tutorial provides the steps to register three additional widget areas, add Front Page 9 to the Customizer so its background can be changed and display the new widget areas on […]
Featured image page header in eleven40 Pro
In the members-only forum, a user asks: Full width banner image below menu bar I want to be able to have a full width banner image right below the header and menu bar. The image changes for each of the 12 neighborhood pages. Right now it’s at the top of the content area but need […]
How to show the text MENU next to hamburger icon in Showcase Pro
This tutorial provides the steps to display the text MENU to the right of hamburger menu icon in Showcase Pro 2.0.2 from 800px and below. https://sridharkatakam.com/wp-content/uploads/2018/06/ScreenRecording_06-19-2018-22-38-53.mp4 Here’s how: Edit style.css. In the 800px media query, change a) button.menu-toggle { display: block; float: right; background: none; padding:0; overflow: hidden; width: 50px; height: 50px; position: relative; } […]
How to automatically add category slugs as classes for post-type nav menu items
This tutorial provides the code to automatically add space separated category slugs as classes to nav menu items that link to single posts in WordPress. Could be useful for styling the menu items based on categories when using a plugin like Category Posts in Custom Menu. Add the following in child theme’s functions.php: To view […]
Filterable Portfolio in Genesis using Isotope
Theme version of this tutorial can be purchased from here. This tutorial provides the steps to set up a filterable portfolio in Genesis using Isotope. All the posts of the portfolio custom post type (CPT) will be set to appear on the CPT’s archive in a Masonry grid with a portfolio category filters row. Clicking […]
Custom Genesis Search Template to show Results in a List
This tutorial provides the steps to display results on search pages in Genesis in a simple unordered list of linked titles. We shall copy search.php from parent Genesis into the child theme and add the code that adds opening unordered list tag above the entries changes `article` element for .entry to `li` adds closing unordered […]
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 add Parallax effect to Header Hero in Essence Pro
Updated on 26 May 2022 This tutorial provides the steps to load Jarallax javascript and apply it on Header Hero in Essence Pro for parallax scrolling effect on the header hero image. Tested in Essence Pro 1.5.1. Step 1 Upload jarallax.min.js to Essence Pro’s js directory. Step 2 Edit functions.php. a) Inside essence_enqueue_scripts_styles(), above wp_enqueue_script( […]
How to turn Featured posts into a Carousel using Owl Carousel
In a Genesis customization task I completed today, the requirement was to display 4 posts output by Genesis Featured Posts widget. The posts should appear in 4 columns on the desktops and in 3 columns on mobiles with automatic sliding to the left to reveal the fourth post and sliding to the right again in […]
Recent Comments