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 :
This solution extends this tutorial which positions the title area with the custom logo to the left and nav menu to the right on all screen widths.
Demo
Shows the custom logo positioned to the left and menu to the right on both desktops and mobiles devices at any screen width.
Installation
There’s 2 steps :
Step 1 – Paste the PHP code to the end of your Essence Pro themes functions file.
Step 2 – Paste the CSS to the end of your Essence Pro themes style.css file.
After you paste the CSS rules to the end of your Essence Pro child themes style sheet, remember to clear caching.
This code modification to the Essence Pro child themes enables you to display random header hero images every time the page loads.
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.
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.
This tutorial enables you to add a custom logo on the left, site title image in the middle and the search form on the right, all inline on desktops and stacked perfectly centered on smaller screens including handhelds and mobiles.
This solution enables you to use a image as your site title rather than site title text.
Logo – Site Title (img) – Search Inline on desktops :
Logo – Site Title (img) – Search stacked on mobiles :
Shows the logo on the left. site title in the middle and search form on the right.
Step 1 – Copy & paste the PHP code ( without the opening PHP tag ) to the end of your Essence Pro themes functions file.
Step 2 – Upload your site title image named logo.png to your Essence Pro themes images folder.
Step 3 – Set the width and height for your custom logo image in config > theme supports.php lines 23 and 24.
Step 4 – Copy and paste the CSS from the style.css file to the end of your Essence Pro themes stylesheet and clear caching. You can also modify the height of your images in the custom CSS which is commented.
Note : In this example, the custom logo is 124px X 124px and the site title image is 430px X 97px however, the height for both has been changed to 80px in the CSS as commented.
In your Essence Pro child theme folder, go to config > theme-supports.php and set your logo width and height. In this example, 100px X 100px is set.
Once you’ve completed the 1st step, crop or resize your logo to the same size as your settings and upload it to Customize > Site Identity.
You could also change the size using CSS however there’s no need if you set it right the first time.
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.
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.
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.
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.
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.
There’s only 1 step.
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.
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.
There’s 3 steps :
Image Sizes
Image sizes used in the demo video are 1600 by 1000 pixels
You can use the code in this tutorial to add some darkness to your slider images if using light colored text or bright images.
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.
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.
There’s 3 steps :
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.
By default, the Essence Pro themes front page header hero section displays 2 buttons. In this tutorial, you’ll get :
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.
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.
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 :
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.
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.
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.
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.
There’s 2 steps :
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.
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.
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 :
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.
You can then enable the box to remove the image from your screen options menu like.
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 :
Here’s the code you can copy & paste to the end of your Essence Pro themes functions file :
The button(s) won’t display until you have added the custom fields with at least 1 value.
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 :
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.
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.
There’s 2 steps :
If you want this to work on the front page, copy the archive.php file and rename it front-page.php or home.php
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 :
Shows the Essence Pro themes header fixed on scroll with the header hero image displaying below the site header rather than behind it.
There’s 2 steps :
The screenshot inside the download folder named title-functions.png shows the code which is modified.
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.
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.
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.
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.
There’s 2 steps :
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.
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.
There’s 2 steps :
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
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:
This CSS enables you to display your logo, menu & search form inline like this :
You can also display the header elements in any order like logo search menu.
And menu logo search.
The CSS also enables you to align each element to the start, center or end of each column area.
And the stacking order of the logo and menu elements can also be re-ordered when the responsive menu is displayed.
Shows the Essence Pro child theme by StudioPress displaying the menu logo search perfectly vertically aligned on the same line.
Also shows the the custom logo displaying full width when the responsive menu is active with the drop down menu displaying the same width as the logo.
There’s only 1 step.
# Copy & paste the CSS from the style.css file to the end of the Essence Pro themes style sheet and clear caching.
