How to Create Catalyst Theme Custom Layout

We use the Catalyst Theme Framework with our WordPress development. We were delighted when our own website was recently added to the Catalyst Theme Showcase. The positive feedback on our website’s design has been wonderful and we thought we might share how to go about developing your website with the Catalyst Theme Framework.

When setting out to redesign your WordPress website, there are two factors which should be integral to your design implementation:

1. Good Design Process
   Work closely with your web designers to iteratively develop and refine the concept for your theme. You may find our post on how to plan your website useful preparation for working through your design process.
2. Flexible Theme Framework
   Once your theme’s design is complete, you need to build it. Using a flexible and robust theme framework like Catalyst allows you create Catalyst Theme custom layouts to bring your design to life.

We’ll examine the second point in this post.

Define Your Requirements

Before you can begin to create your custom Catalyst Theme layout, you need to define the scope of your project, in particular how many layouts you will need for your theme. We’ll use the development of our own site using the Catalyst Theme Framework to illustrate our point. When we set out to build our new site, we had four main goals:

• Clearly communicate our services
• Provide strong ‘proof points’ for our work
• Present a professional corporate identity
• Make it easy for visitors to contact us

We determined that we could achieve these goals by creating several layouts for use in our theme:

• Home Page
  A ‘landing page’ for visitors. The home page should have clearly defined calls to action to bring visitors into the site.
• Service Pages
  Pages to explain each service.
• Portfolio Pages
  An important ‘proof point’ can be a portfolio of client work, both a project listing and individual pages detailing each project.
• Testimonials Page
  Client testimonials are also excellent ‘proof point’ and can demonstrate a business’s integrity and performance.
• Contact Page
  A nice looking, easy to use contact form.
• Blog
  A blog can be an important of a small business content strategy.

For us, these requirements resulted in the creation of 9 Catalyst Theme custom layouts. Catalyst’s support for custom layouts and custom widget areas was vital to our speedy creation of layouts. Next, we’ll take your through how you can use Catalyst’s features to create a theme to your unique specification.

Catalyst Theme Custom Layout

Let’s take for example the creation of our former website services page.* We chose to break up the text into a descending hierarchy of information. First, we display a strong ‘headline’ then an introductory summary. Next, we show a graphical and textual explanation of the service. Finally, we display a check list of how the service can benefit a business, fuller explanation of the service and a testimonial.

The main content could be entered into the page using the normal WordPress editing functionality. The check list and add other supplementary data could be added via widget areas in the sidebar. The design places the headline and summary above the main content and sidebar, as well page-specific data in the sidebar as each service page has a unique check list.

Step 1: Create Catalyst Theme Custom Layout and Page

To create a Catalyst Theme custom layout:

1. Go to your WordPress Dashboard. Catalyst > Advanced Options > Custom Layouts > Add
2. Enter your layout name, e.g. websites_page_layout
3. Choose your sidebar options, e.g. right sidebar
4. Save Changes

Great! You’ve got your custom layout, now create your Page:

• Go to your WordPress Dashboard > Pages > Add New
• Enter your desired text/HTML
• Go to Catalyst Post/Page Options > Select your layout from the drop down
• Publish

Watch our screencast for a step-by-step walk through.

Step 2: Create Widget Area

Okay, so you’ve got your Page configured with your Catalyst Theme custom layout. In your WordPress Dashboard > Appearance > Widgets you’ll see your layout’s sidebar(s), which will allow you to add layout-specific information in your sidebar(s).

What about adding arbitrary text/HTML above the Page content and sidebar, as in our headline and summary info? That’s where the Catalyst Theme custom widget area and Catalyst’s amazing set of hooks comes in.

• Go to your WordPress Dashboard > Catalyst > Advanced Options > Custom Widget Areas > Add
• Enter your widget name, e.g. websites_top_content
• Choose your hook position, e.g. catalyst_hook_before_content_wrap
• Save Changes

Head back to Appearance > Widgets and you’ll see your widget area into which you can add a Text or PHP widget or whatever the heck you want. By taking advantage of Catalyst Theme custom layouts and widget areas it is possible to create a variety of page structures to suit the needs of individual areas of your site. Once you’ve got this structure in place you can add all the custom styles you can handle, either inheriting from those defined in your Dynamik Options interface or use your custom layout’s unique body class, e.g. body.websites_page_layout, to define your custom CSS.

Was this helpful to you? Do you have a different approach to manipulating Catalyst? Tell us your thoughts, leave a comment and subscribe to our feed!

* Since publication, we’ve redesigned our site and can no longer link to the live page. We hope the screen shots help illustrate the ideas.