The Catalyst WordPress Theme Framework – A First Look

On our quest for a WordPress framework, we will be reviewing the Catalyst WordPress Theme Framework in this post. Catalyst has been created by Eric Hamm, as a successor to the Frugal Theme. The initial release of Catalyst goes back to 2010.

The Catalyst Framework comes bundled with the Dynamik child theme. This review has been composed with the help of this Dynamic Duo.

The first step is activating the Dynamik child theme. The Catalyst panel comprehends three pages:

• Core Options
• Dynamik Options
• Advanced Options

Let us examine these three pages one by one. We start at the top.

The Catalyst Core Options

In this part of the Catalyst Panel you define the general settings and the structure of the website. In the upper right corner, you will notice the blue [Save Changes] button. This button is ubiquitous – it is always visible and within reach, but never obstructive.

The Core Options page serves ten horizontal tabs:

• Info
• SEO
• Header
• Navbars
• Content
• Excerpts
• Comments
• Footer
• Scripts
• Import/Export

The Info screen provides a brief introduction to Catalyst and refers to resources like the forum, tutorials and screencasts. This page also summarizes our WordPress environment – version numbers of PHP, WordPress, Catalyst, and the child theme.

The SEO Settings let you set your preferences for the Title Tag, Meta, Homepage, and Canonical URLs. This section also includes the Catalyst Kill Switch – a check box. In case you prefer a third party SEO plugin, check this box and the Catalyst SEO Options will be disabled sitewide.

With the Catalyst SEO Options enabled, you will have the opportunity to add specific SEO values for individual pages, posts and users on the respective pages.

At the Header tab, you can activate the Header Right Area which is a perfect place for a navigation menu or an advertisement. Leave this box unchecked when you prefer a full width header.

Catalyst offers several options to configure your Navbars. The Dynamik child theme supports natively two WordPress 3 menus. The first decision is whether to go for 0, 1 or 2 menus. When you opt for 1 or 2 navigation bars, you can choose for:

• default menus – automatic generated menus based on available pages or categories
• custom WordPress menus build at the Menus page (Appearance >> Menus)

Optionally, you can add either your blog feeds (RSS and E-mail link), a link to your Twitter profile, a Search form – with or without a Search button – or a custom text at the right side of each navigation menu.

The Content options let you set the default settings for the site layout as well as for different page types. You can choose for one or two sidebars. Sidebars can be displayed at the left or at the right side of the content area, or you can have one sidebar at each side. No sidebars at all, is another possibility.

In addition, you can configure your preferences for posts, the blog template, breadcrumbs, and the post meta. When you prefer a responsive design for your website, you only have to check the box in front of “Activate Responsive Design Options In Dynamik”.

At the Excerpt tab you can customize the word length of the excerpts, and whether you want to place the Read More link inline or on a new line. You also have full control over the excerpt thumbnails. You options are:

• do you want to display thumbs – yes or no
• how should these be aligned – left, center, right
• where do you want to place the thumbnail – inside or outside the excerpt
• what dimensions should the thumbs have

The Comments options give you all necessary tools to set your preferences concerning comments and trackbacks on posts and pages. This also the place to customize the comment form.

The Footer content is controlled using shortcodes. Here you will find the default footer settings and an example text for the footer. We are talking here about the footer area that includes the copyright notice and the credits.

JavaScript like Google Analytics can be entered in the text areas at the Scripts tab. For the JavaScript savvy among us, enabling Modernizr.js or Respond.js is a matter of checking one box.

Last but not least within the Core Options, is the Import/Export tab which offers the means to backup, restore and transfer your settings of the Core Options, Custom Layouts, Custom Widget Areas,  Custom Hook Boxes, and Custom CSS – it is a matter of checking the appropriate check box and hitting a button.

The Catalyst Dynamik Options

On this page you create and maintain the styling of your Catalyst child theme – here the Dynamik theme, hence the page is titled Dynamik Options. When you activate for example the Basik theme – another free Catalyst child theme – the child theme page is renamed to Basik Options.

The components presented on the theme page depend foremost on the child theme itself. The Dynamik themes offers you the following tabs for further customization:

That is an impressive list. But do not let it overwhelm you. But do not let it overwhelm you. Basically, every tab serves a list of elements relevant to the heading of that tab.Setting the preferred values for these elements is a matter of point-and-click. Let us have look at the Content tab, which serves the most comprehensive list.

