Genesis Essentials Review: A Great Value Theme Customizer

Genesis Essentials Review: A Great Value Theme Customizer

Genesis Essentials

Editor’s Rating

Ease of Use


Value for Money

Documentation and Support

Genesis Essentials is the third website customization tool for the Genesis Framework from the Cobalt Apps team. The plugin follows in the footsteps of the Dynamik Website Builder tool and the Genesis Extender plugin and gives users the ability to customise their Genesis-powered website without the need to write any code themselves.

If you want to make changes to the appearance of your website, such as the fonts, colours, content areas, and more, or you’d like to have the ability to create a widgetized custom homepage layout, and you are using the Genesis Framework and one of its child themes, then Genesis Essentials could be just what you are looking for.

In this review we will cover the features of this plugin and also look at the main differences between Genesis Essentials and Genesis Extender to help you decide which is the right option for you and your goals.

What Can Genesis Essentials Do?

It’s fair to say that the Genesis Essentials plugin can be considered the lite version of the Genesis Extender plugin which we recently reviewed here.

The plugin can be used on any WordPress website running on the Genesis Framework and using one of its child themes. Once installed, it gives you access to some handy features that allow you to make changes to the appearance of your site.

Features of the Genesis Essentials Plugin

The features of Essentials that allow you to customise your website include:

  • Create a static homepage with a custom layout with widget areas
  • Add Google Fonts to your site with ease
  • Use the custom CSS builder to generate CSS for changing the appearance of your site
  • Preview your changes in real-time with the front end CSS editor
  • Use the custom PHP builder to generate WordPress/Genesis-specific code
  • Add custom PHP to your functions.php file in a more convenient way
  • Theme update proof your CSS, functions, and JavaScript customisations
  • Create custom thumbnail image sizes for featured and widget images
  • Backup and transfer your settings with the import/export tool

Genesis Essentials certainly has a good set of features for customising how your website works and looks, so let’s go ahead and see how easy it is to use.

Using Genesis Essentials

Once the plugin has been installed and activated on your WordPress website, a new set of options are added to the Genesis sub-menu on the WordPress admin dashboard:

  • Essentials Settings
  • Essentials Custom

Genesis Essentials Settings

Essentials Settings

The settings page is broken up into three sub-sections: plugin info, general settings, and import/export.

On the plugin info page you can view the version information, find links to useful content on the developer’s website, and enter your license key.

The general settings sub-page gives you access to a series of options that can be used to customise how your entire site looks and functions. These settings include:

  • Activate the Genesis Essentials Static Homepage: enable tools for customising the homepage
  • Add Google Fonts: add individual fonts to your site from the Google repository
  • Remove all page titles (or remove by specific page ID): allows you to add your own custom post title and formatting
  • Custom post types: enable for custom post types
  • Activate WordPress Post Formats: enable the post format selector
  • Genesis Essentials Stylesheet Options: include column classes and minify stylesheets
  • Add Support For Font Awesome Icons
  • Set Custom Thumbnail Sizes: set sizes for up to five thumbnail image types
  • Enable Genesis Menu “Fancy Dropdowns”: display sub-menu indicators and a dropdown effect
  • Enable Protocol Relative URLs: support for sites using SSL

Each option has its own tooltip icon which links to the corresponding page of the online support documents to provide more information.

If at any point you want to reset the settings, the plugin settings reset button will return the settings to their default values.

Creating a Widgetized Static Homepage Layout

One of the powerful features of this plugin is the ability to create a custom layout for your website’s static homepage.

While most Genesis-powered themes do allow you to add widgets to the homepage of your site, Genesis Essentials takes this further and allows you to choose your own layout for the homepage from a range of options.

Read More:   The 8 Best WordPress Page Builder Plugins Compared 2019

Genesis Essentials EZ Homepage

Doing this is as easy as selecting the homepage layout structure of your choice from the dropdown menu and then populating that layout with a range of widgets of your choice.

Genesis Essentials EZ Homepage Structures

Once you’ve enabled this option and chosen a structure, a selection of new widgets will be added to the widgets page on your site. From there it’s simply a case of dragging any of the widgets that are active on your site into position to build your homepage.

Genesis Essentials EZ Widgets

This widget content could include recent posts, featured posts, optin forms, or any other WordPress core widgets, as well as those from any plugins you have installed on your site. Once you’ve added the content to the widgets, it will be displayed on the homepage of your site in the layout configuration you have chosen.

