Add & Create Shortcodes: The Complete Guide To Shortcodes Ultimate Plugin

By Sarah Herbert

Sep 17, 2017

The Ultimate Guide To Shortcodes Ultimate Plugin

If you have never worked with Shortcodes Ultimate before, it may be time to start. This WordPress plugin enables the use of shortcodes, which are essentially short bits of inline code that instantly add advanced features to your pages.

With shortcodes, there is no need to copy and paste (or write) lengthy blocks of code. Simply click a few buttons to easily add sliders and image carousels, video players, column sizes, tabs, or accordions. As soon as your plugin is installed and activated, these features are ready to use. They are fully responsive and will adapt to your user’s screen size. No need for additional coding. It’s easy to see why this plugin has received a 5-star rating from its reviewers.

Table of Contents

Installing the Plugin

The first step to using this robust plugin is to install it. Let’s begin by accessing your WordPress dashboard.

1. Login to get started.

Logging In To WordPress

2. From your WordPress dashboard, hover your cursor over the Plugins tab on the left side of the screen. Select Add New from the submenu that appears.

Adding a new plugin WordPress

3. On the Add Plugins screen, use the search box in the upper right corner. Begin typing the name of the plugin: Shortcodes Ultimate.

Wordpress plugin search box

4. Once the search is complete, the Shortcodes Ultimate Plugin should appear as the first result. Click the Install Now button next to the description.

Installing Shortcodes Ultimate

5. Next, click the Activate button that appears after the installation is finished.

Activating Shortcodes Ultimate Plugin

6. Upon activation, you will be redirected to the Plugins page and will be able to see the new plugin in the list with your other installations.

Wordpress New Plugin Screen

Congratulations! Your plugin is ready to use.

Using Shortcodes

Now that your plugin is installed, let’s take a look at what it can do. A simple post, like the one pictured below, can greatly benefit from a few graphic elements to enhance the visual appeal.

Shortcodes Ultimate In Action

Shortcodes will enable you to easily add image carousels, galleries, video players (YouTube, Vimeo or self-hosted), columns and rows, links, highlighted text, pull quotes and a lot of other features that would be tedious to code by hand with HTML and CSS or other workarounds.

Shortcodes To Add Visuals

Video Shortcode For WordPress

These features are simple to add to any post or page. To insert a shortcode feature:

1. Open an existing blog post (like the one above) by accessing the Posts tab from your WordPress navigation. Or begin a new post to test the features.

Adding Shhortcodes To WordPress Posts

2. In the Edit Post screen, you will see a new button next to the media selector. Click Insert Shortcode to view the list of shortcodes available through your new plugin.

Inserting Shortcodes Ultimate In WordPress Posts

Tip: Utilise the shortcut alt+i to pull up the Insert shortcode menu while editing a page or post. This shortcut can also be changed in the plugin’s settings options.

3. The list can be filtered to show the type of features you’re looking for. Filter by Content, Box, Media, Gallery, Data, or Other. Or simply browse the list for options such as Tabs, Pullquote, Audio, Posts, Spacer, Carousel, Animation, Lightbox, or YouTube.

Shortcodes Ultimate Shortcode Choice

4. Choose a feature to add and click on it.

Adding Shortcodes Ultimate Specific Shortcode

5. Once the feature has been clicked on, an options panel will allow you to customise it before adding to your post. Choose options such as Align, Size or URL. The options will vary according to the feature you have chosen to add.

Shortcodes Ultimate Layout Options

Shortcodes Ultimate Layout

6. This options panel also allows you to add your own CSS styles. Insert your Class names here, and later (in Settings) we will insert the corresponding CSS code into the stylesheet.

CSS Class Shortcodes Ultimate Plugin

7. There is also a Content box that allows you to add content, such as text, to your feature. This is obvious for features such as frame, pullquote, highlighted text, etc. But it will function a little differently for options such as tabs, in which you will use the box to add the content of each tab.

Content Option Shortcodes Ultimate Plugin

Content Option Shortcodes Ultimate Plugin

8. Once you are finished editing the options for your new shortcode feature, click Insert shortcode.

Insert Shortcode - Shortcodes Ultimate Plugin

9. As you can see, the shortcode has been added to the text of your post. No copy and paste, just a simple-to-use feature. Also, notice how short the code is.

Inserting a Shortcode WordPress

10. Click Preview Changes to see how the new feature looks on your page.

Preview Shortcode - Shortcodes Ultimate

Whichever feature you choose, whether video player, rows, columns, tabs, highlighted text, accordion, etc., the process is the same. Choose the Insert shortcode from your Edit Post screen, choose the feature to add, use the options panel to customise it, and then save it and see how it looks on the page.

Note: The shortcode options are not limited to use within individual posts. Also, use them with your website pages. The same Insert shortcode button is available when you add or edit a page.

Also, see how simple the code for the tabs feature is:

Adding a shortcode to a page

Shortcode Test

No messy coding or use of complicated spry tabs. Simple clicks to add your new features.

Editing Shortcodes

There is no way to reopen the options panel for a shortcode once it has been closed and added to your post. If you want to make changes to the feature after the shortcode has been inserted, there are a few ways you can do it. First, check the shortcode that has been added to your text and see if it displays the values you want to change, such as Align or URL. If so, then simply change it there. If the value you want to change is not listed in the shortcode in your text, you will have to remove the shortcode and begin with a new one, being sure to choose the proper settings in the options panel at that time.

Also, note that adding values to the inline shortcode will not work. Let’s say you want to add width=”200px” by inserting it into the shortcode in your text. It won’t be acknowledged. Only the values that are automatically inserted into your post with the original shortcode can be read and edited. You cannot add additional values once it’s in your post. If the shortcode options don’t have the styling you’re looking for, then add your own CSS class for better control.

Plugin Settings

To take full advantage of this robust plugin, check out the settings panel where you can make changes and add additional CSS code.

1. Access the Settings from the Shortcodes tab on the menu.

Editing Shortcodes - Shortcodes Ultimate Plugin

2. The About tab will open by default and will give you more information about the plugin.

3. Choose the Settings tab at the top of the screen to change and save options such as the shortcode prefix or the hotkey to insert a shortcode (default is alt+i).

Shortcodes Ultimate Settings

The Skip default values option, if enabled, will not add attributes to your shortcode if you have not changed them in the options panel when adding a new shortcode. For example, if you add a Highlight Text shortcode without changing any of the default settings in the options panel, the following shortcode will be added to your text: [su_highlight]Highlighted text[/su_highlight].

If, however, you change a value in the options panel, such as the color of the highlight, the following code will be added instead: [su_highlight background=”#ff99da”]Highlighted text[/su_highlight].

Notice that only the value that was changed (background colour of highlight) was added to the shortcode. Any other values, such as text colour, were not added to the shortcode because they were not changed.

Skip default values is what enables only the changed values to appear instead of a lengthy code with all values and attributes included.

Be sure to Save changes if you make any adjustments to your settings before moving on to the next tab.

4. The Custom CSS tab will enable you to add additional CSS you may have written in order to add classes to your shortcodes. You can also view the default CSS for each feature using the blue category links: Content, Box, Media, Gallery, Data, or Other. Choose whichever category contains the feature you want to tweak, then click the link to view the default attributes and values. Overwrite these styles with new CSS in the large black text box, as seen below.

Editing Shortcodes

Customising Shortcodes

5. Be sure to Save changes before leaving this screen.

6. Additional resources are available through the Shortcodes submenu. Find Examples to see each feature and better understand how the code works. Also, utilise the Cheatsheets to view the possible values and options for each feature.

Custom CSS Shortcodes Ultimate Plugin WordPress

Button Shortcode Size Example

7. Add-Ons are available for purchase if you desire more features and functionality, such as skins or custom shortcode capability.

The more you use the Shortcodes Ultimate plugin, the more you will appreciate the convenience and streamlined code it provides.

Thank you for reading the Complete Guide To Shortcodes Ultimate Plugin! For more great WordPress tips and tutorials, subscribe to the Solvid blog or follow on social media.

Join 1000s of

using Solvid.

234 customers signed up in the last 30 days

SEO Accreditation Large

Solvid is a creative SEO, Content and Digital PR agency. Solvid is a registered trademark of Solvi & Heirs LTD, registered in England and Wales. Registered Address: 6 St. Davids Square, London, England, E14 3WA

VAT: GB 326425708

Reg: 09697233

020 7072 8788