Shortcode Elements

Winland Electronics, Inc. 9 Style Guide Overview 9 Shortcode Elements

Introduction

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. With just one line shortcodes can embed files, create objects or determine layouts that would normally require more code. The actual code is handled behind the scenes, while shortcodes simply make reference to it and pass any additional attributes.  Shortcode = shortcut.

Using shortcodes to add elements within the site means that you can easily add preformatted elements and function that match the design and formatting of the website.

Note: Buttons should only be used for call-to-actions, external links and resources, but never for linking to other pages within the website.

Buttons

Button 
Button
Green Button 
Button

Buttons have three attributes, link, target, and class, with only the link being required. The link must include “http://”. By default the link will open in the same window (_self), but if you’d like the link to open in a new window or tab (a good practice if you still want a user to have your website active in their browser) simply add the attribute:

target="_blank"

The class is an optional attribute that can modify the visual presentation of the button when predefined classes exist in your website’s style sheet. Multiple classes are separated by a single space.

Small Button 
Small Button
Small Green Button 
Small Green Button

Arrow Buttons

Arrow buttons are used only for call-to-action items.

[arrow-button link="http://www.yourlink.com"]Arrow Button[/arrow-button]
[arrow-button link="http://www.yourlink.com" class="green-button button-sm"]Small Green Arrow Button[/arrow-button]

Section Divide (horizontal rule)

The section divider is a horizontal rule

used to visually separate content sections. An example of its use can be seen in the separation of style guide sections.

[divide]

Accordion

…

Icons

Arrow

[[icon-arrow]

Book 

icon-book]

Book Mic

[[icon-mic]
  • Style Guide
  • Text & Links
  • Form Elements
  • Shortcode Elements
  • Shortcode Layouts