Elegant Shortcodes is a WordPress plugin from Elegant Themes that helps you style your content using shortcodes.
In many ways the plugin is trying to help you achieve the same thing that the Drag and Drop Builder plugin does. Whereas Drag and Drop Builder helps you do this using a visual interface, Elegant Shortcodes helps you do this with…you guessed it…shortcodes. Thankfully, you don’t need to remember a list of codes in order to get the most out of it, as some shortcodes can be added using the visual editor.
Installing Elegant Shortcodes
The plugin has no settings area as everything is controlled via the post editor. If you use the visual editor, you will now see 5 new buttons at the end of your visual editor icon list.
If you have clicked on the HTML option or disabled the visual editor altogether, all of the shortcodes will be added to your editor as buttons. This doesn’t look as nice but if you get used to it, you may find this to be a much quicker and efficient way of using the plugin.
Shortcodes Available Via The Visual Editor
The best way to illustrate what Elegant Shortcodes can do is walk you through each of the shortcodes available to you. The five buttons the plugin adds to your plugin are Toggled Content, Boxes, Buttons, Tabs and Author Info. I will look at the options available via the visual editor first and then look more into the other shortcodes that the plugin offers.
Toggled Content
The [learn_more] shortcode allow you to create toggled content on a post and page. It’s one of the simplest options available. All you need to do is enter the title, the content and whether the content is shown initially or not.
The toggled content box has a fluid width so will expand to the size of any page. Clicking the box title will show and hide the content quickly and smoothly. It would be a great way of creating a frequently asked questions page for your website.
Boxes
Boxes are a great way of styling your content and making certain parts of your article stand out. The box shortcode comes with 5 options: info box, warning box, download box, bio box and shadow box (normal box). All you have to do is choose the type of box you want and then input your content.
Most of the box options are colourful and have an image displayed at the left hand side of the box. The output looks great though I’d love to see them expand this feature in the future. Perhaps offer more box styles or make the shortcode more flexible by allowing you to define your own background colour and upload your own box image.
Buttons
The plugin comes with a very useful button generator. There are 5 options for each link.
- Link: The URL the visitor is directed to when they click on the link
- Type: Small button, big button or icon button.
- Colour: In total there are 10 colours to choose from. Blue, light blue, teal, silver, black, pink, purple, orange, green and red.
- Content: The text that is written on the button.
- Open link in new window: Yes or No
If you choose an icon button, you will also have to select which type of icon you want to add. There are 12 types of icon available: download, search, refresh, question, people, warning, mail, heart, paper, notice, stats and rss.
The small and big button options are great though I was particularly impressed with the inclusion of icon buttons. They are a great way of adding button links such as ‘Email us a Question’, ‘Subscribe to our RSS Feed’ or ‘Download This File’.
Tabs
Tabs are a great way of presenting information to visitors. Tabs can be placed at the top or left hand side of your content. They can be removed altogether by using the simple slider type option. You can also create an image slider for rotating images and content.
Content can be transitioned by using a fade or slide and you can automate slider animation if you wish. The speed of animations can also be controlled.
The top and left hand side tabbed content options look ok though it would have been better if the background, text and link colours could have been controlled via the shortcode. The dull grey default colour does look a little bland when compared to the colourful boxes and buttons that the plugin offers.
The simple slider option which the tab shortcode offers is in effect a slideshow. They probably should have created a slideshow tab rather than include this with the tab shortcode feature.
The same could be said about the beautiful image slider that can be added using the tab shortcode. It would have made more sense to create a new button for the simple slider and image slider.
Author Info
The Author Info shortcode allows you to insert an author bio directly into a post or page. You simply need to add the image URL of the author’s photo or avatar and then add the corresponding author bio information.
The output looks very professional. Text and links are clear and the image is styled with a white rectangular box.
Annoyingly, this shortcode has to be used with an author image. If you leave the author image URL field blank you will still see the author image border. They need to address this in a future version and remove this styling if the author image information is not entered. In the mean time, you could always use the box shortcode as there is a bio option available for that (as mentioned previously).
Quotes
Elegant Shortcodes comes with two different styles of quotes. One splits the quote into two columns. The other has a larger font and spans the quote across the full width of the page.
Shortcodes Available Via The HTML Editor
I was a little surprised and confused by the fact that the plugin has many shortcodes that aren’t available via the visual editor. Since they are no buttons available for them, you need to switch to HTML mode or disable your visual editor in order to use them. Alternatively, you can simply remember the code for each shortcode.
Below is a list of some of the other great shortcodes that are included with Elegant Shortcodes.
Password Protected
The protected shortcode allows you to hide content from non-members. Once content has been wrapped inside the protected shortcode, it will not be visible to general visitors to your site. Instead, they will be shown a login box for them to sign in.
This option only seems to allow you to restrict content to unlogged in visitors. It doesn’t allow you to restrict content to certain user groups such as subscribers, authors, editors or admin. It could be a useful way of persuading people to sign up for your website though. Bear in mind that most member plugins that restrict content from visitors hide the whole page. The protected shortcode option allows you to restrict whatever you want i.e. all your content or just parts of it.
(Note: In order to see the protected shortcode in action, you need to make sure you are logged out. Therefore to check everything is working you should either logout and and view your page or view your page via another browser.)
Columns
The plugin allows you place any content into halves, quarters, three-quarters, thirds or two-thirds. The key thing to remember is that ‘any content’ can be placed in layouts. So you can place text or any other shortcode such as sliders, buttons or tabs inside columns. It’s a great way to utilize the full width of your page.
Pricing Tables
Big and small pricing tables can be inserted into your content too. It allows you to add a green check or red x to distinguish what features your product has.
There is no button for the pricing table shortcode in the visual or HTML editor. Simply wrapping content inside the [ pricing_table ] shortcode will do nothing either. Tucked away on Elegant Themes you will see a preview page that gives an example of how all shortcodes work.
[pricing_table]
[pricing price=”99.95″ currency=”$” title=”Enterprise” desc=”Description” moretext=”join” url=”http://www.google.com” window=”new”]
[feature] Content [/feature]
[feature checkmark=”x”] Content [/feature]
[feature] Content [/feature]
[/pricing]
[pricing price=”99.95″ title=”Enterprise” desc=”Description” moretext=”join” type=”big” url=”http://www.google.com” window=”new”]
[feature] Content [/feature]
[feature checkmark=”x”] Content [/feature]
[feature] Content [/feature]
[/pricing]
[/pricing_table]
The code above will produce the following table:
Using the example code as a template, you should be able to produce professional looking pricing tables fairly easy. Unfortunately, just like Drag and Drop Builder, there is no shortcode available for displaying content in normal tables.
Custom Icon Lists
The [ custom_list ] shortcode allows you to create lists using green check marks, red x’s or grey dots. Just like the pricing table shortcode, there is no custom list button on the visual or HTML editor.
The [ custom_list ] shortcode means that you can’t create a list which uses green check marks, red x’s and grey dots. It can be done but the list needs to be created separately.
For example, the code below doesn’t work.
<ul>
[custom_list type=”check”]
<li>Green Marks</li>
[/custom_list]
[custom_list type=”x”]
<li>Red X</li>
[/custom_list]
[custom_list type=”dot”]
<li>Grey Dot</li>
[/custom_list]
</ul>
That code will display the output shown below. Notice how no styling has been applied to the list. Additionally, the code seemed to add a large margin at the bottom of the first item.
The correct way of producing this list is this:
[custom_list type=”check”]
<ul>
<li>Green Marks</li>
</ul>
[/custom_list]
[custom_list type=”x”]
<ul>
<li>Red X</li>
</ul>
[/custom_list]
[custom_list type=”dot”]
<ul>
<li>Grey Dot</li>
</ul>
[/custom_list]
This will give the following output:
Custom lists still work great though I would have preferred if item styling took place within the <li> tag rather than having to group all items together.
Testimonials
Testimonials are a great way of showing off the praise you have received from respected people within your field. Sadly, once again, there is no custom list button on the visual or HTML editor for this shortcode.
The example shortcode provided by Elegant Themes illustrates some obvious styling problems with the testimonials shortcode.
[testimonial company=”Company name” author=”Name goes here” image=”http://www.elegantthemes.com/preview/TheProfessional/wp-content/uploads/2010/09/profile2.jpg”]
Content
[/testimonial]
Which produces the following output:
This highlights an issue the testimonial shortcode has when the length of the testimonial is short. The bottom border is displayed over the photograph and the quote box itself is unnecessarily long.
This seems to be resolved if you place the testimonial in a ‘one third’ column layout though the problem remains if you place it inside a longer ‘one half’ column. It’s a problem that needs to be addressed in the next version of Elegant Themes as it is common place for many people to give really short testimonials such as ‘Great Product’, ‘Recommended.A+’ or ‘Fantastic Item’.
When testing the testimonial shortcode I also found a styling issue which arises when a testimonial is placed inside a ‘one fourth’ column (i.e. quarter column). If you look at the image below, you will see a border extend from the bottom of the testimonial box to outside the testimonial area.
Social Media
Elegant Shortcodes comes with sharing buttons for Digg, StumbleUpon, Facebook and Twitter. Counters for Twitter and Feedburner are also available.
The instructions page for the plugin also states that there is a sharing button for the now defunct Google Buzz. As you would expect, using the shortcode does nothing as the network closed at the end of 2021.
It’s clear that the social media shortcodes haven’t been updated in a long time, which is a bit of a shame. I understand that 99% of the functionality of the Elegant Shortcodes plugin was written years ago for their themes however it would have been prudent to refresh some aspects of it, particularly something like social media as things change so quickly.
It includes a Google Buzz button instead of a Google+ button. There is no LinkedIn share button or a button for popular social media sites such as Pinterest, Reddit or Delicious: all of which are more popular than Digg. They have also chosen to use the older Facebook share button rather than a Facebook like button and the button they have used is horizontal rather than vertical, despite all other sharing buttons being vertical buttons.
I tested the Twitter and RSS counters with WPHub’s details. The Twitter counter, powered by TwitterCounter.com, works great. Whilst the Feedburner shortcode did link to WPHub’s RSS feed ok, the Feedburner image itself didn’t show. This problem could be coming from Feedburner rather than the Elegant Shortcodes plugin itself, though I’m not entirely sure.
Tooltips
Before testing this plugin, I never expected much from the Tooltip shortcode, but I was pleasantly surprised by good it is. When the user scrolls over the Tooltip text, a small white bubble will appear with more information. It’s a simple feature but is easy to use and the output looks beautiful.
DropCaps
DropCaps are used to apply beautiful styling to the first letter of a paragraph. They are used frequently by online magazines in the introductory part of the article.
The shortcode will use a dark grey for the styled test if you simply use [ dropcap ] on it’s own. By adding some basic CSS styling you can change the size and colour of the text you are styled text.
[dropcap style="font-size: 60px; color: #9b9b9b;"] P [/dropcap]
Like some of the other shortcodes mentioned above, DropCaps is another shortcode that is not present in the visual or HTML editor.
Problems With The Plugin
The plugin is useable though there are a few bugs which you may find when using the plugin. I’ve touched upon some of them already but in this section I’d like to speak more about the issue and expand upon some issues which I believe Elegant Themes need to address in a future version.
Missing Buttons From HTML Editor
I spoke above about many shortcodes not being available via the visual editor. What’s perhaps more surprising is that when you switch to HTML mode, all of the plugin’s shortcodes are not shown. Elegant Themes seem to have forgot to include the shortcode buttons for author and tabs. So if you are in HTML mode and want to insert tabbed content, a slideshow or an author bio; you’ll have to switch the editor back into visual mode in order to do so. Clearly this is an error on Elegant Themes’s part though it still feels bizarre to have to keep switching between visual mode and HTML mode in order to use all the shortcodes the plugin offers.
Many shortcodes have no corresponding buttons at all. The following shortcodes cannot be found in the visual editor or the HTML editor:
- Pricing Tables
- Testimonials
- DropCaps
- Custom Icon Lists
One shortcode that is in the HTML editor is ‘raw’. I’ve tried to use the shortcode but it doesn’t seem to do anything. Is this shortcode something that they forgot to remove during testing? Can we expect this shortcode to be used in a future version?
Regardless of how it found it’s way into the final version of Elegant Shortcodes, any shortcode that can’t be used by WordPress users has to be removed from the plugin.
Integration With Certain WordPress Themes & Design Issues
One of the benefits of using a WordPress plugin for shortcodes is the ability to use them in your content without worrying about what will happen when you change design. Many WordPress users use the shortcodes that are integrated with their website’s WordPress theme, only to find that when they change their WordPress theme hundreds or thousands of pages of content could potentially not display the way you had intended. This is because shortcodes have to be added right into your articles.
Generally speaking, Elegant Themes have done a good job of ensuring that Elegant Shortcodes looks good on all designs. There’s always going to be some conflicting design issues when a plugin is trying to style the content on a page so it’s hard to criticise them for it.
I quickly tested the output from some shortcodes with some WordPress themes I already had installed in my WordPress test area. I found some problems in particular with the Backbone framework from Color Labs. As you can see from the screenshot below, the Elegant Shortcodes slider didn’t display properly when using the Backbone theme.
Unfortunately, there are many styling errors that are prevalent on all WordPress themes (some of which I have highlighted already in this article).
For example, the protection shortcode has stlying errors whilst using the Twenty Eleven WordPress theme. This remains the default WordPress design that is packaged with all versions of WordPress therefore it’s surprising that an important part of the plugin doesn’t look good on it.
Do these small styling issues stop you from using the plugin? No, not really. Most shortcodes function as they should and their output looks great, however I have no doubt that many users will be frustrated with small problems like this, particularly if it’s with a shortcode they want to implement on their website.
Automatic Quote Styling
Elegant Shortcodes automatically changes the styling of any blockquotes on your website. This is not something I agree with. I do not believe that they should be changing the style of default functions. The whole point of using a shortcodes plugin such as Elegant Shortcodes is that it allows you to customise specific parts of your content in the way you want, whether it be highlighting important parts of an article in boxes or inserting an image slider at the end of the article.
The quote styling doesn’t work this way. Once the plugin has been activated, the styling of all of your blockquotes changes, whether you want it to or not. I don’t like this. I strongly believe they need to add a settings option in the next version of the plugin which asks whether the user want’s all of their blockquotes automatically changed or not.
It’s important to remember that the vast majority of WordPress designs style quotes via the theme stylesheet file already, therefore problems can arise when any plugin tries to override that. This happened with the Backbone WordPress theme. Even though the plugin was trying to style quotes, quotes were displayed using the styling from the Backbone theme stylesheet.
Some people may want Elegant Shortcodes to override the styling for quotes their theme uses. Others may not. Surely it’s up to us to decide?
Support
There is no tooltips or advice built into the plugin and there is currently no dedicated support room for the plugin in the ‘Plugin Support’ area of the Elegant Themes support forums either, though Elegant Themes will of course provide support directly in the forum should you need it.
This isn’t really that much of a problem as the plugin is very straight forward to use if you follow the examples given in the plugin documentation page.
To help you understand the plugin more you should check out:
- Plugin Video – In the members area of Elegant Themes there is a 22 minute video which walks you through some of the shortcodes available for the plugin (but not all). The video can be found by clicking on the readme link in the theme and plugin download area of Elegant Themes.
- Explanations of Shortcodes – A short explanation of what each shortcode can do can be found on the preview page.
- Examples of Shortcodes – You should find the plugin documentation page more helpful than the video as it gives you examples of how each shortcode can be applied on your website.
Overview
Elegant Shortcodes is a useful WordPress plugin that helps users style their content more professionally. It shares many similarities with Elegant Themes other flagship plugin Drag and Drop Builder though Elegant Shortcodes seems to lack some features that the former has such as video embedding, paper backgrounds and horizontal bars.
Overall I was happy with the plugin and impressed with what it can do though it is clear that Elegant Themes have simply repackaged their shortcode functionality from their WordPress themes. There’s nothing inherently wrong with that per say though you would have thought that they would have reviewed the plugin more thoroughly before releasing it. The social media shortcode is a good example of this. They included a Google Buzz shortcode even though the network was closed down last year. They also use a Facebook share link rather than a like and many of the big social media sites like Reddit and Pinterest are absent altogether.
The way they have set things up for users is bizarre too. Some shortcodes can only be added whilst using the visual editor, others can only be added when the visual editor is disabled, whilst other shortcodes are missing from both the visual editor and the HTML editor.
You can of course add all shortcodes manually if you remember the codes for them though the whole point of a plugin like this is that it’s user friendly and doesn’t require you to remember codes. Unfortunately, Elegant Themes does require you to remember codes. Take the pricing table for example. The pricing table is missing from both the visual editor and the HTML editor so in order to insert a pricing table onto a post or page you have to manually enter several lines of code. Surely users would benefit from there being a button on the visual editor so that they can create pricing tables in seconds?
I found these issues frustrating as Elegant Shortcodes is so close to being a fantastic plugin that WordPress users would use on all of their websites. In order to improve the plugin they will have to address the small styling issues that exist, ensure that every shortcode has a corresponding button on the visual editor and the HTML editor, and remove the small bugs that many shortcodes have.
Elegant Shortcodes come packaged with the developer theme membership from Elegant Themes. This membership retails for $89 and includes 75 high quality WordPress themes and 4 WordPress plugins. Unfortunately, there is no option available to purchase plugins or themes individually so if you like the look of Elegant Shortcodes, you’re going to have to purchase the full developer membership in order to get it.
Since Drag and Drop Builder and Elegant Shortcodes are both included with the Elegant Themes developer membership, you won’t have to decide which one suits you better for styling content on your website. You can simply try both out and see which method of styling content you prefer.
If you have enjoyed this review, I encourage you to subscribe to WPHub as we have some great articles in the pipeline. Should you have any questions regarding Elegant Shortcodes, please ask in the comment area and I’ll do my best to answer them.
Link: Elegant Shortcodes