With the first six elements you can tweak the presentation of the Headings. First you select your preferred font. Catalyst offers standard and Google fonts to choose from.

The second step is to set the size for the different headings (H1-H6) in px or em. Next you choose your colors – either with the help of a color picker, or you can enter the hex code directly.

Last but not least – as far as the headings are concerned – you pick your color for the H2 heading link in visited and hover state.

In a similar approach you proceed with the Byline, Paragraph, Blockquote, Image Caption, Meta, Backgrounds, Borders, Margins, Paddings and finally even the list style type (none, disc, circle, square).

As you will understand, the list of options for the other components is less broad than the myriad of options regarding the content area.

Concerning the Wrap, it is nice to mention that you can change the header and footer wraps and therefore the whole front-end of the site by clicking two radio buttons.

At the Widths tab you set your desired width for the content area and the sidebar or sidebars – depending your preferences set at the Core Options >> Content.

The EZ Widget Areas are a quite interesting feature. With the assistance of these control options, you can easily activate and customize the following four widget areas:

• Static Homepage – helps you build and style your static homepage, you can choose – for example – from 49 predefined homepage layouts
• Homepage Extras – activating a static homepage sidebar or a homepage slider is a matter of a mouse click
• Feature Top – these widget areas are displayed before the content area and the slider, you can choose from six predefined layouts and add here your styling
• Fat Footer – lets you add and style a widgetized footer with up to four areas, for which you can choose from six predefined footer layouts – again just a matter of pulling down a menu

By default, the framework incorporates only two widgetized areas – two sidebars. However, you can add about any custom widget area you want. While examining Catalyst, it was quite easy to create seven additional widgetized areas without even having to look at PHP code.

The widget areas that I have created on the fly are:

• the EZ Home Slider – in this area you can basically add any slider; customers of Catalyst can download the Nivo Slider and Showcase Gallery plugins from the forum – gratis!
• three EZ Fat Footer areas – just like the EZ Home Slider created at the EZ Widget Areas
• two contact_page Sidebars – these were added automatically by Catalyst, the moment I created the Custom Layout contact_page with a Double Right Sidebar
• after_post – a Custom Widget Area on single post pages created at the Advanced Options page

In case you are wondering, Catalyst Dynamik installs with four custom widgets; 125×125 Ads, Author Bio, Excerpts and PHP Text.

With the Dynamik Import/Export options you backup, restore and transfer the settings of the Dynamik child theme. At the Core Options >> Import/Export we had already encountered a similar option for the Core and Advanced Options – the settings of the Catalyst framework.

The Additional Settings Button

You will probably have noticed the two buttons at the top of the Dynamik Options page – Additional Settings and a CSS Builder.

Clicking the [Additional Settings] button presents four general settings concerning the child theme.

When you enable WordPres Post Formats, the theme will support the following formats:

• Standard
• Aside
• Audio
• Chat
• Gallery
• Image
• Link
• Quote
• Status
• Video

Activating the WordPress Post Formats turns the child theme into a full featured tumblog, since Catalyst not only supports these Post Formats, but will also look for the relevant icons to attach these to the posts.

If you have not enabled the Responsive Design Options at the Core Options >> Content, you can do it now. That is when you prefer a mobile responsive design.

The Minify the Dynamik Stylesheet box at the Dynamik CSS is checked by default, and tells Catalyst to merge the all stylesheets into one for efficiency purposes. In a testing environment, you might want to uncheck this box.

Referring to the Content tab, we noticed an extensive list of options. When you are new to Catalyst or when you are new to web design, you can reduce the number of options displayed. The Dynamik Options Control serves three levels to choose from:

• Structure & Settings – you will only see the non-styling options like content structures, placement, settings, and the like
• Design Standard – the majority of the Dynamik Options will visible, but only some Margin and Padding options
• Kitchen Sink – you will encounter a full display, including all Margin and Padding options

The Custom CSS Builder

The other button at the top of the Dynamik Options is the CSS Builder. By clicking the [CSS Builder] button, the Custom CSS Builder appears. You can enter any custom code manually in the text box of the CSS Builder on the right.

You can also build your custom CSS code by setting the desired value in the mid column and confirm your choice by clicking the button on the left side. This will enter a line of CSS code – the property and its value – in the CSS box.

