WordPress Theme

http://www.happyblogdesign.com/ —- a very good list—-only very professional theme – no junk

http://ericulous.com/ — very nice – by designer

http://jigsaw.w3.org/css-validator/ – also display the CSS files

http://www.yvoschaap.com/wpthemegen/

http://builder.yaml.de/ —- awesome need to have to build site

http://wordpress-designers.com/ —- very nice profession theme for sale

http://outlawdesignblog.com/2008/100-premium-wordpress-themes/ — 100 premium theme listing

http://wpforsale.com/

Before and After

http://www.wpzoom.com/design/creative-examples-of-wordpress-themes-modifications/

http://scribblescratch.com/themes2/

http://scribblescratch.com/themes3/

http://scribblescratch.com/themes4/

http://sndbx.org/

http://www.plaintxt.org/themes/

Themes

These themes below work with WordPress 2.0+ and are free to use, modify, destory, etc., with the hopes that my original design credit will remain. If you like my themes, and if they perhaps make your life just a little bit nicer, please consider donating.

Barthelme

My favorite theme: two-column with an interesting approach to the fluid layout. Terrific for a vlog or any other blog that needs to be content-centered. Features a thorough theme options page within the WordPress admin.

blog.txt

An elastic, two-column layout that is minimal: less than 300 lines of CSS. Perfect for customizing, the theme options menu for blog.txt includes a feature for easily using it like a CMS.

plaintxtBlog

A fluid, three-column layout with minimal—though dynamic—sidebar content. Great to adapt for use as a CMS with WordPress. Features built-in recent comments and a “summary” home page.

Sandbox

The Sandbox theme is made powerful with rich semantic markup and its class-generating functions. It is the product of a collaboration between Andy Skelton and myself. And we’re both quite pleased.

Simplr

Simplr is the theme that I always wanted: single-column, content-centered, and with an elastic layout. Features built-in recent comments and breadcrumbs when navigating through archives, pages, and posts.

veryplaintxt

My first theme and then original very plain text theme: two-column, fluid layout with a newspaper-ish feel to it. Its solid layout and thoughtful design elements make this more than “plain.”

http://weblogtoolscollection.com/archives/category/wordpress-templates-wordpress-skins-wordpress-themes/

http://mindfaucet.com/comicpress/ — very nice – very nice

http://www.wpthemedesigner.com/category/free-themes/ — by the designer – very nice

http://www.rotheblog.com/arcade/wordpress-arcade/atari-command-free-wordpress-theme/ — awesome

http://curtishenson.com/checkmate-a-free-wordpress-theme/

http://forums.digitalpoint.com/forumdisplay.php?s=bc840dca9cdbf23e5a2f4512663525ed&f=81 — auction theme site

http://www.mitchelaneous.com/2007/11/09/37-wordpress-theme-databases-and-blogs/

http://www.wpzoom.com/wordpress-themes-sets/45-free-premium-wordpress-themes-with-magazine-or-grid-layouts/

http://www.wpzoom.com/design/10-wordpress-themes-designed-for-photo-galleries/

http://www.premiumwp.com/

http://www.wpzoom.com/inspiration/20-sites-to-find-great-wordpress-themes/

http://www.themeswiki.org/Developing_WordPress_Themes — very nice

http://www.presswordthemes.com/

http://wpsalon.com/

http://www.smashingmagazine.com/2008/01/08/100-excellent-free-high-quality-wordpress-themes/

