WordPress Shortcodes Explained + VIDEO

WordPress shortcodes are really awesome BUT at first (for noobs) they can seem more difficult than they really are. We’re going to clear up what shortcodes are and display for you how easy they are to use. WP introduced the incredible tool in version 2.5 on March 29th, 2008. At Spark Logix, we’ve been building them into our client sites and framework with great success and haven’t looked back. Shortcodes have made our clients happier and our process more efficient.

With WordPress shortcodes the average user while creating a page, has the ability to add dynamic content or fully style what they want to see, within the restrictions created by the developer (that’s us). They’re able to do all of this without the need for any programming skills.

Spark Logix Studios has developed a large catalog of shortcodes that allow our clients the ease of managing their pages, widget areas, footers and headers. One of the more effective ways to use a shortcode is to have a tinyMCE button in your Kitchen Sink in the Visual tab while editing a page. Some developers opt for the “find the shortcode in our settings or on our website” method, which can make it more difficult to find and arrange what you need.

How to Use a WordPress Shortcode

Click the Icon to Add a Shortcode

Easy Way to Add Shortcodes

Select a Shortcode

Select a Shortcode

Edit a Shortcode

Edit a Shortcode

Here’s what we’ve added:

This is an Alert Shortcode

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

Here’s what it looks like in the visual editor:

What the shortcode looks like

Let’s see one more:

A Horizontal Divider

Here’s what it looks like in the visual editor:

Horizontal Divider Shortcode

As you can see the editable options (can be edited right on the page): The Type of Divider, The Width of the Divider and the Color of the Divider. Each of these options is controllable without having to know CSS, HTML or PHP! With just a little logic and creativity you can create almost anything! This is the power of WordPress shortcodes.

Shortcodes make page creation a snap!

You can use the shortcode editor to easily follow instructions and then alter the text in the visual editor when you need to adjust an element. It’s easy to duplicate layouts you love by copying and pasting. You can edit the shortcode anytime without having to know how it’s finding all those styles and layouts you see on the front end. If the plugin is working correctly, all of your efforts just work!

How Spark Uses Shortcodes

Over the years Spark Logix Studios has created several plugins assisting in accomplishing tasks more efficiently. These plugins from time to time require data to show up on a page of our choosing. A shortcode is an easy way for us to accomplish this (on the fly) whenever we need.

Our creation process is simple. The basic steps are:

  1. Create the function, which will be called by WordPress when it finds a shortcode.
  2. Register the shortcode by setting a unique name.
  3. Tie the registration function to a WordPress action.

This is the in depth look at what we do, this isn’t something you’ll need to worry about as an end user. If we’ve done our job all of this will just work, when you need it to.


Video Demo on Adding Shortcodes


Video Transcript

We’ll make this quick. WordPress short codes. Respondo short codes that we’ve created that Spark Logix Studios have allowed us to create websites very quickly and allow our customers and clients to add content on to their website. With no code knowledge, being able to modify, edit, and create vibrant content very quickly.

So we’ll run through this, I’ll show you how we’re adding content. This is the page that we’re going to be doing. Right now, we’ve got the bread crumbs and the title, that’s about it. We’re going to add some more content to the page. First thing that I’ll do is I’m going to grab this, dummy content. I’m going to paste that here.

Now, this is how we add the short codes. Now there’s a lot of ways to add short codes, there’s a lot of different short codes. This is one variable, one way to do it. And you’re going to see how to create page very quickly.

So the first thing I do is click on our short code editor. What I want to do is add vertical spacing, so I selected the vertical spacing option. Let’s say I want to add 55 pixels of vertical space right there. I’m just going to put the word, you, here, so you can see that short code was added, in brackets, this is how short codes look, very simple. If I want to change this, I can easily change this.

So let’s preview that page that we were looking at. That content’s going to be added to the page, and we’re going to notice that there’s a 55 pixel space between the word, you, that I have and also the content that was added at the top of the page. As you can see here, there’s that space between those two areas.