A third way of using the Custom CSS Builder is by clicking the [#Custom] button. Most font options are accompanied by such a button. This button displays or hides a CSS area where you can enter or paste custom CSS code.

The Catalyst Advanced Options

With the Advanced Options you can unleash the full power of Catalyst by applying Custom Layouts, Custom Widget Areas, Custom Hook Boxes, and activating the Custom CSS Builder on the front-end.

Building Custom Layouts is quite simple:

1. enter a name in the text field
2. select one of the six page layouts, and
3. hit the blue [Save Changes] button

You can assign a Custom Layout while adding or editing: pages, post, categories, tags, and users.

In addition, you can also attach one of the Custom Layouts to a page type listed below the Site Layout Options in the Core Options >> Content section.

Creating Custom Widget Areas is almost as simple as building Custom Layouts – you need to enter a few more details:

1. enter a name
2. select one of the 71 hooks
3. select the page layout or layouts where it has to appear
4. click the blue [Save Changes] button

The available hooks are grouped in the following categories Page, Header, Content, Comment, Sidebar, Excerpt Widget, and Footer.

For the Custom Hook Boxes you use in fact the same hooks as for the Custom Widget Areas. The difference between the two is that while you add one or more widgets to a Widget Area, you enter plain text or code into a Hook Box.

In a Hook Box, you can enter HTML, CSS, PHP or JavaScript. An alternative is displaying a Hook Box with shortcode.

The last feature of the Advanced Options is quite an interesting one. It is the Custom CSS tab. You might think, “Hey, I have that Custom CSS Builder before”. However, here you can activate the Custom CSS Builder in Front-End Mode.

You can choose between Full Mode and Editor Only Mode. The latter is for those who know how to code CSS. If you do not know CSS, the Full Mode will help you to grab the correct CSS selector and enter your values.

Here is how it works. First check only the Activate Front-end CSS Builder box and hit the blue [Save Changes] button. Next, hit the Click To View Front-end link.

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

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. You will also notice the blue [Save Changes] button in the top right corner, and a bar at the top of the screen to help you 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 the top bar.

Suppose we want to alter the background of the header. How can we achieve that?

1. go to the drop-down menu below “Select/Insert an Element to be styled” and select Header Wrap – if you want to see the selectors, just click the red [Enable Element Selectors] button, this will replace the red button by a green [Disable Element Selectors] button

2. the selected element – here Header Wrap – turns green so that we can verify that the proper element has been selected

3. clicking the double arrows button, will enter the selector, including opening and closing brackets, into the Custom CCS Builder box

4. now you can enter the desired values between those brackets, for example

background: #fff000;

5. you will see the result instantly; the header background turns yellow

6. when you are done, first touch the “Click to Insert Into Custom CSS Editor” and then hit the blue [Save Changes] button

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

The Recap on Catalyst

Catalyst is a great framework. The structure of the website is build by pointing-and-clicking Core and Advanced Options. The styling is taken care off within the theme options, here the Dynamik Options page.

Personally, I think that the support of child themes is a big plus. Besides Dynamik, there are ten more child themes available at the Catalyst Marketplace, including the free Basik theme. Individual premium child themes are available for $24.

Next to additional child themes for the Catalyst framework, you can also get additional Dynamik skins. Skins are pre-customized settings which can be exported from and imported into the Dynamik child theme. The Marketplace offers 21 Dynamik Skins – free as well as premium. Individual premium skins are available for $19.

While I was proofreading this review, version 1.5.2 of the Catalyst Framework announced itself. The biggest news is the integration of BuddyPress, BBPres and WooCommerce over the new Catalyst Connect Plugin. Installation of this free plugin allows you to add forum and e-commerce functionality to any Catalyst based website with ease.

We have already seen that Catalyst lets you choose from 40 predefined homepage layouts. When you combine this vast number of homepage options, with the possibilities brought to you with the Connect Plugin, it will be clear that you can build any kind of site and blog with Catalyst.

Catalyst used to have three plans and pricings: Basic ($77), Personal ($127), and Developer ($197). As of September 2012, the number of editions has been reduced to only one – Catalyst Framework. The Catalyst Framework is available for a one-time fee of $127.

All Catalyst members enjoy the same benefits: unlimited websites, lifetime updates, access to the Catalyst documentation and the support forum, and free Marketplace Products. These Marketplace Products include Dynamic Skins, Child Themes, Plugins and Custom Graphics.

Have a look at the Catalyst website.

—

Version history of this post

• 2012-08-24 initial publication
  
• 2012-09-10 updated the plans and pricing to reflect the new pricing policy