Build Your Own Business Website header image

How to Add a Custom Javascript to a Post or Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1 Add Code to the Page

This is Part 1 of How to Add a Custom Javascript to a Post or Page series. In this session, a member asks for help on how he can incorporate a calculator into his business website. He is in the business of euro exchange it would be convenient for to have this kind of feature to his site. The problem is the calculator page seemed to fail. So here, we show how to fix that problem by simply adding script code to the page.

Video Transcript

But I’m going to start off with Christian and take on this question about this custom javascript code. Let’s see, Christian, I’m going to unmute your microphone here. Christian, you join us?

Yes Rick, good afternoon from the UK. I just wondered whether it might be worth me giving a little bit of context to my question so that other listeners sort of understand what we’re trying to do here.

Sure why not?

Okay I have a website called webuyeuros.co.uk and what the service we provide is we exchange Euro coins for pounds. I’m actually the offshoot of a US company called webuyeuros.com and I run the UK operations. And so I’ve just finished building my website and many thanks for your invaluable assistance there, Rick. An old programmer friend recently contacted me and said, “Hey Christian, why don’t you add a calculator to your rates page so that instead of people having to do math and actually get out their calculators to work out how many pounds they’ll receive through their Euro coins, they can simply enter the number of Euros they wish to change in this little calculator and it’ll display the number of pounds that I’ll pay.” So my programmer friend sent me this javascript code and I have link to that which I can… which actually is there now. What I tried to do was to cut and paste the code into my Rates page on my website. I have a menu tab called Rates but then I found that the formatting went to pot and the calculator stopped working. And I realized, I needed, I think, to make some changes to either the custom CSS file or the layout.css. I don’t know which I need to modify.

And I also have a problem. I’m at that stage Rick, where you know, part of my problem is sort of not knowing what to look for in order to fix my problem. It’s like you know, looking at a map but not knowing how to read it and that’s the situation I’m in. So I was hoping you could guide me through to helping me implement this.

Absolutely. And actually, probably the… one of the things that’s probably confusing you a little bit on this is that you’re missing one part of the picture. And the part of the picture that you’re missing is how to incorporate the javascript code into the page so that it actually works. Once we do that, the… I’m guessing that the map becomes a little clearer to you. But having said that, you’re going to see as we walk through this that there are a number of little oddities associated with doing this in WordPress that we have to grapple with. And when we’re all finished with it, you’re going to like it but there are a few extra steps we have to do that you wouldn’t have to go through in a straight HTML page.

So the very first thing we need to do is add your script to the page. Now, if we look on the page that your friend had made for you and we’ll just view the page source, everything that we need to do is here. So we have his javascript that he created in between these script tags and then we have his HTML that he created that triggers this javascript. And so we do have everything we need here but we have to get it in the right spot and then when you want… and then for styling, we’re going to have to do a couple of tricks.

So the first thing I’m going to do here actually is just open up another page entirely on a site that we’ll just play around with. And let’s see, let’s just go to a post. Let’s come down here to… yeah, let’s just… An Irish Peach. We’re going to put that code here in the middle of this post. Now the first thing to do though is actually to put the javascript code in. And so we come back over to his page and we have to copy the javascript starting with the one scripts tag and ending with the other. Now, he placed the javascript in the head and there’s nothing wrong with placing the javascript in the head except that it slows down the loading of the page. So we’re not going to place it in the head. We’re going to place it where Thesis wants to place it which is at the end of the HTML tag. That would be down here inside of the body tag at the bottom. And Thesis has this place for you to do that.

So here we are now on our Thesis post and if we just scroll down here to the bottom, yeah to the… okay, there we go. I’m sorry, not quite the bottom but to the javascript meta box here. All you have to do is paste that javascript meta box or paste that code in the meta box and it needs to start with the starting scripts tag and then it needs to end with the ending script tags. We have to have all of that content in there. And then… and so, that’s… what’s going to happen is when we’re done with that, that’s going to show up at the bottom of the page rather than the top.

Then the next thing we’re going to do is take his HTML and we’re going to use the HTML view to insert it rather than say the visual view. So we’ll switch over to HTML, come back over to his stuff, and we’ll just go ahead and copy his h1 all the way through his button. So we’ll just copy that and give ourselves an extra space, paste it, give myself an extra space and then we’re going to take this h1 and change it to an h3 because we already have an h1 on this post so we don’t need another one. We don’t want another one.

Okay so here we have his straight code and as soon as we hit update and we go to that page, this is going to work. Now, it’s not going to look the way you want it to look but it is going to work. So if we go view the post, here it is now. This is the stuff we included and so it puts the label of the input box above the input box like this. So if you say… well, I’ve got 54 Euros in coins and 540 Euros in notes and you hit calculate then they’re going to give you 347.40 British pound Sterling for your 540 Euros.

So Christian, is that the way you expect it to be working?

Can you hear the champagne corks popping, Rick?

Yeah.

That’s absolutely spot-on, thank you very much.

Okay so the next part though is to make this little thing pop up over here. That is, to make the input field pop up beside the label and then to make the input field not so large, right? Because right now, it doesn’t really look like it’s intending for you to put a number in there.

Yeah, that’s one of the things I couldn’t… I’m sorry to cut across. One of the things I couldn’t figure out was how do you change the size of an input field, the actual length of it.

Yeah and we’re going to do that using custom CSS but before we get to that point, I’m just going to show you what happens here. We’re looking in the source of the page right now and if we get down here to… okay so here we are. Here’s our h3, simple Euro to Pound Sterling calculator. And then we come to our first label, label for number of Euros, Euros you have in coins and then the closing label tag. What WordPress does is it inserts this br tag which is a line break tag and there really isn’t any way to prevent that from happening. It’s automatically going to create this line break and it really doesn’t matter what you do. It’s going to create that line break.

And so, the reason it does that is because this you know, WordPress assumes that most people that are using the text editor are doing so with a visual editor. And so, it takes the code from the visual editor and when it sees something it thinks should have a break in it, it adds a line break to it. And so, this method that we just used is never going to actually create the desired result. So what we have to do… I mean, it works but it doesn’t look right and the jiggery pokery you have to do is custom CSS to make it look right is… really isn’t the right way to approach it.

So instead of this, what we want to do is we want to get this HTML out of the modifications made by the custom editor or the yeah, the post editor. And the way we’d do that is with the plugin called Shortcoder and we’ll put this HTML in a shortcode and then WordPress will respect the HTML. It will not add additional line breaks and stuff like that in it and it will be in a position where we can style it so it looks the way you want it to look. Okay?

0 Comments… add one
0 comments… add one

Leave a Comment