How to use Catalyst Theme Shortcode Functionality

In 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…

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.

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 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:-

Inserting the Shortcode in Page Content

The end result looks like this...

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.

Catalyst is your complete website builder.

Even with no coding experience, you can use Catalyst to build your own fully-functional website from the ground up.

Use Catalyst To:

Publish your content
Sell your goods and services
Build your own social network
Convert prospects into customers
Grow your discussion forums

15 Comments

Dave Porter says:

March 8, 2011 at 8:18 pm

Hi David,

Great article thanks!

Just noticed there is a bit missing (I think !)
The Shortcode format is , so in this case it will be

Also it would be handy to have the CSS in plain text so it is easy to copy and paste to get some immediate satisfaction

All the best, Dave

David says:

March 9, 2011 at 5:39 pm

Hey Dave… think some of your comment is lost because it’s html tags that get stripped out… so cant quite work that one out…. but fair point regards having it in plain text… so here it is…

Note – replace .shortcodetest with whatever you call your own custom class name (which will be in the drop-down selection), then adjust the other parameters to suit whatever your own requirements are…

hope that’s of use…

Cheers
David

.shortcodetest {
width: 300px;
float: left;
border: 0px solid #FFFFFF;
margin: 10px 15px 10px 5px;
padding: 20px 5px 10px 5px;
-moz-border-radius: 12px 12px 12px 12px;
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
-moz-box-shadow: 2px 2px 4px 2px #004462;
-webkit-box-shadow: 2px 2px 4px 2px #004462;
box-shadow: 2px 2px 4px 2px #004462;
}

Dave Porter says:

March 9, 2011 at 8:55 pm

Thanks for the CSS David.

With the ‘missing bits’ – I’m don’t understand your feedback on this

If I look at the source code – the paragraph in question looks like this:
The Shortcode format is , so in this case it will be
It just seems to be an incomplete paragraph!

cheers Dave

David says:

March 10, 2011 at 5:27 pm

Sorry Dave – understand now… hopefully it will display it correctly in this comment…

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

David Pritchard says:

March 10, 2011 at 5:52 pm

…also updated post to display the code correctly…

Dave Porter says:

March 10, 2011 at 6:14 pm

Thanks David – yep, looks good now !
cheers Dave

Aaron says:

March 17, 2011 at 2:09 pm

That’s awesome, David. So incredibly versatile. I just did my first shortcode-ing last week using php in custom-functions to easily add call-to-action buttons to any post or page.

I’m don’t know how/if php works in widgets, but do you think I could have instead put that php into a custom-widget and then called it using a shortcode? That would seem easier to me but not sure if it would work.

Thanks,
Aaron

- eric says:
  
  March 18, 2011 at 3:10 pm
  
  Hey Aaron,
  
  If you are using PHP in a Widget just use the Catalyst PHP Text Widget and you’ll be set.
  
  Also, you can use PHP directly inside a Custom Hook Box.
  
  Eric
  
John Liungman says:

March 28, 2011 at 8:42 am

Hi David!
I am working at using PHP do_shortcode inside a custom hook box. The shortcode is actually the name of a custom widget area, which in turn carries an ad widget. Complicated, yes, especially since I am no jedi at PHP.

Since it isn´t working, I tried tracing everything back to step 1, which means basically what you describe in your article.
1. I created a custom widget area, with “shortcode” instead of “hooked”.
2. I dragged a text widget into this, and put some text in the widget.
3. I placed shortcode in a post to try to display the custom widget area, like you do in your description. But I get nothing!

I do succeed if I simply write [gallery] in a post. But when I write [catalyst_widget_area name =”my_widget_area”] I get nothing displayed. I tried various quotation marks.

I am using Catalyst 1.1.2.

Any ideas?

John

- eric says:
  
  March 28, 2011 at 9:48 am
  
  Hey John,
  
  I just retested this doing exactly what you said and it all worked fine for me.
  
  It could be that the formatting of your double quotes is somehow breaking the shortcode, but either way, be sure to post this in the Catalyst Forum if you need further assistance.
  
  Thanks,
  
  Eric
  
David says:

March 28, 2011 at 10:57 am

Thanks for checking that out too Eric – I rechecked what I’d done and it worked ok for me too…. !

John, as well as the double quotes, make sure there’s no spaces in the text between the shortcode square brackets….
so…. [catalyst_widget_area name="my_widget_area"]

Otherwise I’m scratching head…..

John Liungman says:

March 28, 2011 at 9:09 pm

Thanks guys! I moved my question to the forum thread where it all started… In case you have any more ideas. (I removed the faulty space in name=”…” but no improvement…)

http://catalysttheme.com/forum/showthread.php?635-Add-content-after-second-post

John

Allen says:

December 11, 2011 at 9:40 am

This is incredible! The ability to create your own shortcodes is beautiful – I can think of a number of things I could use this for. Thanks for the guide.