This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

ClearCode Shortcode Library

Beskrivelse

Shortcodes used by ClearCode in their WordPress sites.

How to read this guide

There are so many different shortcodes in this plugin that it’s impractical to list out all of the seperate use-cases that are available
The following shortcode declaration is an annotated guide describing how to read this documentation

Shortcode: [SHORTCODE_NAME] This is the base shortcode that is being described

Parameters — A list of the different parameters (eg: [SHORTCODE_NAME PARAMETER1="VALUE" BOOLEAN1="Y"])
* PARAMETER1: The VALUE to assign to this parameter
* Default: The default value that is assigned to this parameter, for example: “This is a test”
* BOOLEAN1: Set to “Y” if something is true, otherwise leave blank

Aliases — If this shortcode can also be called as [ALIAS1] or [ALIAS2] it will be noted here
* ALIAS1
* ALIAS2

Description of the shortcode and a general description of what it does. If it has to be nested within another shortcode, that too will be documented in this area, like this. Required Parent: [SHORTCODE_PARENT_NAME]

Short Codes

Shortcode: [splits]

Parameters
* None

container for a row of splits

Shortcode: [one_half]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is one-half of it’s container’s width. Required Parent: [splits]

Shortcode: [one_third]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is one third of it’s container’s width. Required Parent: [splits]

Shortcode: [two_thirds]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is two thirds of it’s container’s width. Required Parent: [splits]

Shortcode: [one_fourth]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is one fourth of it’s container’s width. Required Parent: [splits]

Shortcode: [two_fourths]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is two fourths of it’s container’s width. Required Parent: [splits]

Shortcode: [three_fourths]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is three fourths of it’s container’s width. Required Parent: [splits]

Shortcode: [one_fifth]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is one fifth of it’s container’s width. Required Parent: [splits]

Shortcode: [two_fifths]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is two fifths of it’s container’s width. Required Parent: [splits]

Shortcode: [three_fifths]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is three fifths of it’s container’s width. Required Parent: [splits]

Shortcode: [four_fifths]

Parameters

  • first: Set to “Y” if it is the first one in the set
  • last: Set to “Y” if it is the first one in the set

Creates an element that is four fifths of it’s container’s width. Required Parent: [splits]

Shortcode: [clear]

Parameters

  • none

Creates an element that does clear:both

Shortcode: [more]

Parameters

  • title: the text to display when content is hidden
    • Default: Learn More… / Spoilers…

Aliases
* Spoiler
* Spoil

Creates a link that shows a hidden area of content when clicked

Shortcode: [tabs]

Parameters

  • class: CSS class(es) to assign to the outer element

Creates a tabbed area.

Shortcode: tab

Parameters

  • title: the tab’s title
    • Default: New Tab

Creates a tab Required Parent: [tabs]

Shortcode: [slider]

Parameters

  • height: Height in css-compatible units.
    • Example: 400px

Creates a slider container

Shortcode: [slide]

Parameters

  • none
  • src: Background image. Can be either url or media ID.
  • href|slug|id|link : Where to go when the slide is clicked. Can be a url, slug, post/page ID, or any other link format.

Makes a slide. Required Parent: [slider]

Shortcode: [hover]

Parameters

  • class: CSS class(es) to assign to the element

Creates an area that toggles between two different content ares on hover

Shortcode: [on]

Parameters

  • none

designates the content displayed when there is no hover. Required Parent: [hover]

Shortcode: [off]

Parameters

  • none

designates the content displayed when there is hover. Required Parent: [hover]

Shortcode: [background]

Parameters

  • bgcolor: the background color
  • src: Background image. Can be either url or media ID.
  • position: Background Position.
    • Default: top left
  • repeat: Background Repeat.
    • Default: no-repeat
  • height: Height in css-compatible units.
    • Example: 400px
  • width: width in css-compatible units.
    • Example: 100%
    • Default: 100%
  • class: CSS class(es) to assign to the element
  • color: the foreground color
  • padding: padding of element
    • Default: “0px 0px 0px 0px”

creates a div with a background you set

Shortcode: [flashcard]

