Using shortcodes

Generating Shortcodes – Video

Shortcodes help build page / post content and widget areas

sortcodes

React shortcode generator can be accessed when editing / adding any page, post or portfolio item. You can even add shortcodes via the React shortcode widget, which will allow you to add shortcodes into any widget area.

Here is where you can add shortcodes:

  • Any widget area using React Shortcode widget
  • Page, posts, portfolios or products content
  • They can also be used in some other spaces such as Bottom of page pop out and Background captions

add-edit-shortcode Whenever you see the shortcode button (on left) you can click it to launch the shortcode generator.

Add shortcodes

Use the dropdown menu or click a Popular shortcode to generate the options. Each shortcode options has a description and tool tip help where necessary. Go through all the options with your preferences and then Insert into the page.

Edit shortcodes

Edit the shortcode at any time by selecting it then copy it. Open the Shortcode Generator and press Edit existing Shortcode, paste in the code and Edit.

List of available shortcodes

Click shortcode to see the examples on the React Demo Hub

HTML and extra shortcodes

Helps neaten your page code, and will insure no extra space is added by the text editor. You can use class=”” and style=”” to all of these shortcodes.:

List of HTML shortcodes

[h1 class="textcenter" style="padding: 10px;"]Example heading [/h1]

ClassExampleNotes
h1[h1 class="bold"]Heading[/h1]
h2[h2 class="bold"]Heading[/h2]
h3[h3 class="bold"]Heading[/h3]
h4[h4 class="bold"]Heading[/h4]
h5[h5 class="bold"]Heading[/h5]
p[p class="textcenter"]Paragraph[/p]
b[b]Bold[/b]
span[span]Span[/span]
div[div]Div[/div]
a[a class="subtle-link popup-link" href="www.themecatcher.net"]Link[/a]
code[code]Code[/code]
pre[pre]Preformatted text[/pre]
table[table]Table[/table]
td[td]Table data[/td]
tr[tr]Table row[/tr]
th[th]Table head[/th]
ol[ol][li]Ordered list[/li][/ol]
ul[ul][li]Unordered list[/li][/ul]
highlight[highlight]Highlight me[/highlight]Highlights text with the primary colors
dummytext[dummytext length="short" val="2"]Before Dummy Text[/dummytext]Adds Lipsum dummy text. You can use “short” or “long” for length and 1 – 5 in val

Useful classes

You can add classes to many shortcodes and HTML you add to your content areas. Here are some useful generic classes you can use:

Responsive

ClassDescription
hide-phoneHides on phones.
hide-tabletHides on tablets.
hide-desktopsHides on desktops.
hide-largeHides on larger screens.
hide-mobilesHides on phones and tablets.
phone-text-centerswitch text alignment to center on phones.
tablet-text-centerswitch text alignment to center on tablets.
mobile-text-centerswitch text alignment to center on phones and tablets.
phone-text-rightswitch text alignment to right on phones.
tablet-text-rightswitch text alignment to right on tablets.
mobile-text-rightswitch text alignment to right on phones and tablets.
phone-text-leftswitch text alignment to left on phones.
tablet-text-leftswitch text alignment to left on tablets.
mobile-text-leftswitch text alignment to left on phones and tablets.
phone-box-centerMove an elements alignment to center on phones. Works only if a width is set.
tablet-box-centerMove an elements alignment to center on tablets. Works only if a width is set.
mobile-box-centerMove an elements alignment to center on phones and tablets. Works only if a width is set.
phone-box-rightMove an elements alignment to right on phones.
tablet-box-rightMove an elements alignment to right on tablets.
mobile-box-rightMove an elements alignment to right on phones and tablets.
phone-box-leftMove an elements alignment to left on phones.
tablet-box-leftMove an elements alignment to left on tablet.
mobile-box-leftMove an elements alignment to left on phones and tablet.

Text

ClassDescription
highlighted-textAdds the primary colors as a background to highlight text.
text-altMakes the text color the Alt text color.
text-primeMakes the text color the Primary color.
subtle-linkAdd links to give it an colored underline.
textcenterAdds text-align center.
textleftAdds text-align left.
textrightAdds text-align right.
phone-text-centerMakes text-align center on phones.
phone-text-leftMakes text-align left on phones.
phone-text-rightMakes text-align right on phones.
tablet-text-centerMakes text-align only on tablets.
tablet-text-leftMakes text-align left only on tablets.
tablet-text-rightMakes text-align right only on tablets.
mobile-text-centerMakes text-align only on tablets and phones.
mobile-text-leftMakes text-align left on tablets and phones.
mobile-text-rightMakes text-align right on tablets and phones.
fw-100Makes the font-weight 100.
fw-200Makes the font-weight 200.
fw-300Makes the font-weight 300.
fw-400Makes the font-weight 400.
fw-500Makes the font-weight 500.
fw-600Makes the font-weight 600.
fw-700Makes the font-weight 700.
fw-800Makes the font-weight 800.
fw-900Makes the font-weight 900.
boldMakes the bold text.
underlineGives the font an underline.
italicMakes the font italic.
breakwordWill break words if it doesn’t fit within the container.
bigFor H tags only. Overrides the default font sizes to make it a little bigger.
biggerFor H tags only. Overrides the default font size to make it much bigger.
subtle-linkFor A tags only. Makes a styled underlined hyperlink.
popup-linkFor A tags only. Makes the link open in a new window.
react-smooth-scrollFor A tags only. Makes the link scroll to an anchor link smoothly.

Still having trouble? Head over to the forums.

Forums