Part 1 Add Code to the Page
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?
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.
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?
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?