Search

How to style WordPress Pages and Themes using ShortCodes Ultimate Plugin

Listen to this article

Shortcodes UltimateWhen you create and maintain a blog or a site, you’re always looking for ways to make it more appealing to the readers. The first thing you do is choose an interesting theme. But while that might help style your overall look, you might need more to style and categorize your content.

There is a limitation in the post editor, there are not many options provided to style your content. Basically since you can always rely on your HTML and CSS knowledge to create anything you want. But for those who are not comfortable coding, there are certainly plugins that help you do this. There are several plugins available to help style your content, but Shortcodes Ultimate has the features of many plugins put in one.

The Shortcodes Ultimate Plugin

When I first saw the features of the Shortcodes Ultimate plugin, I certainly did not expect the many options it provided.The plugin was simple to install and even simpler to use because, the brilliance of it, is to provide every feature as a shortcode, which means that any feature can be placed anywhere in your website. Shortcodes are not just limited to pages, posts and widgets, you can use them to style your theme too.

 

What are shortcodes?
Shortcodes are basically macros, which can be placed anywhere on your site. Every shortcode has a corresponding function which will replace the shortcode at the time of execution. It provides for neater code by reducing duplication.

Interested in creating your own shortcodes? Get started by reading our Shortcode creation guide.

[space]

Features of Shortcodes Ultimate

The basic (free) version of the plugin comes with 50 Shortcodes. The shortcodes are categorized, for styling written content, dividing the content, adding audio/video/image files, creating an image gallery or slider, adding meta data.

Shortcodes Ultimate
Shortcodes Ultimate

There are several basic features available. You can highlight text, display a box or note, you can add a table, display an image, add a YouTube/Vimeo video, add a quote, add tabs, spoilers, show a lightbox, a Google map, a button (with a tooltip), divide information in panels, etc. Also for those themes which force post formatting, there is a spacer shortcode which adds white space (new lines) between text.

Few shortcodes which need special mention are:

  • Meta: You can add meta information to your post
  • Post: You can display post information (like title, etc) for the current or another post
  • Template: Set the template files to be used while displaying the page or post.
  • Carousel: Allows you to create an image slider (carousel)
  • Animation: You can display animated text
  • Members, Guests, PrivateYou can filter content for logged in members or guests, you can also have private notes for post authors

You can also nest shortcodes inside one another

[space]

Each Shortcode can be styled

There are several styling options provided for each feature and a live preview is shown (for most features) before you can add the shortcode to your page/post. In the below example for a box shortcode there are several styling options you are provided by default. Additionally you can specify your own style class.

Styling Features using Shortcodes Ultimate
Styling Features using Shortcodes Ultimate

There are also other options under Shortcodes Ultimate-> Settings to create custom CSS or edit existing styles.

[space]

Premium Add-ons to Shortcodes Ultimate

There are three premium add-ons that are available for the Shortcodes Ultimate plugin:

  1. Extra Shortcodes: This add-on comes with around 19 additional shortcodes to display pricing tables, progress bars, content sliders, panels, etc. This is a very useful add-on especially if you plan to make a business or service website. You can also see a preview of the features. I would recommend that if you had to choose an add-on, choose this one.

  2. Maker Add-on: Lets you create your own shortcodes to add additional functionality. There are three examples given to explain how you could create a feature (using HTML or PHP). This is a useful add-on for those who want to create their own shortcodes directly from WP backend, without the hassle of creating new files. You can checkout a preview of the maker add-on.

  3. Additional Skins: This plugin comes with additional skins to style some UI elements like Headings, Spoiler skins, Tab Skins and Quote skins. It boasts of 60+ additional styles. Regarding this add-on, I honestly feel this depends on individual preference whether you would like additional styling or not. If you feel there are some styling features which are compatible with your theme or which are personally pleasing, get these styling features.

[space]

Conclusion

Styling written content is not only to make it visually appealing, but also helps draw user focus to important, not-to-be-missed points, and you can increase readability through categorization. It took me about half a day to go try out each feature, explore and experiment. I would say the Shortcodes Ultimate plugin is a must-have plugin for anyone. What I like about it is that it has the features of many plugins in one. And each feature is styled elegantly. A special mention goes to the developer who has taken a lot of effort to create examples and previews for the features. Go ahead and install it and let me know your views in the comment section below.

Akshaya Rane

Akshaya Rane

13 Responses

  1. Hi Akshaya, I would like to add a hyperlink to the shortcodes ultimate code below.

    [su_service title=”Basement Remodeling” icon=”icon: search” icon_color=”#0059b3″ size=”18″][/su_service]

    Do you know if this is possible and if it is can you please let me know where the hyperlink code should be placed within the code above.

    Thank you very much.

    tb

    1. Hi Tara,

      Try enclosing the shortcode between an <a> tag. For example, try: <a href="wisdmlabs.com"> [su_service title="Basement Remodeling" icon="icon: search" icon_color="#0059b3" size="18"][/su_service]</a>

    1. Hi,
      You could try
      jQuery(document).ready(function($) {
      $(‘.su-tabs’).on(‘click’,function() {
      });
      });
      But I think it’s best you contact the plugin author.

  2. Hello
    I added the Shortcode Ultimate plugin, but when I add any feature (like a heading) the tabs of my text (made using TinyMCE Advanced) loose the format… How can I control it?

    Thank you

    1. Hi Fatima,
      I don’t see any reason for that to happen. I think the plugin author will give you a better answer.

  3. Hello I would like to know how is the code to create a shorcode where visitors find my website Example country this offer is for [country] Australia.
    The other code to create a shortcode [date-1] or is the current date minus one days

  4. I use shortcode ultimate plugin, I just observed some YouTube videos I embedded using the plugin are no longer viewable on the article. What could be the problem?

    1. Hi Olajide,

      We’re using this plugin on our website. I tried replicating the issue you are facing, however the YouTube video functionality is working fine for me. Is your plugin updated to the latest version? If it isn’t then try updating it. If the problem still persists you must contact the developers on their support forum. Here’s the link to the support forum.
      https://wordpress.org/support/plugin/shortcodes-ultimate

  5. In the above code “[su_service title=”Basement Remodeling” icon=”icon: search” icon_color=”#0059b3″ size=”18″][/su_service]”

    could someone tell me how to change the color of the text? I know how to change the icon color but I am totally blanking on the text color here.

    1. Hi Ed,

      You can change the text color from the WP Editor. However if you’re looking for an option using the shortcode itself, it’s best you contact the plugin author.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »