WordPress.org

Ready to get started?Download WordPress

Plugin Directory

C.N.Gann Shortcodes

Shortcodes used by C.N.Gann Technology Group in their WordPress sites.

Shortcodes used by C.N.Gann Technology Group in their WordPress sites.

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]

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

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

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

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

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

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

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, [tab] designates it's children

Shortcode: tab

Parameters

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

Creates a tab, to be used inside of [tabs]

Shortcode: [slider]

Parameters

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

Creates a slider area, [slide] designates it's children

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 to be used inside of [slider]

Shortcode: [hover]

Parameters

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

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

Shortcode: [on]

Parameters

  • none

designates the area displayed before hover inside of [hover]

Shortcode: [off]

Parameters

  • none

designates the area displayed with hover inside of [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-compatable units.
    • Example: 400px
  • width: width in css-compatable 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-compatable units.
    • Example: 400px
  • width: width in css-compatable 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

Shortcode: [back]

Parameters

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

Back side of the FlashCard

Shortcode: [linkmap]

Parameters

  • height: Height in css-compatable units.
    • Example: 400px
  • width: width in css-compatable 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.

Shortcode: []

Parameters

  • height: Height in css-compatable units.
    • Example: 400px
  • width: width in css-compatable units.
    • Example: 100%
    • Default: 100%
  • class: CSS class(es) to assign to the element
  • top: distance in pixels from the top of the full image to the top of the clickable area.
    • Example: 10px
  • left: distance in pixels from the left of the full image to the left of the clickable area.
  • 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.
  • fc: If you set flashcard to 'y' on the linkmap, set a unique one-word name for the area
    • Example: demo

A clickable area in a 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

Future Plans

  • Code Comments
  • Examples / How to
  • TinyMCE Integration - waiting for WP 3.9 (TinyMCE v4)
    • Buttons to create/edit shortcodes
    • Content filters that display shortcodes output in the editor and when focused on allow you to click the aformentioned 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 like I need therapy

Requires: 2.5 or higher
Compatible up to: 3.9
Last Updated: 2014-4-18
Downloads: 277

Ratings

5 stars
5 out of 5 stars

Support

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,1,1 100,1,1