7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Creating the Framework Outline

Welcome back. In the previous lessons, I showed you how to install WordPress. Now, before we move on to coding our actual framework, we gotta plan ahead. Meaning we gotta create some sort of structure to our framework which we're gonna follow in the next couple of lessons. Let's start by getting our newly created framework to register as a theme inside WordPress. So for that, I'm gonna go to my WordPress installation. Gonna go to wp-content. Themes, and I'm going to create a new folder called alpha-framework. Now I am going to drag this into a code editor, and I'm going to start writing the first files that are needed for a word pristine to register within WordPress, the first file is style.css. Next, we got index.php and then we got functions.php. Now I'm gonna close these two, and inside style.css I'm gonna say this. First of all, the file name and then we're gonna type in some information that will be recognized by WordPress. The first one is theme name. So we're gonna call this Alpha WordPress Framework. Next is gonna be a theme. URI. And I'm just gonna put http://www.tutsplus.com. Next, we're gonna have a description. Next, we need a version for this theme. So I'm just gonna put 1.0. Information about the author and then author URI. Next, we're gonna need some information about the license the theme is released under. Next, we're going to need a license URI. And then we need to add some tags, and this will basically describe the theme by using some keywords. For example, one-column, two-columns, right-sidebar, left-sidebar. Maybe add fluid-layout since it's gonna be a responsive theme. And then we can say custom-menu. We also have featured-images on posts. We also have support for post-formats. Sticky-post is also something that we can add to our framework. And we can also do translation-ready. Okay, so basically, the role of these tags is to be able to find your theme by searching for certain key words. If you're gonna upload your theme to the WordPress repository, then by searching one of these keywords, like one-column or left-sidebar, people will be able to find your theme much easier. Now finally for our style.css, i'm just going to say, Text Domain alpha. Now alpha is a key word that we're gonna use in all of our translatable strings, and I'll show you what I mean when we first get to them. Okay now, I'm gonna save this, and I'm gonna go back to my WordPress dashboard here. I'm gonna go to Appearance, Themes. And as you can see, we have a brand new theme here called, Alpha WordPress Framework. Which I can activate. And now it says this is the newly activated theme, so if we refresh the main website, we have nothing because all we have right now to work with is a blank functions file and a blank index.php. But in all fairness, these three files is all you really need to make a theme register with WordPress. Now, going back to our themes here, we can see that we don't have a screenshot yet for the theme, and to add one is actually very straightforward. You need to go into your theme folder. I'm just gonna organize them differently here. And you need to add a file called screen shot PNG, which is 880 pixels by 660. So I have one prepared, it's a very simple file so I'm just gonna paste this in. It says basically it's a blank file that says Alpha Framework. So when I go back and refresh, we now have a screenshot for our theme. All right so, now Now that we have everything set up, it's time to write that roadmap I was talking about, just so we know what files we need to write. So, I'm gonna open a new file called, let's see Roadmap.md so I'm gonna use Markdown and I'm gonna say a list of files that need to be written. The first one is the function's PHP file. So I'm going to say functions.php. This is essential because it contains all the necessary functions for your word pristine to work properly. Next up. Is going to be the index page, so index.php. Now index is the default style that will be shown on every single page if a more specific page isn't present. So for for example, if you're viewing a single post, if the single.php file isn't present, well the index.php will be used instead. And right from the beginning, this file will be used to show the blog index. Next up, every single page will have two things in common. It's gonna have the header. And the footer. So I'm going to say header.php and then footer.php. Our WordPress framework or our WordPress theme will have different pages. And we need a template for that. So, I'm going to say page.php. On top of that, we're gonna have posts. So we need a specific page to show a single post. And that is single.php. Next, each post will have specific post format. Either it's standard or it's a video, an audio, or a quote, for example. It needs to have a different template. So, right here we're gonna put content.php and we're going to put it in parenthesis with all content types. So we're gonna have a content-audio.php file one for video and so on. Next, every WordPress theme allows searching for posts based on either an author, or a date, or a category, or a tag. And these are called archives. So, I'm gonna start with author archives. And then we're gonna have the date archives. And then we're gonna have the category and tag archives these will be separate files. All of them. Next, we need a 404 page for displaying the 404 error. So 404.php. Finally, we're going to have some additional templates like full width template. Like contact template, so we're building a contact page. And then our theme must have some widgets. And I'm just gonna build a very simple widget. So, widgets. And based on that you'll be able to create your own. Finally we are going to add some css in the mix so basically this is the road map, the list of files that we're going to need to create in order to have a functional framework. So with this done, let's move on to the very first file we got to write, which is the functions.php. That's coming up in the next lesson.

Back to the top