Let’s say I wanted to adjust that and I want this to be 155 pixels. You can see how easy that process is. You’re going to notice throughout this demonstration that it really doesn’t get much more difficult than that. This is one of the most simple short codes that we have currently, but it gives you an idea of exactly what we’re doing, what it looks like, what a short code looks like, and how we’re adding this content.

So let’s add some more vibrant content to create the page. The first thing I think I want to do is add our full width and parallax feature. Now this is really popular currently. So the first thing I need to do is find a repeat pattern, which I’ve got here and we’ll go down here and find this repeat pattern I want to use. Going to insert it, it automatically inserted it here. I want to select a background color as a default in case the page needs to load. So let’s make our background color probably a little bit darker, and I’m going to select white as our text color for now.

The next thing I need to do is go select the options. Now this is creating my short code. The first thing I’m going to do is I’m going to place my image, going to tell it I want to be repeating. I want it to be a fixed image, not scrolling, and I want it to be container width content. And I’ll show you what that means in just a second, and yeah, I want it to be parallaxed.

So let’s add this. For the sake of ease, I’ve just copied that short code that we had here before, I’m pasting it here. I’m going to make it a little bit bigger. So I’ve got 135– I’m going to put my content, we got another 135. Here’s are contents here, we’ve got 135 pixel height difference from top to bottom. We’ll show you that in just a second. And as you can see here, this is all of the details that we just selected via short code. And this is where it ends. It says, this is the end of that particular short code.

So let’s go ahead and preview, there’s not going to be any content inside of it. But as you can see, we just added a parallax concept on a site just by adding short codes, because it’s all already been built within the framework of the site that we’ve created for Spark Logix. That’s what we do with our clients, we create these different concepts so that we can easily create this content that they can also easily create this content, and that their development costs and reduced down the road making their site more future proof to be able to create more vibrant pages.

So let’s add some content within this area. As you can see here again, we have the start of the short code and we’ve got the ending of the short code. We’ve got the inside, so this is where we’re putting our content. So the next thing I want to do is I want to create two columns. Go to columns, select two columns, here are my two columns that I’ve created. And as you can see, this makes it look like that’s a lot of stuff in there. So it’s got to start saying these are columns, here’s the first half, here’s my content of the first half, and here’s the first half ending. Then I have the second half, content, second half ending, short code ending. It has all of the information, very simple to see.

So what I’m going to do again, I’m going to make sure that I’ve got this copied. And just for sake of time, we’re going to only add content here. We’re not going to add any styling. So I’ve got two blocks of text, and as you see very quickly, it added my text in two columns. I have my 135 pixel space from the top of my parallax area to where my content starts.

Earlier, I had said, hold off a second to explain this. We did full width or container width content. We went with container width. So you can see here, starting in this container, outside of the containers over here and over here, we could’ve opted to select full width, and then we can adjust the pixels to how close we want it to get to the edge. And that’s done right here in the short code.

Padding, I can change that, and if I want to change this to full width, let’s change that to full width. I can edit the shore code quickly. And as you can see here, it goes all the way the edge. Say I don’t like it quite going all the way to the edge, let’s change this to 80 pixels padding, and you’ll see that it’ll adjust it with no issue. I think my computer’s slow today. And as you can see here, we’ve made that adjustment.

So, that’s adding the fourth parallax. I’ve got two columns, and if we were to move down the list any further, we can notice that there are several options that we typically build in that are available, and how easy it is to create a dynamic page built within the WordPress framework. Makes it simple.

One of the things that helps us keeps things clear is the opportunity that we have if we want to go to the text editor. I can copy all of this and I can take this content and create duplicate pages when I create pages within WordPress. This allows me to expedite– let’s say I’ve got five or six pages that maybe don’t have the same content, of course, because we don’t want to have duplicate content, but we want the same layout. This allows us to create that layout very quickly– seamlessly. It’s always the same and it works perfectly as long as the plug-in that we’ve created, along with the framework that we’ve created within WordPress, are all functioning as they’re supposed to be.

Now there’s lots of other ways to do short codes. This is a showcase, or a demo showing you how to create content styling on a page using the Respondo short codes that we’ve created at Spark Logix Studios. Thanks for watching.

Leave a Reply

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