Starting a New Theme6:26 with Nick Pettit
In this video, you'll learn how to start a new WordPress theme from scratch. You'll also learn how to add metadata to your theme.
[?mellow guitar music?] 0:00 [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com] 0:03 [WordPress Themes - Starting a New Theme with Nick Pettit] 0:07 In the previous videos, we learned the basics of WordPress Theming 0:13 and we looked at a few Themes to see how they were put together. 0:17 Now, over the next several videos, we're going to be creating our own Theme. 0:20 Here's what our Theme should end up looking like. 0:24 You may recognize this example from other chapters. 0:27 It's a very simple blog design, and that's exactly what we want. 0:31 so that we can put more focus on actually making a WordPress Theme. 0:35 This site also has everything that we're going to need, 0:39 including a site header with blog posts, a sidebar, and a footer. 0:42 The HTML and CSS for this site will be included with the code for this video, 0:47 so be sure to check that out. 0:53 Well, we have a lot of ground to cover, so let's go ahead and get started. 0:55 The first thing that you're going to want to do is open up a text editor 0:59 or a file navigator, if you prefer, like the Finder. 1:04 Then, go ahead and navigate to your WordPress Themes directory, 1:07 which I've already done here, 1:11 and go ahead and create a folder for your Theme. 1:13 I'm going to go ahead and call my Theme catchingthewave, just like the site. 1:18 Now, you can make your WordPress Theme as complicated or as simple as you'd like. 1:25 However, to start with, we're going to keep this Theme to the bare minimum 1:31 so that you can get started on your own projects more quickly. 1:35 Next, we're going to go ahead and create some files that we'll need 1:38 over the next several videos. 1:43 So first, I'm going to make a file called index.php 1:45 and then I'm going to make another file called header.php, 1:50 and we'll also need footer.php. 1:56 We're going to need a file called sidebar.php. 2:01 And the last PHP file will be functions.php. 2:05 And then, we're going to want to make a file called style.css. 2:10 And I'm just going to go ahead and close all these other ones here. 2:16 Now, to create a WordPress Theme, all you really need is an index file, 2:21 but we're going to at least get a bit more involved than that. 2:25 Don't worry about all of these files being blank; 2:28 we'll be filling them out over the next several videos. 2:31 For now, just go ahead and open up your style.css file, 2:34 which I've already done here. 2:37 This is where we'll be storing all of our CSS. 2:40 In addition to your site styling, though, this is where a lot of metadata 2:42 for our WordPress Theme is stored, 2:47 so let's go ahead and add some metadata now. 2:49 I'm going to create a comment and then I'm going to type 2:52 Theme Name: Catching the Wave. 2:56 Now, here, I've created a CSS comment, 3:02 and inside, I've put the string Theme Name with a colon followed by Catching the Wave, 3:04 which is what I'm choosing to call my Theme. 3:11 You can call your Theme whatever you want, but the name you put here 3:13 should be reflected in the name of your Theme folder over on the right. 3:16 So let's go ahead and switch over to our WordPress Administration 3:21 and if you haven't already done so, go ahead and open up the Themes page, 3:27 and if you're already on the Themes page, just go ahead and hit refresh 3:33 and if everything went smoothly, 3:38 there should now be a Theme with the title that you made. 3:41 We can even go ahead and activate this Theme if you want. 3:45 So we'll activate it, and we'll go over to our WordPress blog and hit refresh. 3:49 And of course, this Theme has nothing in it, so it's just going to turn up a blank page 3:54 because all of our files are blank. 4:00 So also, if you look here, there's actually no preview image for our Theme. 4:03 I'll just go ahead and activate one of these other Themes here--and there. 4:10 There's no preview image. 4:14 You'll also notice that there's no description, there's no tags, 4:16 the author is listed as anonymous, and so on. 4:20 Let's go ahead and fill out a little bit more meta-information with some more details. 4:24 So the Theme URI: we'll set to the Carsonified homepage. 4:31 The Description--we'll just say a very simple theme to go along with a video tutorial. 4:41 This theme is intended for educational purposes. 4:51 And the author--of course, you'll put your name here. 4:58 The Version is going to be 1.0. 5:04 And you should also add some tags to describe your Theme, 5:07 should you decide to submit it. 5:11 We'll say this Theme is blue, it has some white in it-- 5:14 and these do need to be comma separated-- 5:17 we'll add light, we'll say this Theme is simple, it's two-columns, 5:20 and it's also a fixed-width Theme. 5:27 And finally, you'll probably want to put an author URI 5:30 if it's not the same as your Theme URI, 5:35 and for mine, I'll just go ahead and put my Twitter account. 5:38 Of course, there's lots of other meta-information that you can add, 5:43 but we'll keep it at that for now. 5:46 Now, if you go back to your WordPress Administration and hit refresh, 5:49 you'll now see that we have a version number, 5:54 an author with a link to the author URI, 5:58 a description, and some tags down here at the bottom. 6:02 We still don't have a screen shot yet to go with this, 6:05 but that will be one of the last things that we do when our Theme is finished. 6:09 Now that we've created all the files we're going to need, 6:13 we're ready to start filling them in. 6:16 In the next video, we'll start creating some structure. 6:18 [?mellow guitar music?] 6:21 [Think Vitamin Membership - Est. 2010] membership.thinkvitamin.com] 6:23
You need to sign up for Treehouse in order to download course files.Sign up