Phases Shortcodes – A WordPress Plugin

Our shortcodes plug in makes it a snap for our clients to build professional and flexible layouts on any page of their WordPress Site

Phases Shortcodes add a drop down menu to the WYSIWYG editor allowing you to easily insert the following elements on to a page or post.

  • Columns for responsive layouts right on the page.
  • Elements including Posts, Buttons, Google Maps, Testimonials, Images, and HTML snippets
  • Featured Content Boxes allow you to highlight specific content on your page
  • Dividers allowing you to provide visual separators within your content
  • Accordion, Tabs, and Toggle to help users navigate through content on more complex page layout
  • Basic Full Width div to highlight small content area’s on your site
  • Awesome Fonts allowing you to easily add stylized icons to your content, improving skim-ability for your readers.

Version 1.6

Version 1.6 removes the Google Maps shortcode functionality. Google Maps shortcodes should be replaced with HTML shortcode or an alternative Google Maps plugin prior to running this update.

Version 1.5

update to resolve a simple redundancy

Version 1.4

improved functionality in widgets

Version 1.3

upgrades for WordPress 4.4

Version 1.2

NEW! Tweet This link shortcode!

Version 1.1
minor CSS updates
compatible up to WordPress Version: 4.2.2

Version 1.0

minor CSS updates
compatible up to WordPress Version: 4.1.1

Version 0.9

initial proffer
compatible up to WordPress Version: 4.1.1

Columns and Boxes are responsive by default!

To create a multi-column layout select Shortcodes > Columns> and then select from the defined column options.

To place a box on your page, select Shortcodes > Boxes> and then select the desired box type. Note: default box styles can be customized to match your brand upon request.

  • The shortcodes, along with sample content, are dropped into your page editor at the current cursor location.
  • Simply replace the default content with text or images and your layout will be populated with the selected column or box.

The following column groupings are available:

  • 1/2 x 1/2
  • 1/3 x 1/3 x 1/3
  • 1/2 x 2/3
  • 2/3 x 1/3
  • 1/4 x 1/4 x 1/4 x 1/4
  • 1/4 x 1/2 x 1/4
  • 1/2 x 1/4 x 1/4
  • 1/4 x 1/4 x 1/2
  • 1/4 x 3/4
  • 3/4 x 1/4

The following box types are available:

  • Primary
  • Secondary
  • Inverse
  • Success
  • Warning
  • Danger
  • Info

Note: Columns cannot be placed within other columns.

The following are found under Shortcodes > Elements >


Allows you to place a gallery of recent posts on any page. Posts can be sorted / limited by category, type, taxonomy and author. Additional options include pagination, include / exclude excerpt, image and title size.


The button short code allows you to turn any link on your page into a styled button. Default styles are included for primary and secondary buttons, and additional styles can be created for you upon request.


Simply place the tweet short code anywhere on your page to create a tweetable quote.

  • anchor = text that the user will click on to tweet
  • tweet = text that will be tweeted
  • sample content = text that will display on your post / page



The testimonial short code allows you to place a static testimonial on any page, inside any column and/or box. Follow the default sample testimonial generated by the shortcode tool to place testimonial author and content.


The HTML shortcode will pull in code from a custom field on your page / post and render it to the end user. This is the perfect solution for placing code snippets from 3rd part sites directly onto your page / post without worrying about compatibility issues with the WYSIWYG editor.

  1. Create a new custom field. Provide a descriptive name and place your code snipped in the value field.
  2. Place your cursor at the location where you would like to insert the code.
  3. Select Shortcodes > Elements > HTML
  4. Edit the default name with the name of your custom field

Shortcodes > Dividers provides you with simple access to pre-styled horizontal rules:

  • Solid
  • Dashed
  • Dotted
  • Double

All styles can be customized on request.

Shortcodes > jQuery provides three useful jQuery elements to assit you with building layouts to present otherwise complex content structures.


Accordion shortcodes are often used for simple FAQs on any page. While the shortcode will insert two accordion sections for you, you can easily create additional sections within one accordion by copy / paste an existing section.

Within the parent accordion shortcode tag the following options can be set:

  • Collapse: 0 = leave first element open; 1 = collapse all accordion elements by default
  • Leaveopen: 0 = auto close all elements except for the currently selected element; 1 = leave multiple elements open
  • layout; box = borders around title and content; none= borders around title only. Note: styles can be customized upon request.

Accordion sample:

Sample Content Section One

Sample Content Section Two


Just like accordions, the shortcode provides two tabs by default. To create a new tab within your grouping, simply copy / paste one of the sample tabs shortcode.

Tabs sample:

You are reading and navigating through content within a tabs shortcode right now!


Toggle is similar to an accordion, but only contains one grouping, useful a single question with a single answer.

Toggle sample:

Shortcodes > Other >Full Width and Shortcodes > Other >Full Width – Max Width provide you with a way to place content within a full width area on your page, breaking  outside of your standard page width.

The full width shortcodes leverage Javascript to “break out” of your predefined page width, and as such are intended for use ONLY on pages without a sidebar, and are only intended to contain limited content types.

Examples of appropriate content include:

  • Any image with a defined height
  • The google map shortcode
  • A limited amount of text such as a tweetable quote, a short headline, or call to action

What’s the difference between the two shortcodes?

Full Width = your content will stretch from browser edge to browser edge

This is perfect for filling a part of your contact us page with your google map, or placing a full width image on your page to help viewers skim your content.

Full Width – Max Width = your content will remain within the predefined page width, while the background will stretch from browser edge to browser edge.

This is perfect for placing a call to action button, headline, or tweetable quote on your page. Highlighting the content, but preventing the line length from growing too long.

Note: default styling of inner content and/or background styles is available upon request.

License: LGPLv3

Our shortcode plug in was originally created as a modified version of WP Canvas Shortcodes by Chris Daldelomar. After using the plug in for a few sites, we elected to create our own version to remove some options that were not suited for our clients, revise functionality of the full width features, and to allow us to include other functionality specific to our Base Theme Gridwork and client requests.

Use of and support for our shortcode plug in is currently limited to our clients.

To leverage this tool on your site, please contact us to assist you in developing a professional, brand focused site for your business.

Learn About our WordPress Foundation Site Packages