What Shortcode Is and How It Improves Content

This tutorial only applies to the “URI Responsive Theme”

In the custom theme we have for our website, we have this feature called Themify. Themify allows us to insert code into WordPress that we wouldn’t otherwise be able to. This isn’t regular HTML, CSS, or PHP, it is slightly different however, if you have HTML experience this will come quickly. By using Themify, we enter in what they call ‘Shortcode’. I have listed Shortcode that will be useful to users when writing posts. A video also follows that shows exactly how to implement this code into your Posts or Pages.

Note: Unlike the examples below, remove the space immediately following the opening bracket when writing your own code. This will be mentioned and explained in the video below.

Button

Available parameters:

  • style= style of the button. You can combine the following options (eg style=”large yellow rounded”):
    • available colors: yellow, orange, blue, green, red, black, purple, gray, light-yellow, light-blue, light-green, pink, lavender
    • available sizes: small, large, large
    • available styles: flat, rect, rounded, embossed
  • color = background color of the button (eg. color=”#ddd”)
  • link = link of the button (eg. link=”http://themify.me”)
  • text = font color of the button text (eg. text=”#ccc)
  • target = link targe (eg. target=”_blank” will open link in a new window)

Sample usages

  • Text
  • --> [ button link="url"]Text[/button]
  • Text
  • --> [ button link="url" style="large red rounded" target="_blank"]Text[/button]
  • Text
  • --> [ button link="url" color="#333" text="#fff"]Text[/button]

Horizontal Rule (hr)

Available parameters:

  • color = color of the horizontal rule (pink, red, light-gray, dark-gray, black, orange, yellow, white)

Sample usages


  • --> [ hr]

  • --> [ hr color="orange"]

Note: Unfortunately, the specified color must be one or none (grey) of the ones listed above. HTML color codes (ie. #AEB404) will not work

Quote

To display your content in a blockquote, wrap the text with:

content here
--> [ quote] content here [/quote]. It will output as <blockquote> content here </blockquote>

Map

Use the map shortcode to display Google maps.

Available parameters:

  • address = location address (eg. 210 Flagg Rd Surge Building, Kingston RI 02881)
  • width = width of the map container (pixel(px) or percent(%) value)
  • height = height of the map container (pixel(px) or percent(%) value)
  • zoom = map zoom level (1 – 16, default = 8)

Sample usages:

  • --> [ map address="210 Flagg Rd Surge Building, Kingston RI 02881" width=100% height=400px]
  • --> [ map address="50 Lower College Rd. Kingston RI 02881" width=300px height=200px zoom=16]

Video

Use the video shortcode to display .flv video.

Available parameters:

  • src = video source / location (eg. path/video.flv)
  • width = width of the video (px or % value)
  • height = height of the video (px or % value)

Sample usages:

Box

Available parameters:

  • style= style of the box. You can combine the following options (eg style=”yellow map rounded”)
    • available colors: blue, green, red, purple, yellow, orange, pink, lavender, gray, black, light-yellow, light-blue, light-green
    • available icons: announcement, comment, question, upload, download, highlight, map, warning, info, note, contact
    • available styles: rounded, shadow

Sample usages:

  • 	 
    content here
  • --> [ box]
    	content here
        [/box]
  • 	 
    content here
  • --> [ box style="blue map rounded shadow"]
    	content here
        [/box]

Author Box

Author box is great for adding signature at the end of the post or page. It will display the author’s profile.

Available parameters:

  • avatar = author profile’s avatar (yes, no, default = yes)
  • avatar_size = avatar image size (default 48)
  • style= style of the author box
    • available colors: blue, green, red, purple, yellow, orange, pink, lavender, gray, black, light-yellow, light-blue, light-green
    • available styles: rounded, shadow
    • note you may also add your custom css class in style parameter (eg. style=”yellow custom-class”)
  • author_link = show author profile link (yes, no, default = no)

Sample usages:

  • --> [ author_box]
  • --> [ author_box style="light-yellow rounded shadow" avatar="yes" avatar_size="56" author_link="yes"]

 

Related Posts:
Advanced Administrative Settings