As I’ve promised earlier (here and here), I would write an article of how to make a WordPress theme, and I will give my best shot, through this article, to show you the process from a finished template to a finished WordPress theme.
I took the time to remake this old theme project, and make a brand new theme instead. First thing to make clear when making the template, is to think about every single little detail. How do you want comments to look, sidebars, page listing - what about ordered/unordered lists inside posts, headline sizes etc, and prepare a complete stylesheet to take care of all this.
I decided to make 2 html files, one to show the front page listing of posts, and one to show the single view of posts, with comment look. You can see the templates here: single.html - index.html - style.css - bg.jpg.
Table of contents
- CSS
- Splitting up the file
- index.php
- single.php
- comments.php
- The top navigation
- Sidebar and widgets
- Pages, archives etc.
- Summary
- Links
1 - CSS
Rename the CSS file to style.css, open it, and add these lines at the top of the document. These lines are needed in order for WordPress to recognize it as a theme - change the information as you wish.
-
/*
-
Theme Name: Whitespace
-
Theme URI: http://theundersigned.net/
-
Description: Simple 2 column theme with lots of whitespace and a rather commercial look.
-
Version: 1.0
-
Author: The undersigned
-
Author URI: http://theundersigned.net/
-
*/
2 - Splitting up the file
WordPress allows you to split up your theme files into more files. For some this might seem complicated, but actually it will help you a lot in the end. All your templates (single view, page view, front page view etc.) is going to have the same sidebar, header and footer, and only the content will change - so what is actually more logical than make seperate files for each? And why not call them sidebar.php, header.php and footer.php?
To get started out quickly, lets start out with the header.php. This is a standard header with some WordPress template tags in it, and this is how the header looks in almost all WordPress themes. The template tags makes sure that RSS is accesible, grabs the stylesheet etc.
-
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”>
-
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
-
-
<head profile=“http://gmpg.org/xfn/11″>
-
<meta http-equiv=“Content-Type” content=“<?php bloginfo(’html_type’); ?>; charset=<?php bloginfo(’charset’); ?>” />
-
-
<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
-
-
<meta name=“generator” content=“WordPress <?php bloginfo(’version’); ?>” /> <!– leave this for stats –>
-
-
<link rel=“stylesheet” href=“<?php bloginfo(’stylesheet_url’); ?>” type=“text/css” media=“screen” />
-
<link rel=“alternate” type=“application/rss+xml” title=“RSS 2.0″ href=“<?php bloginfo(’rss2_url’); ?>” />
-
<link rel=“alternate” type=“text/xml” title=“RSS .92″ href=“<?php bloginfo(’rss_url’); ?>” />
-
<link rel=“alternate” type=“application/atom+xml” title=“Atom 0.3″ href=“<?php bloginfo(’atom_url’); ?>” />
-
<link rel=“pingback” href=“<?php bloginfo(’pingback_url’); ?>” />
-
-
<?php wp_get_archives(‘type=monthly&format=link’); ?>
-
-
<?php wp_head(); ?>
-
</head>
-
<body>
All we want to add here is all the code in our html file from body and down to where the content starts. That would be this:
The footer.php file is just as easy, just make a file with the footer code from the html file - from the end of the content, and the rest. The thing to notice here, is that I’ve used a template tag to include the sidebar file.
-
</div>
-
<?php get_sidebar(); ?>
-
<div id=“footer”><p>Design © 2006 by <a href=“”>the undersigned</a></p></div>
-
-
</body>
-
</html>
The sidebar.php is just the same, copy all the sidebar html code into sidebar.php (which we will modify later to support widgets).
The last thing is the content file - but this will change, so the name of this file defines what type of page it includes. index.php is the front page (and all other pages if no specific files for them exists), single.php is for single post view, page.php is for page view etc. We will start out with making the index.php file.
3 - index.php
As all other sites, we want to include the content code in this file. I have stripped down the code from the original index.html source, and added it. I have added include tags for the footer and header, where the code were before as well:
-
<?php get_header(); ?>
-
<div class=“post”>
-
<h2 class=“posttitle”><a href=“”>Post title</a><span>post date</span></h2>
-
<p>Content</p>
-
<p class=“postinfo”>Date | Categories | comments</p>
-
</div>
-
<div class=“post”><p><a href=“”>« Previous Page</a> — <a href="">Next Page »</a></p></div>
-
<?php get_footer(); ?>
We want to add some template tags to this. First of all, we need »The loop«, which will make sure that the post snippet appears again and again on the site. After the loop we copy the post look and creates the message that will be shown when no posts are found. The other template tags are all descriped in the WordPress codex.
-
<?php get_header(); ?>
-
-
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
-
-
<div class=“post”>
-
<h2 class=“posttitle”><a href=“<?php the_permalink() ?>”><?php the_title(); ?></a><span><?php the_time(‘F j’); ?></span></h2>
-
<?php the_content(); ?>
-
<p class=“postinfo”><?php the_time(‘F j, Y’); ?> at <?php the_time(‘g:i a’); ?> | <?php the_category(‘, ‘); ?> | <?php comments_number(‘No comment’, ‘1 comment’, ‘% comments’); ?></p>
-
</div>
-
-
<?php endwhile; else: ?>
-
-
<div class=“post”>
-
<h2 class=“posttitle”>Sorry, no posts were found!</h2>
-
</div>
-
-
<?php endif; ?>
-
-
<div class=“post”><p><?php posts_nav_link(); ?></p></div>
-
-
<?php get_footer(); ?>
Try to upload the theme now and watch your blog - you have successfully made a front page listen, and notice that clicking a post will use the same file (index.php) to show the single post, since no single.php exists.
4 - single.php
The next step now, is to create the single.php file, to define how you want a single post to look. This file will need a comments.php file, that defines how the comments look, but lets start with making the file. This file needs a loop as well, although it will never show more than 1 post. Like index.html i have cleaned up the source and added the template tags to the file, like the index.php. Note that the only things change are, that there is no link on the post title, the post information is removed, the post navigation is removed and a template tag to call the comments.php template file is added.
-
<?php get_header(); ?>
-
-
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
-
-
<div class=“post”>
-
<h2 class=“posttitle”><?php the_title(); ?><span><?php the_time(‘F j’); ?></span></h2>
-
<?php the_content(); ?>
-
-
<?php comments_template(); ?>
-
-
</div>
-
-
<?php endwhile; else: ?>
-
-
<div class=“post”>
-
<h2 class=“posttitle”>Sorry, no posts were found!</h2>
-
</div>
-
-
<?php endif; ?>
-
-
<?php get_footer(); ?>
The most important thing about the comments_template template tag is, that you have to put it inside the loop. Otherwise commenting won’t work!
5 - comments.php
We want our comment list and form to look like this. Again, I’ve cleaned up the code, the form is »stolen« from the default template.
Let us add the required codes for the comment system to work:
-
<?php // Do not delete these lines
-
-
if ($_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password) { // and it doesn’t match the cookie
-
?>
-
-
<p class=“nocomments”>This post is password protected. Enter the password to view comments.<p>
-
-
<?php
-
return;
-
}
-
}
-
?>
-
-
<h2 class=“posttitle”><?php comments_number(__(‘No comments’), __(‘1 comment’), __(‘% comments’)); ?></h2>
-
-
<?php if ($comments) : ?>
-
-
<ol class=“commentlist”>
-
-
<?php foreach ($comments as $comment) : ?>
-
-
<li id=“comment-<?php comment_ID() ?>”>
-
<p class=“commentmetadata”><span class=“commentname”><?php comment_author_link() ?> wrote:</span><br />
-
<a href=“#comment-<?php comment_ID() ?>”><?php comment_date() ?> at <?php comment_time() ?></a></p>
-
<?php comment_text() ?>
-
</li>
-
-
<?php endforeach; ?>
-
-
<li class=“commentlistend”> </li>
-
</ol>
-
-
<?php endif; ?>
-
-
<?php if ( comments_open() ) : ?>
-
-
<h2 class=“posttitle”>Leave a comment</h2>
-
-
<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
-
<p>You must be <a href=“<?php echo get_option(’siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>”>logged in</a> to post a comment.</p>
-
<?php else : ?>
-
-
<form action=“<?php echo get_option(’siteurl’); ?>/wp-comments-post.php” method=“post” id=“commentform”>
-
-
<?php if ( $user_ID ) : ?>
-
-
<p>Logged in as <a href=“<?php echo get_option(’siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>. <a href=“<?php echo get_option(’siteurl’); ?>/wp-login.php?action=logout” title=“<?php _e(’Log out of this account’) ?>”>Logout »</a></p>
-
-
<?php else : ?>
-
-
<p><input type=“text” name=“author” id=“author” value=“<?php echo $comment_author; ?>” size=“22″ tabindex=“1″ />
-
<label for=“author”><small>Name <?php if ($req) _e(‘(required)’); ?></small></label></p>
-
-
<p><input type=“text” name=“email” id=“email” value=“<?php echo $comment_author_email; ?>” size=“22″ tabindex=“2″ />
-
<label for=“email”><small>Mail (will not be published) <?php if ($req) _e(‘(required)’); ?></small></label></p>
-
-
<p><input type=“text” name=“url” id=“url” value=“<?php echo $comment_author_url; ?>” size=“22″ tabindex=“3″ />
-
<label for=“url”><small>Website</small></label></p>
-
-
<?php endif; ?>
-
-
<p><textarea name=“comment” id=“comment” cols=“100%” rows=“10″ tabindex=“4″></textarea></p>
-
-
<p><input name=“submit” type=“submit” id=“submit” tabindex=“5″ value=“Submit Comment” />
-
<input type=“hidden” name=“comment_post_ID” value=“<?php echo $id; ?>” />
-
</p>
-
<?php do_action(‘comment_form’, $post->ID); ?>
-
-
</form>
-
-
<?php endif; endif; ?>
-
</p>
-
</form>
This might look a bit complicated, but take your time, look through the WordPress codex and see how and why the tags and code are used.
6 - The top navigation
Now, back to the top navigation. We added the code from our original html file to the header.php file, but we want those buttons to be autogenerated. I have taken the snippet and manually added a home tab, and added a template tag that lists all pages. The class »current_page_item« is added by the template tag automatically, to the active tab, but not on the extra tab we create, the home tab. This is why we want to use a conditional tag (read this and ), to add the class, if the current page showed, is the home/front page.
-
<div id=“navigation”>
-
<ul>
-
<li <?php if ( is_home() ) { ?> class=“current_page_item”<?php } ?>><a href=“<?php bloginfo(’home’); ?>”>Home</a></li>
-
<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?>
-
</ul>
-
</div>
7 - Sidebar and widgets
The sidebar we made is still just static, so we want to edit it, and make it widget ready. First of all we must decide which blocks we want there, if widgets isn’t available, I’ll go for search, archives, categories, blogroll and meta. We have the basic markup done, so again, here is the sidebar.php source, cleaned up, and with template tags.
-
<div id=“sidebar”>
-
<div>
-
<h3>Search</h3>
-
<form method=“get” id=“searchform” action=“<?php echo $_SERVER[’PHP_SELF’]; ?>”>
-
<div id=“Search”><input type=“text” value=“<?php echo wp_specialchars($s, 1); ?>” name=“s” id=“s” /></div>
-
</form>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Archives</h3>
-
<ul>
-
<?php wp_get_archives(‘type=monthly’); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Categories</h3>
-
<ul>
-
?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Blogroll</h3>
-
<ul>
-
<?php get_links(-1, ‘<li>’, ‘</li>’, ”, TRUE, ”, FALSE); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Meta</h3>
-
<ul>
-
<li><?php wp_loginout(); ?></li>
-
<li><a href=“http://validator.w3.org/check/referer” title=“This page validates as XHTML 1.0 Strict”>Valid <abbr title=“eXtensible HyperText Markup Language”>XHTML</abbr></a></li>
-
<li><a href=“http://gmpg.org/xfn/”><abbr title=“XHTML Friends Network”>XFN</abbr></a></li>
-
<li><a href=“http://wordpress.org/” title=“Powered by WordPress, state-of-the-art semantic personal publishing platform.”>WordPress</a></li>
-
<?php wp_meta(); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
</div>
Now we have decided what the sidebar should contain, but to widget-enable it we will have to do some more. The PHP snippet is a kind of a conditional tag, it checks if widgets is enabled, and if it isnt, it will output the code below, untill the endif. Read a longer explanation about widget-integration here.
-
<div id=“sidebar”>
-
<div>
-
<h3>Search</h3>
-
<form method=“get” id=“searchform” action=“<?php echo $_SERVER[’PHP_SELF’]; ?>”>
-
<div id=“Search”><input type=“text” value=“<?php echo wp_specialchars($s, 1); ?>” name=“s” id=“s” /></div>
-
</form>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Archives</h3>
-
<ul>
-
<?php wp_get_archives(‘type=monthly’); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Categories</h3>
-
<ul>
-
<?php wp_list_cats(’sort_column=name&optioncount=1&hierarchical=0′); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Blogroll</h3>
-
<ul>
-
<?php get_links(-1, ‘<li>’, ‘</li>’, ”, TRUE, ”, FALSE); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
-
<div>
-
<h3>Meta</h3>
-
<ul>
-
<li><?php wp_loginout(); ?></li>
-
<li><a href=“http://validator.w3.org/check/referer” title=“This page validates as XHTML 1.0 Strict”>Valid <abbr title=“eXtensible HyperText Markup Language”>XHTML</abbr></a></li>
-
<li><a href=“http://gmpg.org/xfn/”><abbr title=“XHTML Friends Network”>XFN</abbr></a></li>
-
<li><a href=“http://wordpress.org/” title=“Powered by WordPress, state-of-the-art semantic personal publishing platform.”>WordPress</a></li>
-
<?php wp_meta(); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
<?php endif; ?>
-
</div>
One more thing to do, in order to make themes work, is to make a functions.php file, here is the code. First PHP snippet is to let WordPress know the theme supports widgets and defines how we want our widget-markup - we want to make them look like they do if widgets isn’t enabled. Second PHP snippet creates a new search-widget, so does PHP snippet number three and four - a new links widget and a new page widget. The fifth PHP snippet makes sure that the real search, links and blogroll widgets are replaced by the ones we have created. Please make sure you dont have any empty lines in the beginning or end of the file!
-
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s">’,
-
‘after_widget’ => ‘<p class="spacer"> </p></div>’,
-
‘before_title’ => ‘<h3>’,
-
‘after_title’ => ‘</h3>’,
-
));
-
-
function widget_whitespace_search() { ?>
-
<div>
-
<h3>Search</h3>
-
<form method=“get” id=“searchform” action=“<?php echo $_SERVER[’PHP_SELF’]; ?>”>
-
<div id=“Search”><input type=“text” value=“<?php echo wp_specialchars($s, 1); ?>” name=“s” id=“s” /></div>
-
</form>
-
<p class=“spacer”> </p>
-
</div>
-
<?php }
-
-
function widget_whitespace_links() { ?>
-
<div>
-
<h3>Blogroll</h3>
-
<ul>
-
<?php get_links(-1, ‘<li>’, ‘</li>’, ”, TRUE, ”, FALSE); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
<?php }
-
-
function widget_whitespace_pages() { ?>
-
<div>
-
<h3>Pages</h3>
-
<ul>
-
<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?>
-
</ul>
-
<p class=“spacer”> </p>
-
</div>
-
<?php }
-
-
register_sidebar_widget(__(‘Search’), ‘widget_whitespace_search’);
-
register_sidebar_widget(__(‘Links’), ‘widget_whitespace_links’);
-
register_sidebar_widget(__(‘Pages’), ‘widget_whitespace_pages’); } ?>
8 - pages, archives etc.
We now have a successfully running theme, but we still need some templates done. We have created the front page look, and the single post look. The rest of the pages will now be shown as index.php. If you want the other type of pages to be shown differently, you can create these template files and modify them - it is always important to have the loop on each content template file.
The available types of pages are: index.php, home.php, single.php, page.php, category.php, author.php, date.php, archive.php, search.php and 404.php.
I find that at least index.php, single.php, page.php and 404.php should be made. If you want to list search results, archives etc. differently than the index, then go ahead.
Your theme should now be done - test it through, grab a screenshot of it, and zip it all up.
Summary
The most important things when designing a theme for WordPress, in the xhtml/css coding phase, is that you remember to think about all details, and how the theme system works. Make sure that lists, images, blockquotes etc will look good in the posts and comments and while remember that comment- and postsnippets should be able to be repeated after each other.
You can test the final result out here, and to download a packaged version with these exact files plus a page.php and a 404.php, go here.
Links
Codex: Template tags
Codex: The loop
Codex: Theme development
Guide: Conditional tags
Guide: Conditional tags - 2
Guide: Change look of every second post
Guide: Most commented
Guide: Widget integration
751 comments
The undersigned Says:
Hope this can be useful to somebody :)
03/05-2006 | 20:35
Joshua Kendall Says:
Wow…now that’s good timing. I just downloaded WP and was about to create a theme. This should help a lot once I get my template done.
03/05-2006 | 22:04
From XHTML/CSS to WordPress · Style Grind Says:
[…] The Undersigned has writted a detailed article for creating your own theme in wordpress using your XHTML and CSS files. They explain the inner workings on how the many theme files for wordpress all work and come together. […]
04/05-2006 | 13:36
personal rambelings of chadvanwalsum » From XHTML/CSS to WordPress Says:
[…] read more | digg story […]
04/05-2006 | 14:10
Betaflow.com » How to Make a Wordpress Theme Says:
[…] The Undersigned has posted a tutorial showing how to take an XHTML/CSS template and turn it into a Wordpress theme. This is an article I have been meaning to write for a long time myself, I just never got around to it. […]
04/05-2006 | 14:11
» From XHTML/CSS to WordPress Says:
[…] link […]
04/05-2006 | 14:14
numa’s website » Blog Archive » Wordpress et le CSS Says:
[…] Voila le lien vers le tuto. […]
04/05-2006 | 14:22
John Smith Says:
Dude, your layout assumes some width of screen (900px?) that messes up readibility seriously if you don’t meet that minimum assumption. Good layout design should fail gracefully if people don’t meet your width expectations — instead your article becomes unreadable.
Never make assumptions about user behavior and don’t ask the user to maximize their web browser just to read your site.
Using Firefox 1.5.0.2.
04/05-2006 | 15:14
From XHTML/CSS to WordPress at innerangst.net Says:
[…] read more | digg story Filed under: Uncategorized | […]
04/05-2006 | 15:23
Baz Says:
I’ve really needed something like this. I’ve been a tad terrified of Word Press.
Thank you!
04/05-2006 | 16:12
Keith Says:
This is an excellent piece of work to share. I hate to say that Wordpress is starting to dominate the blogging market. Though it’s free, but I just hate to see a monopoly of one type.
The tutorial is indeed very very helpful to let users modify the Wordpress default theme. Good work!
04/05-2006 | 16:44
test Says:
wow
04/05-2006 | 16:55
test Says:
no form validation and writing an article on coding ?
04/05-2006 | 16:56
ursuper | blog » Wordpress Theming Guide Says:
[…] read more | digg story […]
04/05-2006 | 17:07
The undersigned Says:
To the »test« person.. Form is checked somewhat, maybe i should make it check that the actual given URL exists and is alive?
04/05-2006 | 17:09
apakuni.com · Clear, Comprehensive WordPress Theme Tutorial Says:
[…] Fellow WP users, check out this great WordPress Theme Tutorial. It is as clear and concise as you will find. If you like this article, be sure to digg it. […]
04/05-2006 | 17:47
: tokitamaweblog : » links for 2006-05-04 Says:
[…] The undersigned � Blog Archive � From XHTML/CSS to WordPress (tags: CSS design wordpress tutorial) […]
04/05-2006 | 18:18
1 juni Omkatdag » TibsBits::NL Says:
[…] Update: mocht je WordPress gebruiken en je site willen omkatten (wat een woord) heb je hier wellicht ook nog wat aan. […]
04/05-2006 | 18:33
Making your own Wordpress theme from X/HTML at Bartys Blog Says:
[…] Making your own Wordpress Theme […]
04/05-2006 | 19:01
AJ Says:
I would take a look at your template. One thing you forgot to add was the piece where you could actually have comments on that template. I tried it out straight from your files, and there’s no way someone could leave a comment. What’s the point in bloging if you can’t leave comments?
04/05-2006 | 19:14
The undersigned Says:
AJ> The comment section is added here, and as you can see on the single.html template, there is made space for the comments. I’m not sure I fully understand what you mean?
04/05-2006 | 21:59
Marko Says:
I will try to follow this tut. Will let you know if it works :)
05/05-2006 | 1:05
links for 2006-05-05 at ebyblog Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress (tags: wordpress howto webdev) […]
05/05-2006 | 7:22
The undersigned » Blog Archive » A few newsflashes Says:
[…] My recently posted article, From XHTML/CSS to WordPress, got on the front page of digg which increased the traffic heavily - over 6000 extra unique visitors. Thanks a lot, hope some will stick around. […]
05/05-2006 | 11:05
Stupid Wordpress Tricks » Creating a Wordpress Theme From XHTML / CSS Says:
[…] This is a detailed tutorial on how to convert XHTML and CSS files into a Wordpress theme, from theundersigned.net. […]
05/05-2006 | 12:27
\_o< Gruik ! » Blog Archive » Links Of The Day Says:
[…] http://theundersigned.net/2006/05/from-xhtmlcss-to-wordpress/ : Comment faire un modèle (template) pour Wordpress en utilisant XHTML et CSS […]
05/05-2006 | 12:48
seanmcdonald.ca » Blog Archive » links for 2006-05-05 Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress (tags: wordpress css themes howto resources) […]
05/05-2006 | 15:31
Akkam’s Razor Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress (tags: wordpress css design theme xhtml howto tutorial) […]
05/05-2006 | 17:13
Futile » Blog Archive » links for 2006-05-05 Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress tips on DIY wordpress page design. Stay tuned because I’ll have to make this joint rock’n dawg. (tags: wordpress css howto design tutorial xhtml) […]
05/05-2006 | 23:26
zean.no-ip.info » From XHTML/CSS to WordPress Says:
[…] The ultimate guide to WordPress theming. This shows the whole process of how to turn a (x)HTML site into a WordPress theme. […]
05/05-2006 | 23:33
Designer4Freedom Says:
“Never make assumptions about user behavior and don’t ask the user to maximize their web browser just to read your site.”
Oh please shaddup…
Get off the cross, we need to wood to beat you with.
Thank you SO much for this. I’ve been looking for books, sites, etc. to do just this. It it most appreciated. 900 pixles wide and all.
Cheers!
06/05-2006 | 3:26
links for 2006-05-06 at leron’s crib Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress i really need to update my site… (tags: blog css wordpress template layout html design) […]
06/05-2006 | 4:19
Musings by Steve Miller » Blog Archive » links for 2006-05-06 Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress (tags: wordpress design tutorial css howto theme xhtml) […]
06/05-2006 | 5:19
FidoGesiwuj Says:
Hmmm, I posted something like this on the Wordpress forum. Meh, yours is better anyway.
06/05-2006 | 9:26
Tom Says:
Great work.
I’ve created my own theme in wordpress for my site but this guide is definitely better.
06/05-2006 | 13:04
lepard.org » Today’s del.icio.us bookmarks Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress – Tagged as: css theme tutorial wordpress […]
06/05-2006 | 14:48
» The undersigned: From XHTML/CSS to WordPress « marksdigital Says:
[…] Here’s a nice little howto on making a WordPress theme from a preexisting page design, from theundersigned: From XHTML/CSS to WordPress […]
07/05-2006 | 12:47
Rue Plumet » Interesting Sites For This Week Says:
[…] From XHTML/CSS to WordPress Tagged as: blog css design howto reference web […]
08/05-2006 | 3:43
| verdanant espados | » Blog Archive » I’m back! Says:
[…] Hello! Feeling a bit.. inspired by the (quite) recent CSS Reboot. So i’m just here and trying to get a hang of Wordpress layouts, and kind of learning a little PHP along the way, with the help of the undersigned. It’s a good thing. […]
08/05-2006 | 15:35
The Daily Jeff » Blog Archive » The undersigned » Blog Archive » From XHTML/CSS to WordPress Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress The undersigned » Blog Archive » From XHTML/CSS to WordPress: […]
08/05-2006 | 18:06
Repeating Myself » Blog Archive » Oh, Happy Days! Says:
[…] Finally a WordPress theme creation tutorial I can follow! I […]
10/05-2006 | 18:38
cotidiano delirante » Amanhã talvez Says:
[…] Talvez seja a proximidade do aniversário de 5 anos deste blog ou então talvez não seja por nenhum outro motivo em especial. O lance é que estou pensando em mudar o layout novamente. Ou melhor, mudar não, alterar o tema novamente. Fiz esse aÃ, clique na imagem pra ver em tamanho maior, mas achei que ainda falta alguma coisa. Tem muito espaço branco em volta e isso realmente me incomoda. Tem um tutorial bacana no undersigned sobre como criar temas para wordpress a partir de um arquivo em xhtml e css normais. Parece ser fácil, pelo que li não rola nada de php. Enfim, é isso aÃ. […]
16/05-2006 | 19:23
Daniel Says:
Wow! Thanks soooooo much! :D
19/05-2006 | 3:28
Metropolis Says:
[…] De XHTML/CSS a Wordpress. GuÃa para convertir tus diseños web en correctas plantillas para Wordpress! (Via) […]
23/05-2006 | 8:39
Metropolis Says:
[…] Tengo un amiguete que siempre me pregunta… “pero qué es exactamente el XHTML?” Le he dado dos o tres respuestas pero parece que sigue sin hacerse a la idea… espero que este gran manual le aclare las ideas! Una vez tenga claro esto y quiera convertir sus diseños a plantillas para Wordpress, aquà tiene cómo! (Via) […]
23/05-2006 | 9:01
The Ted Lee Experiment » Blog Archive » I dub thee, “Blue Swirl”… Says:
[…] Of note, this tutorial was extremely helpful. If you are interested in creating your own WordPress theme, I would suggest giving it a look. […]
23/05-2006 | 19:28
Sohail Mirza Says:
Hey, this is a great series of blog posts, but I just wish the blog were visually more readable. The green on grey is a little strange to say the least. But what could really use some work is the code blocks!
But, again, great articles.
23/05-2006 | 20:26
links for 2006-05-29 — 7 seconden — Cuiusvis hominis est errare Says:
[…] The undersigned » Blog Archive » From XHTML/CSS to WordPress Handig. (tags: wordpress tutorial theme) […]
29/05-2006 | 1:18
Tema hakkında - ozirus’ Says:
[…] Haziran caliskanfurkan06:21 pmAdd comment Yeni host dedik, belki dedim beraberinde tema deÄŸiÅŸikliÄŸine de giderim ama olmadı. Alexifiedâ„¢ tam manasıyla aradığım tema -tabii üşenmeyip sıfırdan kendiminkini yapıncaya kadar - […]
02/06-2006 | 16:18
burnz’s blog @ wordpress.com » From XHTML/CSS to WordPress Says:
[…] Link: From XHTML/CSS to WordPress […]
06/06-2006 | 21:00
Buzzsonic.com » Blog Archive » Word Press Update Weekend Says:
[…] How to Make a Word Press Theme (TheUndersigned.net) […]
17/06-2006 | 12:24
Why business blogs are important | The undersigned Says:
[…] Guides Installing WordPress WordPress search engine optimisation Convert your current design to WordPress HOW TO: Start Blogging HOW TO: Boost Your Blog Traffic […]
18/06-2006 | 17:04
Por qué son importantes los blogs empresariales at Tronfi.com - Por que yo lo valgo. Says:
[…] Guias Instalando WordPress Optimización en buscadores con Wordpress Convierte tu diseño actual a Wordpress HOW TO: Comienza a blogear HOW TO: Multiplica el tráfico en tu blog […]
20/06-2006 | 14:36
Steven Says:
This tutorial definitely helped me with my site - thanks for writing it up! Using this as I guide I made my theme look pretty good.
21/06-2006 | 5:10
Human Powered .net » Blog Archive » Dawning a New Coat Says:
[…] P.S. Many thanks to The Undersigned for their article From XHTML/CSS to Wordpress. Commercial Break […]
22/06-2006 | 19:19
Sanjeev.NET » Blog Archive » links for 2006-06-24 Says:
[…] From XHTML/CSS to WordPress | The undersigned (tags: wordpress articles 2print) […]
24/06-2006 | 5:15
otro blog más » Unos cuantos de desarrollo web (XCIII) Says:
[…] Finalmente, uno sobre WordPress: un tutorial para crear una plantilla y otro sobre ‘blogging’ para los que quieran practicar su inglés: Robert Scoble y Shel Israel hablando de ‘blogging’ corporativo. […]
05/07-2006 | 15:48
chickenskinners.com » Blog Archive » From XHTML/CSS to WordPress Says:
[…] read more | digg story No Tags […]
07/07-2006 | 13:37
iBlog » Blog Archive » Table Free Says:
[…] The Undersigned: From XHTML/CSS to WordPress […]
08/07-2006 | 11:13
Glenn Brown » Blog Archive » Upgraded to Wordpress 2.0.3 Says:
[…] Followed the excellent documentation to upgrade to Wordpress 2 on there site. Going to use the default theme for the time being. I will be dabbling a little bit into CSS to make my own custom theme. Paul sent me a link that shows how to build out your own wordpress themes pretty simply. Here it is for those inquiring minds that want it. […]
19/07-2006 | 0:52
Glenn Says:
Very informative! yeah just found this site by search at yahoo for the keywords how to make a wordpress template.. am a freelance web designer, jst want to add a wordpress template design service, but i dunno how to edit a wordpress template.
Thanks a lot! this site helps me a lot
21/07-2006 | 14:33
doDesign » Blog Archive » And we’re up! Says:
[…] After hours of work, I finially got the design coded and working! This was pretty hard to do because of one reason: I had no clue how to make a Wordpress template. The design was the easy part. The coding was confusing, but I finially got it working. I only got it dont thanks to a tutorial on how to convert XHTML/CSS to Wordpress. […]
03/08-2006 | 16:45
musings from a muddled mind… » Blog Archive » themes… Says:
[…] I just had a look at some of the WordPress themes at http://themes.wordpress.net/ and selected a few to upload. I’m currently using Fluidityls by Kaushal Sheth. It’s not bad in terms of layout, but not really my favourite colour scheme. What I really want to do is to customise the look to my own liking. Here’s an article on how to do that very thing. It looks complicated to me at the moment. There seems to be quite a lot of editing to be done, and it looks very easy to muck it up!! […]
13/08-2006 | 18:59
Ryan Cheung Says:
Truly remarkable. Thanks so much for this, the steps are flawless and executed successfully for me.
15/08-2006 | 13:35
david Says:
Very intere