Genesis Essentials Homepage Example

When setting up your widgetized static homepage with Genesis Essentials you also have the option of including a sidebar on the homepage which sits outside your custom layout. This allows you to display another set of sidebar widgets alongside your homepage layout and its content.

Import / Export

Through the import / export page it’s possible to export the plugin settings and any custom CSS, JavaScript, and functions that have been applied to your site. The exported data can then be imported into other sites with this plugin or the Genesis Extender plugin installed.

Import Export

This feature can be a great timesaver when it comes to setting up a new site or exporting your custom code to another website you are working on.

Again like the previous Genesis customisation tools from Cobalt Apps, each option in the settings is accompanied by a tooltip icon which when clicked, takes the user to the relevant page in the Genesis Essentials knowledgebase. There users can find an explanation of what that setting or option is related to, in order to help users decide whether to use that feature or not.


The plugin settings pages also feature a floating save changes button which is always on display, no matter how far you have scrolled down the settings pages. This is a really handy feature as it means you can quickly save your changes without having to lose your place in order to access the button and commit your changes.

As you can see you get access to a powerful set of options and features for configuring how your site works before you even get down to the editor tools.

Essentials Customs

The second entry that this plugin adds to the Genesis sub-menu on your dashboard is the Essentials Customs. This is where you can start customising the appearance of your site and personalising the individual elements that make up your theme.

Custom CSS

From the custom options screen you can add custom CSS to your theme’s stylesheet or add custom PHP to your theme’s functions file. However, if you don’t know any CSS, and to a lesser extent PHP, that doesn’t matter as Genesis Essentials includes a code generator to help you out.

Custom CSS Builder

To build the code, it’s simply a case of selecting the element you would like to generate code for and then entering the values using the dropdown menus or colour pickers.

The controls on the CSS builder consist of:

  • Elements: select a theme element to customise
  • Backgrounds: colours and image
  • Borders: type, style, colour, and radius
  • Margins and padding
  • Fonts: type, size, colour, alignment, etc.
  • Dimensions and position: width, height, and float, etc.
  • Shadows: blur, colour, and spread, etc.

Once you’ve built the code it can then be copied and pasted into the custom CSS panel on the same page to add it to your site.

Adding the CSS here rather than inserting it into your theme’s stylesheet is a great way to keep track of your customisations and also ensure that they aren’t overwritten when you update your theme. Working with custom CSS here is also more convenient than editing the files directly via the WordPress default editor, or uploading the updated file to your server via FTP.

Read More:   Divi Review – A Powerful Multipurpose WordPress Theme

Front End CSS Editor

As well as the back end CSS builder, Genesis Essentials has another powerful customisation tool: the front end CSS editor.

A more featured packed version of this tool can be found in the Genesis Extender plugin, but here it’s still a great way to make changes to the underlying CSS of your site and see the results in real-time – although the changes won’t be made public until you are ready for them to go live.

To enable this editor, simply check the appropriate box and then switch to the front end view of your website for editing.

Launch CSS Editor

From the front end of your website you can now click on the show CSS builder button to launch the front end editor. Clicking this button displays the draggable text editor that comes complete with line numbering and syntax highlighting.

CSS Editor

From here you can type or paste in any CSS that you want to apply to your site and get a live preview of how those customisations will look as you type.

If you don’t know CSS then you can easily switch back to the back end view and use the CSS builder to generate the CSS and then switch back to the front end view and paste it into the editor.

Back End CSS Builder

The main difference between the front end editor in Genesis Essentials and the one in the more expensive Genesis Extender is that the Extender version allows you to click on a page element, such as the site title, and then you can begin adding the custom CSS for that element.

Example of Genesis Extender Element Selector
Example of the Genesis Extender Element Selector

With the lite version found in Essentials, you must be able to find out the element name on your own, and then enter it into the editor before adding the CSS to customise the appearance of that element.

With Essentials, you can switch back to the back end CSS builder and view the entire list of elements used by the theme on your site. However, you won’t be able to find out the name of the element that refers to the area of the site you want to customise simply by clicking on it as is the case with Extender.

Extender also gives you access to the CSS builder on the front end of your site, saving you from having to switch back and forth to grab the CSS.

