Finding your design
Downloadable wordpress themes are not exactly in short supply around the web but the better ones are often used and a little bit of variety never hurt anybody. Using free css templates is a great way to maximise your choice of themes. You can grab free css templates from a variety of sources here are my picks :
Also keep your eye on your favourite social bookmarking sites as new css templates are cropping up all the time.
Choose your design
You will be most definately spoilt for choice but once you have choosen the design to go with, download it and extract it to your hard drive.
What we are going to do is overwrite one of the default wordpress themes. This method quickens things further as you will not need to create new pages and most tags are already in and ready to go.
For the purpose of this article we are also only going to be dealing with a typical two column layout, more advanced layouts will be convered in a future article.
Jump into wordpress
Now you have your choosen design on your hard drive. Log in to you wordpress admin and head to the presentation tab. You will see that you have two templates available by default. The best one to edit is the wordpress classic theme. As it has just the two basic pages, index and sidebar. To do this simply click the templates image and it will become active.
Next step is to go into the theme editor for the wordpress classic theme. To do this just give the sub menu option “Theme Editor” a click.
As you can see you will now have a large textarea with the current file contents inside of it and to the right a list of files contained in the template. For this article you will need to edit all of the files except for “Popup Comments” , it is just copying and pasting though so not to fear.
The CSS file , nice and simple
The first file that opens in the Wordpress admin theme editor is the stylesheet. This is the easy bit, open the css file that you downloaded with your css template and copy it all. Then go to the css theme editor textarea and paste it all replacing the current CSS properties. Paste the contents underneath the comments at the top of the default Wordpress stylesheet to avoid any errors.
Now hit update file at the bottom right of the screen and your done. So far so good ! .
At this point do not worry about the images that are included in your new css (if any) we will take care of these later.
Breaking down the main goodies, the XHTML
This is where the process may get slightly tricky for some but you should have no problems if you understand how the majority of CSS sites are coded and how this fits in with Wordpress.
Inside the header file
The heading file of your new template will contain a number of Dividers that help layout the page and also add the heading logo or text and possibly a top nav. Below is a break down of the element we will be adding to the default wordpress header file which at this point you will need to select from the theme editor file menu on the right.
The trusty container div
If your new design is centered on screen then the chances are it will contain a container div. A container div that comes at the top of the code just after the body tag tells the browser to center all of the content below.
<div id="container">
<div id="con">
Main heading or logo div
This can contain the title of your web site, heading image or logo. Possibly a combination of all three.
<div id="header">Your website name</div>
<div id="logo"></div>
Top navigation
If your new design has a top navigation included it will be held inside a div named topnav or other variant and again will come near the top of page either underneath the main header div or possibly above it.
<div id="topnav">
<ul>
<li><a href="">Nav Link</a></li>
</ul>
</div>
This covers most of the elements we can have in the header file of our new design.
By now you should have the header file open in the wordpress theme editor. Open the main index html file of the template you have downloaded. Skip down to the body tag
<body>
Copy any code that does not contain elements featured in the main content body or indeed the sidebar this includes there div tags. So be careful not to select an extra div tag. Each piece code you have selected here should be opened with a div tag and closed with div tag except for one which is the container div. This will be closed in the footer of the page so that it spans the complete site content.
After you have selected and copied the relevant code from your new design source. Look for the body tag in the Wordpress header file and simply select and paste over any code underneath. You can leave all of the content above the body tag as it is much easier and a lot of the code above the body tag is what makes Wordpress go so leave it and just concentrate on the design you can always come back at a later date and edit this if you need too.
After you have made these changes be sure to give update file a click and you are ready to move onto the next step.
The sidebar and main index file.
Were getting right into the bowels of your new design here. It does not matter which way you decide to edit these files ie. Which is updated first. But to keep things extra simple we will go with whichever element appears first in your downloaded css template’s source code. First of all see the element breakdown below ;
The sidebar
The sidebar in a css design is contained within a div normally named sidebar or left/right side. This element is styled in CSS to run along the main central content by floating either left or right.
For seo purposes it is preferred to keep the center content showing first so your sidebar comes after the main body of your content when being crawled by search engines but you will probably find it is 50/50 with sites which way the content is organized.
<div id="sidebar"></div>
<div id="leftnav"></div>
The main content div
The main content div is where all of your web site content will be kept. It is styled to float the opposite side of your sidebar and appears usually above the sidebar in source code.
<div id="content"></div>
<div id="pagecontent"></div>
So first things first. We will edit this part the way your template should really be coded with the main page content coming before the sidebar in your source code. Look for the start of your designs main page content div. This should start just after the copying and pasting you did into the header file and end just before any opening div for your sidebar.
This is the part to be quite delicate in what you are doing you do not want to copy and paste over all the main index template content as it contains a lot of tags that wordpress uses to pull content from the database.
Open the main index template file from the theme editor file menu and look for this piece of code ;
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_date('','<h2>','</h2>'); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<div class="meta"><?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?></div>
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
</div>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
<?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?>
You do not have to worry about this code at the moment. This is simply the code that will pull your post information from the database and display it. You may notice that most of the elements in this piece of code already have div tags wrapped around them. You can leave these for the time being as part 2 will show you how to use these to better style your posts.
For now you will need to take the start of your main content div tag from your downloaded template and paste it in after the following piece of code, straight after so it stays out of the php code pasted above :
<?php
get_header();
?>
Next go to the bottom of the main index template file and directly above the following code :
<?php get_footer(); ?>
Place this :
</div>
This will ensure that all of the main content is wrapped inside of your main content divider and will float correctly alongside your sidebar content. Click update file and move on.
Next we have to style the sidebar. This again for the time being only needs to involve you copying and pasting one xhtml tag. First off look for the div element that starts your sidebar in the source code of your downloaded template. This should be directly after the closing div tag for the main content divider.
Open up the sidebar template file in your theme editor and look for the following piece of code :
<div id="menu">
You will need to select and paste over this with the div tag for your sidebar taken from the css template you have downloaded. Do this and again forget about the code that follows. We cover this is Part 2.
Hit update file once more to save your changes and we are almost there. All we need to do now is set the footer up and close the opening container div.
Finishing things off with the footer
The footer of your design will be at the bottom of the source code and will contain usually a copyright notice and also design credits. When you implement your new design with Wordpress you will also need to leave in a “powered by wordpress” link in there.
The footer in CSS terms is a element that is set to clear both the floated sidebar and main content div, in the process pulling the container div down to the length of the web page with it.
If you take a look directly after where you sidebar finishes within your download css templates source code you should be a div starting that is named footer and something very similar. This is the code you will need to copy and paste shortly.
<div id="footer"></div>
<div id="footing"></div>
Open the footer template file through your Wordpress admin theme editor and first of delete the following code :
<!-- begin footer <del>-></div>
Directly afterwards you should see the following code :
<?php get_sidebar(); ?>
This is wordpress bringing in the sidebar that you edited earlier on in the process. Directly after this is where you footer start tag has to go. So before the following code and after the side bar code add the tag that starts your footer element :
<p class="credit"><!</del>-<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org/' title='<span>s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?></cite></p></div>
The code above outputs the “powered by wordpress” link so having it wrapped inside of your footer div will have it display properly on your web site. No need to click update file yet, one more modification left to make.
Ending the almighty container div
The code you need as you may have gathered at this point is :
</div>
You need to place this directly above the following code in your wordpress footer template file :
<?php wp_footer(); ?>
</body>
</html>
Now you can give update file a press and relax we are done with template editing. For now !
You should now have the framework of a well designed wordpress theme that you have created by yourself.
Wait a second, make sure you upload the images
Now you have tweaked the coding of the template you will need to upload the images to the relevant folder. The images downloaded with your template should be stored within their own folder. Take this folder and upload it into the main theme folder for the classic template.
The path to get to the classic theme folder should be public_html/wp-content/themes/classic or something similar.
All done, for now !
After you have finished uploading your image files take a look at your site. You should have something that 85 resembles what you were expecting. Whats Missing ? Styling the inside post and sidebar content is what is missing at the moment which we will cover during part 2 of this article. So stay tuned for that coming in the next few days. Below are a few tips, tricks and known issues and some advice to resolve them.
Follow up questions and answers …
What if my sidebar comes above my main content in the css template source ?
You will need to edit a the wordpress code a bit further. What you will need to do is cut the following code from the footer template file :
<?php get_sidebar(); ?>
and place it in the main index template file directly after the following piece of and before the start of your main content div.
<?php
get_header();
?>
My post page commnent area is massively wide, how do I get it back to normal ?
The original textarea of Wordpress was set to 100% which is why your comment box is stretching so much. To edit this you will need to go to the “Comments” template file in the theme editor and look for this line of code :
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
Inside the cols= piece of code place a number between 1 and 80 replacing the 100% attribute, with 80 being the widest and see which one suits your site the most.
Coming up in Part 2 and 3.
In part two I will be creating a guide to using the tags we didn’t remove from the default template in order to make your theme a whole lot prettier. Part two will also feature a real life free CSS template broken down and implemented with a real wordpress install. This will help anybody struggling with this part to visualise what they are doing and what the end result will be.
Part Three as a bonus will feature advanced editing of the Wordpress default tags.