FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Our Working Environment

In this lesson, I’ll introduce you to the starter theme that we’ll be building on top of and also the demonstration site where you can try out the course project in action.

Related Links

1.2 Our Working Environment

Hello, and welcome back to this tuts+ course on writing Customizer ready Wordpress themes. In this part of the course, I'm going to give you a quick introduction to the environment that we're going to be working in during the course. I'll show you the site that I'll be working on and the starting theme, which we'll add our customizer functionality to. So here's the site. It's got the theme activated in it, and I've imported theme unit test data, so that the site has some content. And you can see how to add the theme unit test data to your own site on this page on the codex. Here's the site Dashboard, which we'll be working in, and here's the Customizer. At the moment, the Customizer doesn't have many blocks over here, it just has the default blocks that are powered by WordPress. But we'll be adding more of those as we go through the course. Now, let's take a quick look at the structure of the theme, so that if you use the same theme, you'll understand how the code is structured. Here's my theme, I've called it tutsplus-customizable-themes. Now, if you wanted to, you could add the code for the Customizer to your own theme, or you could copy this theme and add the Customizer code to this as we go along. It's up to you, but you might need to make some tweaks to your own theme when it comes to displaying content in your theme that's been added via the Customizer, and we'll cover that as we go through the course. So let's take a look at the theme. Firstly, here's the style sheet. Now I've given this version number 1.2 for now, because this is the part of the course that we're currently on. And as we work through the course, I'll update the version number of the theme and save the theme so you can download versions of it at each stage in the course. The theme doesn't include a lot of styling. It's quite a basic theme, it's a responsive theme with a menu built into it and some widget areas in the side bar in the footer. As you can see here, and there's also a color form at the bottom. So here's the style sheet, which includes a reset at the beginning and then styling for the layout, which uses object oriented CSS to allow for a responsive layout. There's styling for different text elements, including fonts and font sizes. Here, we have styling for the menu. There's styling here for elements of the content, for gallery and any images, including max width here for responsiveness, for in content navigation, for the widget areas and side bar, and for the footer. Next the styling for colors, I haven't included a lot of color styling, because users will be able to add that via the Customizer. Here we have the media queries, which make our theme responsive, and then finally the print styling, so that's the style sheet for our theme. Let me quickly take you through how the other template files are structured. So here's our index file, which includes a call to the header, a loop, a function which displays links to next and previous posts, a call to the sidebar, and of course the footer. There are also template files for archives, categories, pages, and some specific page templates as well, which look quite similar. And here's the header, it includes all the contents of the head section, and then it has the header itself with the site name and the site title in. An action here, that I can hook any content into that I want to put on the right hand side of the header. And we'll be using that in our themed Customizer. Navigation menu, which includes some classes for responsiveness, and then here, an opening of the main div, which uses conditional tags to check which page template we're on. And to set up the main div and the content div, according to the width of the template that we're on using the object oriented CSS, for a responsive layout. And then there's an action here, tutsplus_before_content, which I can use in the theme Customizer to insert any content that people want to place above the content of the page. Here's the side bar template file, which includes an action for after the content and an action for the sidebar itself. So the widgets are registered in this include file, so you can see there's a sidebar widget area, and there are four footer widget areas as well as a widget area for after the footer. And here, there are functions that output those widgets in the relevant part of the theme, and those functions are attached to the relevant action. So here, the sidebar widgets are attached to the sidebar widget area, and the footer widgets are attached to the tutsplus footer hook. And then finally, we have a widget area after the footer. So here's the code for the footer, which basically just consists of some hooks including wpfooter, which needs to be at the end of every theme. And then finally, let's take a look at some of the functions in a theme. So I'm loading my include file from my widgets here, and then I've got a tutsplus_setup function, which sets up aspects of the theme, searches thumbnails, languages, and navigation. I've got a function here that removes the default gallery CSS provided by WordPress because I've got gallery CSS in my style sheet. I've got my function for page links, which is called irrelevant template files. And then finally, I have a couple of functions for the color font. And that shows copyright with the year being automated, and if you want to take a look at those in more detail, please feel free to peruse the source code. So, that's the structure of the starting theme. What we'll be doing as we work through this course, is adding another include file here. And that include file will include all of the functionality we need for the Customizer, and we'll be adding functions to that as we go along. So, now you know how the site works and how the starting theme works. In the next part of the course, we'll start to look at the Customizer itself. And I'll give you a demonstration of how the Customizer interface works using the controls that we'll be adding as we work through this course. See you next time, and thanks for watching.

Back to the top