Build Your Own Business Website header image

WordPress Shortcode Seminar

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Part 1 – How to Create a Shortcode that Styles Content Text

I recently suggested on the DIY Themes forum that a designer use a shortcode to create a couple side by side of text boxes in the content area of her home page.  This is a subject I’ve been wanting to teach on anyway so I decided to do so here.  In this seminar we’ll learn about both self closing and enclosing shortcodes.  We’ll create two text boxes that sit side by side and are bordered with a thin grey border.  The final result can be seen here.  The original thread can be found on the DIY Themes forums here.

Please note that this video is best watched in full screen.

Select the link below to watch a high definition version of this video

[S3VIDEO file=’public/liveanswers/LA1-19-11b-shortcode-seminar.mp4′ bgimage=’’ displaymode=’overlay’]

PHP Code Used in This Presentation

* This function defines our short code.  It wraps the content in between the
* short code tags with div tags.

function byob_content_boxes($atts, $content = null){
    $byob_boxe = '</pre>
<div class="byob-content-boxes">';
 $byob_boxe .= $content;
 $byob_boxe .= '</div>
    return $byob_boxe;

CSS Code Used in This Presentation

   border:solid 2px grey;

Video Transcript

I’ve had this ongoing dialogue back and forth this week with a woman on the DIY Themes forum and she wants to… I’ll show you what she wants to accomplish. She wants to accomplish this on her homepage. So she’s got these 4 images and those kinds of things already figured out but she’s thinking she needed something special to construct these 2 blocks of text. And she wants these 2 blocks of text to be easily editable so she wants some kind of an edit screen on the homepage that would allow her to do that.

I suggested to her that rather than having something special on her homepage what she should just do is create a shortcode for the purpose of developing this and then teach the client how to use the shortcode. And so that’s what I’m going to demonstrate this evening, how to create a shortcode in WordPress and then use that shortcode for a variety of things – for styling texts in particular.

I use shortcodes on my site for things like… these little check marks here. You probably have noticed there are 3 different styles of check marks – there’s the green one which means that you’re logged in and you have access to the video. There’s the yellow one that means you would have access to the video if you were logged in. And then there’s the red one which means you have to be logged in and a paid member in order to see the video. That is all accomplished by means of a shortcode and in fact, you can see that… I’m just going to take a look at that in my pages here. And we’ll just look at one of our lesson pages, Customize Thesis Like A Pro for example. If we go to the Visual, you’ll see a little thing right there that says “Public” – that is a shortcode. And that public shortcode will always show a green check box whether you’re logged in or you’re not logged in because public videos don’t require a log in. And so that’s one of the ways in which I use shortcodes. I also use shortcodes for embedding videos and a variety of other things. For those of you who have gone through the ecommerce tutorials with me, you will recognize shortcodes from the catalog because we use shortcodes to create the catalog in WP eStore.

But what you’re going to learn tonight is how to create shortcodes from scratch for yourself. This is a shortcode I made for myself and we are going to have a website here that I’m going to use to demonstrate this. The website is a and I use this site to demonstrate answers to questions that I did on the DIY Themes forums. And so what we’re going to do is to create a shortcode that takes this block of text and divides it up into 2 and then puts border around it and styles and that sort of thing. We’re going to start off by opening up the custom functions PHP file for that website which is the one I have here. And let’s see… we’re just going to steal this block of comment text and this function defines our shortcode.

Before I do this, I should tell you a little bit about shortcodes. I actually brought up the WordPress codecs for this on the subject. There’s a shortcode API in WordPress which is where they get this whole shortcode thing. There are 2 kinds of shortcodes: there is the self-closing shortcode which is the kind of shortcode I use on my site where you saw that little Premium inside of the center brackets. That’s a self-closing shortcode. The shortcodes that we use on WP eStore to develop a catalog, those were also self-closing shortcodes. But then there are as well… enclosing shortcodes.

An enclosing shortcode… well actually, I should just show what an enclosing shortcode looks like. We’ll go over to one of my video posts… Understanding Thesis Filters Part 1. Video Post Options, there we go. Well, this one’s not going to do it because this does not have a shortcode in it. I think the homepage does in fact, have a shortcode like this. And we go to homepage… I think I put Jackie’s video in that way. Yeah, there we go. You see this right here is also a shortcode and it actually, it is a self-contained or self-enclosed shortcode. The shortcode starts off with S3 video and then it has a whole bunch of potential attributes like files = and then there’s the location of the file… that’s the width of the video…. height =, the height of the video. Back of the image equals this…and that is a self-contained or self-closing shortcode and not an enclosing shortcode as I remembered it was.

Anyway, what an enclosing shortcode does is it takes the content between the opening and closing shortcode and it includes that content inside the processing. And so that’s the kind you’re going to make right off the bat is an enclosing shortcode and that enclosing shortcode is going to wrap the block of text with this extra style. And so we’ll just going to go ahead and start typing away and we’ll start off with a function and I’m going to call this BYOB Content Boxes. And then opening and closing brackets… okay. And then a shortcode… an enclosing shortcode needs to have a couple of different elements to it. The first thing it takes is an attribute and the name of that variable for this actually, this is all going to be fixed so it’s $atts. And then the main of the value of the content is $content and then we want to set that content to null which is essentially an empty value to start off with. This syntax is the syntax to use if you want to use enclosing shortcodes. You can skip the attribute even if you’re not using it because it’s just the way the code works. And then content needs to be set to nothing or to null in order to be able to be filled. And so anyway, that’s the beginning of the function.

And now what we’ll do is really very simple… we’ll create a variable. I’m going to call it BYOB_boxes and then I’m going to assign it the value of… first, I’m going to give it a value of the opening HTML tag that I want to use. So we use a pair of quotation marks and then I’m going to give this div a class =… and then I’m just going to call it BYOB-content-boxes. Then we’re going to close that div and step outside and put a closing semi-colon in. And then next to that, we are going to add again, byob_box and now we’re going to use a concatenation form period equals and then $content and the semi-colon. And then one last time $byob_box and period equals and then we’re going to have the closing div which is /div and then semi-colon.

So what happens here is I’ve written this out sort of long hand, I have a variable called byob_box and the first thing I’ve put in that variable is div class = byob-content-boxes and the second thing I’ve put in that variable and essentially attached to the very end of this variable is $content or the value of $content. And then the 3rd thing I’m going to add to the end of content is the closing div. So essentially what we’re doing here is we’re taking this thing called content and wrapping it in a div. And this variable called content is going to be the content… the text that we surround with these shortcodes. And so and then we need the most important statement which is our return and we are going to return $byob_box semi-colon.

Now when this function is called, it’s going to be return these things all together and then you have to… this isn’t actually a shortcode yet. This is just a function. In order to turn it to a shortcode, you have to use the form add shortcode and then the name we’re going to use for our shortcode which is in this case would be BOX and then the name of the function that we’re using to create the shortcode which is byob-content-boxes and I’m going to close with a semi-colon. Okay, so this little bit of code right here creates a shortcode whose name is Box out of this function.

And the add shortcode method wants to see a variable called atts and a variable called content and it’s going to return in the form of content BYOB box. Okay, so it’s going to receive that and let’s open up Filezilla. And we’ll connect that to that site which is forumdemos…. go to Themes 3618… custom, that’s just custom functions right here. So we’ll just go ahead and upload that and overwrite it.

So now this is what the text looks like at the moment, before we refresh it and in fact, when we refresh it, nothing’s going to happen because we haven’t put new shortcodes in here yet. But this is the backside of that site and so if we have the pages and then we’ll go to Demo 3 page… okay I’m right here in front of this and we’ll put our shortcode in. And we want to put this in the HTML view so straight bracket box straight bracket… and then we’re going to come over here and the end of our first sentence and we’re going to put our closing or our wrapping shortcode which is comprised of / in front of the box or slash in front of the box. And then that second sentence, I’m going to use also… and so we’ll say box again and get rid of that a little bit space there. And then we’re going to come down here to about that location. Now I guess that’s kinda the end. I need to do about half or so or it’s not going to look great. And then we’ll just put the closing box in and we update this… back over this page and then we’ll refresh it.

Now you can see things have changed a little bit. What we’re going to do here is we’re going to come over here and look at this in Firefox. Actually this is what it’s going to look like when I was fooling around… I got here with it but we’re going to start all over again. So come over here in Firefox and when we inspect this element, you can see that what has happened is we have created this div class byob_content_boxes and we have wrapped that section of text with an opening and a closing div called byob_content_boxes. So our little bit of code is working just fine. The box short code ended up writing this div with this class on either side of each of these blocks of text. These each used to be part of the same paragraph and now they are 2 different blocks.

So now what we have to do is style those. Here we are in Web Developer and I’m going to style this. So I’m going to grab that class, type div. and that class name… content boxes… and then… 1, 2, 3. So the first thing we want to do is to make those things sit side by side. We’re going to make the width about 42%… width:42%;  So now you can see each one of these things is less than half the width of that content space. And then I want them side by side so I need to say float:left;  Now, they are left and right of each other and in fact,  this little bit of code has floated up beside it.

And then I want to give myself some margin… let’s see, let’s just call it 12 pixels. Okay, and I think I’d like a little bit more bottom margin. Actually this is just going to be margin left 12 pixels… this is going to be margin bottom… call that say, 20 pixels… a little bit more space here and then just write a border around them. Border:solid;… okay just created a solid border but we’d like the text right up to it so let’s give it some padding = 10px. Now it’s going to give us some space around the inside of that and that also widens these boxes to fill a space.

Now I don’t want the border to be that dark, I want it to be grey. So border color: grey;  And I think that’s even a little wider than I want so… actually no. I probably could just do that here – I could do the shortcut version of border… border solid 2px and grey… yeah, and then just get it right there. Okay, so that’s a shortcut version. What would 1 pixel look like? I think that was 2 pixels the way she had it so 2 pixels.

So that is now our 2 little boxes. I guess what I’m going to do now is select all that, copy it, and back over here… actually, I need to open that CSS file. So we’ll open up that custom CSS file and we’ll just come down here at the bottom and paste it. So the width is 42%, they both float left, margin left to 12 pixels, margin bottom to 20 pixels, border around them solid to 2 pixels and grey and the padding is 10 pixels. So go ahead and save that… we head over to Filezilla, upload custom CSS.

Now let’s refresh that and see how it looks. Okay, looks pretty good. And if we look at her example, she’s got this red text in there. If we want to do that, at this point I would just say that she should switch to the visual view, select the text that she wants red, pick the color red she wants, and do it that way. Because she wants to do it as easily as possible with as little code as possible. And I think that’s pretty much it.

You know, this is a minimal amount of code, hit update, we come over and take a look. Okay, and so pretty much we’ve got what she was attempting to accomplish. The 2 grey boxes sitting side by side, equal in space in their space and we have text that’s easily editable inside the context of that and that should make I think probably everybody happy.

0 Comments… add one
0 comments… add one