Convert XHTML/CSS To WordPress

When I first decided to convert a static HTML design to WordPress I did some searching for a tutorial to help me get started with the basics. Surprisingly, I didn’t find anything that was very complete or easy to follow. For that reason I decided to write a very basic tutorial on how to convert a static XHTML/CSS template into a WordPress Theme. If you are an absolute beginner at developing WordPress themes then this should help you get started. This tutorial assumes you already have a basic understanding of HTML and CSS. It also assumes you have already built a website in XHTML and CSS and have it ready for conversion.

How WordPress Works

WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your content from the database management system it stands on. For example, look in your /wp-content/themes/classic/ directory and open the header.php file. As you scroll through the code notice the PHP calls, they start with a <?php and end with a ?>. Look at line 11 and you will see the call for your stylesheet:

<style type="text/css" media="screen">@import url(<?php bloginfo('stylesheet_url'); ?>);</style>

This line uses PHP to look-up your stylesheet’s location from the database. This basic function of retrieving or calling some kind of data from your database and using PHP to display it in your XHTML is how WordPress works. Throughout this process you will be substituting PHP for different parts of your content and your code. This will make editing easier in the long run, as you will find out. Now that you understand the basics of how WordPress works, lets get started.

First Things First

The first thing to do is create a new folder and name it whatever you want your theme to be called. Next, create two new files, style.css and index.php and place them in the folder. Believe it or not, these are the only two files you actually need for a WordPress theme. Now copy and paste the code from your original CSS file into the style.css file you just created. At the top add the following code:

/*
Theme Name: Replace with your Theme's name.
Theme URI: Your Theme's URI
Description: A brief description.
Version: 1.0
Author: You
Author URI: Your website address.
*/

These comments simply help WordPress properly identify the theme. Your stylesheet is now ready to go.

Chop It Up

Now let’s start chopping up your XHTML. Remember how we talked about WordPress using PHP to call data from your database? Well WordPress can also use PHP to call different files from within your template folder. Imagine your current XHTML code chopped up into 4 (or more) different sections. For example, take a look at the layout and corresponding XHTML of this page. The header comes first, followed by the content, then the sidebar, and finally the footer. Instead of keeping these 4 parts of the XHTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.

So go ahead and sort through your XHTML code and put some markers in the 4 places where you plan on cutting the code into 4 separate sections.

Note: These next steps assume you have your page set up in the same order as this page: header, content, sidebar, footer. If your page is ordered differently you will have to switch a couple of these steps around, but I am sure you can figure that out.

Now create 3 new files (header.php, sidebar.php, footer.php) and place them in your theme directory. Next take a look at the header.php file from the classic theme we looked at earlier. Notice all the PHP that is used in between the <head> tags. You will want to keep most of this code, so just copy the whole <head> section into your new header.php file. Now open up your original XHTML file and copy the code you marked off for your header (1st section) into your new header.php file (underneath the <head> section). Save and close.

Now open up your new index.php file. Copy the second part of your original XHTML code, the content (2nd section) into your new index.php file. Save and close.

Getting the hang of it?

Next open up your new sidebar.php file, copy the sidebar (3rd section) of your original code into the sidebar.php file. Finally, copy the original footer (4th section) of code into your new footer.php file.

Put It Back Together

Your original code should now be chopped up into 4 different files (header.php, index.php, sidebar.php, footer.php). Let’s put it back together using a few lines of PHP. Open up your index.php file, it should contain the XHTML from the content (2nd section) of your original code. Add this line at the very top of the file:

<?php get_header(); ?>

Now go to the absolute bottom of your index.php file and add these two lines:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is officially put back together. Now if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.

The Loop

Your index.php is almost finished. The final step is to insert the actual content into the code. Luckily, WordPress uses PHP for this as well. The Loop is the PHP function WordPress uses to call and display your posts from the database they are saved in. Look in your /wp-content/themes/classic/ directory and open the file index.php file. Copy everything in between <?php get_header(); ?> and <?php get_footer(); ?> to your clipboard. Now paste it into your new theme’s index.php file inside of whichever div you are using to hold your content. You just inserted a basic version of the loop into your code. WordPress will use the loop to display your posts and comments on your website.

The End

Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme. Wasn’t that easy?

This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at the WordPress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possibilities for customizing your new WordPress blog.

This entry was written by Drew Strojny at 7:44 pm on May 8th, 2006.
Filed under Web Design with the following tags: css, tutorial, wordpress, xhtml

45 Comments

comment feed

wandering_nomad

I’m glad you made this, it’s certainly helpful to me, someone with little/no knowledge about PHP.

Cate

You are my new hero.

Michael Spence

Okay, that takes care of the styling. How about pre-existing articles and comments? How can I place them in the WP database?

Drew Strojny

Michael: Check out the Importing Content page from the Codex. Also, look under the Import tab in the administration panel.

