An introduction to shortcodes for Opportune Pro

Opportune Pro  includes a shortcodes plugin in the downloaded package. When you install the “Opportune Shortcodes” plugin, you will add many new elements that you would not otherwise have had from the theme itself. Using a plugin method, you can later change themes and if all goes well, your shortcodes should still work and still maintain their original styles. Note that I said should because there may be other themes or plugins that might override Opportune’s shortcode styling. To try and prevent this, we prefixed the name “opportune” to each style like this example:

opportune_iconbox

If we just named it as iconbox, there could be another theme or plugin that has the same name, so we added opportune to the name to make it unique and less chances of style conflicts.

The Opportune Shortcodes Plugin

When you install the Opportune shortcodes plugin, you will get the following options:

shortcodes

To Use a Shortcode

  1. With a page open, click where you want your shortcode to be added within your content editor
  2. At the top of the editor is a button labeled as “Insert Shortcode” 
  3. You will get a popup window that looks like the screenshot you see above so you can choose the shortcode you want.
  4. The window will display the associated settings and options for the shortcode element you want to use.
  5. Fill out the information
  6. Click “Inset Shortcode” and make any content adjustments if needed….be careful you don’t delete part of the shortcode itself; only change the options between quotes or the content itself.
  7. Update or Publish your page or post.

Note If you make a mistake, click on the “Cancel” button at the bottom of the popup window:

insert shortcode button

Shortcodes that Require Column Layouts

There are many shortcodes in this list that gives you the ability to create side-by-side columns of multiple elements, like:

  • Showcase Gallery
  • Image Box
  • Icon Box

Before you begin, make a mental note as to how many columns you plan to have like 1, 2, 3, or 4 (currently these are the only counts you can have).  The following steps are IMPORTANT to perform, otherwise your layout may break and look out of place. 

Example 1 – Creating an Image Box set of 3 columns (3 side-by-side image boxes)

  1. From the editor, click the “Insert Shortcode” button and choose Image Box Row from the dropdown
  2. Then click the button “Insert Shortcode

This will insert a wrapper container for our image box columns with a shortcode that looks like this:

[imagebox_row] [/imagebox_row]

Between the the opening and closing group brackets ] [ you will insert your actual image box shortcodes; in our case 3 of them.

Now we can create our first image box by once again clicking on “Insert Shortcode” on our editor. Select the “Image Box” option from the dropdown list and go through the settings/options available there.

Once you have your first image box done DO NOT click Inset Shortcode button yet because we still have two more to create.

To make the next Image Box, at the bottom of the window, look for the “Add Image Box” button.

add another image box

 

This will add another group of settings below just like the first group at the top. Fill in the information for your “second” image box.

To make our third image box, we once again click on the “Add Image Box” button once again. Fill in the information with the third image box, but this time, we now select the “Last Image Box setting to say that this is our last one being added.

Now we can click the “Inset Shortcode” button.

Remove an Item

If you are in the middle of creating a set of items, such as image boxes, but you want to remove one from the window before you click “Inset Shortcode”, you can do that with a small text link at the bottom labeled as “Remove“. Simply click on it.

remove image box

Shortcode Form Fields

This will of course depend on what shortcode you are using, but each one has its own set of settings and options for you to select and/or fill out. But here are some guidelines for you to use as a reference…

  • Select Box – This is a dropdown that displays several options where you choose one.
    sc select
  • Text – This is a single text field for content that is generally short and one line (no HTML)
    sc text
  • Text Area – This is a field that is often bigger and similar to a text field but allows you to add basic HTML (careful with this though)
    sc textarea
  • Text for Colour – This is basically a text field but in relation to colour, whenever you add a colour, use the full HEX value with the hash mark like this:
    #f3f3f3
    sc colour
  • Text for Links – This is another text field but to add a link, use the full URL method like this:
    http://www.yourwebsite.com/images/myphoto.jpg
    sc links

 IMPORTANT This shortcode plugin does not work in the third party Black Studio TinyMCE Widget