We could just start setting up our rules for our Thesis 2 responsive skin but unfortunately, if we did they still wouldn’t work and that’s because most devices are created so that they will scale a browser window or they will scale the site. If you go to my site on your iPhone, you’ll see my site shrunk all the way down to being really small because it scales the site down to the width of the iPhone.
Override Default Scaling Behavior Of Devices
If you look at my site on an iPad, it’s fine because it just scales a tiny bit then it fits right in there. But on the iPhone, it scales it down so small that what you have to do is scroll back back in or zoom back in, in order to read it. Well, that’s the default behavior of lots of these devices so what we have to do is override that behavior by adding a meta tag to the head of each of our pages and this meta tag is going to instruct it not to scale.
Once it instructs it not to scale and to use max-device-width, it will from that point on use the rules in these max-device-width to make the page actually fit inside the window. So that’s what we’re going to do next. We’re going to do that here inside of skin.php which is the file that we are putting all of our initial setup code in for our skin and this is the Lesson 3 skin.php.
Create Functions For the Skin Class
If you were in the last class that is in the Child Theme class, I showed you how to do this where we created the responsive meta function and we echoed this piece of code in the head then we attached that action to wp_head.
You can still do it this way, however, Thesis 2 does assume that you’re going to include all of your functions inside of this class so I want to show you how to do that because that is what we’re going to do. We will be creating these kinds of functions and sticking them inside of the skin class rather than just having a bunch of additional functions sitting out here.
The way we do that first, is to create a function and I’m going to call that function head_scripts so we’ll put opening and closing brackets in there. This head_scripts function is going to have this rule and the rule essentially, is it echoes “
This is the thing that makes these media queries actually work on mobile devices rather than scaling. You might ask why that’s necessary and the reason of course, is that most sites aren’t designed to be viewed by mobile devices. This is really the way you tell Google, because Google knows this is going on, that your site works for mobile devices and this is also the way you tell the mobile device that you’ve got things intended to be displayed differently in that mobile device.
We’ve got this function head_scripts and this function at this point, it just going to echo this. Now, there probably are going to be other things we’re going to do in this head_scripts later on. As we work our way through this lesson series, we probably are going to be adding stuff here.
Then what we’ll do is we’ll take this add action and we’ll come up into our construct function then we’ll say, add_action then we’re adding to wp_head but we’re no longer calling the function in exactly the same way. Now what we do is we call this function as part of this class so the syntax is a bit different.
Apply Add_Action to a Class
The syntax in this case, then looks like this. We’re going to say, dollar ($) sign this which means this instance of the class so $this, comma (,) then we say it’s array($this, and now it’s head_scripts.
This is the way that you apply an add_action inside of a class like this so you’re adding action to the same hook, wp_head but now the way you call this function is to say, $this, ‘head_scripts’. Because of the add_action syntax, it requires this to be in an array rather than say, as a straight function.
If that’s not perfectly clear to you, it’s okay just as long as you recognize that every time we use an add_action inside of this class, the thing that we are adding, if it is a function inside the class, is added with this syntax rather than with the traditional syntax you’re more familiar with.
But in any case, what we’ve done here is we have now added this meta tag to our skin so what we’re going to do is save that so we go to wp-content, thesis and skins then lesson_3_responsive_blue_masters and we will upload our skin.php.
We’re not going to upload snippets.php because we’re not really using it on the site, we’re just using it here for the purpose of having essentially a clip file that we always know where it is. We’re going to come back over and refresh this. Now, view page source, we should have that viewport now so meta name=”viewport” content=”initial-scale=1, user-scalable=no, maximum-scale=1, width=device-width”. So we now have something that is not going to scale which is exactly what we wanted.