Porting your website design into a WordPress theme
Thursday, October 16th, 2008 by Peter Zhang
Recently when Jonathan and I designed this theme, I was in charge of porting it over to make it work on Wordpress. (Yes, that means Jonathan did everything else.. Kudos to him =P) It was not totally painful with the great amount of help i can get from Wordpress Codex and other websites, but I felt it would be more convenient to compile all of them together into a simple guide.
This tutorial is going to teach you how to port your [finished] website design to a WordPress theme. It sounds hard, but it is actually not. =) So, let us begin…
Please note that the finished work of this tutorial will not have WP 2.7(or up) features (nested comments, etc.)
Prerequisites
- A finished design, as mentioned, that has navigation bar and sidebar widgets spaces neatly organized into lists using <ol>,<ul> and <li>’s and all styles in style.css
- Slight PHP, and HTML & CSS knowledge
First things first… Introduction
For a Wordpress theme, you will usually need to create the following files:
- Comments (comments.php)
- Comments Popup Tempalte (comments-popup.php)
- Main Index Template (index.php) [Required]
- Header (header.php)
- Single Post (single.php)
- Search Results (search.php)
- Category Template (category.php)
- Footer (footer.php)
- Sidebar (sidebar.php)
- Theme Functions (functions.php)
- Tags Template (tags.php)
- Archives Template (archive.php)
- Stylesheet (style.css) [Required]
Out of these files, only index.php and style.css is required. However, you will probably need everything except tags.php, archive.php and comments-popup.php for a complete theme.
We will first make style.css, header.php, footer.php WP-ized, then we will proced on index.php, sidebar.php and other pages.
This is the basic structure of a Wordpress theme:
In this part of tutorial, I will cover on header.php, sidebar.php, index.php and footer.php, the four most important files. The rest will be covered on the next part of the tutorial
And now we shall begin…
style.css
First, take out your design out. Open your style.css files, and put the following code at the very beginning of the file:
/* Theme Name: Theme URI: Description: Version: Author: Author URI: Tags: */
After you copy it to the top of style.css, fill in each blank (Theme Name, etc.). You may also add some author notes in the /* */ section.
Also, add two classes into your css file: .alignleft and .alignright, each having the property float:left; and float:right;.
You may then save your style.css, into a new folder (different from your HTML design folder)
header.php
Then, open your webpage files, and we are going to create two new files – header.php and footer.php, save it in the same folder as you did with style.css. Copy everything in your original design file from the beginning of the file to <body>, or even perhaps a few lines down to where the main content div starts (depending on your design) so that you don’t have to include the div in every of your other file but just call for the headers and you can already type your content.
For example, it will look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="assets/style.css" type="text/css" rel="stylesheet" media="screen,projection" /> <script src="assets/script.js" type="text/javascript"></script> <title>TechCube</title> </head> <body> <!-- Wrapper DIV is the main container, and I am going to include it to display at every page --> <div id="wrapper">
So now this is in header.php, we will need to make some changes to it.
First, for the meta tag about Content-Type, you will need to change it to the following so that WordPress can automatically generate the information:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
Secondly, you will need to change the title to the following, so that [again] Wordpress can generate the correct title:
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &amp;amp;amp;raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
Then, you will have to change your css link to (bloginfo(’stylesheet_url’); points to the correct style.css in the template directory:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
And after the stylesheet, add these line in as well:
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
Additionally, if you have included a javascript or something, use something similar to this:
<script src="<?php bloginfo('template_directory'); ?>/script.js" type="text/javascript"></script>
<span style="font-family: courier new,courier;">
bloginfo(’template_directory’); will point to your template directory. Use this tag to find your correct script source.
At last, put this following line before </html> so that WordPress recognizes that this is the header and it is time to run some WP header codes:
<?php wp_head(); ?>
This is it for the header… now, let’s move on to footer.php
Footer.php
Compared to header.php, footer.php is relatively easy. Go to your original design webpage, and copy the closing tags of <div> that you included in header.php and whatever you want to include in Footer (ex. copyright statements) and </body>, </html> to your newly created footer.php
It would look something like this:
<div class="clear"></div> </div> <div id="bottom"></div> <div id="footer">Copyright &amp;amp;amp;amp;copy; 2008 <a href="http://techcube.net">TechCube</a>. Powered by <a href="http://www.wordpress.org">Wordpress</a>.</div> </div> </body> </html>
There are only two edits to this page. First, next to your copyright info, make sure that you put a Wordpress link. Second, put the following code right before </body>, and the reason is just as the same as wp_head in header.php:
<?php wp_footer(); ?>
That’s it for the footer. Easy? =)
index.php
Now we have gone through those mandatory lines, and now it is time to let our creative minds expand… (I sounded so artistic, didn’t I?). Anyway, now, create a new file named index.php and put it in the same folder as the others (header.php, etc.).
Take out everything you just have copied and pasted into other files (header, etc.), then take out your sidebar section (and then copy the sidebar into a new file called sidebar.php), and what’s left is your index.php. Copy the remains into index.php and you can start editing
First, before everything else, put this line into the very beginning of file:
<?php get_header(); ?>
Then, put this line into the very end of the file:
<?php get_sidebar(); //if you do not have a sidebar planned, do not add this line get_footer(); ?>
The whole index.php basically revolves around one single loop, called The Loop. Basically it is made up of a few lines:
if (have_posts()) : // If there is a post while (have_posts()) : the_post(); // On each post, the code here will be repeated // and some templates tags that appear in this while() // will return unique values for each post endwhile; // Usually Navigation controls will be here else : // If there isn't a post endif;
The theme could not work without the loop in place. So how do you insert these lines into your template, you ask? It’s not that hard.
First, when you are your website, you usually include two or more posts just to make sure the theme looks right, but during the port, please delete the second or the others so you only have one post left.
At the beginning of the post (not the beginning of the whole container), put the following code before it:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
If you put the code above too much before the post, you might end up with the unnecessary content repeat every time a post is displayed. We will customize the post later.
Then, at the end of the post, put the following:
<?php endwhile; ?>
After that, you might want to have a navigation controls to appear here. A regular navigation bar would look like this:
<div class="navigation">
<div class="alignleft"><?php posts_nav_link('','','&amp;amp;amp;laquo; Previous Entries') ?></div>
<div class="alignright"><?php posts_nav_link('','Next Entries &amp;amp;amp;raquo;','') ?></div>
</div>
Then, you will need to put the following code:
<?php else : ?>
Whatever displays between the code above and the code that will be mention later will appear ONLY if the user requested a page that does not exist. (In other words, a 404 error). You can put in your own image, your own message, etc.
At last, put in the following code, and the basic structure of the Loop is basically done:
<?php endif; ?>
Yay! You are now officially done with the boring structure stuff. Now you can have some fun in doing the creative stuff with template tags. In WordPress, the script has offered us a variety of choices of template tags. Some main ones are:
- the_ID(); – The ID of the Blogpost
- the_title(); – The Title of the Blogpost
- the_tags(); – The tags of the Blogpost
- the_author(); – The author of the Blogpost
- the_time(); – The time the Blogpost was published
- the_permalink(); - The permalink to the Blogpost
- the_content(); – Displays the main content
- the_category(); - The category the Blogpost is in
- edit_post_link(); – The link to edit the post (in ACP), only shown if the user has ACP privilege
- comments_popup_link(); – Link to the comments
There are arguments that can be applied to each of the tags. Usually you won’t need to set attributes yourself, except for the_tags();, the_time();, the_category();, the_content();, comments_popup_link();. For more information on using arguments in these functions, please click on the link and refer to the WordPress codex.
You can replace each element in your design with these tags. For example, for the title, you might have this before porting:
<h1 id="152_title-of-the-post_1" ><a href="#" title="Title of the post">Title of the post</a></h1>
Now you might want to replace the elements with tags:
<h1 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?> </a></h1>
We put id in h1 to distinguish each post. You can see that I replaced the link with the_permalink(); and the title with the_title();. You may now have some fun with these tags.. for more tags, you may look up at this Codex Page. After you finish playing with the tags, it should end up something like this:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h1 id="152__1" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<small><?php the_time('l, F jS, Y') ?> by <?php the_author() ?></small>
<div class="content">
<?php the_content('Read the rest of this entry &amp;amp;amp;raquo;'); ?>
</div>
<div class="footer">
<div class="category left">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit'); ?></div>
<div class="comments right"><?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></div>
</div>
<div class="clear"></div>
</div>
<?php endwhile; ?>
Of course, every single design varies. You do not have to follow the exact format.
We are now basically done with index.php. You have put the post content in the first part of the loop, navigation controls after <?php endwhile; ?>, and then the 404 Page error after <?php else : ?>. After that, ends the page with <?php endif; ?>, then <?php get_sidebar(); ?> and <?php get_footer(); ?>.
Moving on… we will now make the sidebar
sidebar.php + functions.php
Perhaps the most important thing for a website to look “awesome” is the sidebar. Here we are going to teach you how to widgetize a sidebar.
First, make sure your sidebar area is widget friendly. Like mentioned before, everything should be organized neatly in lists. Using <ul> to seperate each widget div/”box” and <li> for each item inside an widget. If you do not do so, it will be much more complicated.
Examples for a widget friendly code would be something that looks like this:
<ul> <li> <h2 id="152_category_1" >Category</h2> <ul> <li>-Category 1</li> <li>-Category 2</li> </ul> </li> </ul>
Then, create a file called function.php. and choose the section that suits your design the best (one sidebar or multiple ones)
Widgetizing Designs with One Sidebar
If you have multiple sidebars, please scroll down to the multiple sidebar section.
Now, in your function.php, put in the following code:
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>
Let me explain this piece of code. “before_widget” is about what code should appear before each widget appears, it might be something like <ul>, or like <div class=”sidebar-item”> , “after_widget” would be the code after the widget… might be soemthing like </ul>, or </div>. “before_title” is about the code before the title. You might change it to <span class=”widgettitle”> or something. The same thing happens to after_title.
Then, go to your sidebar.php file (which you should have created while making index.php), copy the following code in the sidebar container (wherever you want the widget to start displaying)
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
You may skip the next part and directly go to “Customizing the Sidebar”
Wigetizing Designs with Multiple Sidebars
If your design contains multiple sidebars, read on. If it doesn’t and you already finished the last part, you may skip this part.
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Fill in your name',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>
Copy the above code for each of the sidebars you have. (Eg. if you have 2 sidebars, copy this code twice) Then, under the name element, replace “Fill in your name” with the name of your sidebar (left sidebar, right sidebar, etc.)
Like I said in the Single sidebar section, “before_widget” is about what code should appear before each widget appears, it might be something like <ul>, or like <div class=”sidebar-item”> , “after_widget” would be the code after the widget… might be soemthing like </ul>, or </div>. “before_title” is about the code before the title. You might change it to <span class=”widgettitle”> or something. The same thing happens to after_title. Notice that you may change the settings for the different sidebars you have.
Then, copy the following code into where you want the widgets to appear in your corresponding sidebars and replace “Fill in your name” with the sidebar names (eg. Rplace “Fill in your name” with “Left Sidebar” and put the code into the left sidebar, etc.):
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Fill in your name") ) : ?>
<?php endif; ?>
After this, you may continue with the next step..
Customizing the Sidebar
Between the two lines we just put in the sidebar last part, you may put default widget items in there so that it doesn’t look empty when no widgets are used. Some of the cool templates include:
- get_categories(); - Displaying all categories in a list
- get_pages(); – Displaying all pages in a list
- is_user_logged_in(); – Check if user is logged in or not. Returns true/false values. Use with if() statements
- get_calendar(); – Displays a calendar
These tags have arguments such as before, after that lets you put in HTML tags to display before and after the widget.
This here is a great post to teach how to put a login form in your sidebar: http://www.wpdesigner.com/2007/07/09/how-to-place-a-login-form-in-the-sidebar/
Semi – Conclusion
Now we have the following files WP-ized: Style.css, Header.php, Footer.php, Index.php and Sidebar.php, the five most important files of the whole theme. Upload the folder with the name of your theme and your files inside (including all the edited files and images) to /wp-content/themes. Then, in your Admin Dashboard, go to Design andn then activate your theme. Do you see a problem? If so, tell us by replying this article and we will try to help you on it.
As of now, only index page would work. We will continue with the other files tomorrow, so stay tuned at TechCube.net! (Yes, it won’t be that complicated tomorrow :P)
Continue reading on here: http://techcube.net/wp-admin/post.php?action=edit&post=332
November 11th, 2008 at 6:48 pm
Hmm. Good post.
November 12th, 2008 at 7:27 am
nice!
November 12th, 2008 at 10:08 am
Hmmm, I am tempted to try this.
November 15th, 2008 at 5:25 pm
I came across. Thank you.
November 18th, 2008 at 12:12 am
I really love to try it out. This is something new
November 22nd, 2008 at 2:26 pm
Nice blog btw
December 11th, 2008 at 7:46 pm
Great article and informativ. I have this bookmarked. Thanks
January 29th, 2009 at 7:22 pm
Clear tutorial, Thanks,
February 2nd, 2009 at 4:16 pm
nice post..
June 18th, 2010 at 6:47 pm
nice,..
this is what i need…
thanks..
July 24th, 2010 at 5:44 pm
Get it done Your self is so a lot simpler whenever you can come across excellent reports similar to this one.
July 26th, 2010 at 6:58 am
Что то Автор почти совсем перестал писать посты и даже админить блог? Может что случилось?
July 26th, 2010 at 6:53 pm
Im obliged for the blog article.Really thank you! Awesome.
July 27th, 2010 at 3:43 am
Random question: I am just starting my blog, but how did you start gaining readership? was it just natural? I mean how did people start finding you?
July 27th, 2010 at 7:50 am
I thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. I am sure my visitors will find that very useful.
July 28th, 2010 at 3:14 am
This can be the great weblog for any person who wishes to learn about this topic. You know a lot its pretty much difficult to argue with you (not that i definitely would want..
.HaHa).
You undoubtedly put a brand new spin over a topic thats been composed about for many years. Excellent things, just wonderful!
July 28th, 2010 at 8:01 am
Grandes cosas aquí.
July 28th, 2010 at 10:54 am
Very nicely said.I discovered your post from Yahoo and enjoyed reading it. Have you been writing for long?Just the other day I recently set up a blog myself and its been a enjoyable process. I??ve met some new people since then but it is tough sometimes! Anyway, many thanks for your post! car dealers used cars
July 28th, 2010 at 11:05 am
Thank you for this blog. Thats all I can say. You most without a doubt have crafted this article into something speciel. You clearly know what you are working on, youve covered so many corners.see you
July 28th, 2010 at 9:57 pm
Read it, and I’ll implement it for sure.
July 29th, 2010 at 4:46 am
Great blog! I dont think Ive seen all of the angles of this theme the way in which youve pointed them out. Youre a accurate star, a rock star man. Youve acquired much to say and know a whole lot about the subject that i imagine you must just teach a class about it..
.HaHa!
July 29th, 2010 at 7:16 am
Great site!!!
July 29th, 2010 at 11:56 am
I like the way you are writing. You are very skillful and idealistic. Keep posting such informative post. Wow, thank you for this post. It works like a charm. I’m sorry to say that I doubted this at first.
July 29th, 2010 at 7:45 pm
You certainly make fine articles I would say. This is the first time I visited your web page and so far I’m impressed with the research you made to make this page amazing. First-rate Job!
July 30th, 2010 at 11:54 am
I wish you in no way stop! This is among the best blogs Ive at any time examine. Youve got some mad skill the following, man. I just desire that you just dont eliminate your design since youre definitely just one from the coolest bloggers in existence. Please continue to keep it up due to the fact the online needs a person like you spreading the word.
July 30th, 2010 at 12:45 pm
I are already surfing on the internet more than three hours these days, but I under no circumstances uncovered any fascinating write-up like yours. It’s very worth sufficient for me. In my opinion, if all webmasters and bloggers manufactured fine content as you did, the web will likely be a lot more practical than truly just before.
July 31st, 2010 at 8:36 am
Enjoyed every bit of your article post.Really thank you! Great.
July 31st, 2010 at 11:56 am
Great articles and content very informative looking forward to reading more.
July 31st, 2010 at 11:58 am
Nice writing. You are on my RSS reader now so I can read more from you down the road.
July 31st, 2010 at 3:29 pm
I really liked your blog post.Thanks Again. Really Great.
July 31st, 2010 at 3:36 pm
Very neat post.Much thanks again. Much obliged.
July 31st, 2010 at 3:44 pm
I cannot thank you enough for the article post.Really thank you! Cool.
July 31st, 2010 at 3:59 pm
Wow, great post.Thanks Again. Great.