• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Sproutee Inc

Sproutee Inc

Websites, Ecommerce, SEO G Suite

  • Portfolio
  • Pricing
  • Contact

How to Create Catalyst Theme Custom Layout

You are here: Home / Web Design & Development / WordPress / Catalyst / How to Create Catalyst Theme Custom Layout
origami crane
Fold Catalyst into whatever shape!

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

Catalyst Theme custom layout
Layout for Websites Services Page

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.

  • Share
  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)

18/08/2011 by Meg Smitley in Catalyst, How Tos

Website Packages

Put your best foot forward.

Attract more leads with a professional website

Get started

Footer

Links

  • Home
  • About
  • Blog

Services

  • Free website audit
  • Web design & websites
  • Ecommerce websites

 

  • Marketing & SEO
  • G Suite
  • Hosting
  • Facebook
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
Copyright © 2023 Sproutee Inc · Privacy policy · Terms & conditions · Sitemap
This site tracks visits anonymously using cookies. We use this information to improve your experience of our site. You can opt-out if you choose.Accept Reject Read More
Privacy Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT