1. Home
  2. /
  3. Blog
  4. /
  5. Genesis framework
  6. /
  7. Specific themes
  8. /
  9. Essence Pro Setup Guide

Essence Pro Setup Guide

Please Note!There is now a new version of Essence Pro theme that has an automatic homepage set up using the atomic Blocks plugin.

For more information about Atomic Blocks visit Flagship Content.

To setup Essence Pro theme you use the WordPress Customiser and WordPress Widget areas.

This is what the end product looks like

Essence Pro theme by StudioPress
Essence Pro theme by StudioPress
  1. The Hero Section: Customise > Essence Pro Settings > Hero Section
  2. Widget area: Hero Section widget area containing a Genesis eNews Extended widget
  3. Widget area: Front Page 1 containing Genesis Featured Post widget showing 2 posts
  4. Widget area: Front Page 2 Genesis Featured Post widget showing 3 posts
  5. Widget area: After Content Featured widget area containing 3 Genesis – Featured Page widgets
  6. Widget area: Front Page Featured widget area containing a Custom HTML widget blockquote and cite tags
  7. Widget area: Footer CTA containing a Genesis eNews Extended widget

Video Setup Essence Pro theme by StudioPress


We’ll deal with the customiser first go to…

Dashboard > Appearance > Customise > Essence Pro Settings

Essence Pro Customiser Settings
Essence Pro Customiser Settings

Here you will see three sub tabs

  1. Basic Settings
  2. Header Background Image
  3. Hero Section
The three sub tabs in Essence Pro Customiser Settings
The three sub tabs in Essence Pro Customiser Settings

Basic Settings

The basic settings tab has one option.
Enable the “intro” paragraph style on single posts?
Check the box to automatically apply the “intro” font size and style to the first paragraph of all single posts.

Essence Pro customiser basic settings
Essence Pro customiser basic settings

Header background Image

The default header background image is displayed on the front page and all posts and pages where a unique featured image is not available.

Essence Pro header background image
Essence Pro header background image

Hero Section

Here you can type the text that displays in the front page hero section of your website’s homepage.

There are two text boxes, hero title and hero intro paragraph.

Type your homepage, Hero Title, in the first box and type your homepage introductory paragraph into the second of these two boxes. Then click the blue Publish button to save your changes.

If you do not want to use the hero section, you can untick the box, and the homepage hero section will not display.

Adding the homepage title and intro text in Essence Pro theme
Adding the homepage title and intro text in Essence Pro theme

The other settings in the WordPress Customiser are standard settings that you will be familiar with if you’ve used WordPress before.

Setting up the main body of the Essence Pro homepage

If you’d like to setup your site like the Essence Pro demo website, you will need to add the content that displays beneath the homepage hero section. To do this you add widgets to widget areas. Although you can do this via the customiser, I prefer to go to…

Dashboard > Appearance > Widgets

To setup the Essence Pro homepage, you drag widgets from the left hand side into widget areas on the right hand side. Then configure the widget settings. When each widget is configured make sure you click that widget’s blue save button.

The homepage widgets and their settings as used in the Essence Pro demo site

Hero Section (widget area)

The demo uses a Genesis eNews Extended widget in the hero section widget area. I’ve made a comprehensive tutorial about setting up the eNews widget. This is the newsletter sign up box inside the hero header section.

Essence Pro eNews settings
Essence Pro eNews settings

Front Page 1 (widget area)

  1. If you have multiple categories, choose one
  2. Featured POST widget showing 2 posts
  3. Set a featured image of 800x400px centred
  4. Show the post title and post info
  5. Set a content type of show content limit then set a content limit of 110 characters
  6. Do NOT tick the box to show category archive link.
Essence Pro Front Page 1 widget area featured post widget
Essence Pro Front Page 1 widget area featured post widget

Front Page 2 (widget area)

Featured POST widget showing 3 posts

  1. If you have multiple categories, choose one
  2. Show 3 posts
  3. If you choose the same category as used in Front Page 1, offset by 2 posts. This avoids displaying the same posts twice
  4. Set a featured image of 800x400px centred
  5. Show the post title but do not show post info
  6. Set a content type of no content
  7. This time do tick the box to show category archive link. This displays the big square button that says Read More Posts
Essence Pro Front Page 2 Featured Post Widget
Essence Pro Front Page 2 Featured Post Widget

After Content Featured (widget area)

Do not confuse this widget area width the Front Page Featured widget area!

In the demo, this is the row of three post titles on top of three featured images. This widget area displays on all posts and pages including the front page.

The Ebook row on the front page of Essence Pro theme
The Ebook row on the front page of Essence Pro theme

Drag 3 Featured PAGE widgets into this widget area

Drag 3 Genesis Featured PAGE widgets into the After Content Featured widget area of Essence Pro theme.
Drag 3 Genesis Featured PAGE widgets into the After Content Featured widget area of Essence Pro theme.

Open each of the 3 Genesis Featured PAGE widgets and configure the settings

Settings for the 3 Genesis Featured PAGE widgets in Essence Pro theme
Settings for the 3 Genesis Featured PAGE widgets in Essence Pro theme
  1. We are editing one of the 3 Genesis Featured PAGE widgets in the After Content Featured widget area of Essence pro theme
  2. In each Featured PAGE widget, select a page to display. The demo site uses About, Ebook, and Shop. You’ll have to choose pages that you have made inside your own site.
  3. Show a Featured Image of 800×400.
  4. Show the page title, but NOT content.
  5. Save your settings before configuring the next Genesis – Featured Page widget.

Front Page Featured (widget area)

This is the large text quote, below the Ebook row on the front page of Essence Pro theme.

A Custom HTML widget containing blockquote and cite tags in Essence Pro theme
A Custom HTML widget containing blockquote and cite tags in Essence Pro theme

To add a quote like this to your site…

  • Drag a Custom HTML widget into the front page featured widget area.
  • Type your quote.
  • Wrap the quote in blockquote tags.
  • Wrap the name of the person who gave the quote in cite tags.
  • Don’t forget to save your settings.
The Front Page Featured widget area in Essence Pro theme.
The Front Page Featured widget area in Essence Pro theme.

Footer CTA (widget area)

Footer CTA in Essence Pro Theme
Footer CTA in Essence Pro Theme

The Footer CTA widget displays on all posts, pages and archive pages. The demo uses the Genesis eNews Extended widget. I’ve made a comprehensive post explaining how to set this up.

The Genesis eNews Extended widget in the Footer CTA widget area of Essence Pro theme
The Genesis eNews Extended widget in the Footer CTA widget area of Essence Pro theme

Other widget areas

Primary Sidebar

The front page does not display a sidebar. If you set inner pages to display sidebars put any widgets you choose in the Primary Sidebar widget area.

After Entry (widget area)

The after entry widget area displays after the post content on all single posts. It does not display on pages or archive pages. The demo does not use this widget area. If you want to use it, drag any widget you like into the after entry widget area.

Image sizes used by Essence Pro theme

  • Featured Images for posts and pages: 1600x800px.
    Image sizes used in the featured post and featured page widget 800x400px.

Navigation bars used in Essence Pro Theme

  1. If you go to Dashboard > Appearance > Menus
  2. Manage Locations you will see three menu locations.
Manage Menu Locations in Essence Pro theme
Manage Menu Locations in Essence Pro theme

Header Menu: displays under the site title
Footer Menu: displays above the footer credits
Off Screen Menu: displays a hamburger icon and the text “Menu” on the same row as the site title. When you click the hamburger menu, the menu takes over the full screen. This off screen, or full screen, menu will scroll if you have more links than can fit on the screen at once.

Essence Pro Theme