Categories
Genesis Tutorials

How to have the Essence Pro Footer CTA widget display on the homepage only

This code, once added to your Essence Pro themes functions file, removes the foot CTA widget from all pages except the front page.

The code takes you from this image on the left to this on the right :

Here’s the PHP code for logged in members :

Categories
Genesis Tutorials

Random Header Hero Images In Essence Pro

This code modification to the Essence Pro child themes enables you to display random header hero images every time the page loads.

Random Hero Images In Essence Pro

Demo Video

Shows the header hero images changing using the image files in the Essence Pro themes images folder each time a page is loaded.

Tested using the bEssence Pro child theme by StudioPress.

Installation & Configuration

There’s 2 steps :

Step 1 : Upload the header-functions.php file to your Essence Pro themes lib folder replacing the default header-functions.php file. You can see the code modification on line 215.

Step 2 : Upload your random hero images to your Essence Pro themes images folder using exactly the same file names as seen in the following screenshot.

Download Folder

Related

Categories
Genesis Tutorials

Different Header Image On Blog Page & Home Page – Essence Pro

Did someone say “Every page and blog post can have a unique header image”. Perfect! When it comes to the Essence Pro child theme by StudioPress, you can’t use a different header hero on your home & blog pages unless you make some changes in your theme.

Installation Steps

There’s 2 steps:

Step 1 : In your WordPress Dashboard, go to Settings > Reading and make sure your Posts Page there’s no selection for this setting.

WordPress Reading Settings Posts Page

Step 2 : Upload this template to your Essence Pro theme folder.

Once both steps have been completed, you can then add a unique featured image on your blog page which will display as the header hero image on your posts page.

Related Tutorials

Categories
Genesis Tutorials

Add Dark Overlay To Slider Images

This tutorial includes a solution which enables you to add a darkened overlay to your slider images. In this case, we use the Soliloquy Lite slider for WordPress.

The solution will work with other sliders or any images with a small tweak required.

Demo Video

Tested using the Soliloquy lite slider plugin for WordPress & the Essence Pro theme slider header hero.

Shows you how to darken light slider images so your overlaying text displays clearly.

Installation

There’s only 1 step.

Categories
Genesis Tutorials

Slider In Essence Pro Header Hero – New Version

This tutorial, written for the latest version of Essence Pro, includes the code which enables you to replace the header hero image on the front page with a slider on desktops.

Slider Behind Header Hero Essence Pro Theme by StudioPress

Demo Video

Shows the slider replacing the header hero image on the front page of Essence Pro on desktops and the default header hero background image displaying when the mobile menu displays on smaller screens.

Tested using version 1.5.1 however should work with all older versions of the Essence Pro child theme by StudioPress.

Installation Steps

There’s 3 steps :

  1. # Install the Soliloquy slider from the WordPress plugins page and create a new slider named Hero Slider. You must use this name as it generates a slug used in the PHP code used in step 2. Slider configuration settings are included in the download folder.
  2.  
    Essence Pro Theme Slider Installation Step 1

  3. # Upload the modified header-functions.php file to your Essence Pro themes lib folder replacing the default file of the same name. Its been modified on line 213 & 217.
  4.  
    Essence Pro Slider Installation Step 3

  5. # Copy & paste the CSS from the style.css file and paste it at the end of your Essence Pro themes style sheet and clear all caching types including browser, plugin and server caching.
  6.  
    Essence Pro Slider Installation Step 4

Download Folder

Image Sizes

Image sizes used in the demo video are 1600 by 1000 pixels

Darkened Slider Images

You can use the code in this tutorial to add some darkness to your slider images if using light colored text or bright images.

Categories
Genesis Tutorials

Aweber Email Form Styled Like Genesis Newsletter Block

This tutorial provides the code which enables you to add your Aweber email signup form in the header hero section on Essence Pro theme front page like this :

The code creates a reusable block which you can use in any theme and position anywhere using the block or PHP code.

In this example, the button is positioned within the right hand side of the forms input field using a tiny bit of CSS added in step 3 of installation.

Note : You will need to create a free or premium Aweber account before starting the installation steps.

Demo Video

Shows you how to use your Aweber email form in the Essence Pro child theme by StudioPress.

Also includes the PHP code to display your reusable Aweber form block in any WordPress theme.

Installation Steps

There’s 3 steps :

  1. # Login to your Aweber account, navigate to signup forms and create a new form deleting the elements for the header, footer, footer links and name field. Save your form and copy the Raw HTML Version of the code and create a new reusable block from a Custom HTML block or directly on the Reusable Blocks Edit page as seen in the Demo Video.
  2.  

  3. # Upload the blocks.php file to the Essence Pro themes page-templates folder and swap out the page id for your reusable block in the code on line 66. You can find your page ID for your block in this video.
  4.  

  5. # Copy & paste the CSS to the end of your Essence Pro themes style.css file and clear caching.
  6.  

