Genesis Tutorials

Uncombine Responsive Menu In Genesis – WordPress Website Design Article

Premium Member? – Request custom code This solution enables you to uncombine menus which display in the responsive toggle menu. By default, the Magazine Pro child theme combines the primary, header & secondary menus in the responsive menu. You can see the code for this between lines 118 – 120 in functions.php. Other themes may also include this code in a different position in the child themes functions file. To remove 1 or more menus from the responsive toggle menu,…

Read More

Replace Site Title With Logo On Scroll – WordPress Website Design Article

This solution enables you to remove the site title and replace it with your custom logo on scroll. Here’s the site header showing the site title before scroll : And here’s the site header showing the logo replacing the title on scroll : You can see more in the following demo video. Demo Video Shows the site title being replaced with the custom logo on desktops using the Monochrome Pro child theme for Genesis. Tested using the Monochrome Pro child…

Read More

Template To Show Hero Image Behind Search Results Page Title in Genesis – WordPress Website Design Article

Published January 22, 2020This template shows a image behind the search results page title in Genesis like this : Demo Video # Shows the image named search.jpg uploaded to the child themes images folder displaying behind the search results page title. Tested using the Genesis Sample child theme by StudioPress however will work in any Genesis child theme. Installation Steps There’s 2 steps : # Step 1 : Upload the search.js, search.php & style-search.css files to your child themes root…

Read More

Reduce Height of Essence Pro Hero Image Excluding Front Page – WordPress Website Design Article

Published January 16, 2020This tutorial shows you how to modify the height of the header hero image on all pages excluding the front page. Here’s a example showing the default header hero height on the left and a much smaller hero image on all inner pages : Default Height Modified Height Demo Video # Shows the reduced height of the header hero image on all inner pages including single posts and single pages. Installation Steps There’s 2 steps : #…

Read More

Add Background Color To Width of Text – WordPress Website Design Article

This tutorial provides the steps you can take to add a background color to the width of text rather than the width of the content area. There’s 2 steps : # Step 1 : Add your text to a custom HTML widget like this : Note : If your theme already includes a widget title and text added to the custom HTML widget like you see in the above image, you can skip this step. # Step 2 : Copy…

Read More

Install Max Mega Menu in Custom Theme Location Using PHP Function Call – WordPress Website Design Article

This tutorial provides the steps which enable you to add a mega menu to any Genesis hook position in any Genesis child theme. You can also swap out the genesis hooks and use this solution in any non Genesis child theme. Note : Assumes you have already created a mega menu. # Step 1 : In your WordPress Dashboard, go to Mega Menu > Menu Locations and click the blue button to Add another menu location. In this example, we…

Read More

Prepend Letter Before & Append Letter After Custom Field Value – WordPress Website Design Article

This code shows you how to automatically add a letter or letters before the dynamic value from a custom field as well as add letter(s) after the value. $time = get_post_meta( get_the_ID(), ‘totalTime’, true ); $PTM = ‘PT’ . $time . ‘M’; $time_PTM = $time ? $PTM : ‘PT5M’; In this example, the letters PT are prepended before the custom field value and the letter M is appended after. This enables you to use a custom field to add the…

Read More

Add Star Rating To Genesis Featured Posts Widget – WordPress Website Design Article

The code in this download folder adds an extra setting to the Genesis Featured Posts widget to Show Star Rating for each post. You can then add a rating from 1 – 5 for each post assigned to the reviews category. Here’s what it looks like on the front end : The rating is added using custom fields like this : You can also add the rating and review system using ACF or gravity forms which enables front end users…

Read More

Show Most Popular Posts With The Genesis Featured Posts Widget – WordPress Website Design Article

This tutorial provides the solution you need to display the most popular posts by number of visits ( views ) using the Genesis featured posts widget, By default, the featured posts widget doesn’t include a setting to show popular posts. In this tutorial i’ll show you how to add a setting to the Genesis featured posts widget so you can choose to show posts by number of views. Firstly, here’s the “Views Count” option added to the featured posts widget:…

Read More

Open Academy Pro Hero Buttons In New Window By Adding Target Attribute target=”_blank” – WordPress Website Design Article

