An Introduction to Longevity Shortcodes

Throughout the years of designing WordPress themes, I’ve always provides HTML Snippets that you can copy and paste into your page to get various types of things like progress bars, columns, drop caps, etc. However, there is a caveat of doing snippets, simply by copy and pasting directly into your page editor…should you change your theme, you will end up losing all your snippets, along with the styling that each one needs, which means you will need to go into the previous theme and copy all the CSS into the new one (or rather a custom CSS file). Not fun at all.

Longevity Pro is the my first theme to include “shortcodes” from a plugin. When you install the “Longevity 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 Longevity’s shortcode styling. To try and prevent this, we prefixed the name “longevity” to each style like this example:

longevity-iconbox

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

IMPORTANT As of September 28, 2016, the Longevity Shortcode plugin has been updated with significant changes that will affect your shortcodes that you’ve already used. The biggest change will affect the Showcase, Image Boxes, Team Boxes, and Icon Boxes. You will need to edit the current shortcode that is used in your page or posts. Setup tutorials will reflect on the changes with updated information. Also, this plugin does not work in the third party plugin called Black Studio TinyMCE widget.

The Longevity Shortcodes Plugin

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

shortcodes list

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 cancel shortcode

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
  • Team 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 “Inset Shortcode” button and choose Image Box from the dropdown
  2. Fill out all the information (see below for field settings and how to use them)

With the first image box you create, at the bottom of the wndow are two settings:

  1. First Image Box
  2. Last Image Box

Select the “First Image Box” for your first image box, and DO NOT click Inset Shortcode button yet because we still have two more to create.

first selected

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, but this time, do not click on either the “First Image Box” or the “Last Image Box” settings.

To make our third (and last) 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.

last selected

Now we can click the “Inset Shortcode” button.

Why is the “First Image Box” and “Last Image Box” so important?

The image box group needs a wrapper container, a sort of of box that the three image boxes go into. When we click on the “First Image Box” setting, this tells the system to insert the “opening” container before the first image box. When we click on the “Last Image Box” setting, this tells the system to insert the “closing” container tag. Remember we added an image box without clicking any of these? That is because it’s in the middle and doesn’t need this.

Remember Only the first element needs the “First….” and the last one needs the “Last…” selected.

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.

first last remove settings

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: #ab44c7
    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