Parameters

  • height: Height in css-compatible units.
    • Example: 400px
  • width: width in css-compatible units.
    • Example: 100%
    • Default: 100%
  • class: CSS class(es) to assign to the element

click to rotate from [front] to [back]

Shortcode: [front]

Parameters

  • click : what to click to toggle the flip
    • Default: all
    • Example: .close

Front side of the FlashCard Required Parent: [flashcard]

Shortcode: [back]

Parameters

  • click : what to click to toggle the flip
    • Default: all
    • Example: .close

Back side of the FlashCard Required Parent: [flashcard]

Shortcode: [linkmap]

Parameters

  • height: Height in css-compatible units.
    • Example: 400px
  • width: width in css-compatible units.
    • Example: 100%
    • Default: 100%
  • class: CSS class(es) to assign to the element
  • src: Background image. Can be either url or media ID.
  • hover_src: Alternate Background image. Can be either url or media ID.
  • flashcard: Set to “y” to make clicking an area flip to the content of that area
  • bgcolor: The background color
    • Default: transparent

Image map replacement using divs.
Use one image for the background, then alter that image for all of the hover changes.
Create a [maplink] for each clickable area in the image.

A clickable area in a linkmap Required Parent: [linkmap]

Shortcode: [link]

Parameters

  • class: CSS class(es) to assign to the element
  • href|slug|id|link : Where to go when the slide is clicked. Can be a url, slug, post/page ID, or any other link format.

Get a link

Shortcode: [title]

Parameters

  • id|slug : an identifier for the post/page/etc… to get the title for

Get the title for a page/post/etc… in your WordPress install

Shortcode: [buttons]

Parameters

  • align: the alignment of the inner of the area

Designate a area that holds buttons

Shortcode: [button]

Parameters

  • class: CSS class(es) to assign to the element
  • title: the text displayed in the button

Create a div that’s a button so jQuery can be used on it

Full Examples

Splits

[splits]
    [one_fourth first="Y"] Hello [/one_fourth]
    [one_fourth] World! [/one_fourth]
    [one_fourth last="Y"] I am Mike [/one_fourth]
[/splits]

Tabs

[tabs]
    [tab title="Tab 1"]
        Content
    [/tab]
    [tab title="Tab 2"]
        Content 2
    [/tab]
[/tabs]

Link & Title
This will contain a link to the page whose id is 5 and it’s title: [link id=”5″][title id=”5″][/link]

Future Plans

  • Code Comments
  • Examples / How to
  • Document advanced shortcodes better, get screenshots/video of them in action:
    • Linkmap
    • FlashCard
    • Slider
  • TinyMCE Integration
    • Buttons to create/edit shortcodes
    • Content filters that display shortcodes output in the editor and when focused on allow you to click the aforementioned button again to edit it’s info – like bold or italic

Known Issues

  • [email_form] needs to be tied into WordPress’ email system and should actually send out an email
  • [person] needs formatting

Skærmbilleder

  • A tab shortcode in action
  • More link closed
  • More link open
  • 50/50 split

Installation

  1. Upload cngann-shortcodes to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress

Contributors & Developers

“ClearCode Shortcode Library” is open source software. The following people have contributed to this plugin.

Contributors

Ændringslog

4.0

Added better documentation
Added a “How to read” section to the documentation.
Better format for documenting the required parent shortcode for shortcodes that require them.
Spell checked the Documentation.

3.8.07

Added fifth splits

3.6

Fixed background display bug

3.4

  • Added Documentation

3.3

  • Bug Fixes:
    • Fixed an error that caused the site to crash

3.0

  • Bug Fixes:
    • Slider multi-instance fails.
    • Slider “first” property – make it work in other themes
    • Slider now uses src parameter instead of altering it’s content to get an image
  • Removing Dependency on php 5.3
  • Removing development error reporting
  • Making Class Based
  • Complete Re-write

2.3

  • Adding Email Form
  • Adding button
  • Adding Email Form AJAX processor

2.2

  • Cleanup
  • Added various parameter aliases
  • Added link
  • Added title

2.0

  • Added flashcard
  • Added linkmap

1.6

  • Added changelog – Better late than never! I’ll start using it i swear!