Step 2 - Polished Design to Mind-Blowing Theme
Filed Under: Themes, Wordpress
Alright, so now you have generated your single page polished design? Great, now you are ready to buckle your seat belt and hold on! The ride is going to be bumpy and a little rough, but you are going to thank yourself after this.
What’s that you’re telling yourself? I don’t know PHP? No problem! I had no knowledge of PHP when I began using Wordpress, thanks to the help of fellow bloggers, and the awesome Wordpress Codex Template Tags page, I figured it out. Now I am creating mind-blowing themes, just like you are going to be able to.
Okay, well first things first, you need to do what is called stubbing out your files. So, let’s open up the directory on your computer where you are saving your theme to (I just created a My Webs folder, inside of there the sites main folder /StyleYourBlog/, and then inside of there a Wordpress folder). Okay, now we are going to create a few different files. Below is a list of the files that you need to create. You don’t need to put anything in them, or open them yet. Let’s just stub them out. Here’s the naming convention:
index.php
leftside.php
rightside.php
header.php
footer.php
Now, these are the basic files that you need to make your template work properly. Now let’s copy any images (preferably in an image folder for organization and ease) and your stylesheet into this folder. Got those in there? Great, now let’s open up index.php in your favorite editor.
Okay, now that you got that open, we are going to start knocking out some PHP. Don’t get discourage, just relax, by the end of this series you are going to be a master. Now, in this file, you do not have to have too much code. If you are using a two column design, this file can have as little as four lines. Below is the code for the whole page, copy it into your index.php and save it. I will explain it after the code. Here it is:
Okay, now that you have that in there. Let’s get some basic understanding of the code. We will go line by line.
Line 1:
<?php get_header(); ?>This is a basic PHP function, which the creator of Wordpress has used. All you are doing here is telling the server to include your file called header. Now, on this line, you do not have to include the name of the file, such as we do in line two and three, because you cannot change the name of this file and still get Wordpress to work. If your header file is not called header.php, your page will not load the header at all. Simple enough right? Stay with me we are almost there.
Lines 2 and 3:
Okay, this line does very similar to the first line. It, once again, tells the server to go find leftside.php or rightside.php and include it in the page. Now, you can name this file virtual anything that you wish to call it, I just use leftside and rightside to keep the file names very simple. You could name this whatever you want, such as billyjoesleftsidestuff.php or thebestrightside.php. Wordpress does not care on these files what you name it. Just as long as you keep the include lines in here, and change the name to whatever you name it, you will be fine.
Line 4:
<?php get_footer(); ?>This last line is the same thing as line one. It is also a PHP include file that has been built into Wordpress. All that the server is doing is once again, calling in the footer.php file that we generated before.
Now, you can upload your files, but all that you are doing is telling Wordpress to pull up blank pages! Remember, that the only file that we have created is the index.php page. Everything else is still blank! This is where the real fun begins! Let’s get started and start copy and pasting from your original design.
Okay, now let’s open up your header.php file in your editor. Once you get that open let’s go ahead and copy the code from your original template for the header part, into this file. Now, this should be pretty simple and straight forward. Make sure to include everything, include the opening html tag here. Once you get that, there are a few things that we should look at before we get going.
First things first is that we should change the stylesheet declaration in your code. Since Wordpress is ran by PHP and MySQL, it does not have static pages, it will be changing its location. So, the creator of Wordpress was very nice to us designer. He has included in Wordpress the ability to call your stylesheet URL directly! This makes things very easy. All that you do, is in your stylesheet declaration, that looked like this:
<link href="style.css" rel="stylesheet" type="text/css" />Place this code:
<?php bloginfo('stylesheet_url'); ?>Into your declaration so that it now looks like this:
<link href="<?php bloginfo('stylesheet_url'); ?>"
rel="stylesheet" type="text/css" />Now, all that this code is telling the server, is that this file is located where ever your Wordpress template is. You don’t even have to type in your folder location or nothing! Just this one little line of code and it does it all for you. You can also place this code:
<?php bloginfo('template_directory'); ?>Into your image declarations inside of header or anywhere else on your design and it will tell the server the same thing! All you have to do is place the folder location for your images, I used /image, after the closing tag of the PHP, and it will tell the server to go to that location and then go into the image folder and get that image.
Easy enough huh!
Alright, now let’s open up the footer.php file into your editor and get to working on that one. Now let’s go ahead and copy your footer information into this new file. Make sure that you include the closing body and html tags into this file or your template will not display properly. That’s it! If you are using any kind of image declaration in your footer, don’t forget to put that code above in your declaration.
That is the basics of your template. You can now upload those files. They go in wp-content/themes/yourthemename. Of course, you need to change yourthemename to the title of your theme. Do not use spaces though. Browsers never like spaces. Don’t log in yet and set your blog to use this theme. We still need to create the left and the right side of your blog. Now you can come back later and go to Step 3 - Guts and glory - The real content and we will get started on plugging in the real PHP code to make Wordpress do all the magic!