X Theme Shortcodes

The Complete List of X Shortcodes

Developing a lot of sites with X? Download this 24 page cheat sheet and stick it onto your desk for easy reference!

x theme shortcodes list

How to use these shortcodes

We've put together a complete list of all the X Theme shortcodes. All X Theme shortcodes have their own unique styling depending on their active stack. However, across the board, they have quite the same similarities.

The concept of this tool is based on the already existing list of shortcodes available on Themeco’s website, which is a great list, however, I was confident that I could create an easier to browse page. To dive deeper, I suggest you checkout the X Theme Forum and knowledge base.

You can use these X Theme Shortcodes for all the stacks. For the sake of the length of this page, I did not list all different variants — playing around with these is up to you (explore the "Shortcode options" tab).

Don't be afraid of using shortcodes in Cornerstone, you can come up with some pretty unique designs that way.

To make it easier for you, we've created a neat copy / paste button. Pretty sweet huh?

Without further ado, here’s a complete list of X Theme shortcodes.

PS: Themeco ran several updates to Pro (which this site is running on) and some shortcodes are not showing up below. Nonetheless, the PDF download still has all of them. We are working on fixing this tool.

 

Accordion Shortcode

Your text here
Your second accordion text
Your third accordion text

Adds a responsive accordion drop-down for sharing larger pieces of content.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • parent_id: match the ID of the parent accordion to keep only one accordion item open at a time.
  • title: title of the accordion item.
  • open: set to “true” to leave open on page load.
 
 

Alert

"Warning"
Insert your text here

Different types of alerts – adds a colored box. Every alert type comes with their own color as shown below.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “muted,” “warning,” “info,” “success,” or “danger.”
  • close: set to “true” to add a close button to your alert.
  • heading: add the heading of your alert here.
 
 

Audio

Audio self-hosted

Audio embedded

*Your iframe embed*

Adds a minimal audio player. Host your own audio or embed audio from a different source (e.g. SoundCloud)
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • mp3: add link to .mp3 file.
  • oga: add link to .oga file.
 
 

Author

"About

Chris Schwartze

Best way out is always through.

X Theme author shortcode adds a responsive author box, showing author name, Gravatar and author description.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • title: enter a title for the shortcode.
 
 

Block Grid

Three Up

  • "Place
  • "Your
  • "Your

Four Up

  • "Place
  • "Your
  • "Your
  • "Your

Block grids give you an evenly split images or text within the grid.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “two-up,” “three-up,” “four-up,” or “five-up.”
 
 

Block Quote

I took my daughter to the father-daughter dance, and I cried like a little baby."Kevin

This X Theme shortcode adds a responsive quote and cite.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: accepts any text.
  • cite: “left,” “right,” or “center.”
  • Mix and match shortcodes as seen above!
 
 

Buttons

Square Button