This tutorial shows you how to add the target=”_blank” to the HTML for the hero section buttons in Academy Pro so they open in a new window. Demo Video # Shows you how to modify the HTML for a button so the link opens in a new window. Tested using the Academy Pro child theme by StudioPress. This method will work in any WordPress theme. Installation Steps # There’s only 1 step : Add this HTML target=”_blank” to the existing…

Read More

Genesis Footer Credits Text Filter – WordPress Website Design Article

This filter was deprecated back in August 2019. Here’s the change log entry : Deprecation: The genesis_footer_creds_text filter is now deprecated. Developers can point users who want to edit their footer text to the new Genesis footer setting in the Customizer. If you want to set default footer text for your child theme during theme activation, you should set the footer_text key in your theme’s child-theme-settings.php file. Code like this will still work : However, any code using the genesis_footer_creds_text…

Read More

Copy Wellness Pro Front Page For Use As Single Page Template – WordPress Website Design Article

This template can be used with unique content, including background images, on unlimited single pages. You can also display unique content in the sticky message. Demo Video # Shows the custom page template named Front Page Replicant displaying exactly the same as the front page template in Wellness Pro child theme by StudioPress. Installation Steps # There’s 2 steps : Step 1 – Upload the file named front-page-copy.php to the Wellness Pro themes root directory. You can then select the…

Read More

Full Width Blog Page Template In Maker Pro – WordPress Website Design Article

Premium Member? – Request custom code, guaranteed New Versions of Genesis – July 2019 Additionally, add the code in this solution to your custom blog page template ( only if not already included ) and using a newer version of Genesis which has removed the logic for the blog page template. This template enables you to create a full width blog page in Maker Pro. Here’s the default archive width on the left and the full width layout on the…

Read More

Expanding Posts Grid Revealing Full Post When Excerpt Clicked – WordPress Website Design Article

The code in this download displays excerpts in a grid. When one excerpt is clicked, the full post is displayed underneath the grid like this : In this screenshot, the 6th excerpt is clicked displaying the full post after the grid of excerpts. Watch the following video demo to see how it works : Demo Video # Shows excerpts for 6 posts displayed in a mobile responsive grid. When any excerpt is clicked, the full post content for that specific…

Read More

Use Custom Fields Outside The Content Area & Loop On Archives – WordPress Website Design Article

This code enables you to use custom fields including ACF fields outside the loop in any archive page type template. You can also display the content from a custom Wysiwyg Editor added to your archive template in any hook position outside the content area and loop. In this example, the contents from the custom Wysiwyg Editor is printed after the pagination on the archive page : You can use this code to display any type of content from any type…

Read More

Page Template To Show Title & Image Only In Modern Studio Pro – WordPress Website Design Article

Premium Member? – Request custom code, guaranteed This template shows only the title and featured image like this : You can also use the code in this template to : Remove the archive page title and description. Remove or modify the post info in the entry header. Remove or modify the entry meta in the entry footer. Reposition the featured image inline with the entry title. Set the content limit. Align the featured image to the left, middle or right…

Read More

Full Width Slider Between Footer Widgets & Footer – WordPress Website Design Article

Premium Member? – Request custom code, guaranteed This code enables you to add a full width of screen slider between your footer widgets and your footer ( containing your footer credits ) like this : Demo Video # Shows the slider displaying full width of the browser window between the footer widgets and footer. Tested using the Infinity Pro child theme by StudioPress however should work in any Genesis child theme without modification. Installation Steps # There’s 2 steps :…

Read More

Custom Link Featured Image For Book Cover In Author Pro Theme – WordPress Website Design Article

Premium Member? – Request custom code, guaranteed The code in this download enables you to change the book cover link for the featured image. If no custom link added, the image will be linked to the default which is the single book permalink. The code also enables you to modify the default functionality generated by the Genesis Author Pro plugin via the safety of your child theme avoiding loss of custom functionality when the plugin is updated. Demo Video #…

Read More

Genesis Blog Page Template Grid With Equal Height Entries – Wellness Pro – WordPress Website Design Article

This template displays your posts in columns with equal height for each entry regardless of : Title length Content length Featured image size The template code is written to work with the Wellness Pro child theme by StudioPress and is a modified version of this template which was tested using the Essence Pro theme. Demo Video # Shows the blog page displaying posts in 3 columns with equal height for each entry regardless of title, image or excerpt content length.…

