Pixel Shortcodes

  1. General usage

General usage

The Pixel Shortcodes add–on completes your theme's shortcode eco–system with a full suite of premium shortcodes and a shortcode generator. The shortcode generator can be used to generate shortcodes with a combination of optional attributes.

Below is a reference of the Pixel Shortcodes' shortcodes, displayed with their optional attributes. For more information about the attributes of each shortcode, view the shortcode generator.

Media attributes that require an image or video (e.g. videoimg="12") use the ID of an upload from your media gallery. 

True boolean attributes are represented by the value 1 (e.g. parallax="1"). For false, simply remove the attribute. For, attributes that require an icon, see Icons.

View the WooCommerce documentation for a list of WooCommerce shortcodes.


Too much content on one page? Use the accordion shortcodes to add expandable, collapsable and responsive list items that reduce content overload. Can contain any content and comes in minimal and standard styles.

[po_accordion style="minimal"]
[po_accordion_item id="1" header="This is a header" size="18"]
Insert content
  • style: standard, minimal.


Use the tab shortcodes to improve page organisation by dividing content into meaningful sections that occupy less space. Tabs can contain any content and comes in left, vertical and standard styles.

[po_tabs class="tabs" align="left" animation="1"]
[po_tab header="Tab 1"]
Tab 1 content
[po_tab header="Tab 2"]
Tab 2 content
  • align: standard, left, vertical.
  • type: standard, menu.


Display images and videos within a dynamic lightbox. Images can be zoomed and displayed in fullscreen mode. YouTube and Vimeo videos are supported. Lightboxes can be launched from a button, link or image thumbnail, which lazy loads for quicker page speed, and can display text or an icon.

[po_lightbox_carousel auto="1" speed="400" columns="6" dot_overlay="1"]
[po_lightbox type="button" button_type="square" button_style="block" button_width="full" img="12" size="full" text="Text label" icon="1" video_url=""]
  • type: standard, button, link.
  • button_type: round, square.
  • button_style: outline, block.
  • button_width: standard, full.
  • size: thumbnail, medium, medium_large, large, full.

Progress Bars

Add linear or circular animated progress bars to your content. Colors and size can be modified, and progress bars can contain an animated value percentage or an icon.

[po_progress type="circular" title="Title" icon="coffee-cup" value="88" empty="#f1f1f1" size="180" percentage="1"]
  • type: standard, circular.


Display client logos on your pages using our Client shortcode. Column numbers can be customised, and logos can optionally be linked to an external website, as well as being displayed within a carousel.

[po_client_container columns="6" auto="1" speed="2000" dot_overlay="1"]
[po_client img="11" size="large" padding="10" animation="bounce-in" delay="400" link="#"]
  • size: thumbnail, medium, medium_large, large, full.
  • animation: fade-in, move-up, move-left, move-right, bounce-in, pull-up.


Add an animated counter to your content with a simple shortcode. Enter to and from values, an icon and/or a title. Colours automatically adjust to the backgrounds they're placed on.

[po_count from="0" to="2000" speed="400" title="The title" icon="toothbrush" icon_delay="1000"]


Our iBox shortcode creates a variety of animated icon, character and image boxes with various layouts. Great for highlighting features. Button colours automatically adjust to the backgrounds they're placed on. Animation delays are customisable.

[po_ibox title="The title" img="11" character="3" outline="1" outline_color="#dd3333" icon="bag" icon_delay="1000" icon_color="#dd9933" title_delay="1200" text_delay="1400" style="left" text="iBox text"]
  • style: top, top-left, left, title.


Add Google Maps to your content with our map shortcode. Display in standard, light, dark or a hue of your choice. Alternatively, choose a terrain, hybrid or satellite map type. Add a custom marker to further customise your map.

[po_map lat="51.501364" lng="-0.141890" zoom="15" height="500" key="#" type="sat" marker="11" marker_width="50" marker_height="55" color="#81d742"]
  • type: roadmap, sat, terrain, hybrid.
You'll need an API key to use Google Maps. Follow this guide to get your key and enter it into the "key" attribute of this shortcode:


Display each team member with their social profiles and descriptions using our Team shortcode. Choose between a standard or circular image, customise animation delays, and set the number of columns to display.

[po_team columns="4" auto="1" speed="1000"]
[po_team_member img="11" img_delay="1000" circular="1" name="Willow Ocean" name_delay="200" position="Photographer" about="Freelance photographer for 2 years." about_delay="1000" type="email, twitter, facebook, googleplus, pinterest, youtube, vimeo, linkedin, github, foursquare, instagram, flickr, rss" email="#" twitter="#" facebook="#" googleplus="#" pinterest="#" youtube="#" vimeo="#" linkedin="#" github="#" foursquare="#" instagram="#" flickr="#" rss="#"]


Add customer testimonials to your content with a few simple shortcodes. Testimonials are displayed within a slick carousel, with optional profile images, as well as adjustable auto and speed settings.

[po_testimonials auto="1" speed="1000"]
[po_testimonial_item text="Testimonial text" img="11" name="Person"]


Use our Tiles shortcode to create various media grids in a standard or masonry layout. Each tiles can be a slider, button or standard section with a parallax or video background. Build each tile to achieve your desired effect.

[po_tiles masonry="1"]
[po_tile id="tile_id" full="1" bg="light" bgcolor="#dd9933" img="11" fixed="1" parallax="1" speed="200" align="30" video="12" videoimg="13" padding="small" top="10" bottom="10" carousel="1" height="500" category="design" number="10" order="ASC" orderby="date" arrows="1" link="#section_id" animation="move-up" delay="400"]
Insert content
  • bg: standard, light, dark.
  • order: ASC, DESC.
  • orderby: none, ID, author, title, name, date, modified, rand, comment_count.
  • animation: fade-in, move-up, move-left, move-right, bounce-in, pull-up.


The Tweets shortcode requires the oAuth Twitter Feed for Developers plugin (mentioned as one of the recommended plugins) and allows you to add a Twitter feed to your footer (within the Footer Columns post type).

[po_tweets number="2"]


Use the devices shortcode to add responsive device illustrations to your content. Devices include desktop, tablet and mobile and feature various device combinations and customisations. 

[po_devices phone_img="123" phone_outline="1" phone_bg="#e9e9e9" phone_outline_color="#e1e1e1" phone_shadow="1" phone_img2="123" phone_outline2="1" phone_bg2="#e9e9e9" phone_outline_color2"#e1e1e1" phone_shadow2="1" phone_img3="133" phone_outline3="1" phone_bg3="#e9e9e9" phone_outline_color3"#e1e1e1" phone_shadow3="1" placeholder_phone="124" tablet_img="123" tablet_outline="1" tablet_bg="#e9e9e9" tablet_outline_color="#e1e1e1" tablet_shadow="1" placeholder_tablet="125" desktop_img="123" desktop_outline="1" desktop_bg="#e9e9e9" desktop_outline_color="#e1e1e1" desktop_shadow="1" placeholder_desktop="126" phone_tablet="1" phone_tablet2="1" phones="1" phone_single="1"]


Use the pricing shortcode to add customisable pricing tables to your content with seamless Easy Digital Downloads single and variable price integration. Works in combination with the Pricing feature shortcode as illustrated below.

[po_pricing name="Download" description="Purchase this product." currency="$" price="59" id="123" price_id="1" variable="1" bg="light"]
[po_pricing_feature feature="Detailed documentation"]
[po_pricing_feature feature="Fast speeds"]
[po_pricing_feature feature="Support and updates"]
  • bg: standard, light.


The screenshot shortcode allows you to add simple browser screenshot illustrations to your content. Customise each screenshot's browser color, outline and shadow.

[po_screenshot img="123" placeholder="124" browser_color="#555" browser_outline="1" browser_outline_color="#555" shadow="1" class="screenshot-2" speed="1"]


Add a lazy load image to your content.

[po_lazy img="123" placeholder="124" class="image-1"]

Powered by Pixelsmile