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
- 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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Unlimited styling customisation options
Includes a CSS generator
Makes it easy to edit the functions.php file
Not as feature rich as Genesis Extender plugin
Bit more documentation would help
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.