Read More

Zoom Featured Image On Hover With Title Overlay – WordPress Website Design Article

Premium Member? – Request custom code, guaranteed This template for Genesis child themes can be used on any archive page type to display a grid of featured images with image zoom effect. The post title is displayed over a background at the same time the image zooms in when hovered. You can also display the image description or caption otherwise the title displays by default. Demo Video # Shows a grid of featured images which zoom in on image hover…

Read More

How To Modify The Genesis Author Pro Plugin CPT Labels & Args – WordPress Website Design Article

Premium Member? – Request custom code, guaranteed This download contains 3 code snippets which enable you to modify the code in the Genesis Author Pro plugin via the safety of your child theme thereby avoiding loss of modifications when the plugin is updated. The code snippets modify the : CPT labels CPT args CPT archive page permalink slug Download Folder Installation # There’s only 1 step – Add any of the code snippets from the functions.php inside the download folder…

Read More

Add Audio or Video Shortcode Via Customizer To Essence Pro Themes Hero Section – WordPress Website Design Article

This tutorial provides the code which enables you to add a video or audio player in the Hero section of the Essence Pro theme. You can upload your video or audio file to your WordPress Media Library and use the file URL with the audio shortcode like this : or the video shortcode like this : Either shortcode can be added via Customize > Essence Pro Settings > Front Page Hero Section > Audio or Video Shortcode. Watch the following…

Read More

Reposition Genesis Responsive Menu Icon Before Site Title On Mobiles – WordPress Website Design Article

Premium Member? – Request custom code, guaranteed The code in this download folder enables you to change the position of the responsive menu icon from the default position after the title area to before the site title area. Default Repositioned Demo Video # Shows the hamburger menu displaying after the title by default and before the title once the code from the download folder is added to the child theme. Tested using the Minimum Pro child theme by StudioPress however…

Read More

Show The Content Limit And Custom Field Value For Specific Post Types In Search Results – WordPress Website Design Article

The code in this download folder enables you to customize your search results. In this case, the code enables you to limit the content by number of words for standard post types as well as specific custom post types you name in the code. This way you can show a customized excerpt of any length with a customized link back to the single entry. If a custom field has been added, this will also display as seen in the following…

Read More

Image Behind Header & Menu – WordPress Website Design Article

Premium Member? – Request custom code The solution in this download folder enables you to : Move the primary menu inside the site header Display a image behind both the header & menu Center the header widget area between the site title and menu Here’s what the solution in this tutorial produces : The following video shows how it looks on both desktops and smaller screens. Demo Video # Shows the image covering the background of both the site header…

Read More

Image Behind Header & Menu In Genesis Sample Theme – WordPress Website Design Article

Premium Member? – Request custom code This code adds a field to the Customizer enabling you to upload a full width header image. The image displays behind the site header and primary nav menu as seen in the following screenshot : Tested using the Genesis Sample child theme by StudioPress. Demo Video # Shows the same header image displaying behind the nav menu and site header container. Installation – Support Included # There’s 5 steps : Step 1 – Copy…

Read More

Copy Front Page Template With Unique Widget Areas Using Different Background Images – Parallax Pro – WordPress Website Design Article

Premium Member? – Request custom code This page template in this download folder can be used once only to make an exact copy of the Parallax Pro themes front page. Note : If you want to copy the front page template for use on more than 1 page, use this version instead. The code adds custom widget areas enabling you to add unique content to each section. The solution also adds a new section to the customizer enabling you to…

Read More

Modify Or Remove Address & Checkout Fields On WooCommerce Checkout Page – WordPress Website Design Article

Premium Member? – Request custom code This freely accessible download folder contains 2 code snippets which enable you to : Use the 1st snippet to make the following address fields optional rather than compulsory : country address_1 address_2 company required state postcode Use the 2nd snippet to completely remove the following fields : billing_first_name billing_last_name billing_company billing_address_1 billing_address_2 billing_city billing_postcode billing_country billing_state billing_phone order_comments Code Installation – From Download Folder # Add the code to the end of your child…

Read More