http://www.v7n.com/forums/templates-themes/
http://forums.digitalpoint.com/
http://www.fresheezy.com/
http://www.wpthemez.com/
http://www.ithemes.org/
http://www.bgthemes.com/
http://www.osskins.com/main/
http://www.welovewp.com/
http://www.wordpress.pro/
http://www.foxtheme.com/index.php
http://www.themes-wp.com/
http://www.wpthemesarchive.com/
http://www.wpgarden.com/
http://www.wthemes.com
http://www.webfrap.com/
http://www.xhtmlvalid.com/
http://www.freewordpressthemes.com/
http://www.themesbase.com/
http://themes.wordpress.net/
http://www.freewordpressthemes.com/
http://www.themebot.com/
http://www.wpskins.org/
http://www.eblogtemplates.com/
http://www.wpsnap.com/
http://wwwbloggingthemes.com/
http://www.allmythemes.com/
http://wpflx.com/themes/
http://www.mygreencorner.com/
http://weblogtoolscollection.com/
http://www.johntp.com/
http://www.wordpressthemebase.com/
http://cp.blogflux.com/index.php
http://www.thatsprofound.com/
http://blog.lunarpages.com/
http://www.satinder.net/
http://www.templatepanic.com/
http://themes.iwebnet.org/
http://www.estetica-design-forum.com/general-web-design-forum/
http://www.hotwordpressthemes.com/
http://www.demonthemes.co.uk/
http://www.premiumwp.com/
http://www.stcfx.com/
http://www.blogstheme.com/
http://wpthemes.bloggeraz.com/
http://www.abctemplates.net/
http://www.wpskins.org/
http://wpthemesfree.com/
http://www.talkdev.com/
http://www.css-chat.com/
http://www.templates-free.com/
http://www.talktheme.com/
http://www.sponsoredtemplates.com/index.php
http://www.sushidating.com/
http://www.wpsalon.com/
http://www.themereleases.com/
http://www.templateforfree.net/
http://www.freewebtemplates.com/
http://free-template-design.com/
http://wordpress-themes.chromaticsites.com/
http://www.themewp.com/
http://www.bestwpthemez.com/
http://www.wpthemesarchive.com/
http://www.blogshoster.com/
http://www.looppress.com/

http://www.blogperfume.com/category/wordpress-theme/

http://www.simplethemes.net/

http://hanep.org/wordpress-theme/ — very nice need to download

http://www.wpelements.com/tag/themes/

http://www.wordpressthemebase.com/

http://www.wp-magazine.se/ – nice advance theme

http://www.freewebtemplates.com/template.php?id=52

http://www.nuviotemplates.com/ — css and wordpress theme- wordpress theme coded from themelab

taken from http://ericulous.com/2008/01/07/top-8-wordpress-theme-directories/

Top 8 Wordpress Theme Directories

January 7th, 2008 Wordpress

List is sorted by Google PageRank. Should be a useful reference for Wordpress theme authors on where to share their masterpiece. And theme shoppers should go where theme authors go

wpThemesFree (PR6)
Collection: 1870 themes
Submission: Fill in form (No registration required)
Approval: Manual review
Link Juice: DoFollow
Note: theme zip file hosted by wpThemesFree, author unable to update themselves

Free Wordpress Themes (PR5)
Collection: 1182 themes
Submission: Register and fill in form
Approval: Auto approve
Link Juice: No juice, 302 redirects
Note: 1) theme zip file hosted by freewordpressthemes, author ABLE to update themselves, 2) No link juice but gallery is run by Splash Press Media, whose network includes Performancing, The Blog Herald and more.

Fresheezy (PR5)
Collection: 241 themes
Submission: Fill in form (No registration required)
Approval: Manual review
Link Juice: DoFollow

wpSnap
wpSnap (PR5)
Collection: 148 themes
Submission: Register and write post in Wordpress
Approval: Manual review
Link Juice:: Selective NoFollow?

Weblog Tools Collection (PR4)
Collection: Undeterminable
Submission: Register and post in forum
Approval: Manual review
Link Juice: DoFollow

Themes-WP (PR4)
Collection: 796 themes
Submission: Register and fill in form
Approval: Manual review
Link Juice: DoFollow
Note: theme zip file hosted by Themes-WP, author unable to update themselves

Kate Theme Viewer
Kate’s Theme Viewer (PR4)
Collection: 617 themes
Submission: Register and fill in form
Approval: Manual review
Link Juice: DoFollow
Note: theme zip file hosted by Kate, author unable to update themselves

Themespack (PR4)
Collection: 129 themes
Submission: Register and write post in Wordpress
Approval: Manual review
Link Juice: DoFollow

http://www.cre8d-design.com/blog/2007/01/01/useful-resources-for-creating-a-wordpress-theme/

http://codex.wordpress.org/Theme_Development

Useful resources for creating a Wordpress theme

January 1, 2007

To kick off my blog for 2007, I am going to write a series of posts for people wanting to know how to create a Wordpress theme. Here’s some resources I’ve found useful for putting one together:

