2.4 The Theme for Our Store

Hello. Welcome back to this tuts plus course on developing your own WooCommerce store theme. In this part of the course, I'm gonna take you through the theme that we'll be using to create our store. To get things started, I've already created a theme which uses the standard WordPress template files. And what I'll do is I'll show you the structure of the theme and how those files work, so that you understand how to edit the theme if you want to work with it yourself. So let's open it up in Coda and have a look at the theme. Here are our theme files. Firstly lets take a look at the index file which every WordPress theme requires. There is very little in this index file. This theme mainly uses in glued files and then calls those using the get header sidebar and footer template tags and they'll say using get template part. So let's have a look at some of those files. Firstly the header. This opens up all of our templates and includes information in the head section. And then as you can see, there are a number of actions. Now in my themes, I tend to use actions so that I can then hook content in using the functions file wherever I want. And that's something that my themes have in common with WooCommerce. You'll find that the WooCommerce template files are full of action hooks. So there's an action hook there for before the header, and then you can see we're opening up the header itself. We've got the site title here, the site description. There's an action hook here for the right-hand side of the header which a widget area is attached to, and I'll show you that shortly. Then, the next part here is the navigation bar. Now, this is styled so that we've got a full width bar, but the navigation itself is in the center of the screen and aligned with everything else. And the whole thing is responsive as well. And then off the navigation, we open up the main and the content divs and depending on which page template is being used, there are different classes here. Now as you can see here, I've got four width class and a two-thirds left class. This is because I'm using object oriented CSS for widths. And that two-thirds width will automatically size anything with that class to two-thirds of the screen. It's a really useful way of using sizing for responsive design because it means that they'll resize according to the size of the browser window. And I'll show you a little bit about that in a moment. So that's the header file. There's also the sidebar. Now this one again has very little in it. There's an action hook for after the content and then there's another action for the sidebar itself. And I'll show you that in the widgets file shortly. And then finally the footer. Again, another action for the footer which widgets are hooked to, and for after the footer as well. So you got plenty of places in this theme that you can place extra content using functions if you want to. So let's have a look at the page templates. Here's the basic page template, again full of action hooks. And using get template part to call the loop in. So here's the loop for a page. We've got a little bit more code in here. This is a standard WordPress loop, which you should be familiar with if you've ever built your own themes. And then for the full width page, the content is actually the same as the normal page. But the difference is in my header I'm detecting this page template and assigning classes as you saw earlier. So here's the loop for a single post. Again, you've got a fairly standard WordPress loop. It includes post thumbnail if there is one for that post and also includes the categories that the post is in. Now the store, when I should be using these template files, it will be using the template files provided by WooCommerce. But this gives, this gives you an idea of how the theme itself works. Now let's have a look at those widgets. The widgets are all contained in this include file here in the includes folder. And they're all attached using these action hooks. So here you've got a widget area in the header. Check and see if the sidebar is active so it's populated with widgets and then attach it to the correct hook to place it in my theme. And you can see the sidebar widget area, and a footer widget area as well. Now let's have a look at the functions file. This file contains some functions that support the theme, and some that support WooCommerce. So let's take a quick look at them. Firstly there's Google fonts. As you can see from the design, I'm using Google fonts for my headings here. And if you want to, you can change to a different Google font by changing what's included in the, the function here. Then there's my include for the widgets. There's navigation menu. And then there's registering the sidebars because those widgets won't work unless I actually register them. And that's hooked to the widgets innate function, just as you would in any theme. I've got support for post thumbnails or featured images. Now here are some really important functions that you need to add to your functions file if you're working with your own theme and you're installing WooCommerce. Now when you first install WooCommerce, you'll probably find that you get a warning which will pair at the top of your admin screens at all of your admin screens telling you that your theme hasn't declared support for WooCommerce. Now it's quite simple to add this, and here on the WooCommerce site is support to help you do it. Now there are two ways to do this. Firstly, you can use WooCommerce content, which is a function provided by WooCommerce, but the better way to do it is to use hooks. So, I've used these hooks in my theme's functions file. And let's have a look how that looks in the functions file. So firstly, I've removed a couple of actions from WooCommerce and these are the output content wrappers. The beginning and end of the content wrappers and they are attached to the WooCommerce before and after main content hooks which are part of the WooCommerce plugin files. And then I'm adding my own functions by attaching those to the same actions, and I'm changing the mark up that's included in those functions to echo the mark up in my theme file. At the beginning of the main part of each template file in my theme, there's a div with the class of main. So what it's doing here is adding that into the WooCommerce screens, so that everything is laid out correctly. And then finally after doing that, the most important thing is to add theme support for WooCommerce which is done with this line here. Once you've done that and saved your functions file, you'll find that any warnings that you get in your site's admin will disappear. And I haven't got those anymore. So going back to my theme files. There are a number of template files. There's my index file, my files for pages, for single posts, for the archive, and then there are the include files such as the footer, the sidebar and the loops. And I've just shown you the functions file as well. Now let's take a look at the style sheet. The style sheet consists of 12 main sections. I won't go into all of these in detail. If you want to work with this theme, you can have a look through the CSS yourself. But, let's just take a quick overview. So firstly, there's a CSS reset, and this is the standard CSS we, reset taken from Eric Mayer. And then for layout, I've added some layout to ensure that my navigation menu and my footer are laid out correctly and that all my still content is correct. And as you'll see, if I resize, it's responsive. [BLANK_AUDIO] So here are all of the widths and margins. And this is the object-oriented CSS I was telling you about. So anything that's given these classes will resize automatically. And further down the screen, there are some media queries that make them resize slightly differently on smaller screens. So for example, something that might be half the width on a large screen will be full width on a small screen. There's also some styling for floats and for margins, for alignments of images, margins for the header, the footer and the widgets. And then here we have texts and fonts. And you can see here, this is the Google font that I've referred to before, that I've registered in my functions file. And I'm using ems for font sizes here, rather than pixels. And here are our colors. Now, what I've done here is I've deliberately included the hex references for each of the colors at the beginning of my color section, so that I know what I'm using. So as you can see, I've got a petrol blue, a coral which I haven't used yet but I will be using that in the store, in buttons and so forth. A tan which is used in the footer. A paler duck egg blue and a dark gray. So your dark gray is used here in the font, the tan is used when I hover over links like this. The duck egg blue is used for highlighting headings and so forth, and then my footer. And again here you see when I hover, there's the tan color. So if you want to work with this theme and change any of those colors, you can simply change them in here. And then finally there are media queries. These reference the object oriented CSS classes that I've already referred to and give them width to make them work in small screens. And last but not least, print styles. Just to tidy things up and to remove anything that's not needed should people need to print out your pages. So that's how my theme works. If you're using this theme, please fell free to tweak it, to change colors and layout if you want to. Or if you're using your own theme, you can use some of the content from this if you want but the really important thing is to make sure that you're including this code here from the functions file so that your theme supports WooCommerce. And depending on how your main element of your theme is opened and closed, you'll need to change this markup within this function. So that's it for the theme. And then the next part of the series, what we'll be doing is adding some products to the store using the dummy data that's supplied with WooCommerce. Thanks for watching, and see you next time.