Shortcodes

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

exciting stuff goes here.
very exciting stuff goes here.
other stuff goes here. Look even a picture!

Code:  (Copy and paste this code)

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:

Click to view more

Stuff goes here

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.

Stuff goes here

Code:


Columns

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


Solum praeterea formosum, solum liberum, solum civem, stultost; Illis videtur, qui illud non dubitant bonum dicere -; Eademne, quae restincta siti? Uterque enim summo bono fruitur, id est voluptate. Eaedem res maneant alio modo. Et quidem, inquit, vehementer errat; Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Haec para/doca illi, nos admirabilia dicamus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Te ipsum, dignissimum maioribus tuis, voluptasne induxit, ut adolescentulus eriperes P. Idem iste, inquam, de voluptate quid sentit? Traditur, inquit, ab Epicuro ratio neglegendi doloris. Sed haec quidem liberius ab eo dicuntur et saepius.

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)

This is a normal box

This is an info box

This is a tick box (With full rounded border)

This is a note box (with full rounded border)

Click to download (This is a download box)

This is an alert box