Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now it's time to set up the overall layout of our site. Meaning how the main components, header, content, sidebar and footer, relate to each other. Because, right now when you look at the site, you see all the content is stacked vertically. We have the header, then all the content. That if we scroll really far down, you'll see here's the sidebar and the footer, all the way on the bottom. What I want, what's in the design, is a sidebar that's to the right, and it's always the same width, and what will happen is as the window resizes, the sidebar will stay the same width until there's no room for it, and then it will move to the bottom of the page.
To make this happen, we need to apply some styles. And the natural place you would want to place those styles would be in style.css. But, we're actually going to separate the layout styles into a separate style sheet so that we can apply different layouts to different pages if we'd like. Because later in the course, we'll create a custom page template that doesn't have the sidebars, we need separate layouts for that. You'll remember that inside the underscores theme, we already have a folder called layouts and in that folder there are two style sheets.
One called Contents Sidebar, which displays the content on the left and the sidebar on the right., and one called Sidebar Content which does the opposite. We're going to use Contents Sidebar. So I'm going to delete Sidebar Content so it's not in the way and then we can take a quick look at Content Sidebar as it is. And here you see, we have a very, very basic responsive layout. What happens here is the content area, which is the container that contains both the main content and the sidebar is shifted 25% to the right.
Then, the site-main, which is the main content is shifted 25% to the left. And finally, the width of the widget area, which is the sidebar, is set to 25%. So you get this weird shifting thing happening where all the content is shifted to the right. And then, the main content is shifted back to the left to give room for the sidebar and the sidebar width is the same. But because we want the sidebar to be a fixed width, we need to change some of these values to make that work.
But before we can do that, we have to get this style sheet to actually apply to our content and that's done by enqueuing it into functions.php. So I'll go into functions.php here, scroll down to my enqueue section which is right here and from here I'm going to enqueue the layout style sheet directly after my regular style sheet which is here at the top. So I'll go and call WP enqueue style again. I'll give it the handle My Simone Content Sidebar.
And then, I need to call the style sheet. Now, because I don't know where this theme is going to end up, I can't put in a full hard-coded URL because, then it won't work everywhere. So, instead, I'm going to use this function that's down here, getTemplateDirectoryURI to point to the theme folder and then I'll just specify what file I want. So I'll copy that function and paste it in here, and then after the dot, I'm going to put in the specific folder and file name. So here, I'll put into text/layouts/content Sidebar.css and end it with a semicolon.
So, now when I reload the page, my new layout style sheet will kick in and my sidebar is on the right. And if you look, you'll see that if I resize this window, both the content and the side bar will dynamically change sizes and this is precisely what I don't want. I don't want the side bar to shrink when I resize this window. So here I need to change the styles and content side bar. And you'll find those styles in the code-snippets. So here I'll just copy them over one after the other and explain what's going on.
So we'll start with the Widget area. So here I'm going to set the widget area with two 380 pixels and I'm also going to change some of the other elements. So I'll put it in here, so now we have 380 pixels wide. It flows to the right and it also has padding of 4 rems so that there's some space, and the background is hard white. Then, I'm going to add a color to the site main so that we can see where the border is between the main content and the side bar. So I'm going to take out the margin here, and just paste in a background color instead, so that will make the background of site main gray for now.
And then I'm going to change the content area so that it accommodates this 380 pixel wide side bar. So here I'll copy out some more code from my code snippets and paste it in and here I left the width at 100%. I'm still floating the content to the left and I'm doing that same thing where I'm shifting all the content 380 pixels out of the frame to the left and then I'm adding padding to shift it back to 380 pixels to the right. When I save this now and reload my page, you'll see that my main content has a gray background, so it's easy to see where it is.
My header is at the top still and when I resize this, my sidebar stays the same size, it doesn't change size. This is exactly what I want, and you'll see the content within the post conforms to the sidebar. That means the style works the way I wanted to. So now I'm just going to add one more rule set so that my main content appears like it does here, in the middle with lots of white space on either side. So I go back to my code snippets, and copy out the last style and just paste it in.
And this style applies to a bunch of different content. And I'll explain why this happens later on in the course. So when I save this one last time and reload my page again, you'll see now my main content is floating in the middle and as I resize the window, it has plenty of wide space on the left and right side so it looks the way it's supposed to. So now we have the overall site layout. The next step is to make that site layout responsive so that it fits on very small screens.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.