7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Create the Basic Theme Files

Let’s start by getting the basic setup of the theme done. We’ll create the essential theme files, set up our stylesheet, add some essential header and footer code, and test it all to ensure everything is loading up correctly.

Related Links

2.1 Create the Basic Theme Files

Hey, welcome back to building Gutenberg template layouts without JavaScript. In this section of the course, we're just going to be setting up the basics of the theme. And in this first lesson of this section, we're creating the basic theme files that we need to run our theme. So you're gonna need an offline installation of WordPress to work with. if you're not sure how to go about that, the easiest way is probably to use XAMPP. You can use this on Windows, Linux, or Mac. And then grabbing the be Bitnami module for WordPress. Most of that process will then be just handled for you automatically in installing WordPress. If you're on Linux and you wanna get a bit more in-depth, then you can actually install a whole LAMP stack directly on your machine. And just have WordPress running whenever you wanna access it. Once you have WordPress installed on your computer, you need to go to the location WordPress is installed via your file manager. And then going to wbContent themes. And then in there, you need to create a new folder to house your theme. In this case, I've created a new folder and I've named it landingpage. When you've done that, open up that folder inside your code editor of choice. In my case, I'm using VSCodium, but you can use VSCode, or Atom, or Sublime Text, or anything you prefer. So I have of the landing page folder from my theme open here. And I also have the folder from the course that precedes this course, where we took a template from FIGMA and coded it up into HTML. We're going to be recreating a portion of the HTML page as our Gutenberg layout in this course. So you're going to need to have access to some of the styles that were used, a little bit of the HTML, and some of the images as well. You don't have to have done that course, but if you didn't, there is a link in the notes below this video to the course where you can go and grab the source files. So that you have access to this code and these images. All right, so with all of that in place, we are ready to start creating the files that we need to run our theme. So inside the landingpage folder, I'm gonna create a new file and call it style.css. And I'll just close that one down. In this stylesheet we're gonna need to tell WordPress what the name of our theme is. And we do that inside a comment, and we're just gonna say, Theme Name: and we're gonna call ours Landing Page. And then close off that comment. Now we're also going to create an index.php file. A functions.php file. And now if we go into the back-end of our offline WordPress site, and we go to the Themes section, we can see our theme here and we can now activate it. All right, now, we're not going to see anything at all showing up in the front end, obviously, because we haven't added any code to our theme. We're also gonna add a couple of extra files. We're gonna add a header.php file, and a footer.php file. And then finally one more stylesheet, named style-editor.css. And we're gonna use this to control how our content looks in the back-end, in the WordPress editor. All right, now, even though we're not recreating the entire site that we made in figma.html, the previous course. We're just gonna use all of the styling from that site. It's the easiest way, so we're just going to select all, and just dump the whole lot into our theme stylesheet, and save that out. And we can close the original stylesheet. And to our header, we're gonna add a little basic code. If we look at our original index.html file from the last course, you can see that we've got this code here at the start of the layout. And we're gonna need to make sure we include this wrapper div for layout purposes. So we're just gonna actually paste that whole of lot opening code into our header.php file. Now we just need to change up a couple of things in this code. We want this portion of code here to be driven by WordPress. So we're gonna replace that with a little PHP snippet. And we're gonna make that use the function, language_attributes. We're gonna have WordPress output the character set as well with another PHP snippet. We're gonna add in bloginfo. And then we're gonna specify that we want it to tell us the character set. We gonna leave this line just how it is, and this line. But these three lines here where we're loading in some CSS and we're setting up the site title, we want those to be driven by WordPress as well. So we're gonna delete those lines and just replace them with php wpz_head. And then WordPress will output the necessary code there. So that's the header code that we need. Now, in our index file, we can just load that header in with another PHP snippet and we're just gonna say, get_header. Now we're going to do a similar thing with our footer. We're going to go into the index.html file from our previous course. Go all the way to the bottom, and all we need is this little bit of HTML from the bottom. So that closes the wrapper div and closes the body and HTML elements. So we're just going to put those in here, save that out, and then back to our index php file. We'll just copy and paste this line. And change it so that it reads get_footer. And we're just gonna add in a little bit of HTML into our index.php page so that we can check our frontend and make sure that HTML is showing up. And give us a way to verify that everything is coded correctly. So one more time, we're gonna go back to our original index page. And the section that we're gonna be recreating is the Tours section, which is the section here. So we're just gonna grab these two lines, drop them into our code here. And I'm just gonna hit Shift+Tab a couple of times to reset the indentation. And then I'm just gonna close those off with a couple of closing div tags. So now, if we go back to our frontend of our WordPress site and refresh, we can't see anything, because we still haven't loaded in our styling. But if we open up the Inspector we can see, there's our wrapper class that's coming from our header. There's our Tours class and our inner padding area coming from our index file. And we've got our closing tags coming from our footer. So now that's all of our basic theme file set up. In the next lesson we gonna go through and set up the theme initialization function. So we need to do things like enqueueing our stylesheets. And adding in support for a couple of different features that we need WordPress to be activating when someone loads up this site. So we're going to go through and get our theme initialization set up in our functions.php file in the next lesson. I'll see you there.

Back to the top