Aquarius Theme Shortcodes

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

We have built a few shortcodes into this website to allow advanced functionality to be achieved simply. Shortcodes usually take one or more attributes to customise their output. You will only see the results of the shortcode when viewing the public-facing web page that the shortcode has been included in. The following is a break-down of the included shortcodes and examples of their usage.

email

Creates a spam-proof email link.

Attributes:

• user – The email account username. Default = info
• domain – The email account domain name. Default = shiresresidential.com
• subject – The subject header of the generated email. Default = “”
• label – The text displayed within the link. EG “Email us here”. Default = user@domain
• classes – CSS classes to add to the link. Default = “”
• galabel – Google Analytics label text. Default = “”

Example usage:

strip

Creates a horizontal, full-width strip. These are useful for visually breaking up sections of content within a page. Strips are ‘enclosing’ shortcodes meaning that they have an opening and closing shortcode with any content within the shortcodes essentially being ‘wrapped up’ within them.

By default, the strip shortcode creates an HTML <section> tag so you should also include a level 2 heading as the first element within the strip.

If you wish to use the column shortcode to create a columnised layout you should always wrap them within a strip.
Attributes

• name – Strips can be linked to if you assign the strip with a name. To create a link to a strip use <a name=”linkname”></a>. The name attribute should be lowercase and use hyphens instead of spaces to separate words. Default = “”
• type – Strips can be an HTML <section> or <div>. The default is “section” but the value can also be “div”
• gutters – Dictates whether any blocks or columns within the strip should be separated with margins or not. It’s quite rare that you would want to set this attribute to false. Default = “true”
• equal – Dictates whether any columns within the strip should be equal in height (subject to viewport width). Default = “false”
• classes – You can use this attribute to enter a space separated list of CSS classes to to the strip. Default = “”

Examples:

column

Creates a column of content at the width specified. Columns use the same width keywords as Blocks (shown below). Like Strips, Columns are ‘enclosing’ shortcodes, meaning that they have an opening and closing shortcode with any content within the shortcodes being ‘wrapped up’ within them. Columns should be used within Strips for best presentational results.

Attributes:

• width – A keyword similar to Block’s template attribute. Options are “quarter”, “third”, “half”, “two-third” and “full”. Default = “full”.
• class – CSS class (or classes) to add to the column. Default = “”

Notes:

• Whenever columns are used, their combined width should equal one whole. EG Having one column with a width of “third” with no further columns specified after it will cause presentational issues. Columns can also be used alongside Blocks which use the same width system as columns.
• The width attribute can also be specified as a number between 1 and 12. This provides some very fine grain control over column widths. As the website is built around a 12 column grid system a column with width set to “third” will be the same width as a column with width set to “4” as 3 x 4 = 12. Column widths specified with a number are interchangeable with columns with widths set using keywords.

Examples:

shown

This shortcode allows you to show content until the users viewport reaches a specified size. This shortcode will usually be used in tandem with the ‘hidden’ shortcode to vary the content that is displayed for users viewing the site at different viewport widths. For example, a table with several columns of data will display fine at desktop resolutions but not at mobile widths. Therefore, it would be better to perhaps display the table as a PDF for mobile users.

Attributes:

• id – a unique identifier for the shortcode. This is only required if you need to use this shortcode more than once on the same page. Default = the page’s own ID number
• until – the maximum width (in pixels) of the viewport that should be shown this content. Default = “569”

Examples:

Note: You will only see the example if you are using a device with a viewport width of 320 pixels or less.

hidden

This shortcode allows you to hide content until the users viewport reaches a specified size. This shortcode will usually be used in tandem with the ‘shown’ shortcode to vary the content that is displayed for users viewing the site at different viewport widths.

Attributes:

• id – a unique identifier for the shortcode. This is only required if you need to use this shortcode more than once on the same page. Default = the page’s own ID number
• until – the minimum width (in pixels) of viewports that should be shown this content. Default = “569”

Examples:

Note: You will only see the example if you are using a device with a viewport width of 321 pixels or greater.