“shortcodes” – are what you can use in wordpress to do fancier bits of webcode, without having to type in the normal confusing bits of code to do it.  Cheat codes if you will 😀

The theme we are using (“artificer”) comes with some of these shortcodes to do some nifty things. All of the shortcodes that are specific to the artificer theme are here: http://demo.woothemes.com/artificer/shortcodes/  but that’s a bit confusing so I’ll show you the main ones you may like to use.

You can’t copy the codes from this page what code to use, because the page can’t display the code without it displaying the end result.  So that’s why I show the code in a picture format so you can see what it is (and what bits you can change), and link to a text file you can copy and paste from for the actual code. To use a shortcode just copy and paste the code from the text files I’ve linked to  (or type it out yourself copying what it says on the page) into the TEXT editor part, where you want it, changing the text portions to say what you need them to say.  if you’ve copied and pasted from the test files here, make sure to remove the “<pre”> that appears before and after the code after you’ve pasted it in.

Click a link below to go to the code for that item
Tab Box | Content Toggle | Columns | Sticky Note | Content Boxes

Tabs
Displays a box with clickable tabs on the top, that lets you put several sections worth of information into a compact space.  See an example on a store.  Great for outlining all your postage/payment/disclaimer/care etc. instructions.  You can put pictures in the tabs as well. The height of the whole box depends on the size of the first tab, so don’t write much in that one to keep it all small.  You can have as many tabs as you like (how many will fit the page depends on how long your tab titles are).  Tab titles are always displayed in ALL CAPITALS – you can’t change that.

Example:

To make it easier for you to see what you can and can’t change, I’ve got a colourcoded version here:

~ Watch a video of how to do the tab layout shortcode ~

Content Toggle
Hides info in a single line – click it to open it up and display the content, then hide it again.  You can use these inside a product listing to hide extra details that would otherwise make the page very long, but keep it on the page so customers can read it.

Example:

Code: (copy and paste this code)

I’ve made a colourcoded example to show you which parts you can change, and which parts not to change.  (the blue part says “click to close” in the actual code, I was just being silly  here with this example one to show you could change that if you wanted to 🙂 )

Sticky Note

A cute post-it-note looking note.  The more lines you have in the note, the longer it is.

Code:

Columns

You can use codes to display your content into equal sized columns.  For example

Code:   (Download code here)

If you want 2 columns, use the code “twocol”, if you want 3, use “threecol” and so on.

The code is a little confusing but basically each of the columns (except the last one) starts with “twocol_one” and ends with “/twocol_one”  (even if it is the second, third or forth column, they are always called “one”)  – unless it’s three columns, in which case it would be “threecol_one”  etc.  Then the last column must have “_last” after it.

Here is a colourcoded example that shows the code and the content to make it clearer

Boxes
Displays a strip across the page.  If you use the code style=”rounded” border=”full” it will round the ends of the boxes.  If not they are squared off and open ended.  You can include a html link in the text.

Codes: (click to download code)

This shows an example of the codes that is colourcoded to show you which parts you can change  (don’t change the black stuff, just what is shown in the below example as pink)