William Brown

Thanks for writing up this tutorial. This is exactly what I was looking for. Keep up the good work.

Abbey

Given the simplicity of your directions, I had pretty much convinced myself there was no way my journal was going to come out with the same design as the rest of my html-based website… but I was pleasantly surprised. Just wanted to say thanks

Michael Josh

Your article couldn’t have come at a better time. I don’t know how I’d have been able to do it without your guidance, thank you so very much.

The site is great. Design is clean and stylish. Especially love the main (left) content column, how the headings complement the HRs, and the way comments appear in idividual boxes. Just beautiful!

Matt Levenhagen

Great Tutorial! Thanks for putting it together. It helped me successfully convert one of my templates into a WordPress theme… and I have a feeling it won’t be my last.

Very cool.

Sean

AWESOME!

This couldn’t be laid out any better! Great job, and thanks for all the help.

Ron

Wow, that’s precisely what I needed to get my xhtml/css design into wordpress. Thanks!

brendan

Ahhhh…. this article is such a relief. I was trying to adjust all my css div names to match the Wordpress ids. This is so much easier. Thanks!!

Abdel

Great tutorial mate… really much appreciated

Paul Nilsen

This is easily the most straight forward and easy to understand tutorial on this subject.

Thank you very much for providing such well laid out instructions.

Josh H

D-Man, you are a GOD. This is by far the easiest tutorial I’ve seen, and I was beginning to give up hope on being able to integrate Wordpress with my existing site. I’m giving you full props for this save in my code–thanks just doesn’t say enough!

Please let me know if there’s anything I can help you with in terms of page design. Take care!

Ashley

Wow! Thank you so much!!! Really helpful and well written, thank you!

Nick

Fantastic tutorial - worked first time!

John McFarlane

Great tutorial, I’ve not used PHP or Wordpress for longer than 10 minutes, but this was easy to follow and seemed straight forward.

Thanks very much.

John

BK

Thanks for taking the time to write this. Greatly appreciated.

78 Essential Search Engine Marketing & SEO Resources! | SEOptimise Pingback

[...] Design/Software Convert XHTML/CSS To Wordpress Ultimate Web Development Cheat Sheet Guide Optimizing phpBB 2.0 for Search [...]

Rajiv

Simple and Impressive !!!!
Thanks for sharing with us

Wen

Genius!!!

Exactly as the author said, there are not many tutorials explaining the basics, and the ones that do exist are too complicated and never spot out the main points. This article is such a no-nonsense tutorial.
Author is an absolute talent! Thank you very much!

Lucy

OMG u are amazing!

digiwebbs

great guide, one that i could actually follow! keep up the good work

CSS/HTML to WordPress - Example and Tutorial - WarriorForum - Internet Marketing Forums Pingback

[...] template into a WordPress theme. There is an excellent tutorial on how to do this at Jestro: Convert XHTML/CSS To Wordpress | Jestro Here is an example template from which I derived a WP theme largely using the instructions above: [...]

Best I know … » Brandonmoeller blog theme 1.0 Pingback

[...] modify the Kubrick theme and search for tutorials for what seemed like forever, I stumbled across this page which told me how to apply me site’s existing CSS to my WordPress [...]

The Back Burner » From one blog to another Pingback

[...] working through an excellent tutorial in order to convert my MovableType theme to a WordPress one. This article was useful too. It really was that [...]

Thinking about Wordpress.. - Surpass Web Hosting Forums Pingback

[...] was actually pretty easy. The theme system is 100 time easier than I thought it would be. I found a really good tutorial that breaks it down and shows you how to take any CSS template and make it into a simple WP theme. [...]

Mike

Nice job.. Thanks

Anthony

Thanks for sharing - it’s a great overview.

room1012

Awesome tutorial. It easy to follow and helped me understand the purpose of php and the theme development process. Thanks!

Shin

You just made a newbie an intermediate in one page.

john

Thanks for this.

Posicionamiento Valencia

Nice tutorial. Very useful.

Kevin Schueller

Thanks so much! Your tutorial is fantastic. Saved me in a time of need!

Kevin Schueller Design Blog » Blog Archive » Integrating WordPress into your Existing Website Design Pingback

[...] An excellent tutorial: Convert XHTML/CSS to WordPress [...]

Eric

I’ve been trying to figure out how to convert a couple sites for awhile and havent found anything out there this clear and straightforward. Thanks!

Incredible

I have searched every nook and cranny of the WWW for a tutorial that simplifies the process of converting an (X)HTML template into a wordpress theme but all to no avail. Coming across your tutorial replenishes my weary soul because I have been on this for the past months. Thank you for the time it took you to write this and thank you for sharing your knowledge.

Henry Hoffman

Why haven’t the guys at Wordpress made this? This is absolutely brilliant - I abandoned Wordpress several months ago because of a lack of a decent beginner’s guide.

Thanks!