[Square Button[

Round Button

[Round Button[

Pill Button

[[

Transparent Button

[button type="transparent" shape="square" size="regular" href="#fakelink" title="example"]Transparent Button[

Marketing Button

[[

Tooltip Button

[Popover button[

Popover Button

[Popover button[

These X Theme button shortcodes are no joke. There are literally over 50 different shapes, sizes and colors. Endless possibilities.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: real, flat, or transparent.
  • shape: square, rounded, or pill.
  • size: mini, small, regular, large, x-large, or jumbo.
  • float: “left” or “right.”
  • block: set to “true” to make buttons go full width.
  • circle: set to “true” to add a marketing circle around your button.
  • icon_only: set to “true” if you are only using an icon in the button with no text.
  • href: input the URL you want your button to link to.
  • title: input the content for the title attribute of your button.
  • target: set to “blank” if you would like your button link to open in a new window.
  • info: “popover” or “tooltip.”
  • info_place: top, left, right, or bottom.
  • info_trigger: hover, click, or focus.
  • info_content: if you have selected a popover, place in your additional content here.
 
 

Call out

"Headline

"Your

"Button

Big call to action with a headline, text and button.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “center,” or “right.”
  • title: enter in your title for the callout.
  • message: enter in your message for the callout.
  • button_text: enter in your text for the button.
  • buttonicon: enter in the unique identifier of the icon you want to use for your selection.
  • circle: set to “true” to add a marketing circle around your button.
  • href: enter in your URL you would like the button to go to.
  • target: “blank” will open links in a new window.
 
 

Clear


The clear property specifies on which sides of an element floating elements are not allowed to float. (Source)
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
 
 

Code Markup

 <h1>Love this resource</h1><p>No problem bro!</p> 

Gives you the ability to add markup to your website. (e.g. HTML, CSS, Javascript)
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
 
 

Columnize

Add a long paragraph of text here

Split any amount of content into a left and right side.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
 
 

Columns

Your first piece of content goes here
Your second content piece of goes here

X Theme column shortcode splits up pieces of content in different columns. These X Theme shortcodes take up the entire page width, make sure to explore different options!
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “1/1,” “1/2,” “1/3,” “2/3,” “1/4,” “3/4,” “1/5,” “2/5,” “3/5,” “4/5,” “1/6,” or “5/6.”
  • last: set to “true” to remove the margin on the last column so that it floats properly.
  • fade: set to “true” to prompt the column to fade in as a user scrolls down the website.
  • fade_animation: “in,” “in-from-top,” “in-from-left,” “in-from-right,” or “in-from-bottom.”
  • fade_animation_offset: if the fade_animation is anything other than “in,” set the offset of the fade in animation (e.g. “45px,” “10em,” “5%,” et cetera).
 
 

Content Band

Your content here

With the the content band shortcode, it’s incredibly simple to add custom, one of a kind elements to your pages and posts with hardly any work at all. (Source)
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • border: “top,” “left,” “right,” “bottom,” “vertical,” “horizontal,” or “all.”
  • bg_color: add in any color (i.e. “red,” “#fff,” “transparent,” et cetera) to be used as the background for the band.
  • bg_pattern: insert the URL to an image to be used as a repeatable pattern for the band.
  • bg_image: insert the URL to an image to be used as a full width background for the band.
  • parallax: input “true” to activate the parallax background effect for background patterns and images.
  • bg_video: insert the URL to a video to be used as a full width background for the band.
  • bgvideoposter: insert the URL to an image to be used as a full width background for the band on mobile devices.
  • no_margin: input “true” to remove all margins (useful when laying out home page designs, leaving default margin is helpful in creating consistent spacing on elements like posts and standard pages).
  • padding_top: accepts any unit of measurement for the inner padding of the content band.
  • padding_bottom: accepts any unit of measurement for the inner padding of the content band.
  • inner_container: input “true” to have a container placed inside the content band.
 
 

Counter

"X
"0""+"

X Theme counter shortcode adds a simple counter for sharing stats, and other stuff that uses numbers.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • level: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • looks_like: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • accent: set to “true” to activate the custom headline accent.
 
 

Custom Headline

<"h1"  class="h-custom-headline "h1"" >Your Headline

Headline with several options in terms of level and look.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • num_start: include the starting number for the counter.
  • num_end: include the ending number for the counter.
  • num_prefix: prefix the number with text or symbols.
  • num_suffix: suffix the number with text or symbols.
  • num_color: optionally include a color for your number.
  • text_above: include text to appear above the number.
  • text_below: include text to appear below the number.
  • text_color: optionally include a color for the text above and below the number.
 
 

Dropcap

Your text here

Large capital letter at the beginning of a text block.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
 
 

Entry Share

"Share

This X Theme shortcode adds various social sharing buttons
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • title: enter a title for the shortcode.
  • facebook: input “true” to activate share link.
  • twitter: input “true” to activate share link.
  • google_plus: input “true” to activate share link.
  • linkedin: input “true” to activate share link.
  • pinterest: input “true” to activate share link.
  • reddit: input “true” to activate share link.
  • email: input “true” to activate share link.
 
 

Feature Headline

<"h3"  class="h-feature-headline "h5"" > Check out my YouTube 

Adds a Font Awesome Icon + Custom Headline.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • level: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • looks_like: “h1,” “h2,” “h3,” “h4,” “h5,” or “h6.”
  • icon: input the name of the icon you would like to use for your headline.
 
 

Gap


Gap shortcode allows you to add vertical spacing between different elements on your page.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • size: accepts any unit of measurement, including negative values
 
 

Highlight Text

This is highlighted text

Allows you to highlight certain parts of text in color.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: input “dark” to choose an inverted style
 
 

Icon List

  • Item 1
  • Item 2
  • Item 3

Creates an icon list. (View icon cheatsheet here)
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: enter in the unique identifier of the icon you want to use for your bullet.
 
 

Icon

Retina-ready icons. (View icon cheatsheet here). . You can change the X Theme icon size by assigning a class to the shortcode and change the font-size.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: enter in the unique identifier of the icon
 
 

Image

"Your

This X Theme shortcode adds an image. But wait, there are a ton of options, make sure to try them all.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “rounded,” “circle,” or “thumbnail.”
  • float: “left” or “right.”
  • src: the path to your image.
  • alt: alt text for your image.
  • link: input “true” to wrap the image in an anchor tag.
  • href: the URL that you want the image to link to.
  • title: the title of the link.
  • target: input “blank” to have the link open in a new window.
  • info: “popover” or “tooltip.”
  • info_place: “top,” “right,” “bottom,” or “left.”
  • info_trigger: “hover,” “click,” or “focus.”
  • info_content: extra content for the popover.
 
 

Line


A simple line shortcode.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
 
 

Google Maps

Your google maps iframe here

X Theme shortcode map displays the almighty famous Google Map.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • no_container: input “true” to remove the container styling.
 
 

Popovers & Tooltips

Tooltip

 Place your content here 

Popover

 Place your content here 

These X Theme shortcodes add a popover or tooltip on any specific element.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • href: input the URL you want the link to go to.
  • title: title for the link. Doubles as the title for the tooltips and popovers.
  • target: input “blank” to have the link open in a new window.
  • info: “popover,” or “tooltip.”
  • info_place: “top,” “right,” “bottom,” or “left.”
  • info_trigger: “hover,” “click,” or “focus.”
  • info_content: place your extra content for the popover here.
 
 

Promo

"Your
Your text here.

X Theme Promo shortcode adds an image, text and call to action button.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • image: enter in the URL to the image you want to feature.
  • alt: enter in the alt text for the image.
 
 

Prompt

"Check

"Donec

Thick border box, custom headline, text and a call to action.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • title: enter in the title of your prompt here.
  • message: enter in the message of your prompt here.
  • buttontext: enter in the text for your button here.
  • buttonicon: enter in the unique identifier of the icon you want to use for your selection.
  • circle: set to “true” to add a marketing circle around your button.
  • href: URL where you want your button to link to.
  • target: input “blank” if you want the link to open in a new window.
 
 

Protected Content

Restricted Content Login

Adds a responsive quote and cite
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
 
 

Pullquote

I have never, honestly, thrown a chair in my life."Steve

Protect a piece of content with a WordPress login.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “left,” “right,” or “center.”
  • cite: enter in the citation of the original quote here.
 
 

Recent Posts

X Theme recent post shortcode shows your latest blog article — make sure to play with different variations!
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • type: “post” or “portfolio.”
  • count: “1,” “2,” 3,” or “4.”
  • category: to filter your posts by category, input the slug of your desired category; also accepts multiple category slugs separated by a comma to display posts in any of those categories, or multiple category slugs separated by a plus sign to display posts that have all of those categories.
  • offset: input a number to select the initial offset of posts.
  • orientation: “horizontal” or “vertical.”
  • noimage: input “true” to remove the image from the shortcode.
  • fade: set to “true” to enable fade effect as users scroll down your site.
 
 

Responsive Lightbox

X Theme lightbox shortcode is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page. (Source).
  • selector: the selector used to activate the lightbox. Best use comes from adding a class on the links of all images you want to use, for example, “my-lightbox.” Next, you would simply write “.my-lightbox” in this field (the included period denotes a class selection).
  • deeplink: set to “true” to allow for deeplinking. Deeplinking provides direct individual links to each lightbox image.
  • opacity: opacity of the background. Acceptable values rage anywhere between 0 and 1.
  • prev_scale: the scale of the previous image. Acceptable values range anywhere between 0 and 1.
  • prev_opacity: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.
  • next_scale: the scale of the next image. Acceptable values range anywhere between 0 and 1.
  • next_opacity: the opacity of the previous image. Acceptable values range anywhere between 0 and 1.
  • orientation: “horizontal,” or “vertical.”
  • thumbnails: set to “true” to allow thumbnail navigation.
 
 

Responsive Pricing Table

"Basic"

"$""39"

"Per
  • All Widgets
  • All Wadgets
  • All Wedgets
  • Wodgets
  • Gizmos
Your textSign Up Today![/button]

"Plus" "Featured"

"$""59"

"Per
  • All Widgets
  • All Wadgets
  • All Wedgets
  • Wodgets
  • Gizmos
Your textSign Up Today![/button]

"Premium"

"$""89"

"Per
  • All Widgets
  • All Wadgets
  • All Wedgets
  • Wodgets
  • Gizmos
Your textSign Up Today![/button]

This X Theme shortcode adds a clean pricing table.
  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • style: add inline styles to the shortcode.
  • columns: “1,” “2,” “3,” “4,” or “5.”
  • featured: input “true” to activate the column as the featured item.
  • featured_sub: enter a sub headline for your featured item.
  • title: select a title for your column.
  • currency: select the currency symbol to use for your pricing table (i.e. “$,” “£,” “¥,” et cetera).
  • price: set the price of the column.
  • interval: set the interval for when payment is due (i.e. “per month,” “yearly,” et cetera).
 
 

Responsive Slider

  • <img src="http://yourdomain.com/image.jpg" alt="Example">
  • <img src="http://yourdomain.com/image.jpg" alt="Example">
  • <img src="http://yourdomain.com/image.jpg" alt="Example">

Simple, lightweight image slider.
  • slide_time: set the duration for each slide in milliseconds.
  • slide_speed: set the duration for each slide transition in milliseconds.
  • slideshow: input “true” to have the slides change automatically.
  • random: input “true” to have the slides appear in a random order each time.
  • control_nav: input “true” to display the control nav (shows a marker for each slide).
  • prevnextnav: input “true” to display the previous/next arrows for the slider..
  • no_container: input “true” to remove the container styling.
     
     

    Responsive Heading

    <"h2"  class="h-custom-headline "responsive-heading"" >Check It Out, I'm Responding! 

    Makes your headline look great on all devices. (More info)
    • selector: the selector used to activate the lightbox. Best use comes from adding a class on the links of all images you want to use, for example, “my-lightbox.” Next, you would simply write “.my-lightbox” in this field (the included period denotes a class selection).
    • compression: set any number from 0.1 on up. Adjust number to suit your needs.
    • min_size: set a minimum font size in pixels for your heading if you so desire.
    • max_size: set a maximum font size in pixels for your heading if you so desire.
     
     

    Responsive Video

    Self hosted video

    Embedded Video

    *Your iframe code*

    Allows you to self host video or embed YouTube, Vimeo or other service with these X Theme shortcodes.
    • id: add a unique ID to the shortcode.
    • class: add a class or multiple classes to the shortcode.
    • style: add inline styles to the shortcode.
    • type: “16:9,” “5:3,” “5:4,” “4:3,” or “3:2.”
    • m4v: input the URL to your video in .m4v format.
    • ogv: input the URL to your video in .ogv format.
    • poster: input the link to an image you would like to use as the holder image before playing the video for the first time.
    • hide_controls: set to “true” to hide the controls.
    • autoplay: set to “true” to autoplay the video.
    • no_container: input “true” to remove the container styling.
     
     

    Responsive Visibility

    Place your content here.

    With responsive visibility, you can easily show or hide various pieces of information with different groups of visitors viewing your site on a wide array of devices.
    • id: add a unique ID to the shortcode.
    • class: add a class or multiple classes to the shortcode.
    • style: add inline styles to the shortcode.
    • type: “hidden-phone,” “hidden-tablet,” “hidden-desktop,” “visible-phone,” “visible-tablet,” or “visible-desktop.”
    • inline: set to “true” if using on a specific piece of content inside of a paragraph or other element.
     
     

    Skill Bar

    "Lego
    "90%"

    With responsive visibility, you can easily show or hide various pieces of information with different groups of visitors viewing your site on a wide array of devices.
    • id: add a unique ID to the shortcode.
    • class: add a class or multiple classes to the shortcode.
    • style: add inline styles to the shortcode.
    • heading: input the title of the bar here.
    • percent: enter in the percentage you want to show up for your skill bar.
     
     

    Tabbed Content

    Your Content
    Your Content

    Paginate individual posts or pages in WordPress
    • id: add a unique ID to the shortcode.
    • class: add a class or multiple classes to the shortcode.
    • style: add inline styles to the shortcode.
    • type: “two-up,” “three-up,” “four-up,” or “five-up.”
    • float: “left,” or “right.”
    • title: enter in the title for the corresponding tab.
    • active: input “true” to provide active tab styling on page load.
     
     

    Table of Contents

    "Table

    Using these X Theme shortcodes it for this page. You’re reading in tabbed content shortcode right now.
    • id: add a unique ID to the shortcode.
    • class: add a class or multiple classes to the shortcode.
    • style: add inline styles to the shortcode.
    • title: enter a title for the shortcode.
    • type: “left,” “right,” or “block.”
    • columns: if “block” is selected for the type attribute, choose between 1, 2, and 3 columns.