This is Part 3 of the J Shortcodes Plugin series. In this session we demonstrate how to add a button using J Shortcodes and add some basic configurations like changing it’s color, text, size, alignment and how we can link it to a URL so that it goes to the page when the button is clicked. We also show how to customize the code to make the link open in a new page.
And so I have… we’re going to work on this site here, this Larraine site and we’re going to… so this is the page we’re going to work on. I think I’m just going to go ahead and edit that page. And then to refresh your memory about this J Shortcodes plugin, actually if you just search for J Shortcodes, you’ll find this page here and then the page we’re going to use as reference is going to be their Find Out More page. And we’re just going to start off with here, with the J buttons.
You can see that they have you know, a fairly large array of button choices here. You know, a variety of colors, sizes, and then some default standard icons and you know, obviously, these things go from quite simple to complicated as you work your way through it. I’m just going to go ahead and steal the code right here from this and I’m going to paste it into the page. And simplest, what this does is it specifies J button and then the color….in this case, it’s orange… the size, double extra large. And then it closes the first part of the… the opening tag of the shortcode and then the text that shows up inside of that button and then closing tag of the shortcode.
So if we look at it just as we cut it and pasted it and view that page, button was the text that’s inside and extra large is just its height and width and then the text and the font size and that sort of stuff or it’s obvious here. We can certainly change this, for example, to say “Go to Demo 1” which is the page that it’s going to link to. If you change that text in there, that changes the text in the button. Okay, so far so good. We could easily… instead of orange, choose red and update it. And we could choose medium or we could just choose large and you can see things as you know, everything changes in size based on what we specified for that.
Okay let’s go back to orange and extra large or extra extra large. Now the button of course doesn’t do you any good, just as a button that sits there like that and does nothing right? What we want it to do is we want to link off to something.
And so that is the link property and if you look right here, here is the link property and it’s essentially link equals and then the URL. So we’ll go ahead and copy that and we will paste it in this. And now, what we really want to do is we want to get this link URL to be a real URL. And so, we delete all of that filler and then let’s go over to Demo 1 and grab that URL. We paste that URL there, just a standard URL. Now it’s going to link to that page. If we hit update and then go back over to this and refresh it, now if we select this, it’s going to take us to the Demo 1 page.
Okay, so far so good. That is the you know, that’s its sort of its most basic functionality – its size, its color, its content and its link.
Now there’s a couple of other things within the basics that I want to talk about here for just a moment and one of those is telling it to open up in a new page. Right now, this gives us the equivalent of… or what we’d like to do is add the equivalent of target = _____ which is a you know, link attribute which makes the link open up in a separate page. And the way you accomplish that is with this new page and it’s new page yes or no.
And so, we’ll go ahead and again, add this and new page yes is going to be the answer here. So if you don’t put anything there, obviously, it won’t open up in a new page. So, new page yes is really the only relevant thing for us here. If we hit update again and we do this… I have to refresh it first and then we do it…. you can see it opens up in a separate page and the Demo 1 page still stays open.
And then the last basic I’d like to talk about is how you kind of align this inside of the page. Basically, you’re going to align this inside of the page by using the text editor, the visual editor. So if you switch over to the visual editor and then just select the whole shortcode, you could center align it like that. Let’s go back to this… I think what we have to do is separate this shortcode because it’s treating it as if it’s the same thing there. So we can center it….let’s look at it in HTML for a moment. Yeah, okay so we can center it like that. If we select update and refresh it, the button’s going to be centered in this space.
The same thing would work if instead we wanted to left align it, I mean, right align it. It still works like that and then if we wanted to… yeah, I guess that’s it. I was going to say if we wanted to add a margin above and below it but that’s not something that’s available to us in these buttons so we won’t bother trying. Essentially, what we have here is the ability to move it to the left, to the right, or to the center inside of the text editor.
Okay so that was Part 3 of this J Shortcodes series. Part 4 is going to be looking some of the additional styling options that are available to us.