Using Shortcodes in Catalyst Theme

Catalyst ShortcodesIn this Catalyst Theme Feature of the Week, we’re taking a look into the new Shortcodes functionality included in version 1.1 of the theme.

The shortcodes functionality allows you to enhance the functionality of, for example, Custom Widget Areas and Custom Hook Boxes, allowing them to be included wherever you place their corresponding shortcode in the page layout.

A shortcode can be thought of pretty much as a shortcut.

If you want to define some functionality in say, a custom widget area, and then simply insert that wherever you wish, then a Shortcode can help.

It’s especially useful if it’s an item that you want to insert in several places, because if you need to update the content, you only have to do so in 1 place.

So, let’s take a simple example to illustrate how to use Shortcodes in Catalyst Theme.

Go to Catalyst Theme Advanced Options, click the Custom Widget Areas and fill in the name for a new Custom Widget Area.

For our purposes here, we’ll assume this Widget Area is only going to be used as a Shortcode, so we wont bother with a hook location (just leave it as the default) nor assign it to any particular page layouts. We will give it a class name though so we can give it individual styling further on.

We’ll just select “Shortcode” from the drop-down selection on the right.

As an aside – if you wish, you can also hook it into a particular position (and on particular Page Layouts only too). For example, you might want to create an advert block that appears above the sidebars on certain pages (hooked for those page layouts) and also appear within a Post’s content (using Shortcodes). When you change what you’re advertising, you only have to make a change in 1 place). To do this, select “Both” in the drop down selection.

Back to our simple illustrative example; here’s where we got to…

Catalyst Theme Shortcodes

Creating a Shortcode Custom Widget Area

After clicking on Save Changes, we can now go and look at the Custom Widget Area and add some content to it.

Click on WordPress > Appearance > Widgets

In the list of Widget Areas on the right hand side, we can see the Custom Widget Area we created and we can now add some content to it.

We’ll add a Catalyst Excerpts Widget that we’ll use to display the content from another post on the site.

Catalyst Custom Widget Content

Adding Content to the Custom Widget Area

Now we need to style the custom widget area and the most flexible way to do that is in the Custom CSS Builder, so click on Advanced Options > Custom CSS and click the Show/Hide CSS Builder button to open the Custom CSS Builder.

Then click on Widgets. The classes available for styling are available in the drop down selection box, so we select the name of the class we assigned to our custom widget area and then define the various styling characteristics we’d like in this case.

Here we’ve given it a width of 330px including 20px for left right margin (15px + 5px) and 10px for left right padding (5px + 5px). Additionally, we’ve then used the Borders Tab to also include some box shadow and rounded corners for this widget area – you can style each one just as you like in this way using the various tabs of the Custom CSS Builder.

Styling CSS Class

Styling the Class for this Custom Widget Area

Now we’re in a position to include this widget and its content wherever we like using its Shortcode.

The Shortcode format is [catalyst_widget_area name =”__________”], so in this case it will be [catalyst_widget_area name =”test_shortcode”]

This is just inserted wherever you want it to appear – in a sidebar, in a post or in page content – like this:-

Insert Catalyst Shortcode

Inserting the Shortcode in Page Content

The end result looks like this…

Catalyst Site Shortcodes

Using Shortcodes to Achieve Desired Page Layout Easily

Using the Shortcodes functionality in Catalyst Theme makes it incredibly easy to insert one or more instances of an otherwise lengthy piece of code wherever you like on a site.

Have fun.

If you already own the Catalyst Theme, the new version of the Catalyst Theme Cheat Sheet updated for version 1.1 of the theme is now available for download.

It is over 200 pages packed full of useful tips and further information like this, provided absolutely free of charge to Catalyst Theme owners and available in the Downloads section of the Catalyst Forum.

To keep updated with news and information related to the Cheat Sheet and its contents remember to click the “confirm subscription” link you’ll receive soon after downloading it.