These additional features make Genesis Extender a much quicker way to add custom CSS to the individual elements that make up the theme you are using.

Custom Functions

As well as the Custom CSS panel, there are also Custom Functions and Custom JavaScript panels.

The Custom Functions area allows you to add code to your theme’s functions.php file simply by typing or pasting it into this text area. The benefit of doing this is that it keeps your custom code separate from your theme’s functions.php so that when you update your theme files your changes aren’t overwritten.

It also makes it easy to keep track of your customisations as they are all listed here in this text area. Although this custom PHP is hardcoded to your theme files, this feature saves you from having to go and edit your theme’s functions.php file directly.

So now when you are next following a tutorial or someone instructs you to add a code snippet to your functions.php file, you can just paste it into the custom functions panel here instead.

If you want to add your own custom PHP then the custom PHP builder tool, which works in a similar way to the custom CSS builder tool, can help you out. However, you will need to know some PHP and also how WordPress is built to really make use of this feature.

Custom PHP Builder

You can also add custom JavaScript to your site in a similar way. Although there is no JavaScript builder so you will need to either write the code yourself or paste it in from an external source.

Genesis Essentials vs. Genesis Extender

Genesis Essentials is lite version of the Extender plugin and can be considered the foundation upon which Extender builds upon. While the third product from Cobalt Apps, Dynamik Website Builder, is a child theme, both Essentials and Extender are plugins which are installed alongside your Genesis child theme of choice.

Read More:   X – The Ultimate WordPress Theme Review 2020

The best way to compare Essentials and Extender is to look at what is included in the latter that isn’t in the former. Features not found in Essentials include:

  • A more feature rich front end CSS builder tool
  • Custom WordPress and page templates
  • Custom labels
  • Custom widget areas
  • Custom hook boxes
  • Custom WordPress conditionals for widget areas and hook boxes

If you are looking for a tool that makes it as easy as possible to change the appearance of your Genesis child theme, such as the fonts, colours, and other elements, then the more featured front end CSS editor of Extender makes it the better choice.

This is due to the ability Extender gives you to be able to click on a page element and then start creating custom CSS for that element. With Essentials you would have to find out the element name yourself. When you consider that most themes tend to have hundreds of elements this isn’t as easy as it might sound.

Essentials Element Selector

So although Essentials includes an element selector on the back end CSS builder, you still have to select the right element before creating the custom code and customise that element.

If you want to a more time efficient and frustration free CSS editing experience then I would recommend the Genesis Extender plugin over the Essentials as it really is an impressive tool.

To find out more about the full set of features of Extender then please read our review.


The Genesis Essentials plugin is available on three pricing plans:

  • Single Site: $29
  • Up to 3 Sites: $59
  • Unlimited Sites: $99

These pricing plans all include one year of support and updates. Access to the support and updates can then be renewed for 50% of the original purchase price. Alternatively you can go on using the plugin unsupported and without access to updates.

You can view the latest pricing information on this page of the Cobalt Apps website.


The Genesis Essentials plugin was created for anyone who wants an easier way to make changes to the Genesis child theme they are using on their website.

Whether you want to create a new homepage layout complete with custom widget areas, or you want an easier way to make changes to the appearance of your site by editing the CSS, or have a more convenient way of adding new functions to your site via the functions.php file, Genesis Essentials has been built for you.

The price of this plugin makes it a great value proposition that will surely save you lots of time when editing your Genesis child theme and the appearance of your website. However, if you can afford the extra cost of the Genesis Extender plugin I think you will find the additional features, especially the more useful CSS builder, more valuable.

If you already know your way around the elements of a theme, or don’t mind finding them yourself, then the low price of Essentials makes it a great investment that is sure to save you time and effort when customising your Genesis powered WordPress site.

Whichever plugin you choose you will be getting a solid product that is well designed and well developed and will help you unlock the power of the Genesis Framework for your website.


Customise any Genesis child theme

Create custom homepage layouts

Very affordable

Unlimited styling customisation options

Includes a CSS generator

Makes it easy to edit the functions.php file

Editor’s Rating


Genesis Essentials is a plugin which allows you to customise any Genesis Framework child theme. It allows you to create custom widgetized homepage layouts and includes a tool to generate CSS to modify the appearance of your website via the built-in editor.

Visit here for more information.

Spread the knowledge
Next PostRead more articles