How to Create a WordPress Theme Part 2
I mentioned in the previous post that creating a theme can be as easy as copy and paste codes, and here is the reason why – the Dynamic Drive CSS Library. There are many other css libraries on the web, but this is the one I usually use, so I’m recommending it to you.
A css library, like its name suggest, is where you can find pre-written codes which you can use for yourself free of charge.
Creating the frame
Head over to the layout section and you will see a collection of different types of layout they have. If you’re designing a 2 column layout, check our the section for 2 column layout. If you’re doing 3 columns, check the section for 3 columns layout. You will be able to see the different designs consisting for the number of columns you want.
Right now, we’re doing a 3 column layout design. But, if you’ve noticed, you can’t exactly find the layout design I’ve sketched up from the previous post in the library. This is where you need to get creative.
Notice that if you bring your field of vision up and ignore the lower half of the theme, you would see a 2 column design. What we need to do here is to actually take a 2 column layout design, and split the sidebar into the 3 different sections later.
If you find this confusing, don’t worry. All will be clear later.
In most cases you just have either 1 or 2 sidebars, and you won’t find yourself in this kind of situation. Just keep in mind that regardless of what kind of design you’ve come up with, you can make use of the basic layouts found in the css library. Sometimes, it just takes a little bit of creativity to figure out how to fit it in place.
Once you’ve found the layout you are looking for (in this case, a fixed, 2 column layout), it’s time to copy and paste.
Dissecting the CSS
Here is the important part. CSS libraries such as Dynamic Drive are originally meant for static html pages. We are doing a WordPress theme, so it is important to know how to copy and paste.
Look for the line that starts with this:
<style type=”text/css”>
And another line after that:
</style>
Copy everything in between those two lines.
And then paste it in your style.css, below your theme information.
Feel free to make changes to the css as you see fit as they are pretty self-explanatory and are commented appropriately. If you’re unsure, just leave it as it is.
Dissecting the body
Copy everything between <body> and </body> (include those two tags as well) and paste them into your index.html (which is the Main Index Template).
After saving, find the line in index.php that correspond the to header. This should be easy since the codes are written in a very nice and clean fashion. Once you’ve found it, copy the entire paragraph of codes and cut it.
In the 2 column fixed layout, the header code is:
<div id=”topsection”><div class=”innertube”><h1>CSS Fixed Layout #2.2- (Fixed-Fixed)</h1></div></div>
Cut that paragraph out, save and open up your header.php (Header).
Before you paste in the code, add in the tags <head> and </head>. Now, keep in mind that every other code that goes into the header goes in between these 2 tags. Add another <html> tag right before the <head> tag.
Then paste in the code you’ve cut out earlier. Paste this line of code in after that:
<?php wp_head(); ?>
Before saving, copy the following code and paste it in right after the <head> tag:
<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
Now your header.php should look something like this:
Editing header.php
Next is the sidebar. Go back to your index.php and find the segment of the code that corresponds to the sidebar. Cut it out, save and paste the code into your sidebar.php and save.
Do the same with your footer. Before you save for your footer, include a </html> tag at the very end of the file.
Linking it up
Now that different parts of the original page has been dissected away from the main template, it’s time to link them back together again to form a full page.
Open up the index.php and add the following codes:
- <?php get_header(); ?> – this goes where the header codes used to be located
- <?php get_sidebar(); ?> – this should go where the codes for the sidebar used to be located
- <?php get_footer(); ?> – this goes where the footer codes used to be located
Editing header.php
By now, your index.php should look like this:
Save, and open up your blog to have a look at what you’ve done so far. If you’ve done everything correctly up to now, you should be able to see the structure of your blog taking shape.
And now it’s time to take a break and refresh your mind before we move on to the next step – fleshing out the theme.
Related posts:
- How to Create a WordPress Theme Part 3
- How to Create a WordPress Theme Part 1
- How to Create a WordPress Theme Part 4
- How to Create a WordPress Theme Part 5
- Create Your Own Wordpress Theme for $10
No Responses to “How to Create a WordPress Theme Part 2”
Got something to say?
Thanks for the great tutorial. Although, I do have a question. I don’t know much about coding WordPress themes, but in your example, it looks like the body tags will be outside of the html tags on the index page. Is this correct?
The body tags will be within the html tags since they are located in the first line of the header and last line in the footer, which comes before and after the main index respectively.
In the index, you call for the header before starting the body tag, and you only call for the footer after you’ve closed your body.