Download Folder

Usage In Any Theme

Swap out the ID with the ID for your reusable block which you can grab from the address bar when you edit your reusable block.

Related Tutorials

Categories
Genesis Tutorials

Add Email Optin Form Block To Hero Header In Essence Pro

By default, the Essence Pro themes front page header hero section displays 2 buttons. In this tutorial, you’ll get :

  1. A custom reusable block you can import.
  2. And a file named blocks.php you can upload to display your reusable email optin block like this :

Note : The code in the blocks.php file shows you how to use a few lines of PHP code to display any block in any location in any theme.

Demo Video

Shows you how to integrate your MailChimp email form in the header hero section on the front page of the Essence Pro child theme by StudioPress.

Also provides the PHP code snippet which shows you how to display a block in any hook position using PHP code.

Installation Steps

There’s 2 steps once you’ve setup your email newsletter block using the Genesis Blocks plugin:

Note : This solution assumes you’re using MailChimp API keys in the Genesis Blocks > Settings > Newsletter Block settings.

You can access your reusable blocks page using these steps :

  1. # Find your MailChimp audience I.D and edit the newsletter-optin.json file with the 10 digit mailingList number. On your Reusable blocks page, import the newsletter-optin.json file. Once imported, edit the block to grab the post id from the address bar which you’ll need in step 2.
  2.  

  3. # Edit the file named blocks.php on line 66 replacing the 83 with the id for your reusable block as seen using the 1st red arrow in the screenshot in step 1. You can then upload the file to your Essence Pro themes blocks folder.
  4.  

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Essence Pro Center Header Elements on Mobiles

Copy & paste this CSS to the end of your Essence Pro themes style.css file to center all header elements on smaller screens.

Code not working? Make sure you clear all types of caching once you have saved the custom CSS in your Essence Pro themes style sheet.

Download Code

Categories
Genesis Tutorials

Open Specific Button Links In a New Window Or Same Window

The PHP code in this download folder enables you to add one or 2 buttons on all single posts & pages without modifying the HTML for each button link.

You can also add a unique link for each button and specify which button links open in the same or new window. If not specified, button links will open in the same window.

Open Button Links in New or Same Window

Note : The solution you see in the demo video uses custom fields native to WordPress. If you prefer using a plugin like ACF, read the last section at the end of this tutorial to learn how to easily setup ACF to control your button elements.

Demo Video

Shows you how to setup custom fields in WordPress so you can add 1 or more buttons with custom button text and custom links to open in the same or a new window in Genesis child theme.

Tested using the Essence Pro child theme by StudioPress however will work in any Genesis child theme or any WordPress theme if you change the essence_entry_header hook to any theme specific or WordPress hook.

Installation Steps

There’s 2 steps :

  1. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions.php file.
  2.  

  3. # Create custom fields for each button using the custom field keys seen in the following screenshot and demo video.
  4.  

Download Folder

Custom Fields for Buttons

Buttons are only displayed if each custom field key button_primary_text and/or button_text has a text value otherwise none shown.

By default, links open in the same window and only open in a new window if each custom field key primary_window and/or secondary_window have a value of 1 as seen in the screenshot above.

Using Advanced Custom Fields (ACF)

Install the free or premium version of the ACF plugin and import the file named 107304-acf.json. You can then use the stylised fields on any single Edit screen to configure your buttons.

This allows you to use ACF to open links in the same window or a new window.

Related Tutorials

Categories
Genesis Tutorials

How to Remove Header Background Image for Essence Pro

This download Folder contains the code which enables you to remove the Essence Pro themes header hero image on any single post, page or custom post type.

You can use basic CSS in your style sheet to do this :

.header-hero {
    background-image: none!important;
}

Or, you can add a box like this :

Demo Video

Shows the custom field add to the Edit Post & Page screens enabling the logged in user to remove the header hero image on a per post & page basis.

Tested using the Essence Pro child theme by StudioPress.

Installation Steps

  1. # Upload the files named remove-hero-form.php and remove-hero-functions.php to your Essence Pro theme folder like this :
  2.  

  3. # Copy & paste the PHP code ( without the opening PHP tag ) from the functions.php file to the end of your Essence Pro themes functions.php file.
  4.  

You can then enable the box to remove the image from your screen options menu like.

Download Folder

Related Tutorials

Categories
Genesis Tutorials

Add Buttons With Custom Text & URLs After Essence Pro Entry Header On Single Pages

This code enables you to add 1 or 2 buttons after the entry title on any single page using different text & button links for each buttons like this :

The display of both buttons assumes you have added custom fields with values like this :

The button(s) only display if the custom fields for your custom button text have a value. If no value added for 1 button, only 1 button will display like this :

The display of 1 button assumes you have added custom fields with values like this :

Installation

Here’s the code you can copy & paste to the end of your Essence Pro themes functions file :

Download Folder

