Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

3.3 Establish the Basic Overall Layout

Hey, this is Kezz, and welcome back to WordPress theme creation with Underscores. In this lesson you are going to be establishing the basic overall layer for your theme. Now, we're not gonna be adding any visual styling at this point. This is just pure layout. And we're going to work with one of the provided two-column layouts that comes along with Underscores. So we're gonna add that in and then we're also going to incorporate some of our own additional layout tweaks like adding in our own padding and margins settings and our own alignments on various elements throughout the design. Even though we're not gonna be adding in any coloring or styling just yet, what we will do is add what I like to call some color guides. And this is just a way of blocking out your main layout elements with a gray background. And that just makes it a little bit easier as you go along, making sure that all of your spacing and your widths are gonna work when you do start adding color into the design. So in your custom vars and mix-ins file, go ahead and add this guide mix in, and this is just a straight light gray background. And then in your custom styles file, you could just add these few styles. And these are the four main sections of your layout and in each one of these sections, we've included our guide mix in and that will just give it that light gray background and that will make it a little bit easier for us as we're developing our layout. So we'll say then, compile that new code. And there's our grey backgrounds. And they'll just be there temporarily. As soon as we're done with the layout, we'll remove them and then we'll put in our actual coloring later. And now we're gonna add in the styling that will split our design into two columns. So we'll have a left column which will be occupied by our posts, and we'll have a right column which will hold our sidebar. And we're gonna pull the code straight out of the theme's in-build layout/content-sidebar file. And once again, we're just gonna copy that content, and we're gonna drop it straight into our custom styles file to make it easier to keep track of where our custom code is. Now we'll compile our two com code. And there we go, there's our sidebar on the right, and our posts on the left. Now, back in our custom vass and mix-ins file, we're gonna drop in some new variables. These are gonna be the settings that determine the width of our posts. The width of our sidebar and also the width of the gap in between those two. And first up, we have this readable width variable which we have set to a value of 40 rems. Now this value is going to determine how wide the text inside our posts will be. So in the approach we'll be using, rather than setting our layout widths to a value that we think might fit certain screen sizes, we're gonna set them in a way that we think will make the theme's content the most readable. So we'll start with the ideal width for the post's readable area, and then we're gonna use some maths to build out the rest of the layout around that setting. So we're looking for width on our readable area that makes it as easy as possible to read multiple lines of text without eye strain, and give them the ability to absorb what they're looking at easily. So you could make your own call on what you think is a good readable width for your layouts, but typically around 40 rems is a good ballpark value. Then we have the default gutter setting, and that's the amount of space that there will be between the posts and the widgets in this side bar. And that default_gutter setting will also be used in other areas the same where we need to have a nice, consistent amount of spacing. And in this case, we've just set that to a value of phi rens. And lastly we have our Small_col variable, and this value will determine the width of our sidebar, the smaller of the two columns. Now, if you would like to have a sidebar that's 30% width of the overall site, then choose a value of 0.3 like we have here. And whatever percentage width you'd like that sidebar to be, just convert that into a decimal. So if you would like it to be 40% width, then you would set this value to 0.4. If you would like it to be 25%, then you would set it 0.25 and so on. The first part of working these new variables into the theme is to have the theme's existing side bar code work with our small call variable we just set up. To do that replace the existing 25% values you see on this variable here. With percentage brackets and then in between the brackets our small column variable. Now what that will do is it will convert that 0.3 into 30%. Now, this variable requires a percentage value, so the function that you're looking at here will take care of that for you. Now when we save and compile, we will see the width of the sidebar go from its original default 25%, up to the new 30% that we've just set. Now we're gonna start working in some padding settings in particular for our posts and our widgets. Now you might be used to setting padding amounts later on the in the layout process but the reason we're creating these values now is because we'll need them in order to figure out our total side width. The total width of our side is going to bring together the readable width of the inside of our post where our text appears, the 30% width of our side bar and the left and right padding on our post and our widgets. Now after we have all this information in place then we'll be able to calculate our total side width. The first two padding settings we have here are the default horizontal padding and the default vertical padding that will be used all throughout the layout of the theme. We then have the horizontal padding that will be contained in our posts and in our widgets. And we've used the default horizontal padding on the posts, and then we've just used a slightly smaller amount of padding on our widgets. When you're working with fine new layouts, if you have an amount that's come out a little too big or a little too small, the easiest way to adjust it is to either multiply by phi again, or divide by phi. And we've multiplied by phi twice for our default horizontal padding, because that's good throughout most of the side, but then for our widget horizontal padding, it's a little too big, so then we've divided by phi. And that just brings that padding size down again just by one step. And then below that, we've also set up our post and widget vertical padding amount. So, that's our top and bottom padding amounts. And, again we are just working with variations of the default horizontal padding amounts here too. And now that we have all of those variables in place, we can add in our function that will calculate our total site width for us. Now you don't really need to worry too much about understanding how this function works, unless you would like to take a closer look at it. But all you need to really know is you can use this function wherever you need to output the total width of the site. And because you're calculating that total width on the fly, this means that now you can change the amount of padding that your posts have or that your widgets have. You can change what you think the ideal readable width is. You can change your sidebar column width. And everything will adjust fluidly around those settings. Now, we're gonna use a new functions and variables to control the main wrappers of our site and we'll do that buy adding this code to our custom styles file. And we're using the max width property with our total width function. To pull each of these wrappers in to the right width that works with all of the settings that we've just created. And we're also setting our left and right margins on these wrappers to order so everything is centered. And as well as that we're including some vertical spacing around the size header, content and footer areas. Now compiled that gives us this. Now you can see the layout has been pulled into a set width. There's some spacing in-between each of the main areas, and each of the wrappers has centered themselves. Now we're gonna go through and set up the layout for the elements inside each of the main areas of our theme. Now, I won't stop and go through all the code that we add in here, but you'll see use of all the things that we've talked about so far all the way through this code. And you'll get all of this as part of your access to your source files. So you'll be able to take a closer look at all of this at your leisure, should you like to. Now, we'll start with the header, and the site title, and the site description that it contains. Now we're not doing the nav menu right away. We will come back to that shortly. Now add this code into your custom styles file, and it will compile to convert your header into this. Then we've got padding for our posts, and it takes alignment for our category headings which looks like this. And then some padding and margins on our widgets, and that will give us this. Now, get some layout in on the individual posts themselves. With this code, we're controlling post images, post titles, post meta-information, and the footer that's at the bottom of each of the posts. We're also setting up some basic control over post comments. And these styles compile to adjust our posts into this. We've done the inside of posts, so now we'll do the inside of our widgets. Now this code controls how lists appear inside of our widgets, which are very, very common in WordPress widgets and it will also set the width of any search widget fields that are added in. When compiled, that gives us this. The last step of this stage is to give layout to the menu. And this course does come with a hover based drop down menu, but hovers are not terribly friendly to touch based devices, so we're going to be replacing that with a fully touch friendly menu later on. However, that does require a little bit of PHP tinkering. So if you'd like a pure CSS solution, then you can use this. This code does actually disable the hover-based drop-downs, so the menu is kept to one level of touch-friendly links. It turns the menu into this. If you have a theme user who organizes their menu into a more concise selection, you'll get something more like this. Now, you have your basic layout fully in place. All your widths and your spacing and your alignments are exactly how they should be. But before we move on to adding color over the top of what you've done, there's a very important step that has to be completed first. And that is to add response of adjustments to this layout. And you'll learn how to do that in the next lesson. I'll see you there.

Back to the top