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:
- in the Name field we enter inner_page_slider
- from the Hook dropdown menu we select genesis_before_content
- the second dropdown menu already displays Hooked, so that is okay
- from the conditionals dropdown we select our earlier created conditional is_inner_page
- 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?
Keith Davis says
October 26, 2012 at 19:45Wow Wil
That is some in depth post that you’ve put together here.
I can’t think of anything that you’ve missed!
I love the Genesis Extender plugin and I’ve not stopped playing with it since I got it.
Certainly gives the non coder lots of options with Genesis themes.
Wil says
October 26, 2012 at 19:59That is quite a compliment from a Genesis specialist. Thanks, Keith.
Yeah, I definitely love the Genesis Extender too.
Take care, Wil
Jon Buscall says
March 11, 2013 at 18:16Hi Wil, I’m curious whether you kept using the plugin after this (great) review ?
I’ve been using it a bit but my developer isn’t convinced. He prefers to work in the raw style.css
Personally, I think Extender has a lot of potential. Does your initial enthusiasm for the plugin stil hold ?
Wil says
March 11, 2013 at 18:39Hi Jon, whenever I need to customize the structure of an existing Genesis child theme quickly, I turn to the Genesis Extender.
But please note, that the Extender is not intended for CSS styling (modifying the style.css), but for adjusting things like page layouts by applying hooks without the need to code PHP (modifying the functions.php). The Extender offers an easy to use graphical user interface for such modifications.
When it comes to CSS tweaks, I prefer – just like your developer I guess – a plain text editor and Firebug.
But yes, I am still enthusiastic about the Genesis Extender.
Vit says
July 16, 2013 at 16:37Hi Wil,
one question from newbie in wp. Does that mean : Genesis Extender = DWB ?
I purchased Genesis and my next step was to buy Dynamik them. What is the different between Genesis f.+studiopress t.+Extender and Genesis f.+Dynamik t.?
And does it work also with Prose or inSpyre theme?
Thank you
Vit
Wil says
July 16, 2013 at 17:03Hi Vit,
The Genesis Extender is a plugin that allows you to modify the layout of existing Genesis child themes. Think of creating custom home pages, and adding widget areas. Basically, with the Extender you are customizing the (funtions.)php through a graphical interface.
The Dynamik Website Builder is a Genesis child theme and WordPress theme framework offering a graphical interface allowing you to create you own Genesis child themes – php code as well as styling (css). The DWB comes with the Dynamik theme – a basic Genesis theme that you can use as a stepping stone, so that you do not have to start with a blank canvas.
With the DWB, you can export your work as a custom Genesis child theme as well as in a propriety format. You can import the latter into DWB in case of future enhancements, so that you do not have to start from scratch.
As a short recap:
* Extender; plugin, modifying existing Genesis child themes, customizing layouts (php)
* DWB; theme/framework, create your own Genesis child themes, by creating your own php and css
Hope this helps. Let me know when you have any further questions.
Good luck – Wil
Ennis says
August 12, 2013 at 11:07Hey Wil,
I’ve run a WP content blog since 2009 (http://nowthinkaboutit.com) but I know very little about coding. I recently bought Genesis and DWB and I’m excited about the potential of these plugins but I’m finding it difficult to figure out how the various settings interrelate. I need help big time.
My question is this: Have you written a post or could you write one describing in detail how to insert a box (I’m not sure if it should be widget or hook – you did say what the difference is but I’m still not quite certain – no reflection on you) into which I could place an Amazon image link and some text, also with links. An example would be this page: http://www.pressingsave.com/surprised-by-oxford
What I’m trying to do is build a one page site to promote a book I wrote. I want the books image along with some text and links wrapped in a box/border on the left side of the post and other content outside the box on the right. I would also like the text in the main content area to have a wider margin on the right bottom sides of the box. – not sure how wide but can’t test it till I know how to change it.
Thanks for listening,
Ennis
Wil Ransz says
August 12, 2013 at 20:44Hi Ennis,
It is not surprising that you might feel overwhelmed when you are just starting to explore all the features of the Dynamik Website Builder. It is my pleasure to point you in the right direction or rather in one of the possible directions, since there is more than one way to do it.
When I understand correctly, the site regarding will basically have just one (landing) page. In that case:
1. head over to Dynamik Design >> EZ >> Static Homepage EZ-wiget-areas and select the radio button in front of ‘Static Homepage’.
2. next, select ‘EZ Home 3 1’ at the Static Homepage Structure – this will create three EZ Home Top widget areas and one EZ Home Bottom #1 area
3. create four pages: 1) book cover, 2) links, 3) testimonials, 4) content
4. add the Genesis Featured Page widget to the widget areas mentioned above and select the desired page
That is it.
Starting this week, I will be posting regularly – when possible one a week – again here at wilwebs.com. Let me know when you want to work this out in a post.
Good luck with your book! – Wil
Ennis says
August 12, 2013 at 21:16Hey Wil,
Thanks a bunch for responding to my question. Let me work on this and I’ll let you know how it goes or ask another question (likely) :-). In fact, before I close this comment, one question. In item number three was that meant to be four “pages”?
Thanks again.
Wil Ransz says
August 12, 2013 at 21:26Hi Ennis,
With four pages, I am referring to four WordPress pages, each representing a content block: 3 for the book cover, links and testimonials at the top, and the 4th for the text below the top three – just as with the ‘Surprised by Oxford’ web page. We have four widget areas, so we need four WordPress pages to add content to those areas.
Wil
Ennis says
August 13, 2013 at 12:03Hey Wil,
I’ve made progress but still falling short of my goal. Here’s what I did:
1. I made two pages (Book Cover and Content). I included “Links” immediately under the book cover image in the book cover page and I only have a few testimonials now so I can add that page later. These two pages cover everything I need for the moment (I think – I suspect you might tell me I’ve got it wrong – no surprise there).
2. I selected the radio button next to “Static Homepage” in the Static Homepage EZ widget area.
3. For Static Homepage Structure I selected “EZ Homepage 2” because I only needed two widget areas for the moment. Again, you may be sighing and wondering why you’re trying to help a dummy.
4. In the “Appearance >> Widgets” area I loaded the “Book Cover” page in the EZ Home Top #1 widget and the “Content” page in the EZ Home Top #2 widget. When I did that my home page screen came up with this message: “Sorry, no content matched your criteria.”
For some reason I couldn’t get a home page to render with the widgets.
So from there I went to Dynamik Design >> EZ >> Feature Top EZ-Widget Area and did the following:
5. I selected “Home” for the “Feature Top Display Locations.”
6. I selected “EZ Feature Top Wide Right 2” for the “Feature Top Structure.”
7. I loaded the “Book Cover” and “Content” pages in the EZ Feature Top #1 and #2 widget areas and you can see how the page renders at http://indefenseofdivorce.com
Instead of loading horizontally, side by side (“Book Cover” left and “Content” wide right), they are loading vertically, one on top of each other. The formatting is also messy and an extra image for the cover is showing on my browser (Firefox).
So, as I said, I’ve made progress but still a bit confused. If you can help I’ll be grateful. But if your busy and unable to respond, I’ll understand. Thanks
Wil Ransz says
August 14, 2013 at 07:03Hi Ennis,
What I do not quite understand is that the widgets are not loading on the static homepage, but that these do load in the Feature Top Areas. That is odd when you are applying the same widgets, loading exactly the same content.
Anyway, when you choose a Static Homepage Structure 2, you get two widget areas next to each other. If that is what you want, its okay, of course.
As I see it, the two widget areas are currently rending next to each other. The fact that we see two book covers might be because you have checked ‘Show Featured Image’, while you have also added that image to the content.
However, there is still a message ‘Sorry, no content matched your criteria.’ at the bottom. What is triggering that message? Did you disable the static homepage?
Wil
Ennis says
August 14, 2013 at 08:14Hey Wil,
No, the static home page is still selected but I also asked Dynamik support about this and following is what I was told:
“If you want to use the EZ Static Homepage then make the settings at Dynamik Design > EZ and then at Settings > Reading > Front page displays, select Your latest posts. This forces WP to use the EZ Static Homepage rather than the default blog page function which would otherwise override the Dynamik setting.”
It seemed counter intuitive but it worked. Would be great to have a diagram showing how the Genesis and Dynamik settings interact, which one has priority over the other, where they conflict and so on.
But I still have a problem. On my browser the widgets are still vertical (one on top of the other) so it is strange that they are rendering horizontal on yours. I’ve sent a support query about this to see what they say. Will let you know.
Wil Ransz says
August 14, 2013 at 08:25Okay. I have checked your web page in several browsers, all are showing two widget areas next to each other. Is it possible that you are browsing with a narrow browser window?
Concerning the static home page, that is how Genesis works. Some themes require you to set a static home page at the WordPress Settings >> Reading.
Genesis, however, checks whether there is a home.php. Since a home.php indicates a at static homepage. Because of that, you do not have to set a static page at the Reading settings manually when using Genesis – unless you want to override the default Genesis behavior.
Ennis says
August 14, 2013 at 09:55Well, the laugh is on me. I widened my screen in FF and the widgets rendered side by side. I guess because I selected “Responsive” design the widgets were shifting to accommodate a narrow screen. Sorry for sending you on a wild goose chase.
I’m not sure I understand your explanation of the Genesis issue with home.php but it’s not your explanation as much as my lack of knowledge. I have a very limited – hardly noticeable – understanding of CSS. PHP is really just a mystery to me. But thanks for giving me some information.
Now, for another question – I warned you :-). Can I reduce the width of the widget on the left and put a border around it? I did look at the EZ Home settings but didn’t see anything that allowed adjusting the width.
Again, if you’re busy or just tired of my incessant questions, not too worry, but you have helped.
Thanks
Wil Ransz says
August 14, 2013 at 10:10Hi Ennis,
Well, this is blog for non-geeks making websites, so you have come to the right place 😉 . However, time is an issue. Nevertheless, I am happy to assist you where I can.
In my opinion, there is no need to know php when creating websites with Dynamik. Sooner or later you might feel the desire add/change php, but you will discover that there is a lot of precooked php code for Genesis available on the web – just ask Google. To apply it, you only have to add it to the Function box of the Dynamik Custom settings.
BTW, when are not able to find what you are looking for, just leave me a note. When possible, it will be my pleasure to cover the topic in a post.
CSS is another story. Investing a little time in CSS will pay off – fast! For some more details, please check this post.
For example, everything you have mentioned above about the width and border, can be achieves with some CSS. Do not forget to install Firebug (Lite), since it will turn out to be a big time saver.
When you have any questions or remarks regarding my post on CSS, do not hesitate to leave a comment over there.
Ennis says
August 14, 2013 at 11:33Thanks Wil. You’ve really been very helpful and I am checking out the links to your other posts. Great information!
Kitty Bitty (@healthyKitty) says
October 6, 2013 at 06:47Hey Wil,
Quick question. Is it possible to change the font in nav menu(s) to Google fonts? Also reading everything I can find about Genesis Extender before purchasing…
Thanks much!
~Kitty
Wil Ransz says
October 6, 2013 at 07:15Hello Kitty,
Good to see you here! Yep, you can import a Google Webfont and assign the font-family concerned to the navigation with a little CSS.
The new look of ThemingWP – as you might have found out already – was achieved with the Genesis 2.0 Sample Theme and the Genesis Extender.
Let me know if you need any further input.
Good luck – Wil
Kitty Bitty (@healthyKitty) says
October 6, 2013 at 07:48Thanks Wil, I’m sure I’ll be back!
🙂
~Kitty
Alex says
May 22, 2014 at 13:55I am a non coder (do not know/use any code) and it seems like the main purpose of the Genesis Extender Plugin for a non coder is the EZ Home Widget to change the theme layout.
You mentioned about custom page layouts. From my understanding is that Extender Plugin cannot change the width of the content, width of sidebar and overall width of website. It also cannot change the sidebar to none or 1 or 2 column sidebar, or change sidebar (right/left) position or header size.
Wil Ransz says
May 23, 2014 at 11:08Hello Alex,
Although the Genesis Extender plugin offers a Custom CSS area, you will have to enter the desired CSS rules manually there. So, not by point and click like the Dynamik Website Builder. The reason for this it that the Genesis child themes are too unique build a catch all CSS modifier.
It is also true that the width of the website, content area, sidebars and header size are controlled by CSS, not by the functions.php. The PHP is where the Genesis Extender plugin comes in. It allows you to create custom page layouts. You can add a custom homepage to any Genesis child theme with the Genesis Extender, so can turn any blog theme into a business or portfolio theme.
However, you can not only add custom widget areas to the home page, but also to the inner pages. Think of an inner page slider, or a inner page featured area for important notifications, or even ads(ense code). Genesis Extender 1.4 even lets you create you custom page templates.
So where Dynamik has been created to build your own Genesis child themes without coding (PHP and CSS by point-and-click), the Genesis Extender is intended to modify the structure (the PHP code) of existing Genesis child themes by point-and-click.
Let me know when you have any further questions.
Take care,
Wil
Alex says
May 23, 2014 at 11:26Does it mean that the width of the website, content area, sidebars and header size can be changed by entering code in the Custom CSS area of Genesis Extender plugin? Is there a guide on what CSS code to enter? Thanks