The button(s) won’t display until you have added the custom fields with at least 1 value.

Related Tutorials

Categories
Genesis Tutorials

Unlink All Archive Links For Each Entry On Per Post Basis

This archive template enables you to unlink all post links on a per post basis. By default, all links are disabled including links for your :

  • Featured image
  • Entry Title
  • Category shortcode
  • Read More

The screenshot above shows the links enabled for the post on the left and disabled by default for all other posts including the post on the left. You can enable the links using WordPress custom fields or any custom field plugin like ACF using the custom field add_links.

Demo Video

Shows how to use custom fields to add back links for archive entries in Genesis.

Coded for use with the Essence Pro child theme by StudioPress however will work with any Genesis child theme.

Installation Steps

There’s 2 steps :

  1. # Upload the file named archive.php to your child theme folder
  2.  

  3. # Create a custom field named add_link and add 1 to the value field to enable all links on archive pages for this specific post
  4.  

Front Page

If you want this to work on the front page, copy the archive.php file and rename it front-page.php or home.php

Download Folder

Categories
Genesis Tutorials

Essence Pro Fixed Header

The solution in this download folder enables you to make the site header in your Essence Pro theme sticky. To do this, the color of the header elements & background are changed from transparent to white as seen in this screenshot :

Demo Video

Shows the Essence Pro themes header fixed on scroll with the header hero image displaying below the site header rather than behind it.

Installation Steps

There’s 2 steps :

  1. # Upload the title-functions.php file to your Essence Pro themes lib folder replacing the default file of the same name.
  2.  

    The screenshot inside the download folder named title-functions.png shows the code which is modified.

  3. # Copy & paste the CSS from the style.css file to the end of your Essence Pro themes style sheet and clear caching.
  4.  

Once you’ve completed the installation steps, you’ll also need to activate the one-click child theme setup which is enabled when you activate the Essence Pro child them for the first time.

Download Folder

Categories
Free Tutorials Genesis Tutorials

How To Modify The Responsive Menu Text In Genesis

This simple solution enables you to change the name of the responsive menu from the default text which is MENU to something else.

All you need to do is go to your child theme folder > config > responsive-menus.php and add this line of code :

'mainMenu'            => __( 'Menu Text', 'genesis' ),

to this existing code

return [
    'script' => [
        'menuIconClass'       => 'ionicons-before ion-ios-menu',
        'menuIconOpenedClass' => 'ionicons-before ion-ios-menu',
        'subMenuIconClass'    => 'ionicons-before ion-ios-arrow-down',
        'menuClasses'         => [
            'combine' => [
                '.nav-primary',
                '.nav-off-screen',
            ],
            'others'  => [],
        ],
    ],
];

And you should end up with something like this :

Tested using the Essence Pro child theme by StudioPress however should work in most newer versions of Genesis child themes.

Categories
Genesis Tutorials

Add Header Right Widget For Social Icons To Essence Pro

This download folder includes the code which adds a widget area to the header right position. In this case, we add the Simple Social Icons widget in the Header Right widget area to display social icons to the right of the search function like this :

This solution enables you to display your social icons or anything you put in the header right widget area to the left or right of the search form.

Demo Video

Shows the simple social icons widget added to a custom widget area added to the right of the header area in the Essence Pro child theme by StudioPress.

Installation Steps

There’s 2 steps :

  1. # Upload the modified header-functions.php file your Essence Pro themes lib folder replacing the default file.
  2.  
    Step 1

  3. # Copy & paste the CSS from the style.css file to the end of your Essence Pro themes style sheet and clear caching.
  4.  
    Step 2

Download Folder

Categories
Genesis Tutorials

Remove Featured Image From Hero Header Not Archives In Essence Pro

This download folder contains the modified file which enables you to remove the featured image which displays in the header hero position when added on single posts in Essence Pro. However, it doesn’t remove the featured image from archives.

By default, the image added in customize > Essence Pro Settings > Header Background image is displayed on the front page and all single posts and pages when a unique featured image is not added.

Demo Video

Shows the on/off switch added on the Edit Post enabling your to show or hide the featured image in the header without removing it from archive pages.

Installation Steps

There’s 2 steps :

  1. # Install ACF and go to Custom Fields > Tools > Import Field Groups and import the acf-72991.json file like this :
  2.  

    Step 1

  3. # Upload the header-functions.php file to the Essence Pro themes lib folder replacing the default header-functions.php file. Additional code has been added on lines 196, 25 & 227.
  4.  

    Step 2

Usage on Single Pages

There’s 2 steps if you want to use the functionality on single pages.

Step 1 – In ACF Field Groups > Location, add this 2nd rule which adds the switch to all single page edit screens

ACF Location Rules Single Pages

Step 2 – Modify the PHP code for the conditional tag on line 227 in lib > header-functions.php from is_singular('post') to is_singular() like this:

header functions file

Download Folder

Related Tutorials