In this final section we ramp it up a notch and create another more complicated box in Thesis 2.0 from scratch. This box allows the user to place an automatic copyright date anywhere in the template, it demonstrates collecting a number of options and then changing up the HTML output based on those options.
Rick: Okay Andrea, let’s talk about your situation because I think that’s actually a pretty good question.
Andrea: Hi Rick.
Add a Perpetual Copyright Date in the Footer of Thesis 2.0
Rick: Hi. So you want to put this perpetual copyright date in.
Create a New Box File
Rick: Let’s just copy it and paste it this box.php file. And we’ll call this byob copyright date.
Andrea: So this is going to be a box…
Rick: It’s going to be a box that you can drag around.
Rick: I mean, I presume that was the context you were asking about this.
Andrea: Well, I’m a little bit lazy. I just like to be able to do it the easiest way which is why I was using open hook before. I’m not as much of a coder as I’d like to be.
Rick: I think the easiest way maybe to do that as a shortcode then.
Rick: And then you could just… yeah actually, I don’t know if you could drop a shortcode in the text like that. I mean, as soon as we’re going to get done with this, this is going to be really easy.
Andrea: Okay. Well, I would replicate it from site to site so once it’s done it would be easy. We haven’t talked about shortcode… I don’t think… I missed one of your sessions this
week but I don’t think we discussed shortcodes.
Rick: Well, shortcodes are going to behave exactly the same way in this as it did in the other Thesis. So you could use your skin php file to create a shortcode of the date and then you could set up a widget area with a text widget to put it in. Now that I say that, I don’t know that that’s really the easiest way.
Rick: That’s just the other way that occurs to me.
Create the Function To Add the Copyright
Rick: So, copyright date and title. And I’m not going to put that in there. And so… actually, I don’t think we need a construct. And for the moment, we don’t really need options either. I mean, I can imagine where options would be useful. But you could just as easily say…
Andrea: Did you see the string that I used… that I put in the chatbox?
Rick: Let’s look at it.
Andrea: Yeah, it’s there. It’s in a p tag at the end. Oh sorry, second p tag. It’s in parentheses too so I could get and… I wasn’t sure by putting it in the chatbox. So it starts right after the quotation mark, first quotation mark and it starts at the p tag and a copyright. So if you delete the first p tag….
Rick: I totally see what you’re saying. Yeah, I missed that.
Andrea: I’m sorry. I wasn’t sure how to do it.
Rick: Sure, that’s fine. Copyright and copy and then the way this works is… and then the concatenation symbol, okay.
Add an Option For Company Name
Andrea: So if I were going to use this, where I say company name, I’d have to change that for every client site I did so…
Rick: Well, we can improve that. Let’s just use the options here then instead. So options and I’m just going to call it company name equals type equals text. Label equals… actually, let me look at one of my other ones here. I guess we’re going to say width equals medium,default equals your company name.
Andrea: So will I have some ability to change the font and make it look how I want to if we…
Rick: Well, we can give it…
Rick: Yeah, you can definitely allow it to… type equals text width equals short label equals… this cannot be short. It’s going to be medium. Label equals medium. Label equals company name. Tool tip is another company name you want displayed. Default is your company name here.
Then we want to grab the value of that and… I guess we’ll just take it like this. So on public html, the company name equals this option’s company name and then… let’s see, another one of those and another one of those. Actually, one more concatenation symbol and then our variable.
Review the Code
So first off, obviously, we just set everything up. We gave it a name and a title. We’re not using the construct. We created an option and that option was called company name. So the option really is byob copyright date company name.
We gave it an option called company name. The option input has a type equal text. Its width is medium. The label is company name. It’s got a little tool tip and it’s got a default that goes inside. And then HTML just says company name equals get that option and then we’re echoing your little bit of stuff.
Andrea: Two questions.
Andrea: Why is it… when will this trigger asking for the company name, when you make the box? When you activate the box?
Rick: Well, let’s go ahead and use it so you can see.
Andrea: Can I make a print screen of this? I promise to learn how to write it.
Rick: Well, go ahead and make a printscreen of it. I was going to email it to you but…
Andrea: Oh, thank you. That’s even better.
Rick: I’ll just email this to you. But let’s try using it though.
Upload the Copyright Box
Rick: Let’s come over here to Thesis 2.0 to Thesis and boxes and let’s just zip this up. Let’s see, send to zip and then come over to our site, any site will do. So we’ll go back to Thesis admin and we’ll go to boxes and select boxes. We’ll upload that box we just created, add the box. I could have given a better description. Save the box.
Let’s come over to our skin editor and now, we’ve got a box type that we can add here, I believe. Maybe I need to refresh this. Same place, right? Thesis 2.0 demo. Oh no, select boxes. Yeah, wrong site, I’m sorry.
Andrea: It’s okay.
Rick: This is Thesis 2.0 Demo so we’ll go to… select skin, skin editor. Okay, now we’re in the right skin. Drag a box up there and we should have… did I misname that? Full Width Thesis 2 Demo, Thesis admin, boxes, select boxes. Oh okay, upload the box. I have to get this one time right. Check it and say save boxes.
Andrea: So you have to check it?
Rick: You do have to check it. You can uncheck and it won’t be used.
Andrea: So you can keep it stored there but just not use it?
Review the Output
Rick: So then skin editor… there it is. Oh, crazy. So my label’s not turning out right. I obviously messed that up. New box name, let’s say copyright and drag it into the footer, shift drag into the footer. Let’s see, save the template and we’re on the front page so… yeah.
Andrea: That’s a great looking site, by the way.
Rick: Thanks. There it is, copyright date such and such.
How to Use the Company Name Option
Andrea: That looks great. The other thing that I would have to change… well, wouldn’t it… we didn’t get the company name. We didn’t get prompted to…
Rick: Oh, I didn’t look at the company name. Yeah, it was there. I just didn’t… I’d forgotten that we’d done that so I didn’t look for it.
Andrea: So where did it pop up? I didn’t… I must have missed it.
Rick: It’s right here at the top of my footer.
Andrea: Right. But I mean, did it… but where would you get prompted to add that information?
Rick: Right down at the gear.
Andrea: Oh perfect. So I wouldn’t need to add another one because in that particular case, it has a you know, beginning year and then the… we want the perpetual year so I’d have to put in another variable for the year… the initial year, I guess you’d call it.
Andrea: So would I just have…I’d build another section, the same as the one that you did for a company name, right?
Fix the Code For the Company Name
Rick: Yes. So let’s figure out why my name didn’t turn out right.
Andrea: I was going to ask you about the width too.
Rick: Why didn’t that name work right? This name equals byob copyright date. Global Thesis, this name, title… global thesis, this name. It looks pretty much the same to me, doesn’t it? What did I do wrong? Okay, that was probably what it was. It had that little variable standing in there that didn’t work. So which one of these things am I on? Thesis 2.0 demo… let’s go back to full width.
Andrea: While you’re doing this, I will say that I’m still going to learn how to write php.
Andrea: Even though I really don’t have to but there are going to be things like this I’ll want to do and maybe other stuff so…That worked.
Rick: Add box… yeah, there it is. It was that little… silly little variable I had in there that was throwing it off.
Refine the Function to Include a Variable for the Initial Year
Rick: So we just created a box and we can easily add another element to this array. So company
name equals array and now, you want…
Andrea: It would be the beginning date… beginning year, I guess.
Andrea: Initial year, maybe we should call it.
Rick: Let’s see, okay. Let’s see, I obviously copied something too much. Okay, that’s what it was. I want to copy this and paste it there and start date, short.
What Do Short, Medium and Long Stand for in the Input Fields?
Andrea: That width, what does that actually do? In other words, I mean, that seems like a relative term so I’m just curious.
Andrea: Why short, medium, long? What exactly does that…
Rick: Well, Chris has these different designations. They end up being CSS designations for input fields.
Andrea: I see.
Rick: So we’ve said it’s a text type input and it could be short, medium or long.
Andrea: Okay so this is the width of the field, the field that you’re going to input the data in.
Rick: That’s right.
Andrea: Okay, got it. Thank you.
Rick: Begin date, enter the date… the beginning copyright date.
Add Logic to the Function To Remove Initial Year
Andrea: Right. And what would happen if… because there could be a situation where the company or whatever, didn’t have a beginning date and it was the date that it’s… it would be the perpetual date. So if I put nothing in that field, will there be an extra space?
Rick: Well, then what you would do is repeat this thing here but have a little bit of logic. And so now, start date. Okay and then you’d say if start date then start date plus equals…not space, just minus. So that’s going to add the minus symbol to the start date. Else, start date equals blank.
Rick: And then instead of this…
Andrea: Right. We have to put the variable.
Add a Class To Use in Styling the Text
Rick: You put in start date right there so now… okay, what happened here? It wasn’t actually a space so I guess I can just get rid of this. Start date, date, company name. Okay, somebody else is asking whether or not you can add a class or attach a style to this. And the answer to that is yes but we need to figure out how to do that.
I mean, I know you can and it’s a little easier than those other options. Where is my box.php? Type title name root head dependency switch a class. So let’s go down to our first example of output.
You just add it as an option. So come back over here and add it as an option. Code equals true, label… we can keep on using the Thesis 1. I mean, all that stuff is just fine actually. We just use that and we’ll get a class.
Yes Julie, I’ll definitely email you a copy of this.
Review the Code
So let’s go ahead and save that, upload it and see if it works properly. I think it does. I’m in Firefox now. Okay so if we look at our footer, our copyright now has an HTML class.
Andrea: That’s what I thought.
Rick: Beginning date of 2010, save our template and look at this. So we’re missing our little minus sign there. I guess…
Andrea: It writes a hyphen so it’s probably different really than a minus sign, right?
Rick: Yeah, I think maybe this is just…
Andrea: It probably is going to be a string character, perhaps?
Rick: The start date, yeah. I’m just going to… it’s just an error in concatenation, I think. There you go, 2010 to 2012 and then if we… come on, let me inspect the element. My computer’s tired now.
Andrea: Rick, I think you should offer this as your second box.
Rick: Okay. For heaven’s sakes… oh this is on the canvass. That’s what the problem is.
Andrea: So Firebug doesn’t work on the canvass?
Refine the Code
Rick: No, it doesn’t. Okay, it didn’t say “heck yeah” though. Oh because I didn’t grab the class. I didn’t actually put the class in the p tag. I was just capturing the class but class… I actually have to get it. P class equals… yeah Tim is giving me a much more efficient piece of code to use here. I’m going to show it here.
So Tim’s code looks like this. P class equals class copyright date and copy start date. If start date equals… does not equal to blank then start date m – date… company name all rights reserved.
What he’s saying is that the class name here won’t work. But his solution is echo class… yeah, okay. So it’s essentially that then and then you don’t need this and we don’t need that. So we put our if statement in the middle of this so p class copyright date and copy and then if the start date is not equal to blank then start date else blank is the way that reads. Save the document, upload it. There it is. And prest-o change-o, class says “heck yeah”.
Andrea: That’s wonderful. Thank you so much.
Rick: You’re welcome.
Andrea: Next week or so, I’ll ask you a similar question. I have a couple of translated sites where I’m using WPML plugin and in order to get that text in the header images and some place else I have an image that has text in it that I had to switch out using php in the open hook. So I’ll get that together another time and ask you about that too. Or maybe I will be able to figure them out by myself.
Rick: Well, obviously, you can see the power of this. Because what happens is you can… inside the same page, do it a couple of times. You can move it wherever you want.
Andrea: It’s wonderful.
Rick: You don’t have to open up the code and write it again. You can just upload the box. I think it’s clearly a relatively simple way of having very easily repeatable little snippet of code.
Rick: So if anybody else wants this, send to me an email, rick@byobwebsite and I will send you a copy of it. And if you want copies of these other things that I’ve got done already, just send me an email and I’ll send it to you. Anyway, if you want it, you can have it.
Andrea: Perfect. One thing I would do with this one, with the copyright is take out this space…I’m sorry… can you scroll back down again? See it again. Sorry, the… okay, there’s a space after the 2010 before that hyphen that either should… there should be a space on the other end or no space before and I would prefer no space before the hyphen.
Rick: Okay, let’s look at that.
Andrea: I would change that but I’m getting you into a lot of trouble by getting rid of the space.
Rick: So you’re really thinking of… oh, it’s this right here. No, it’s not that one. It must be this.
Andrea: Right before the hyphen. Yeah, you put it in there.
Rick: It must be that.
Andrea: And can it be an n dash instead of an m dash?
Rick: What’s that?
Andrea: It’s slightly shorter. M dash is a longer hyphen than an n dash. I think that would be better for this purpose or it’s my preference, anyway. And there probably should be a period after all rights reserved but that’s really being nit picky. Forgive me.
Rick: After company name.
Andrea: Yeah, if you can because I see there’s a period in there for the concatenation. They’re like period space.
Rick: Yeah I think I got that there now.
Andrea: Oh perfect. I see it there. Rick, I’m going to put you in my will. The only problem is… the only thing you’re going to get is a barking chihuahua.
Rick: No, I already have a barking chihuahua.
Andrea: Do you have a chihuahua?
Rick: Yeah, that’s where the name came from actually.
Rick: And so does my dear friend, my designer friend. She has 4 of them and when I said, “Help, Kim. I need a real quick demonstration site for like a café.” And as she was working up the design for this thing for demonstration purposes, her dogs went crazy. It was going to be named something like “Edmonds Coffee” but then she decided it was The Barking Chihuahua Café and it just went on from there.
Andrea: I think that was great.
Rick: Yeah, I think that’s pretty fun.
Andrea: My dog heard the barking dog last night and sort of went off.
Rick: See, that’s why I enjoyed the “Waking up the neighborhood for 15 years”. So I thought there was a nice little entendre there.