Customize Any Genesis Child Theme With The Genesis Extender Plugin

This summer, Catalyst released the Dynamik Website Builder for Genesis. With the Dynamik Website Builder it is possible to create your own Genesis child theme from scratch, simply by pointing and clicking – without coding.

Last week, Catalyst released the Genesis Extender plugin. This plugin adds a lot of the functionality of the Dynamik Website Builder to any Genesis child theme. Catalyst had to strip down the Design Options from Dynamik, since every child theme comes with its own unique design.

But with Genesis Extender even non-coders are able to customize any Genesis child theme with ease by a simple point-and-click approach – again without coding.

In order to examine the possibilities of the Genesis Extender plugin, I decided to give it a test ride with the StudioPress Focus child theme. Focus is basically a theme for all kinds of blogs – personal as well as professional.

For the purpose of this review, I want to transform Focus into a business theme; a theme with a homepage slider, a welcome message and three blurbs above the footer. Does that sound interesting?

Genesis Extender installs like any other plugin. Upon activation, it adds two links to the Genesis panel:

• Extender Settings
• Extender Custom

Let us see what these have to offer for non-coders.

The Genesis Extender Settings

The Extender Settings page serves three horizontal tabs:

• Plugin Info
• General Settings
• Import/Export

The Plugin Info screen provides a brief introduction to the Genesis Extender Plugin and refers to resources like the forum and tutorials – including some screencasts. This page also summarizes your WordPress environment – the version numbers of PHP, WordPress, and the Genesis Extender plugin.

At the General Settings you can set a static homepage, remove all page titles with one click, enable support for WordPress Post Formats, enable gzip compression, and include In-Post Options of the child theme’s custom post types – if any.

The Custom Thumbnail Sizes allow you to define your own custom thumbnail dimensions and opt for one of the Thumbnail Modes – Resize or Crop.

When enabled, the Genesis child theme will support the following WordPress Post Formats: Standard, Aside, Audio, Chat, Gallery,Image, Link, Quote, Status, and Video.

The Static Homepage settings are the most intriguing part of the General Settings of course.

Activating the Genesis Extender Static Homepage options does not only set a static page for your homepage, but it also lets you choose from 49 predefined homepage layouts!

Since our goal is to turn Focus into a business theme, with a slider, welcome message and three blurbs, we choose for a 1-1-3 homepage layout.

With a simple radio button you can opt to apply the chosen layout to the full width (Full Page) of the homepage, or just the content area. The latter option allows you to use one or two sidebars in combination with the custom content area.

For our business home page we need the full width of the frontpage, so we select the Full Page.

With the Genesis Extender Settings/Custom Import/Export options you can backup, restore and transfer the settings of the Extender Plugin from one WordPress installation to another.

By checking a box you can choose what settings exactly, you want to export or import:

• Plugin Settings
• Custom CSS
• Custom Functions
• Custom Conditionals
• Custom Widget Areas
• Custom Hook Boxes
• Uploaded Images

The Genesis Extender Custom Options

The Custom Options include:

• CSS
• Functions
• Conditionals
• Widget Areas
• Hook Boxes
• Image Uploader

The last option lets you upload and manage images just for use with the plugin.

Custom CSS

The first feature of the Custom Options allows you to activate the Custom CSS Builder in Front-End Mode – in other words, it is a live CSS editor.

To activate the Front-End CSS Builder; check the Activate Front-end CSS Builder box. A second check box appears allowing you use it in Editor Only Mode.

The Editor Only Mode is for those who are quite comfortable coding CSS. When you are not so familiar with CSS or rather not use Firebug, the Full Mode will help you to identify the correct CSS selector and enter your custom CSS for the selector regarding.

Leaving the Editor Only check box unchecked, hit the blue [Save Changes] button. Next, hit the Click To View Front-end link. This will open the front-end of the website in a new browser tab or window.

You will notice a [Show/Hide CSS Builder] button in the upper right corner of your screen – a button not visible for the visitors to your site by the way.

Clicking the [Show/Hide CSS Builder] button will launch the CSS Builder in Full Mode – on the Front-End, at the left side of the screen. At the same time, a second button appears in the top right corner, a blue [Save Changes] button.

You will have noticed the bar at the top of the screen – just below the WP Admin Bar. This menu bar will help you to select the proper element so that you can style it. What you see on the left side of the screen depends on your choice in that top bar.

The welcome message under the slider looks a bit thin. Let pump it up a bit.

First we click the red [Enable Element Selectors] button to display the selectors on the front-end.

We want to dress up the welcome message which belongs to the EZ Home Widget area, so we click the EZ Home selector on the front-end.

A second dropdown menu appears on the left, where we have to select our EZ Home Element; we select the EZ Home Middle Container. The welcome message gets highlighted in a soft green, so that we can verify whether we have picked the proper element.