Graphic design:
- Useful to have: Photoshop/Fireworks or the like to create your graphics
- For inspiration: sites like Netdiver, Design Melt Down, CSS Beauty, Unmatched Style etc can help sometimes.
- Color scheme ideas: Colorschemer, Daily Color Scheme and Flickr (photos are a brilliant source for color combinations). Flip through your favourite magazines (I love looking through my How Magazines and books for ideas. Look at how you’ve designed your house/bedroom/office – what color combinations do you like?
- Fonts: DaFont for free fonts and Linotype for purchasing professional fonts.
- Images: SXC for free photos and iStockPhoto for inexpensive illustrations and photos.
XHTML/CSS templating:
- W3Schools for learning or for quick reference.
- Firefox web developer toolbar – essential for checking and testing your code. Great for live changing of your CSS.
- A text editor like Notepad++ to write your code.
- Browser Shots – for testing your design in different browsers
- For reference: Listamatic, Layoutomatic, Practical CSS and A List Apart in general, CSS Zen Garden for insight into how to achieve different layouts and effects using CSS and Layout Gala
Understanding how Wordpress themes are put together. I can’t emphasise enough how important the Wordpress manual is. Don’t miss the Stepping into templates information.
Understanding “the loop” and various Wordpress tags.
Knowing when and how to install plugins. WP-Plugins.net has many plugins, but doing a Google or delicious search for “Wordpress plugin” and then the type of plugin you’re wanting will help you find many others.
Knowing at least a little bit of PHP if you don’t want to feel so scared by Wordpress tags, the loop, plugins and your templates. There’s some tutorials on W3Schools which can help.

Have you found any others which you find essential?

http://www.texto.de/texto/how-to-design-your-own-wordpress-theme/

How To – Design Your Own WordPress Theme – Let’s start

Preambel: This post is full with code examples and so it is very long.
And I know: “All roads leed to Rome”. Here is only one of them.

And you know:==>I would like to read your comment or the sky will fall on your head…. .

You need WordPress.
My blank WordPress Theme.
Time and coffee (or tea if you are ill ).
A bit knowledge about css and html.
An editor. Wordpad is good enough.
Information about ‘editing files’ and ‘change chmod permission’, you’ll find the links in this comment.Thanks to Lorelle

I need the structure of a design: Layout Gala==>Layout Gala Design n.30.

Two percentage columns and one larger, with header and footer.

Remember “Murpheys Law” and save your theme files.

Layout Gala Design n.30.==>Sourcecode ==> CSS

<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{float:left;width:70%}
div#navigation{float:right;width:29.9%}
div#extra{clear:both;width:100%}
</style>

Copy all between “style” and the end of this tag and paste it in the [Admincenter==>Presentation==>Theme Editor==>] style.css =>after this click:update files.

Layout Gala Design n.30.==>Sourcecode ==> HTML

We need the HTML to the CSS above. To get the overview I’m using “html comments”.

<body>
       <div id="container">
          <div id="header"><h1>Header</h1><a href="....">download this layout</a>
            </div><!--end of id header-->

      <div id="wrapper">
          <div id="content">
               <p><strong>1) Content here.</strong> column long long column very long ...l very.
                   </p>
              <p>very make make fill silly long long ..
                  </p>
                 and so on....
             </div><!-- end of id content-->
        </div><!--end of id wrapper-->

       <div id="navigation">
            <p><strong>2) Navigation here.</strong> l
            </p>
       </div><!--end of id navigation-->

    <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column
               </p>
         </div><!--end of id extra-->

     <div id="footer">
            <p>The footer. You can go to the ...
              </p>
       </div><!--end of id footer-->
</div><!--end of id container-->

</body>

Now you and I know that “div id container” is the box around. This “id container” starts after body tag and ends before it.

How To – Join CSS and HTML in PHP Files

If you know a bit about html you know that “body tag” starts after the end of the html tag. 99,9999% this you will find in header.php and in footer.php. Div id header and div id footer the same.

[Administration Panels==>Presentation==>Theme Editor==>] header.php

<body>
<div id="container">
  <div id="header">
                     <!--the blog title-->
               <h1>
		<a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a>

                  <!--blog description-->
                  <?php bloginfo('description'); ?>
               </h1>
       </div><!--end of id header-->
<!--header.php end-->

[Administration Panels==>Presentation==>Theme Editor==>] footer.php

<!--footer.php-->
<div id="footer">
	<p>
		<?php bloginfo('name'); ?> is proudly powered by
		<a href="http://wordpress.org/">WordPress</a>
		<br /><a href="feed:<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
		and <a href="feed:<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
	        <!--necessary-->
		<?php wp_footer(); ?>
          </p>
      </div><!--end of id footer-->
