Shortcodes – PageCells Responsive Framework

The PageCells Responsive Framework includes several shortcodes to make creating content easier. A shortcode is a special token that tells WordPress to generate output based on a set of parameters. The advantage to using shortcodes instead of HTML markup is that it works seamlessly in both the Visual Editor and the Text Editor without the risk of malformed code.

The basic syntax of a shortcode is…

[shortcode_name parameter1="value" parameter2="value"]

…where “shortcode_name” corresponds to one of the codes below. There are also a number of WordPress Builtin Shortcodes that will work as well.

cell

The cell shortcode lets you put the power of the Fluid Cell System (FCS) to work in your Posts. It generates a <div> container with the FCS classes you specify as parameters. There is also shorthand to make creating Cells even easier.

Parameters
  • r (cell-right) – floats cell to the right
  • c (clear) – clears both left and right floats
  • f (flat) – removes automatic bottom margin
  • e (end) – removes automatic right margin
  • w – sets the cell width. It accepts a fractional value, e.g., w="1/3" (one third width). You can also use the singular form, which in this example would be width-1-3
  • t – sets the top margin. It accepts a pixel value, e.g., t=30 (30 pixels). You can also use the singular form, which in this example is top30
  • sel – selector id. It accepts a valid id value (lowercase alphanumeric characters and underscores), e.g., sel="this_is_a_valid_id".
  • d – by default the cell shortcode applies the cell class, which floats the cell to the left, applies and automatic right and bottom margin, and applies the inline display rule. If you want a plain container without automatic floats or margins use this option.
  • p (pad-lr) – adds a pad to the left and right. Requires the d parameter
  • h (center-page) – centers the cell inside its surrounding container. Requires the d parameter.
  • x (clearfix) – applies the clearfix class to the cell
  • u (flush) – adds the flush class to the cell.
  • Any Class Name – applies arbitrary classes to further style the cell.

An example cell shortcode might look like this:

[cell t="30" w="1/3" r c e f] …content… [/cell]

This would generate a Cell that is floated right, has a width equal to one third its surrounding container’s width, has a 30 pixel top margin, no right margin, no bottom margin and clears floats on both left and right.

Nesting Cells

Cell shortcodes can be nested up to four levels deep. In order for WordPress to nest the shortcodes, each inner level must use a numerical suffix, i.e., cell2, cell3 and so on. For example,

[cell]
[cell2] … content inner cell2 … [/cell2]
[cell2]
[cell3] … content inner cell3 …[/cell3]
[/cell2]
[/cell]

date

The date shortcode returns the current date formatted according to the value of the format parameter.

The format parameter accepts a standard PHP date format string. Examples:

  • [date format=Y] – the current four-digit year, e.g., 2014
  • [date format="M j, Y"] – three-letter month, day of the month and four-digit year, e.g., Mar 9, 2014
  • [date format="g:i A"] – time as hour:minute meridiem, e.g. 8:30 PM

datafield

The datafield shortcode returns a custom data field (post_meta) specified by the value of the field parameter.

Parameters
  • field – the name of the metadata field to display. Accepts a single alphanumeric string.
  • filter – pass 1 if you want to apply content filters.

Example:

[datafield field=my_custom_data_field filter=1]

This would return the value of my_custom_data_field for the current Post with paragraphs applied.

bloginfo

The bloginfo shortcode returns one of the WordPress bloginfo values based the value of the show parameter.

The show parameter accepts any standard WordPress bloginfo argument. Examples:

  • [bloginfo show=url] – the Site Address URL set in Settings > General.
  • [bloginfo show=name] – the Site Title set in Settings > General.
  • [bloginfo show=description] – the Site Tagline set in Settings > General.

menu_class is an obscure but useful shortcode that mimics the menu item class behavior for manually generated menus by returning current_page_item or current_page_ancestor class based on the value of the path parameter.

The path parameter accepts a relative permalink for a page. Consider the following menu list:

<ul class="some_custom_menu">
<li class="menu-item [menu_class path='/path/to/page1']"><a href="/path/to/page1">Page1</a></li>
<li class="menu-item [menu_class path='/path/to/page2']"><a href="/path/to/page2">Page2</a></li>
<li class="menu-item [menu_class path='/path/to/page2']"><a href="/path/to/page3">Page3</a></li>
</ul>

PageCells will enhance resulting menu with the approprite current_page classes so that the menu behaves like other Nav Menus.

flexslider

The flexslider shortcode loads the flexslider.js plugin for the current page. FlexSlider by Woo Themes is a multi-purpose slideshow plugin that ships with PageCells.

[flexslider]

thickbox

The thickbox shortcode initializes the thickbox plugin for current page. Thickbox makes it easy to create lightbox-style modal popups that automatically resize to the browser and is built into WordPress.

[thickbox]

Need More Help? Contact Us!

Maintaining our reputation for excellent support is very important to us, so please do not hesitate to ask any question about this or any of our other plugins, large or small. You can also use the Child Theme Configurator Support Forum on WordPress.org. Don't forget to give us 5 stars!