Enhance your WordPress Site with Elegant Themes Shortcodes
In this article, we will demonstrate and explain a few of the more popular shortcodes offered by Elegant Themes. More specifically, in the first half of this tutorial we'll show you how to use the ET shortcodes that are included in the WordPress rich text editor. The second half of our tutorial will walk you through a few of the popular shortcodes that aren’t available in the rich text editor. Elegant Themes Shortcodes are the fastest way to add variety and distinction to your content. Taking a few minutes to learn how to use them will give your site an edge.
Shortcodes found in the WordPress Rich Text Editor
Elegant Themes offers support for shortcodes caked into all of their themes through the rich text editor. This means that instead of having to search out particular shortcodes from the themes documentation you can insert them right from withing your rich text editor. Shortcodes in the rich text editor are inserted in the same way you would change text style, add a link, or change paragraph formatting.
Elegant Themes offers the following shortcodes in the WordPress rich text editor:
- Learn More (collapsible content section)
- Boxes (colored content backgrounds)
- Buttons (learn more, etc.)
- Tabs (tabbed content display)
- Author Bio Box (about the author)
Using Rich Text Editor Shortcodes
Inserting content into the shortcodes couldn't be easier. Simply click the icon of the element you would like to insert and fill out the fields. The shortcodes will automatically populate with the content you entered. Save your changes and view your post or page.
“Learn More” Shortcode
As shown in the tutorial video below, simply click the icon to insert the “Learn More” short code. A new editor will pop open. Add your caption title, select the fields default state (open or closed) and add your content.
Note: The content field supports HTML tags.
Save your changes and preview them.
“ET Box” Shortcode
Click the icon to add a ET Box. Select the type of box you would like to add and add the box's content.
“ET Button” Shortcode
Click the icon to add an ET Button.
Add the button's destination URL in the “Link” field. Select the type of button you want, as well as the color. The “Content” field dictates what text will appear linked in the button. You may also select the target for the link, either new window or same window.
“ET Tabs” Shortcode
Click the icon to add an ET Tab Box.
Select your tab style, either top tabs, left tabs, simple tabs, or image tabs. Select your animation style, either fade or slide, set your desired speed and enter the tab text.
If you selected images as your tab type you will have to set the image dimensions, and place the image URLs in the tab content field.
“Author Bio” Shortcode
Click the icon to insert the author bio shortcode. Add your image URL and content.
For easy styling and formatting, use a square image and leave the “Use Resizing” field set to ON.
Elegant Themes Shortcodes Not Found in the Rich Text Editor
Now it's time to talk about some of the shortcodes that are not found in the rich text editor. In this second part of the tutorial we'll show you how to use shortcodes that will enhance your social reach and the content of your WordPress site. Specifically, we'll demo shortcodes for adding social media links, column layouts, testimonials boxes and drop caps so lets get started…
Having direct links from your content to social media sites has become a must in modern webdesign.
The Social Media shortcode makes it easy for your readers to share your content on their favorite social media or bookmarking sites. Elegant Themes offers shortcode support for Digg, Stumbleupon, Facebook, Feedburner and Twitter.
The Social Media shortcodes are as follows:
- [dig] = digg
- [stumble] = stumbleupon
- [facebook] = facebook
- [retweet] = twitter
- [feedburner name=”yourfeedburnername”]
Simply add the code to any WordPress page or post and save your changes. These icons are typically placed at the top or bottom of your content.
ET shortcodes allow you to easily add a column layout to your posts and pages. Using the column layouts shortcode you can break up your page or post into halves, thirds or fourths.
To add column layouts copy the shortcode for the layout you want and paste it into your page or post. Add your original content in place of the “Content” contained in the shortcode.
Be sure to use the shortcode that includes “last” in your last section to close the column layout as shown in the tutorial video below.
List of Elegant Themes Column Layouts Shortcodes…
Adding Testimonial Boxes
To add testimonial boxes to your WordPress pages and posts copy the shortcode below.
[testimonial company=”Company name” author=”Name goes here” image=”http://uploadwp.com/wp-content/uploads/2010/06/adam-roo.png”]
Paste it into your post or page and replace “company name” and “name goes here” with your content. Replace the image URL with one of your own (found in your WordPress' media library). Also replace the word “content” with additional information.
This box is great for testimonials, but is also a versatile tool for creating interesting page layouts. Experiment with the code to find a layout that fits your needs.
Adding drop caps (think simple calligraphy) is an easy way to add flare and professionalism to your posts and pages.
Typically speaking, a drop cap is applied to the first letter of the first paragraph on your page or post.
To add drop caps copy the shortcode below and paste into any WordPress page or post.
[dropcap style=”font-size: 60px; color: #9b9b9b;”] P [/dropcap]
Replace the letter “P” with the first letter of the first word in your paragraph (remember to delete it from the word to avoid redundancy).
Set your font size and color (the color uses a hex code, a six-digit number beginning with a pound sign). Any image editor will have hex codes. You can also look up a full list of color hex codes by doing a Google search.
Elegant Themes Shortcodes Plugin
Most ET shortcodes operate from within the themes files. Some however, require the use of the Elegant Themes Shortcodes Plugin. To get the plugin login to your Elegant Themes Members Area and download “Shortcodes” from the Plugin Downloads area.
Login to your WordPress account and install and activate the plugin. (Dashboard > Plugins > Add New > Upload.)
With this plugin you'll be able to access the image slider, slideshow, easy tooltips, and password protection shortcodes. In this final section of our tutorial we'll show you how to configure these shortcodes to expand the functionality of your Elegant Themes and WordPress site.
Image Slider Shortcode
You can create an image slider using the tabbed content section found in the rich text editor but it's a little smoother to just use the shortcode and change the information directly.
To begin setting up the image slider, copy and paste the following code into your post or page:
[tabs slidertype=”images” auto=”yes” autospeed=”4000″]
[imagetab width=”800″ height=”500″] image.png [/imagetab]
[imagetab width=”800″ height=”500″] image.png [/imagetab]
Repeat the middle lines for as many images you want to set in the slider.
Replace the width and height values with the dimensions of your images.
Replace “image.png” with the URL of your images.
Save your changes.
- When working with shortcodes, be sure to work in the “Text” tab of the rich text editor.
- Images smaller than 600px wide will display gray bars on the left and right of the image.
The slide show shortcode functions very similarly to the image slider short code. The main difference is that the slide show is formatted to contain and properly display text and other shortcodes. For example, you could embed content boxes or buttons within the slideshow.
To start, copy and paste the following code into your page of post:
[tabs slidertype=”simple” auto=”yes” fx=”slide” autospeed=”4000″]
[tab] Content [/tab]
[tab] Content [/tab]
You can now replace “Content” with text, other short codes or other HTML.
Easy Tooltip Shortcode
Tooltips are small word bubbles that appear when a word is hovered over. With the ET shortcodes plugin you can quickly create this useful feature.
To begin, copy and paste the following shortcode into your post or page.
[tooltip text=”Add a caption title”] Content [/tooltip]
Replace “Add a caption title” with the content to appear in the bubble, and “Content” with the word to activate the tool tip.
Update your post and test.
Password Protect Content Shortcode
For a variety of reasons (subscriptions sites come to mind), you may choose to protect access to certain Posts and Pages by forcing site users to log-in. With the password protect content shortcode it's easy to accomplish.
The best way to use this shortcode is to add it as a last step. Once your content is complete insert the following…
At the very top and:
At the very bottom.
This will require people to create an account before they can access your premium content.
Hopefully we've effectively demonstrated that with Elegant Themes shortcodes you can easily create functional and visually pleasing designs for your WordPress site. We encourage you to take a look at all of the shortcodes offered by ET. You're sure to find plenty that will help to enhance your website. Experiment to find the perfect design and as always, please post any questions in the comments below.
Important Note: Here's where you'll find all of the Elegant Themes shortcodes – you must be logged into your Elegant Themes account to get the codes