</div><!--end of id container--></body>
</html>

My wordpress theme blank is full of html comments to explain all the wordpress template tags and to explain header.php ends, start of single.php and so on. You’ll see in the code above that the html tags are between this comments. And this is necessary!

View your site and you see the first result. Ok it doesn’t look very well, but you get the overview.

The next div id wrapper and div id content.

[Administration Panels==>Presentation==>Theme Editor==>] index.php

<?php get_header(); ?>

	<!--index.php-->
<div id="wrapper">
          <div id="content">
        <!--the loop-->
	<?php if (have_posts()) : ?>
and so on ........

                    Not Found
		Sorry, but you are looking for something that isn't here.
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
        <!--do not delete-->
	<?php endif; ?>

               </div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>
<!--include footer-->
<?php get_footer(); ?>

View your site. Trial and error are good taskmaster.

The next “div id navigation”. The box at the right side.

[Administration Panels==>Presentation==>Theme Editor==>] sidebar.php

<!--sidebar.php-->
<div id="navigation">
		<!--searchfield-->
....
.....
<?php } ?>
</div><!--end of id navigation-->

<!--sidebar.php end-->

Don’t view your site now.It looks very strange. Header, the footer is at the left, content is grey and you got a headache.

Why? Have a look at the CSS. Div id extra clear both (wrapper, content and navigation) and we have no div id extra, because there is no “extra.php” or another template in this theme to create an “extra stuff”.

You have to create a new template and tell wordpress to use this.

And that’s why I’m using Layout Gala Design n.30 as an example.

1. Open your editor. Save the empty file as extra.php. Upload it in your theme folder.
wp-content/themes/yourtheme/.
2. [Administration Panels==>Presentation==>Theme Editor==>] extra.php

<!--extra.php-->
 <div id="extra">
          <p><strong>3) More stuff here.</strong> very text make long column
               </p>
         </div><!--end of id extra-->
<!--end of extra.php-->

The html above tell us, we need this extra.php between sidebar.php and footer.php.

[Administration Panels==>Presentation==>Theme Editor==>] index.php

</div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--index.php end-->
<!--include sidebar-->
<?php get_sidebar(); ?>

<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>

<!--include footer-->
<?php get_footer(); ?>

With this

<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>

you can tell wordpress every new template you need. /extra.php or /whateveryouneed.php or /sample.php and so on.

View your site and I’m sure it looks much better.

The template hierachie of wordpress

Wordpress theme blank have page.php, single.php, search.php two archives.php. You can delete all this files and you are ready with your new design. To understand, please read Codex and have a look at my new sheet about the template hierarchie. I can’t explain it better. (Not in english )

If you click on an article, static page or an archive/category you will see a very creative website. Because div id wrapper and div id content and the new template extra.php are missing.

[Administration Panels==>Presentation==>Theme Editor==>]archive.php

<?php get_header(); ?>
<div id="wrapper">
          <div id="content">
	<!--the loop-->

		<?php if (have_posts()) : ?>

......
....
<!--do not delete-->
	<?php endif; ?>

	       </div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--archive.php end-->

<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

[Administration Panels==>Presentation==>Theme Editor==>]single.php

<!--single.php-->
	<div id="wrapper">
            <div id="content">
<!--loop-->
  <?php if (have_posts()) :
......
......
Sorry, no posts matched your criteria.

<!--do not delete-->
<?php endif; ?>

	</div><!-- end of id content-->
        </div><!--end of id wrapper-->
<!--single.php end-->

<?php get_sidebar(); ?>
<!--include extra.php-->
<?php include (TEMPLATEPATH . '/extra.php'); ?>
<!--include footer-->
<?php get_footer(); ?>

I’m shure you understand==> search.php, the second archives.php, page.php.

Ok and the stuff in single.php and the other files?

This is “one post”.

<!--the loop-->
	<?php if (have_posts()) : ?>
		<!--the loop-->
		<?php while (have_posts()) : the_post(); ?>

			<!--post title as a link-->
				<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
		     <!--post time-->
                     <?php the_time('F jS, Y') ?>

                      <!--post author-->
                      <?php the_author() ?>

				<!--post text with the read more link-->
					<?php the_content('Read the rest of this entry »'); ?>
				<!--show categories, edit link ,comments-->

				Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

	        <!--end of one post-->
		<?php endwhile; ?>