Yes, that is the one, so we hit the double arrows (>>) at the right of the selected element. The code regarding the element is entered in the CSS box.

#ez-home-middle-container {
}

Now we add the following CSS between the braces:

color: #a3b460;
font-size: 24px;
font-style: italic;
font-weight: bold;
text-align: center;

We can see what we are doing, while we are doing it. The Live CSS Editor displays the results of our CSS additions immediately; the welcome text turns green, grows bigger, is transformed into italics, turns bold, and gets centered.

When you are satisfied with the results: first hit the “Click to Insert Into Custom CSS Editor” and then click the blue [Save Changes] button.

Done. That is how the Custom CSS Builder in Front-End Mode works.

Custom Functions

The Custom Functions tab serves a text area where you can enter your custom PHP code. There are tons of code snippets for the Genesis Framework scattered all over the internet. A great point to start is the StudioPress Tutorials page where you will find precooked code and tutorials delivering the most frequently requested code.

In our example, I want to remove the primary navigation menu at the top of the page and put it just below the header. So we add:

/** Reposition the primary navigation */
remove_action( 'genesis_before_header', 'genesis_do_nav' );
add_action( 'genesis_after_header', 'genesis_do_nav' );

The first line is just a remark for ourselves to remember us what we have done. The second and third lines are PHP code, and even when you do not know any PHP, you will probably understand what is going on here:

• first we remove the navigation before the header
• and then we add the navigation after the header

According to me we have already achieved our goal; turning Focus into a business theme by adding a widgetized home page.

But the Genesis Extender plugin has more to offer, so let us continue.

Custom Conditionals

With Custom Conditionals you can dynamically assign Widget Areas and Hook Boxes to selected pages – single post pages, singular pages, archive pages, etc. These conditions are formulated with WordPress Conditional Tags.

The Genesis Extender offers us the following options:

• Is Page
• Is Single Post
• Is Front Page
• Is Archive
• Is Category
• Is Tag
• Is Author

Next to the seven options listed above, the dropdown menu also offers NOT variants; next to Is Page, there is also an option Is NOT Page, and so on.

Suppose we want to activate a widgetized area before the content on inner pages for an inner page slider, a web banner or a subscribe box. How can we achieve that?

From the dropdown menu we select Is NOT Frontpage, since we only want to include inner pages.

We name the conditional is_inner_page – only lower case, whole numbers and underscores are allowed (we are coding here!). We leave the tag untouched.

Do not forget to hit the blue [Save Changes] button.

Custom Widget Area

Now that the conditional has been defined, we are ready to create the custom widget area:

1. in the Name field we enter inner_page_slider
2. from the Hook dropdown menu we select genesis_before_content
3. the second dropdown menu already displays Hooked, so that is okay
4. from the conditionals dropdown we select our earlier created conditional is_inner_page
5. when you want to add some custom CSS specifically to this widget area, you can assign a custom CSS class to this widget area; let us enter inner-page-slider

Done. Hit the blue [Save Changes] button!

No we have created a custom widget area which has been added to WordPress Widgets page, where you can add a slider – or whatever.

Custom Hook Boxes

For Hook Boxes you use the same hooks as for the Custom Widget Areas. The difference between a widget area and a hook box is its purpose. While you add one or more widgets to a widget area, you enter plain text or code into a hook box; HTML, CSS, PHP, JavaScript or shortcode.

The CSS Builder

You will probably have seen the [CSS Builder] button at the top of the Extender Custom page. Clicking this button displays the Custom CSS Builder. Here you can manually enter any custom code in the text box of the CSS Builder on the right.

However, you can also compose your custom CSS code through a point-and-click approach; set the desired value in the mid column and confirm your settings by clicking the button on the left. This will add a line of CSS code – the property and the entered value – to the CSS box.

With this CSS Builder you can compose custom CSS code for:

• Elements
• Backgrounds
• Borders
• Margins & Padding
• Fonts
• Dimensions & Position
• Shadows

Make your choice from the menu bar of the CSS Builder, and compose your Custom CSS by pointing-and-clicking; generate code without coding.

Extending Genesis Child Themes The Easy Way

Well, what do you think of the Genesis Extender plugin? Personally, I think it is an amazing product. Genesis child themes are turnkey solutions that offer you the opportunity to leap frog the development of your website.

With the Genesis Extender as a companion, you can add your own custom homepage to any Genesis child theme, transform a blogging theme into a theme for a business website or an online portfolio, and create custom page layouts which only appear in specific situations by applying conditionals. All without coding a single line of PHP.

And best of all, the plugin is only $44. That is a one-time fee, and you are allowed to use the plugin on unlimited sites – your own as well as your clients. So why not grab your own copy of Genesis Extender?