Build Your Own Business Website header image

How to Add the Viewport Meta Tag to a Thesis 2.1 Skin

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.

In this session we demonstrate how to add the viewport meta tag to a Thesis 2.1 skin by placing the code inside the skin.php. There are some devices that will try to scale the whole page to fit instead of making it change in size to fit the window so we demonstrate how to set the initial scale to equal 1 which means that nothing is going to scale but the site will just shrink and readjust itself to fit inside the browser window.

Video Transcript

Member: I’m still working on my responsive custom skin…

Rick: Uhuh.

Member: I’ve been watching your videos and I’m at the point where I want to make my site responsive on mobile devices?

Rick: Yeah.

Member: So, I watched your lesson; okay I’m doing the Create a Responsive Skin for Thesis 2.0.

Rick: Yeah.

Member: And Lesson 1 & 3 you showed some code could in skin php inside the code that’s already there.

Rick: Right.

Member: So I just want to make sure I am doing it right. Can I send you my code I put in skin php?

Rick: Well, why don’t I just walk you through what you should do here.

Member: Okay.

Rick: Because this is the skin.php file that I created in that seminar. Right, in the initial seminar.

Member: Right.

Rick: And so the, are you a going to try creating some custom boxes for the skin?

Member: I’m actually new, I’m actually brand new to this; when you say box are you talking about divs?

Rick: No, when I say box I’m talking about like am the you know like my Columns Boxes in my Skins or a box for copyright date or something like that. Something that simplifies the process for customizing it for your end user.

Member: Oh, I’m not at that point yet.

Rick: So, really all you want to do is just make sure that you can make your site responsive then.

Member: Right.

Rick: Right, okay.

Member: Just for myself, just for my site.

Rick: Okay, and so the only thing you really need to do then is come over here to diythemes.com, login, go to the developers section and Thesis API Documentation. And you’re going to go down to Skin API and the; really the only thing in all of this that you need to be concerned with is the meta viewport. I’m going to scroll down here till I find it. Meta viewport tag here, and if you copy this little section,

           public function meta_viewport() {
return ‘width=device-width’;
}

And then put that inside your skin css, well I should show you first what it’d look like without that. And then we’ll upload it and then I’ll show you what it looks like with it.

Member: Okay.

Rick: So, without it that’s what this is right now and if we view the page source and look in the <head> here; there’s no meta viewport tag here. Here’s the meta name is description and meta robots and meta charset but there’s no meta viewport. But as soon as we save that skin and upload it, I need to turn my filezilla on here. Oops, wp-content > thesis > skins > byob-barking-chihuahua and then upload that. Now, if I refresh this page now I’m going to have a

<meta name=”viewport” content=”width=device-width” />.

Member: Uhuh.

Rick: And this meta tag is what you need in order to make your site responsive. Now, this is DIYThemes recommended viewport I use a different viewport in mine. So, in my skins I include initial-scale=1. So, they say width=device-width what I do is this is the one I use instead of that.

           public function meta_viewport() {
return “initial-scale=1, width=device-width”;
}

And if you save that, that will change the viewport tag. Note that the viewport tag here, ah where to go? Now that I have refreshed it, it’s going to say initial-scale=1, width=device-width. So, that’s the only code you actually have to add to your skin.php in order for your site to be responsive. Then you have to write responsive css. But,

Member: Right.

Rick: But in terms of responsive php all you have to do is do this.

Member: Okay, so you recommend this code over the one that’s in the API?

Rick: Yes, I do. I recommend the initial-scale=1 variable be set when you’re doing this.

Member: Okay. So, that’s all I need to do.

Rick: Because what that means is there are some devices that will try to scale the whole page to fit instead of making it change       in size to fit the window.

Member: Right, right.

Rick: And so, you can set the initial scale to you know 0.5 or something like that if you want but initial-scale=1 means that nothing is going to scale and so the site is going to shrink and re-adjust itself to fit inside the browser window.

Member: Right, okay great. I guess it’s perfect. Thank you for that but also when I was watching your videos you talked about constants like a function construct and url?

Rick: Right.

Member: You define them do I need to do that too?

Rick: You do not need to set up if you’re writing any more php you do not need to write anymore constants. Right, the purpose for file constants is so that you have a simple reference for including files when you’re writing php. But if you’re not at that stage yet you don’t need to do that yet.

Member: Okay. So, yeah because I was trying to follow what I saw on the screen so I was defining them and also put in the function construct and also function head scripts and also the viewport thing inside it and call it from the construct…

Rick: Right.

Member: and it was like, oh my god I’m not sure what I’m doing…

Rick: And the thing is that you know Thesis has changed a little bit since I did that class and it did not have this meta viewport function when I taught the class. So, the only way to get it into the head scripts was to use the head scripts function.

Member: I see.

Rick: But that doesn’t exists any longer and now you can just use this meta viewport which makes it quite a bit simpler and,

Member: Definitely.

Rick: And you don’t need the constants until you start writing your own boxes; you’re not going to be referencing the constants.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment