Extending the Genesis Child Theme: Going Green

going-green-pro-screenToday, the Going Green Genesis Child Theme was updated to version 3.0. Its a beautiful update packed with 4 color options (Default, Forest, Mint, and Olive) and support for the Genesis 2.0 goodies.

Getting the stock setup online, took no time at all, thanks to the simple setup steps (Login Required) StudioPress provides.

I dare say, green bloggers are going to make a bunch of folks green with envy by using this beautiful Genesis Child Theme to showcase their content.

What about non-bloggers, who need more of a CMS styled home page for their website? I have a Forest Management client that this theme would be perfect for, other than the blog page being his home page.

Good thing I have the Genesis Extender Plugin.

Home Page

What if you want to use the Going Green Child Theme but you need your home page to have more of a CMS layout, ie one that is not your blog page?

Genesis Extender Plugin

It could not be easier to take control of your home page and use your choice of the 49-one-click EZ Home Page options. Of course you will want to start by installing the Genesis Extender Plugin.

Once installed and active, on the front end of your website, you will still see the default Going Green home page.

going-green-home-page

Thanks to the Genesis Extender Plugin, changing the home page and keeping your blog page, is greatly simplified.

6 Steps to CMS Home Page

wpid30901-media_1376946254912.png
  1. Choose Extender Settings from the Genesis Panel
  2. Check the box to activate the Genesis Extender Static Homepage
  3. Choose from the 49-one-click home page setups
  4. Do you want your EZ Home Setup to display within the (A) full page or within the (B) content area? Option (B) allows you to display your sidebar(s) in addition to your content area.
  5. Check the box to turn on HTML5 Markup for the Going Green Child Theme
  6. Click the green Save Changes Button

Now your home page looks like this:

wpid30902-media_1376946285803.png

I chose the EZ Home 1 – 2 – 1 and I chose to have it take up the whole home page (so no sidebars are displayed). Now I can add widgets to these areas in order to finish out the page. First though, lets add a bit of padding to the home page area so it looks like the rest of the theme.

Lets activate the Front End CSS Builder

wpid30903-media_1376946305909.png
  1. Choose Extender Custom under the Genesis Menu
  2. Toggle on the Front-end CSS Builder
  3. Click Save Changes Button

Go back to the home page

wpid30905-media_1376947968108.png
  1. Click the green button to show the CSS Builder
  2. Click the (at the time) Red Enable Elements Button.
  3. Click on the Element Selector which will include the element you want to style, in this instance the EZ Home Container Wrap
  4. Choose the Elemnt you want to style from the EZ Home Elements Drop Down menu
  5. Click the double arrow ( >> ) to insert the CSS selector into the css staging area
  6. Complete the CSS using the CSS Builder tabs from the top, in this instance I used Margins & Padding and added 20px of padding to each of the four input boxes (top, right, bottom, left)
  7. Insert the CSS into the Custom CSS editor, so that it can be saved. If you leave it in the CSS staging area, it can NOT be saved
  8. Click the save changes button

Now, about that Blog Page

wpid30904-media_1376946611674.png

Go to the WordPress Backend and click the Add new Page under Pages
Give your page a name, I chose Blog
Assign the Blog Template from the Templates drop down
Hit the publish button

Short Video showing how to change the Sixteen Nine Home Page