Blank WordPress Theme

Templates without design. HTML only if it is absolut necessary for you. But full of comments to explain the functions.

index.php==>Mainpage.
single.php==>full article.
comments.php==>comments and the necessary fields..
search.php==>searchresults.
searchform.php==>searchfield.
archive.php==>archives and categories.
404.php==>your own error 404.
page.php==>static pages.
links.php==>individual static page.
sidebar.php==>sidebar navigation.
header.php==>html header.
footer.php==>html footer.
functions.php

Dowonload
Blank WordPress Theme.
Unzip it.
Upload to wp-content/themes/
Admincenter==>Themes==>activate the theme.
Admincenter==>Theme==>Themeeditor==>Here you are able to do as you likes.

New since Juni 2007

style.css full with necessary class and id or tags.

Functions.php ==>How to use Widget

sidebar.php :

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar') ) : else : ?>at the end:

 <?php endif; ?>Example two Sidebars one right one left

left sidebar:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Navigation') ) : else : ?> your stuff if no widget  <?php endif; ?>right sidebar:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Sidebar) ) : else : ?> your stuff if no widget  <?php endif; ?>Three Columns under content or in the footer:

right column:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Right Footer) ) : else : ?> your stuff if no widget  <?php endif; ?>middle column

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Middle Footer) ) : else : ?> your stuff if no widget  <?php endif; ?>left column:

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Left Footer) ) : else : ?> your stuff if no widget  <?php endif; ?>

http://www.cre8d-design.com/blog/2007/01/08/wordpress-theme-creating-a-theme-step-2/

Wordpress theme: Creating a theme (Step 2)

January 8, 2007

This is part of a series of posts on how to create a Wordpress theme. See also: Step 1 and Useful Resources.

Now we have the basic layout (we could have spent a lot of time at this point working on the design), let’s turn it into a very simple Worpdress theme: an index.php file and a stylesheet, style.css.

What to put in each file:

style.css contains all the stylesheet information, I have cut and pasted this over from my original layout (see the code in the heaader). There’s also a few lines put up at the top which are used to describe your theme:

/*
Theme Name: Summer 2007
Theme URI: http://www.cre8d-design.com
Description: A simple two-column theme.
Version: 1
Author: Rachel Cunliffe
*/
body { text-align: center; font: normal 76% Verdana, Helvetica, sans-serif;}
#container { width: 890px; text-align: left; margin: 0 auto; }
#header { }
#menu { margin-bottom: 20px; }
#content { width: 490px; float: left; margin-bottom: 20px;}
#sidebar { width: 370px; float: right; }
#footer { clear: both; }
#header, #menu, #content, #sidebar, #footer { padding: 5px; border: 1px solid #000; }

index.php is very similar to my original layout but with some minimal Wordpress code.

Use the Wordpress manual tag reference list, add tags to the HTML. I have used the following:

<?php bloginfo('name');?> in the title of the page, pulled in from your Wordpress » Options » General settings.
Why use code when you can just write the title in there? Later on, you may want different pages to have different titles and code can do this for you. Also, if you want to change your blog’s name later on, you can change it via the options page and not muck around in templates. Also, if you want to share your theme with others, you don’t want your blog name turning up everywhere!
<?php bloginfo('stylesheet_url'); ?> is used for the stylesheet, instead of hard-coding in the location of it. If you share your theme with others, or move your blog, this will change automatically for you.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; else : endif; ?>

This code tells Wordpress to display the title and content of the posts. It’s a very simple “Wordpress loop”. Wordpress will figure out what to show on different pages of the site as long as you have one of these loops in there. Basically, you can ignore understanding code in the first part of the loop and the last part – just know it needs to be there. The bit in the middle is where you get Wordpress to display your content. For my simple loop it is:

<h2><?php the_title(); ?></h2>
<?php the_content(); ?>

In other words I use two Wordpress tags, the title and the content. There are plenty of other tags on the tag reference list that you can use in here.

Here’s the index.php template:

<!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>
<title><?php bloginfo(’name’); ?></title>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
</head>

<body>

header
</div>
<div id=”menu”>
menu
</div>
<div id=”content”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; else : endif; ?>
</div>
<div id=”sidebar”>
sidebar
</div>
<div id=”footer”>
footer
</div>
</div>
</body>
</html>