If you are a great writer who enjoys writing, you should find a great blog theme and let the content does action. In this case, there are no styles better than a minimal design which focuses on typography because the minimal style is more appropriate for the content and it’s audience.

I’m bringing you here the list of 20 best free WordPress themes that are best for typography and reader-respected if you are considering to go minimal for your upcoming writing WordPress blog.

The Arialist

Demo – Download

theSevenFive

Demo – Download

Charlene

Demo – Download

Lifestreaming White

Demo – Download

Manifest

Demo – Download

Wu Wei

Demo – Download

The Erudite

Demo and Download

Minimalist WordPress Portfolio

Demo – Download

Aqualine

Demo – Download

Typominima

Demo – Download

Modernist

Demo – Download

Clear

Demo – Download

StructureTheme

Demo – Download

Neutra

Demo – Download

WP-Notes

Demo – Download

Miniml Press

Demo – Download

Oulipo

Demo – Download

Nameless

Demo – Download

Fifty Fifth Street

Demo – Download

Extreme Georgia

Demo not available – Download

After a quite long awaited by many WordPress users all over the world, finally this world most popular blog portal launchs its brand-new version WordPress 3.0 a.k.a Thelonius.

Thelonius is the software version 13th which have been launched by WordPress until now. We’ll find not less than 2.700 changes and 1.217 bugs fixed inside it. The most striking change is its capability to run some blogs at the same time or generally called Multiside Capabilities (with WordPress MU). Before, each blogs on the web shall be run separately. This capability to run many blogs has been integrated into its brand-new version, so that it can be utilized easier. Bloggers are now be able to upgrade through upgrade menu on the WordPress or we can also download it manually. So what any other features can we maximize on it? Let’s now discuss it a lil’ bit deeper.

New, username and password while installation

Some people urgently recommend to deactivate or even to avoid using default username and password which are username : admin and default password on every installations. Cause, there were many ways you could be “hijacked” possibly use to break its default username and password on this most crucial case if you’re using WordPress before this 3rd version. But you need it no more now, you’re free to define your username and password at the beginning of WordPress installation. So you don’t need to hack on your WordPress anymore to eliminate its admin default username and password.

Twenty Ten default theme

After all this time WordPress installation has been bundled with its default theme called Kubrick, now it’s no more with. WordPress now comes with its new bundled theme which’s named Twenty Ten! It’s very good with sweet 2-column display including widgetized sidebar and footer. And believe it or not, now WordPress is equipped with explanation documentation that facilitate anyone to know more deeper about WordPress details. You can check it through the source code from this twenty ten theme. It helps, doesn’t it?

You must know that this twenty ten theme is supported with some new features from WordPress 3, which are:

Background customization

Now with WordPress 3 you can change your background with no more trouble. As twenty ten shows us, on the picture below.

Then how to apply it to a theme? Easy, just write down this codes into functions.php file in your theme folder.

    // allows users to set a custom background
    add_custom_background();

if you’re done with the codes, you’ll see background menu on the Appearance section

New editor style

Many people may find some difficulties to see the style that’s being used by wordpress (previous version) when they’re writing. If you use to write on blog using windows live writer perhaps you can also load the current style that’s being used on your theme onto your visual editor. But you need it no more now, wordpress 3 gives easiness for us to be able to see our preview style while we’re writing on our tiny mce editor, pretty cool huh? Same as before, we need to write down the scripts below to functions.php file in our theme folder.

  // Apply visual editor with and match the theme style.
  add_editor_style();

After that don’t forget to create editor-style.css file in your theme folder and copy style.css file content then paste it onto editor-style.css file you just created. I suggest you to copy on the sections where your posts will be displayed, which are all classes .entry on style.css file.

Custom menu management

Many wordpress themes developers intentionally build theme option to their customers, what is the purpose? Just in order to ease them to manage menu navigation layout on their themes. Then, what wordpress 3.0 try to offer to us on this feature, in my opinion it’s proportional with any other CMS out there which also offer this kind of feature on their back-end pages.

Then how do you apply it on your own theme? It’s quite easy, you just need to define this menu on your functions.php file.

 add_theme_support( 'nav-menus' );

then attach this onto your header section

wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) );

Example custom menu

It’s simple, isn’t it? Then how if I forget to define it on the header section? Simple, now I’ll give some instances for us to explore a bit on this menu feature and let’s just get going. First we have to define our menu later on functions.php file on themes folder.

/*
 * CUSTOM FUNCTION STARTING FROM HERE
 */

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
    register_nav_menus(
        array(
            'top-menu' => __( 'Top Menu' ),
            'middle-menu' => __( 'Middle Menu' ),
            'bottom-menu' => __( 'Bottom Menu' )
        )
    );
}

As we see above, that I defined it for 3 kind of custom menus that I’d like to display it later.

Okay then, let’s create menu, give your menu a name TOP, MIDDLE, BOTTOM through “Menu Name” and choose category and page that you’re willing to include to each of your custom menus. I made an example and defined it below

After above we defined it for Top Menu, then find this script line on your header.php file

 wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

then change those lines with your custom Top Menu

// you can use this type too to call wp_menu_nav
// wp_nav_menu( 'sort_column=menu_order&container_class=menu-header&theme_location=top-menu' );

if ( has_nav_menu( 'top-menu' ) ) {
    wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'top-menu', 'fallback_cb' => '' ) );
}

In here is the process to match if there is a matching clauses found with top-menu, then it’ll return true value. You can see, I used has_nav_menu and wp_nav_menu functions. And here it’s the preview from what we’ve just done

How’s that, get enough? Yup I guess it’s enough, but how’s the way to show the description on each menus? Very good question. What’s the use of menu description as seen on menu management picture if we couldn’t display it. In here we need to do some hackings, write down the scripts below onto your functions.php file to display the menu description

// Hook nav rules to showing description page
// Look details information by this page wp-includes/nav-menu-template.php
// or by this link - http://core.svn.wordpress.org/trunk/wp-includes/nav-menu-template.php
add_filter('walker_nav_menu_start_el', 'description_in_nav_el', 10, 4);
function description_in_nav_el($item_output, $item, $depth, $args){
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

    return preg_replace('/(<a.*?>[^<]*?)</', "<a $attributes>" . "<span class='test'>{$item->title}</span><br><span class='test'>{$item->post_content}</span><", $item_output);
}

Now we can see the condition from our custom menu.

And these are the source codes after we hacked walker nav menu above

<li id="menu-item-43" class="menu-item menu-item-type-post_type"><br>
<a href="http://localhost/wp30/portfolio/"><span class="test-menu-title">Portfolio</span><br><span class"test-menu-desc">See my work!</span></a></li>

You can see it, if there’s a description then it’ll be displayed, but if there’s no menu description found then it’ll only return empty value (space). In here we see that we break title from menu and description from the menu itself, so that we’re free to customize the class from test-menu-title and test-menu-desc with bold, color, italic and anything you want! I think that’s enough for now. Have fun with your menu folks!

Further information about New Menu System:

• Excellent article on nav menus by Justin Tadlock
• WordPress 3.0: Checking out the New Menu System
• Function Reference: wp nav menu – WordPress Codex

Custom Post Types for Content Management

This feature is the most awaited feature by wordpress users and developers, the reason is through this feature we’re be able to use wordpress not only as a blog machine but also as full Content Management System. What I like from this feature is the content classification is run separately, for example when we build a portfolio. How, let’s just study it step by step.

Custom post types, in its usage for a portfolio it’s very ease us for content sorting which has particular posting category/type. There are so many things that we can create and develop through this custom post types, and I’ll give some instances to you how to create portfolio page using this custom post type and combining with your custom field. First of all, we need to write down the scripts below onto our functions.php file.

/*
 * custom post for super porto
 */

add_action( 'init', 'create_my_post_types' );

function create_my_post_types() {
    register_post_type( 'pf_cpt',
        array(
                'labels' => array(
                'name' => __( 'Portfolios' ),
                'singular_name' => __( 'Portfolio' ),
                'add_new' => __( 'Add New Item' ),
                'add_new_item' => __( 'Add New Portfolio' ),
                'edit' => __( 'Edit Item' ),
                'edit_item' => __( 'Edit Portfolio' ),
                'new_item' => __( 'New Portfolio' ),
                'view' => __( 'View Portfolio' ),
                'view_item' => __( 'View Portfolio' ),
                'search_items' => __( 'Search Portfolio Items' ),
                'not_found' => __( 'No Portfolio Items found' ),
                'not_found_in_trash' => __( 'No Portfolio Items found in Trash' ),
                'parent' => __( 'Parent Portfolio' ),
            ),
            'public' => true,
            'show_ui' => true,
            'menu_icon' => get_stylesheet_directory_uri() . '/images/picture.png', // icon defined
            'menu_position' => 20, // 5 - below Posts | 10 - below Media | 20 - below Pages
            'hierarchical' => true,
            'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail' )
        )
    );

    register_taxonomy( 'charge-type', 'pf_cpt', // in-case you do for commercial or free (such as foundation etc)
        array(
             'hierarchical' => false, // or true
             'label' => __('Free or Commercial'),
             'query_var' => 'charge',
             'rewrite' => array('slug' => 'charge' ) ) );

    register_taxonomy( 'client', 'pf_cpt', // in-case you have 2 or 3 boss (clients) at one project
        array(
             'hierarchical' => false, // or true
             'label' => __('Clients'),
             'query_var' => 'client',
             'rewrite' => array('slug' => 'client' ) ) );

    register_taxonomy( 'project-type', 'pf_cpt',
        array(
             'hierarchical' => false, // or true
             'label' => __('Project Type'),
             'query_var' => 'project',
             'rewrite' => array('slug' => 'project' ) ) );

    register_taxonomy( 'tasks', 'pf_cpt', // for specified your tasks
        array(
             'hierarchical' => false, // or true
             'label' => __('Your Task'),
             'query_var' => 'task',
             'rewrite' => array('slug' => 'task' ) ) );
}

Another reference about register post types, Function Reference/register post type. And then after we wrote down the codes above onto functions.php file, let’s now see the back-end display for custom post types that we’ve just created.

And our this editor page we’ll be looked like this after we clicked Add New Item

Click to see full size image

You can see what we’ve done through the preview above. On the bottom-left side Menu Pages (because we gave value 20 before) there’s our new menu including its taxonomies custom for controlling based on its related custom post type. On the middle section, we have title, editor, and custom field for editing needs. On the right side coloumn, there are custom taxonomies input for Project Type (Logo, Website, etc), Charge (Commercial, Non-Commercial, etc), Clients (Company A, B, C, etc) Your Task (WordPress integration, xHTML and CSS design, PSD Design, etc)

Now how about that? Anyone has a question?

“Yes, I have a question. How to create Custom URL for each items please?”

Okay, we have two tricks in here. The first one is with adding metabox on our editor custom post types pages.

 add_meta_box( $id, $title, $callback, $page, $context, $priority );

Write down these codes onto functions.php file to create meta box that will be our custom url

<?php
    add_action("admin_init", "pf_cpt_url");
    add_action('save_post', 'update_pf_cpt_url');
    function pf_cpt_url(){
        // http://codex.wordpress.org/Function_Reference/add_meta_box
        // add_meta_box( $id, $title, $callback, $page, $context, $priority );
        add_meta_box("portfolio_details", "Custom URL", "pf_cpt_url_options", "pf_cpt", "side", "low");
    }
    function pf_cpt_url_options(){
        global $post;
        $custom = get_post_custom($post->ID);
        $custom_url = $custom["custom_url"][0];
?>
    <div id="portfolio-options">
        <label>URL:</label><input name="custom_url" value="<?php echo $custom_url; ?>" />       
    </div><!--end portfolio-options-->   
<?php
    }
    function update_pf_cpt_url(){
        global $post;
        update_post_meta($post->ID, "custom_url", $_POST["custom_url"]);
    }
?>

And it’ll be seen like this later on your editor page

And the second one is with using custom field, I myself is prefer to use custom field. But once again, it’s all up to you. So now let’s we fill our custom post types first with some datas which will be displayed later on the portfolio page.

By default, you can display your custom post types on the portfolio page this way, write down the codes below on the template file for your portfolio page

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
<?php
<div id="content">
<?php $p_loop = new WP_Query( array( 'post_type' => 'pf_cpt', 'posts_per_page' => 10 ) ); ?>
<?php while ( $p_loop->have_posts() ) : $p_loop->the_post(); ?>
<?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>

<?php 

  $custom = get_post_custom($post->ID);
  $website_url = $custom["custom_url"][0];
  if($custom != "" ) {

  ?>

<a href="<?php echo $website_url; ?>"><?php the_post_thumbnail(); ?> </a>

<?php

  } else { the_post_thumbnail(); }

  ?>

<div class="entry-content"><?php the_content(); ?></div> 

<?php endwhile; ?>
</div><!-- #content -->

?>
<?php get_footer(); ?>

How’s the display, do you see the thumbnail that you’ve defined it before including its custom taxonomies you’ve determined on each items? Then how about to display and format the display? It’s easy. Later we’ll get it formatted based on each Project Type that you’ve defined through custom taxonomies and it’ll be indexed based on custom field with key = year and value = yyyy-mm-dd, and you have to know that in here I defined Project Type with value Website, Logo, Poster, etc where one item of portfolio is representated by one project type

Then paste these scripts into template file for the page above so it’s gonna be:

<?php
/*
Template Name: Portfolio
*/
?>

<?php get_header(); ?>

<div id="content">
<h1>Website</h1>

<?php

$querystr = "SELECT *
  FROM $wpdb->posts
  LEFT JOIN $wpdb->term_relationships ON($wpdb->posts.ID = $wpdb->term_relationships.object_id)
  LEFT JOIN $wpdb->term_taxonomy ON($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
  LEFT JOIN $wpdb->terms ON($wpdb->term_taxonomy.term_id = $wpdb->terms.term_id)
  LEFT JOIN $wpdb->postmeta ON($wpdb->posts.ID = $wpdb->postmeta.post_id)
  WHERE $wpdb->posts.post_type = 'pf_cpt'
  AND $wpdb->posts.post_status = 'publish'
  AND $wpdb->term_taxonomy.taxonomy = 'project-type'
  AND $wpdb->terms.slug = 'website'
  AND $wpdb->postmeta.meta_key = 'year'
  ORDER BY $wpdb->postmeta.meta_value DESC";
  // see value 'project-type' and value 'website'
  // feel free to define any value from your taxonomies, for grouping

  $result = $wpdb->get_results("$querystr");
  foreach($result as $post){

  setup_postdata($post); // remember this line, it needs cause our "foreach" statement

  ?>

<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

<?php 

  $custom = get_post_custom($post->ID);
  $website_url = $custom["custom_url"][0];
  if($custom != "" ) {

  ?>

<br><a href="<?php echo $website_url; ?>"><?php the_post_thumbnail(); ?> </a>

<?php

  } else { the_post_thumbnail(); }

  ?>

 <div class="entry-content">
<?php the_content(); ?>

<?php

  // define something
  $taxo = "";

  // Variables to store each of our possible taxonomy lists
  // This one checks for an Year classification

  $project_type_list = get_the_term_list( $post->ID, 'project-type', '<strong>Project Type(s):</strong> ', ', ', '' );
  $commercial_type_list = get_the_term_list( $post->ID, 'charge-type', '<strong>Type(s):</strong> ', ', ', '' );
  $client_list = get_the_term_list( $post->ID, 'client', '<strong>Client(s):</strong> ', ', ', '' );
  $task = get_the_term_list( $post->ID, 'tasks', '<strong>Task(s):</strong> ', ', ', '' );

  // if it's not empty, return value of each type
  // define project type value
  if ( '' != $project_type_list ) { $taxo .= "$project_type_list<br />\n"; }

  // define commercials or non commercials project type
  if ( '' != $commercial_type_list ) { $taxo .= "$commercial_type_list<br />\n"; }

  // define client list value
  if ( '' != $client_list ) { $taxo .= "$client_list<br />\n"; }

  // define task value
  if ( '' != $task ) { $taxo .= "$task<br />\n"; }

  // Output taxonomy information if there was any
  if ( $taxo != '' ) {

  ?>

<div class="entry-utility">

<?php 

  if ( get_post_meta($post->ID, 'year', true) ) :
    $date = get_post_meta($post->ID, 'year', true);
    $dateTime = new DateTime($date);
    $formatted_date=date_format ( $dateTime, 'F Y' );
        echo 'Date: '.$formatted_date.'<br>';
  endif; ?>

<?php

  echo $taxo;

  ?>

</div><br>

<?php

  } // endif

  ?>

</div>

<?php

  }

?>

</div>

<?php get_footer(); ?>

And you’ll get a display which looks like below

But after you noticed it, how’s it so the value from each custom taxonomies isn’t be formed as a link (url)..? just change the codes above become codes below

$project_type_list = strip_tags( get_the_term_list( $post->ID, 'project-type', 'Project Type(s): ', ', ', '' ) );
$commercial_type_list = strip_tags( get_the_term_list( $post->ID, 'charge-type', 'Type(s): ', ', ', '' ) );
$client_list = strip_tags( get_the_term_list( $post->ID, 'client', 'Client(s): ', ', ', '' ) );
$task = strip_tags( get_the_term_list( $post->ID, 'tasks', 'Task(s): ', ', ', '' ) );

See that strip_tags( [your_term_list] ); to ignore HTML format. Simple, right? Then it’s done, have fun with your custom post types and custom taxonomies folks!

Further information about this features:

• First Impressions of Custom Post Type
• Custom post types in WordPress
• A refresher on custom taxonomies
• Introducing WordPress 3 Custom Taxonomies
• Rock-Solid WordPress 3.0 Themes using Custom Post Types
• Create A Professional Portfolio Using WordPress 3.0 Custom Post Types

Conclusion

I think it’s pretty tempting your insight about WordPress 3.0, and what you can do with it furthermore, as a blog machine or as a CMS, that’s up to you. So now what about we’re having share about it, what do you think about WordPress 3.0 and for you that’ve already experienced with it, you may share with us here, I think that’s why sharing considered as caring.. arghh it’s pain to say it.. :p See ya!

Another References

• 10 Features to Look Forward to in WordPress 3.0
  WordPress 3.0 is scheduled to be released within the next 30-60 days. There are some great new features coming, including custom post types, a new default theme, and a menu manager. Read on Nettuts to find out what to expect in version three!
• WordPress 3.0: Ultimate Guide to New Features
  WordPress 3.0 — the newest major version of WordPress — is one of the most highly-anticipated open source upgrades this year. Good article from Saad Bassi on Six Revisions
• 9 Features We Most Want in WordPress 3.0
  Messageboards are currently awash with demanding bloggers, listing the new features they most want to see and the plugins they want shifted into core. By this article on DesignM.ag you’ll find the 9 new features that are most in demand.
• What’s Coming in WordPress 3.0 (Features)
  Another reference from WpBeginner, just check this out too guys!
• WordPress 3.0: The 5 Most Important New Features
  The list of new features in WordPress 3.0 isn’t very long in comparison to previous releases. However, the changes that are coming will certainly have a significant impact, particularly if you use WordPress as a CMS. Here is a rundown of the most important new features arriving in version 3.0. Mashable will let you know which features of WordPress 3.0 you are most looking forward to.
• 10 Great New Features in WordPress 3.0
  WordPress is by far the most popular blogging platform available and with over half a million known websites running on the software, it’s no surprise there’s a big news surge when a new version is released. Read more on Web.AppStorm

This tutorial is in the series of “WordPress Theme from Scratch” that helps you build a WordPress theme by yourself from nothing. Previous tutorial in this series helped we convert a mockup in PSD to HTML and today, we will continue to go to last tutorial: build WordPress theme from the HTML file.

The most difference between WordPress and other blog platforms in theme development is WordPress theme more easier than others for development. In basic, the elements of wordpress theme likes blocks and building WordPress theme likes we build these blocks to make them to fit together.

In WordPress template, some file we will use to display it in all page on our website such as: header, footer, sidebar … and other file we have to customize it to fit our requirements under specific conditions. If you are going to build a WordPress theme, I recommend to take a look at “Using_Themes section in WordPress Codex” to understand how a theme built.

Prepare files for theme

In this tutorial, I will help you build your first WordPress theme that works. That means I’m gonna build some important files that WordPress requires to run without errors. My FrozenFlirt WordPress theme should contains these files:

--FrozenFlirt
-----header.php
-----index.php (Homepage display)
-----single.php (Post display)
-----archive.php (Archive display for categories, tags, date, authors...)
-----comments.php (Comment temple include form, post comments)
-----sidebar.php
-----functions.php (All of your template functions will go here)
-----footer.php
-----style.css
-----image
-----js

Note: These files need for your template works with basic requirements such as: post, categories, tags, authors, search … viewing. If you want more, build as same as we are doing here with 404 display, links template …

Before start, copy all images in this HTML layout to images directory and all css files to the root theme folder. Furthermore, this theme is using one javascript file call script.js, so copy this file to folder js.

Let’s begin!

Split HTML layout

We will use header, sidebar and footer to display in all pages, so we need to split our HTML file into 3 main parts: header.php, sidebar.php and footer.php.

Refer to the HTML file in previous tutorial: WordPress Theme from Scratch – Day 2: PSD to HTML and after splitting, we have these files:

header.php

<!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" />
    <title>FrozenFlirt WordPress Theme From Scratch</title>
    <link href="reset.css"rel="stylesheet"type="text/css" />
    <link href="style.css"rel="stylesheet"type="text/css" />
    <link href="pagenavi-css.css"rel="stylesheet"type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type="text/javascript"></script>
    <script src="script.js"type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            var id = '35591378@N03';
            flickr(id);

            });

    </script>

</head>

<body>

    <div id="main-wrapper">

        <div class="container">

            <div id="header">

                <ul id="topmenu">
                    <li>
                        <a href="#"title="Home Page"><span>Home</span></a>
                    </li>
                    <li>
                        <a href="#"title="Tutorial Category"><span>Tutorial</span></a>
                    </li>
                    <li>
                        <a href="#"title="Freebie Category"><span>Freebie</span></a>
                    </li>
                    <li>
                        <a href="#"title="Inspiration Category"><span>Inspiration</span></a>
                    </li>
                    <li>
                        <a href="#"title="Resources Category"><span>Resources</span></a>
                    </li>
                </ul>

                <div id="topsearch">
                    <form action="http://aext.net/"id="searchform"method="get">
                        <fieldset>
                            <input type="text"                                    onblur="if (this.value == '') {this.value = 'Type Keywords And Hit Enter...';}"                                    onfocus="if(this.value == 'Type Keywords And Hit Enter...') {this.value = '';}"                                    value="Type Keywords And Hit Enter..."                                    class="searchfield"id="searchbox"name="s"/>
                        </fieldset>
                    </form>
                </div>

                <div class="clear"></div>

                <div id="logo">
                    <a href="#"title="FrozenFlirt Homepage"><h1>FrozenFlirt Theme</h1></a>
                    <h3>"Wordpress Theme From Scratch"</h3>
                </div>

                <div class="clear"></div>

            </div>

sidebar.php

            <div id="sidebar">

                <div class="widget"id="adblocks">

                    <a href="#"title=""><img src="images/ads/vivatheme.png"alt="Viva Theme" /></a>
                    <a href="#"title=""><img src="images/ads/pixelcrayons.jpg"alt="Pixel Crayons" /></a>
                    <a href="#"title=""><img src="images/ads/wpbest.gif"alt="WPBEST" /></a>
                    <a href="#"title=""><img src="images/ads/buysellstockdesign.gif"alt="Buy Sell Stock Design" /></a>

                </div>

                <div class="widget"id="popular-posts">
                    <h3>Popular Posts</h3>
                    <ul>

                        <li><a title="blablabla"href="#"><span class="wpp-post-title">5 New Useful jQuery Plugins For Your Next Projects</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">35 Fresh and Cool Web Design Interfaces for Inspiration</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">Bubble Effect with CSS</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">CSS Absolute Positioning: Create A Fancy Link Block</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">Incredible Drop Down Menu Solution With CSS Only</span></a> </li>
                    </ul>

                </div>

            </div>

            <div class="clear"></div>

footer.php

            <div id="flickr-stream">

                <h3>Flickr Stream</h3>
                <hr />
                <div class="clear"></div>
                <div id="flickr">
                    <noscript>Your message for people w/o javascript enabled goes here.</noscript>
                </div>

            </div>      

            <div id="twitter-update">
                <h3>Twitter Update</h3>
                <hr />
                <div class="clear"></div>
                <div id="twitter">
                    <ul id='twitter_update_list'></ul>
                </div>
                <a href="http://twitter.com/prlamnguyen"title="Follow me on twitter"><span id="followme">Follow Me!</span></a>

            </div>                      

        </div>

    </div>

    <div class="clear"></div>

    <div id="footer-wrapper">

        <div class="container">

            <p id="copyright">&copy;2009 FrozenFlirt. All Rights Reserved</p>

            <p id="designedby">WordPress Theme Design by <a href="http://aext.net"><img src="images/aext.png"alt="Theme by AEXT.NET" /></a></p>

        </div>

    </div>

    <script type="text/javascript"src="http://twitter.com/javascripts/blogger.js"></script>
    <script text="text/javascript"src="http://twitter.com/statuses/user_timeline/prlamnguyen.json?callback=twitterCallback2&count=2"></script>

</body>
</html>

The remain part we will use for replace with the content.

header.php

The header file need to declare the blog title, description (if you are using SEO plugin, I don’t think this part is important), blog feed, pingback… And off course, you need to put your stylesheet here.

Put these code to your header for:

HTML type

<meta http-equiv="Content-Type"content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

Blog title

<title><?php wp_title('&laquo;', true, 'right'); bloginfo('name'); ?></title>

Blog description

<meta name="description"content="<?php bloginfo('description'); ?>" />

Feed and pingback

<link rel="alternate"type="application/rss+xml"title="<?php bloginfo('name'); ?> RSS Feed"href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate"type="application/atom+xml"title="<?php bloginfo('name'); ?> Atom Feed"href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback"href="<?php bloginfo('pingback_url'); ?>" />

Because you will upload this theme to the themes folder, you need to gather the blog directory to import exactly the url to your css, javascript … files. Using this code, you will get the url to your template folder:

<?php bloginfo('template_url'); ?>

Link to your stylesheet using code above:

<?php

  print '<style type="text/css" media="all">';

  print '@import "'.get_bloginfo('template_url').'/reset.css";';
  print '@import "'.get_bloginfo('template_url').'/style.css";';  
  print '@import "'.get_bloginfo('template_url').'/pagenavi-css.css";'; 

  print '</style>';

?>

For more information about bloginfo, check this page Template Tags/bloginfo.

DON’T FORGET to put these code before closing the head tag

<?php wp_head(); ?>

This is one of the most essential theme hooks. You use this hook by having your function echo output to the browser, or by having it perform background tasks. This is very important because all of the plugins installed will use this hook to output their code such as css and javascript to template header.

In this theme, you can see that I made the rounded border style for the categories link on header. It will be easy to list all category links if we just make simple links by using this code:

    <ul>
      <li><a href="<?php bloginfo('url'); ?>">Home</a></li>

      <?php echo wp_list_categories('echo=0&title_li='); ?>

    </ul>

However, this function just generate a list of category with links and we cannot put a span tag inside the link to make a rounded border style like what we do with the HTML template.

This is why we use this code instead;

<ul id="topmenu">
    <li>
       <a href="<?php bloginfo('url'); ?>"title="Home Page"><span>Home</span></a>
    </li>

    <?php

        $args=array(
            'orderby' => 'name',
            'order' => 'ASC'
        );

        $categories=get_categories($args);

            foreach($categories as $category) {
                echo '<li>';
                echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ),                       $category->name ) . '" ' . '><span>' . $category->name.'</span></a> </p> ';
                echo '</li>';
            }
    ?>

</ul>

Now, with the css code I provided previous tutorial, we can build great rounded border link style.

[smartads]

sidebar.php

Actually, the sidebar is very simple. Themes usually have at least 1 or 2 sidebars, in this case, we have one. Each section in the sidebar is known as a “widget” that you can add or remove, and move up or down. You can configure your sidebar by going to Appearance > Widgets. Because nothing is special here, we only need to make it ready for widgets. That means you can add/remove widget in your sidebar in admin panel. In this case, I will keep the ads section as HTML, other widgets will be updated through widgets configuration.

In your sidebar.php, add these code:

<div id="sidebar">

    <div class="widget"id="adblocks">

        <a href="#"title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/vivatheme.png"alt="Viva Theme" />
        </a>
        <a href="#"title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/pixelcrayons.jpg"alt="Pixel Crayons" />
        </a>
        <a href="#"title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/wpbest.gif"alt="WPBEST" />
        </a>
        <a href="#"title="">
            <img src="<?php bloginfo('template_directory'); ?>/images/ads/buysellstockdesign.gif"alt="Buy Sell Stock Design" />
        </a>

    </div>

    <?php if( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

    <?php endif; ?>

</div>

<div class="clear"></div>

The code above will keep the ads section stays in the sidebar even when you add widgets in admin panel or not. Other widgets will be added through admin panel and be right next below to ads block.

However, that’s not enough. Because, in this case, we are setting up the sidebar widgets as div elements, we need to set up the sidebar format by using register_sidebar() in functions.php file. In functions.php file, add these code:

// register sidebars if( function_exists('register_sidebar')) {
    register_sidebar(array(
        'name' => 'Default sidebar',
        'id' => 'sidebar-1',
        'before_widget' => '<div class="widget" id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

This code used for register the default side that all widgets inside it will come inside div element with class name widget and their id by plugin widgets. The title of each widget will be wrap by an h3 tag.

That’s all you need for a sidebar with widget ready. Download this plugin WordPress Popular Posts, install, active then drag the widget to the sidebar. Done!

footer.php file

Honestly, there is nothing important here. Some blog design their beautiful footer with a lot of stuff, but in this case we only create two widgets for Flickr stream and Twitter update using javascript to make this tutorial simple. These widget display will depend on the user’s Flirkr and Twitter account, so we will create these widget display base on the options that user will put their account in. Luckily I published an useful posts “WordPress Theme Design with Options Adminstration“. Now, you have to check this post first because it’s very complicated step that should not put here for a very long long long tutorial. It’s not necessary, but at least put some code for this tutorial more complete.

In functions.php file, put these code for theme options:

// theme options $options = array(

  array(    
    "name" => "<strong>Flickr ID</strong>",
    "desc" => "Enter your Flickr ID to display Flickr Stream widget",
    "id" => "flickr_account",
    "default" => ""),

  array(    
    "name" => "<strong>Twitter Account</strong>",
    "desc" => "Enter your Twitter username to display Twitter Update widget",
    "id" => "twitter_account",
    "default" => "prlamnguyen"),

);

These lines of code will control the form submission of the theme options:

function frozenflirt_options() {
  global $options;

  if('theme_save'== $_REQUEST['action'] ) {

    foreach($options as $value) {
     if( !isset( $_REQUEST[ $value['id'] ] ) ) {  } else { update_option( $value['id'], stripslashes($_REQUEST[ $value['id']])); } }
     if(stristr($_SERVER['REQUEST_URI'],'&saved=true')) {
     $location = $_SERVER['REQUEST_URI'];
    } else {
     $location = $_SERVER['REQUEST_URI'] . "&saved=true";
    }

    header("Location: $location");
    die;

  } else if('theme_reset' == $_REQUEST['action'] ) {

    foreach($options as $value) {
     delete_option( $value['id'] );
     $location = $_SERVER['REQUEST_URI'] . "&reset=true";
    }

    header("Location: $location");
    die;

  }

  add_theme_page('FrozenFlirt Theme Setting', 'FrozenFlirt Theme Setting', 10, 'frozenflirt-settings', 'frozenflirt_admin');
}

And these code for the UI in admin panel:

<?php
function frozenflirt_admin() {
    global $options;
?>
<div class="wrap">
  <h2 class="alignleft">Theme Setting</h2>
  <br clear="all" />

  <?php
    //Check if settings saved!     if( $_REQUEST['saved'] ) {
  ?>
        <div class="updated fade"><p><strong>Setting Saved</strong></p></div>
  <?php } ?>

<form method="post"id="myForm">
<div id="poststuff"class="metabox-holder">

 <div class="stuffbox">
  <h3>Footer Setting</h3>
  <div class="inside">
    <table class="form-table"style="width: auto">
    <?php
     foreach($options as $value) {
      switch( $value['id'] ) {
        case "flickr_account": ?>
        <tr>
        <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th>
        <td>
         <input name="<?php echo $value['id']; ?>"                 id="<?php echo $value['id']; ?>"type="text"                 value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        </td>
        </tr>

      <?php break;
        case "twitter_account": ?>
        <tr>
        <th scope="row"><?php echo $value['name']; ?><br /><?php echo $value['desc']; ?></th>
        <td>
         <input name="<?php echo $value['id']; ?>"                 id="<?php echo $value['id']; ?>"type="text"                 value="<?php get_option($value['id'])?printf(get_option($value['id'])): printf($value['default']) ?>" />
        </td>
        </tr>

      <?php break;
        }
    }
    ?>
   </table>
  </div>
 </div>  

</div>
<input name="theme_save"type="submit"class="button-primary"value="Save changes" />
<input type="hidden"name="action"value="theme_save" />
</form>

<form method="post">
<input name="theme_reset"type="submit"class="button-primary"value="Reset" />
<input type="hidden"name="action"value="theme_reset" />
</form>

</div>
<?php
}
?>

Your theme options adminstration will look like:

We are good now with the theme options. Let’s get these value to display in the theme. In your footer.php, insert these code to your Twitter widgets to get twitter account name from theme options:

<script type="text/javascript"src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript"src="http://twitter.com/statuses/user_timeline/<?php if(!get_option('twitter_account')) { echo 'prlamnguyen'; } else { printf(get_option('twitter_account')); } ?>.json?callback=twitterCallback2&count=2"></script>

In this code above, if the option value of twitter_account doesn’t exist, this widget will display twitter update from my twitter account by default.

With Flickr Stream widget, go back to header.php file to edit because I put the jQuery code to get stream from specific account on header.php file. I’m so sorry! If you want, move this code block to the footer.php file. That’s fine!

<script type="text/javascript">

        $(document).ready(function() {

            var id = '<?php printf(get_option('flickr_account')); ?>';
            flickr(id);

        });

</script>

Alright, now you have done for the three files that will used in all pages. Now, we continue to go forward to other pages that display in homepage, post pages, categories pages…

index.php

This file will used for display in the main page of your blog. It usually displays a number of recent articles. The number of posts will be display was set up in your WordPress Admin > Setting > Readingas below:

By default, you don’t need to query posts in homepage, the only code for the loop of display post in homepage is:

<?php

//The Loop if( have_posts() ) : 

    while( have_posts() ) : the_post();

        //Posts in the loop     
    endwhile;

else:

        //No post in homepage ?????      
endif;

?>

However, sometime we need to display post in homepage with conditions. An example with Noupe.com, they are using the Community News which all of news were submit will go to News category, but they don’t want to display a lot of community news in homepage. The best way to do is override and replace the main query in homepage. In the case I have just mentioned(At this time, Noupe has disabled Community submission !!!), the replaced query will be:

<?php

//Begin replace the main query query_posts('cat=-155'); //155 is the id of Community News category 
//The Loop if( have_posts() ) : 

    while( have_posts() ) : the_post();

        //Posts in the loop     
    endwhile;

else:

        //No post in homepage ?????      
endif;

//Reset the query wp_reset_query();

?>

With the query_posts, you can change the order, number of posts…. I would like to forward a link to Template Tags/query posts to check more information and usages.

Way back to the tutorial, you already knew how to use the loop in display posts, now we begin to work with our index.php. But at first, you have to clean this index.php because we have 4 blocks of post in HTML template. Keep only one post excerpt, remove all of others.

Before starting write code for display post excerpts, we need to look back to the split files. You remember that we split our HTML file into 3 files: header.php, sidebar.php and footer.php. Now, we need to include them again. In index.php file, put your header, sidebar and footer:

<?php

/**  * @package WordPress  * @subpackage FrozenFlirt_Theme  */
?>

<?php get_header(); ?>

            <div id="main-content">

                ..........

            </div>

            <?php get_sidebar(); ?>

<?php get_footer(); ?>

In main content elements, we write a loop of post to display:

<div id="main-content">
  <div class="container">

    <?php

    if(have_posts()) : while(have_posts()) : the_post();

    ?>

    <div class="post exerpt clearfix">
      <a href="#">
        <img alt="ahh ahh ahh"src="images/post-image-1.png"width="200"height="200"class="thumbnail" />
      </a>

      <h2><a href="#"rel="nofollow">Fronze Flirt Theme</a></h2>

      <small>Written by <a href="#"title="Lam Nguyen">Lam Nguyen</a> on <strong>Dec 11th</strong> in <a href="#"title="Tutorial Category">Tutorials</a></small>

      <div class="summary">
        <p>Lorem ipsum dolor sit amet, this is bold text consectetur adipiscing elit. This font is in italic cras lacinia pellentesque elit nec sodales. Etiam vehicula egestas interdum. Nulla facilisi. In at lectus odio, quis iaculis dui. </p>
        <p><a rel="nofollow"title="Read more this post"href="#">Continue Reading &raquo;</a></p>
      </div>

    </div>

    <?php endwhile; ?>

        <?php if(function_exists('wp_pagenavi')) : ?>
            <?php wp_pagenavi() ?>
        <?php else : ?>
            <div class="navigation"id="pagenavi">
                <div class="alignleft">
                    <?php next_posts_link(__('&laquo; Older Entries','arclite')) ?>
                </div>
                <div class="alignright">
                    <?php previous_posts_link(__('Newer Entries &raquo;','arclite')) ?>
                </div>
                <div class="clear"></div>
            </div>
        <?php endif; ?>

    <?php else: ?>
        <p><?php printf("Sorry, no posts matched your criteria."); ?></p>
    <?php endif; ?>

  </div>
</div>

This loop will display the number of post with the same title, thumbnail, description… because we haven’t change the code to display correct post title, post description… These code below is used for replace the HTML in the loop:

<?php
    if(have_posts()) : while(have_posts()) : the_post();          
?>
<div class="post excerpt clearfix">
  <a href="<?php the_permalink() ?>">
  <?php
        if( has_post_thumbnail() ) {
            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
        } else {
            // Who doesn't want a thumbnail??         }
  ?>
  </a>
  <h2><a rel="nofollow"  href="<?php the_permalink() ?>">
    <?php the_title(); ?>
    </a></h2>

  <small>
        Written by <?php the_author_posts_link(); ?>
                on <strong><?php the_time('F jS') ?></strong>
                in <?php the_category(', '); ?>
  </small>

  <div class="summary">
    <?php the_content( 'Continue Reading &raquo;' ); ?>
  </div>

</div>
<?php endwhile; ?>

Wow, we’re going to the most interesting feature of WordPress 2.9: Thumbnail Generation for Post. You remember, in the past, how we made thumbnail for a post? It was really a nightmare with a lot of code and stuff. Today, everything has changed. With few lines of codes, you can insert thumbnail for posts easily.

In functions.php file, insert these code to active the new feature:

add_theme_support( 'post-thumbnails', array( 'post' ) );

You can make this feature active for posts, pages… but for posts only in this case. Display the thumbnail within the loop:

<a href="<?php the_permalink() ?>">
    <?php
        if( has_post_thumbnail() ) {
            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
        } else {
            // Who doesn't want a thumbnail??         }
    ?>
</a>

This code will display the thumbnail with dimension: 200×200 pixels and the img tag is with class name thumbnail. The thumbnail will be added when writing post:

I recommend this post for new feature Post Thumbnail references: Using The New Post Thumbnail Feature In WordPress 2.9.

archive.php

This file will used for display category archive, tag archive… The easiest way is copy all code of index.php page and past it to archive.php because tag or category archive usually display in the same way as index page. In WordPress, when develop theme, the posts query was already made by WordPress, so that’s why we need just copy and paste content of index.php to the archive.php file. As I said above, if you need to display something different such as: posts order, number of posts will be displayed… just use the query_posts()function to override and replace the main query for the page.

However, in archive.php file, you need to notify users which page they are on. Insert these code on the top, before display the loop of posts:

                ...

                <?php

                if(have_posts()) :

                ?>

      <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
      <?php /* If this is a category archive */ if(is_category()) { ?>
        <h2 class="pagetitle">Archive for the &#8216;<?php single_cat_title(); ?>&#8217; Category</h2>
      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
        <h2 class="pagetitle">Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;</h2>
      <?php /* If this is a daily archive */ } elseif(is_day()) { ?>
        <h2 class="pagetitle">Archive for <?php the_time('F jS, Y'); ?></h2>
      <?php /* If this is a monthly archive */ } elseif(is_month()) { ?>
        <h2 class="pagetitle">Archive for <?php the_time('F, Y'); ?></h2>
      <?php /* If this is a yearly archive */ } elseif(is_year()) { ?>
        <h2 class="pagetitle">Archive for <?php the_time('Y'); ?></h2>
      <?php /* If this is an author archive */ } elseif(is_author()) { ?>
        <h2 class="pagetitle">Author Archive</h2>
      <?php /* If this is a paged archive */ } elseif(isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
        <h2 class="pagetitle">Blog Archives</h2>
      <?php } ?>

                <?php

                    while(have_posts()) : the_post();

                ?>

                ...

The result:

single.php

This file is used for display your WordPress posts. In this file, I will tell you a small trick. In HTML template, you see the post display as below:

<div class="summary">

    <p>Post Excerpt</p>

</div>

<div class="post-content">

    Post Main Content

</div>

If you put the_excerpt() and the_content() together to display as above. That will not work because the post excerpt will be duplicated. Even when put the excerpt to the Excerpt field which located below the post editor. This is good if you want to display links or images in your excerpt, but it doesn’t work here.

Alright, here is the trick. We will hook into the_content. In functions.php file, add these code:

add_filter('the_content', 'format_content');

function format_content($content) {

    if( preg_match('/<span id="(.*?)?"><\/span>/', $content, $matches) ) {

        $content = explode($matches[0], $content, 2);

        $content = '<div class="summary">' . $content[0] . '</div>' . $matches[0] . '<div class="post-content">' . $content[1] . '</div>';
    }

    return $content;

}

We will split the content into 2 parts then wrap each part by specific div tag with class name “summary” and “post-content”. Is that cool?

And this is the complete code of single.php file:

<?php

/**  * @package WordPress  * @subpackage FrozenFlirt_Theme  */
?>

<?php get_header(); ?>

            <div id="main-content">
              <div class="container">

                <?php

                if(have_posts()) : while(have_posts()) : the_post();

                ?>

                <div class="post clearfix">
                    <a href="<?php the_permalink() ?>">
                    <?php
                        if( has_post_thumbnail() ) {
                            the_post_thumbnail(array(200,200), array('class' => 'thumbnail'));
                        } else {
                            // Who doesn't want a thumbnail??                         }
                    ?>
                    </a>

                    <h2><a rel="nofollow"  href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>                
                    <small>Written by <?php the_author_posts_link(); ?> on <strong><?php the_time('F jS') ?></strong> in <?php the_category(', '); ?></small>

                    <?php the_content(); ?>

                </div>

                <?php comments_template(); ?>

                <?php endwhile; ?>

                <?php else: ?>
                    <p><?php _e("Sorry, no posts matched your criteria.","arclite"); ?></p>
                <?php endif; ?>

              </div>
            </div>

            <?php get_sidebar(); ?>

<?php get_footer(); ?>

You have done with the single.php file, but don’t forget to put <?php comments_template(); ?> before ending the loop.

comments.php

WordPress fresh installed will come with the default theme and we can use some of those files to re-use. In default theme directory, open comments.php file, copy all the code then paste it to your new theme comments.php file. Use css to style the comment form and comments list. That’s all we need for the comment template.

I recommend some tutorial that help you build a better comment:

• 30 Most Wanted WordPress Comments Page Hacks
• Styling Your WordPress Comments
• 10 Handy WordPress Comments Hacks

The most important when editing the comments.php file is DON’T FORGET to put these code before closing the comment form tag:

<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>

With page.php file to display pages, we are good to use the same code of single.php file because the in fact, page is a post.

Conclusion

This tutorial doesn’t guide you to build a completed WordPress theme, but at least it makes the WordPress Theme FrozenFlirt works with some basic function such as: view post, view index page, archive pages, comments…. If you need to build a completed theme with all of function you will need do more. The great place and my recommend website to learn how to mastering WordPress theme is WordPress Codex. Hope you guys design great WordPress theme from this tutorial. Any suggestion helps this tutorial more completed will be appreciated.

People asked me how I mention my recent articles in WordPress sidebar by display post thumbnails and titles with a well-styled. Today, I would like to response their request. This way is being used in some blogs. I’m not sure if they are using the same method as mine, but at least we will get the same result.

When design blog theme in WordPress, I always look for non-using plugins solution. People asked me which plugin I’m using for this sidebar. No, the answer is NO.

There are a lot of WordPress plugins to display your recent articles, popular articles to mention your posts in the sidebar widget. However, you forgot that you can do the same with a simple posts query using WP_Query(); function.

To begin, create new posts object that you will call by will have_posts() and display your posts within the loop

Example:

$wp_query->have_posts();

This function is called to see if there are any posts to show. Using the while loop, and we can use have_post() as the condition. This will iterate around as long as there are posts to show.

In my case, I’m using iterations, the_post(), within the while loop to iterate around as long as there are posts to show.

<ul>

  <?php $recent = new WP_Query("showposts=35"); while($recent->have_posts()) : $recent->the_post();?>

    <li>
      <a title="Permanent Link to <?php the_title(); ?>"rel="nofollow"href="<?php the_permalink() ?>">

        <?php if(get_post_meta($post->ID, "image", true)): ?>
            <img src="<?php bloginfo('template_url'); ?>/scripts/thumb.php?src=<?php echo get_post_meta($post->ID, "image", true); ?>&w=25&h=25&zc=1"alt="<?php the_title(); ?>" />
        <?php else: ?>
            <img src="<?php bloginfo('template_url'); ?>/images/thumbnail.png"width="25"height="25"alt="<?php the_title(); ?>" />    
        <?php endif; ?>

      <span><?php the_title(); ?></span></a>
    </li>

  <?php endwhile; ?>

</ul>

This code above will check if you have post meta name is image, it will display the thumbnail using timthumb script. Timthumb is a small php script for cropping, zooming and resizing web images (jpg, png, gif). Perfect for use on blogs and other applications.

[smartads]

You can change the number of post will be displayed and set the condition to display number of posts in single page larger than other page because the post page is always longer than others, right?

CSS Bonus:

.widget ul {
    list-style-type:none;
    margin:5px auto 8px;
    padding:0 0 2px;
    width:auto;
}

.widget ul li {
    clear:both;
    letter-spacing:0;
    margin:0;
    padding:5px 0 0;
}

.widget ul li a {
    border-bottom:0 dotted #DDDDDD;
    color:#333333;
    font-family:Georgia,"Nimbus Roman No9 L",serif;
    font-size:11px;
    font-weight:normal;
    margin:0;
    padding:0;
    text-decoration:none;
}

.widget ul li img {
    border:3px solid #DFDFDF;
    float:left;
    margin-bottom:10px;
    margin-right:10px;
    padding:1px;
}

.widget ul li span {
    display:block;
    padding:0;
}

Conclusion

We don’t need to use any plugin for display not only such a simple list of post like that but also other simple things in WordPress. WordPress provide us WordPress Codexwhich contains a thousand of Function References. If you want to build your own WordPress theme with unique style, the first thing you need is check out how WordPress function works. Good luck, hope see more beautiful WordPress themes from the web community.

This tutorial is in the series of “WordPress Theme from Scratch” that help you build a WordPress theme by yourself from nothing. We already learned how to create a mock up for WordPress theme in Photoshop last week. Today, we will continue to make HTML file from that psd layout.

If You want to stay updated and get news regularly consider subscribing to AEXT.NET feed and following on Twitter.

Have you check the previous post in this series? If you haven’t, I would like to forward you a link to a PSD tutorial right here: WordPress Theme from Scratch – Day 1: PSD. After showing that post, please download it then open it via Photoshop and we can begin the tutorial for HTML from it.

From the mock up that you have just downloaded, we will create one more layout for the post page in HTML that you can see at the end of this post.

Get ready

Honestly, I love to create a basic HTML in Dreamweaver first then edit it in Coda or any text editor. However, I would use Coda for the whole tutorial to help you know clearly how our layout comes from scratch.

To begin, we will create a files structure for our project. To help us easy to control our file, the easiest way for structure is something like below:

-- FrozenFlirt
----- index.html
----- style.css
----- images

Your layout in HTML should be:

We are going to work with the first mock up which is your blog home page. At first, there are some information about this template that you should know.

• Our template will be centered.
• Because we are going to create a design that works for screen solution from 1024×768, the width should be 910px and we need some extra margin 20px in the left and right side.
• I’m not sure if it supports for all major web browsers, but I will try my best

Prepare the HTML file

From the root folder of our project, create index.html file that contains this basic code:

<!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" />
    <title>FrozenFlirt WordPress Theme From Scratch</title>
    <link href="style.css"rel="stylesheet"type="text/css" />

</head>

<body>

    <div id="main-wrapper">

        <div class="container">

            <div id="header">

                <ul id="topmenu">
                    Menu items
                </ul>

                <div id="topsearch">
                    Search Panel
                </div>

                <div id="logo">
                    Logo
                </div>

            </div>

            <div id="main-content">

                Your content goes here

            </div>

            <div id="sidebar">

                Sidebar content goes here

            </div>

            <div id="flickr-stream">

                Flickr Stream

            </div>      

            <div id="twitter-update">

                Twitter

            </div>                      

        </div>

    </div>

    <div id="footer-wrapper">

        <div class="container">

            Footer content goes here

        </div>

    </div>

</body>
</html>

All of DIV element inside the segments (…-wrapper) will be fixed in width. However, before we go to CSS part, let reset our layout style first. Download the css reset right here and include it in our HTML file:

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=UTF-8" />
    <title>FrozenFlirt WordPress Theme From Scratch</title>
    <link href="reset.css"rel="stylesheet"type="text/css" />
    <link href="style.css"rel="stylesheet"type="text/css" />

</head>

We try to add some CSS code for the segments and the body, by the way, center the DIV with class name container:

body {
    font: 14px/21px Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333333;
    background-color:#cacaca;
}

#main-wrapper {

}

#footer-wrapper {

}

.container {
    width:950px;
    margin:0 auto;
}

Now, look at our page after reset css style and add some css code

Adding Background

And now, it’s time for us to add some backgrounds for our layout. First, we will add the main background. Because our background goes with noise effect, we cannot slide the image as small as 1px or 2px you usually did with solid background. Come back to our psd file and slide a background for it.

To slide out an image for background, you have to deselect the eye icon in the layers panel, that means you make other layers invisible except the background. Select an square by using Rectangular Marquee Tool with the size about 200px x 200px or larger like this:

We do the same as above for the header-wrapper, and this is how I did:

Referring to the layout that we made in Photoshop, we have a little light on top to make the background more attractive. Ok, show up your Guides by using CTRL + ; (Command + ; on Mac) and crop your main header background:

Change something in your css code to add background:

body {
    font: 14px/21px Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333333;
    background:#cacaca url(images/bg.png);
}

#main-wrapper {
    background: url(images/topmenu-bg.png) repeat-x;

}

#footer-wrapper {

}

.container {
    width:910px;
    padding: 0 20px;
    margin:0 auto;
}

#main-wrapper .container {
    background: url(images/mainheader-bg.png) no-repeat;

}

Also add some text to your main content to make our current draft layout higher, and here is what we got:

Header

We are going to add some items to our header menu first, then create a search panel with awesome transparent effect. Prepare the menu with some items by using un-order list:

                <ul id="topmenu">
                    <li>
                        <a href="#"title="Home Page"><span>Home</span></a>
                    </li>
                    <li>
                        <a href="#"title="Tutorial Category"><span>Tutorial</span></a>
                    </li>
                    <li>
                        <a href="#"title="Freebie Category"><span>Freebie</span></a>
                    </li>
                    <li>
                        <a href="#"title="Inspiration Category"><span>Inspiration</span></a>
                    </li>
                    <li>
                        <a href="#"title="Resources Category"><span>Resources</span></a>
                    </li>
                </ul>

This screenshot is captured before using css:

Add these CSS code to style our header menu:

#header {
    padding-top: 10px;
}

#header ul#topmenu {
    margin-top: 5px;
}

#header ul#topmenu li {
    display: inline;
    line-height: 28px;
    margin-right: 15px;
}

#header ul#topmenu li a {
    color: #6f6f6f;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

#header ul#topmenu li a:hover {
    color: #000000;
}

If you are using the psd file downloaded from previous post, you will understand why we have some margin and padding space here by show Guides in Photoshop.

I wrap menu item by a span tag because I want to make a rounded border for menu items when mouse is over. I will use 2 images for each menu, and this is the best way to cross browsers for rounded corners.

In Photoshop, crop the rounded border image into 2 images. By the way, we also need a background for search panel. Create new PNG file with some images inside for css sprites.

And now, make our menu more beautiful:

/*------ TOP MENU ------ */

#header ul#topmenu {
    margin-top: 5px;
}

#header ul#topmenu li {
    display: inline;
    float: left;
    margin-right: 10px;
}

#header ul#topmenu li a {
    display: block;
    color: #6f6f6f;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding:0 6px 0 0;
}

#header ul#topmenu li a:hover {
    color: #000000;
    background:transparent url(images/sprites.png) no-repeat right -34px;
}

#header ul#topmenu li a span {
    display: block;
    line-height: 28px;
    padding:0px 0px 0px 6px;
}

#header ul#topmenu li a:hover span {
    background:transparent url(images/sprites.png) no-repeat left -2px;
}

For the search panel, insert these HTML code into your html file:

<div id="topsearch">
  <form action="http://aext.net/"id="searchform"method="get">
    <fieldset>
        <input type="text"                 onblur="if (this.value == '') {this.value = 'Type Keywords And Hit Enter...';}"                 onfocus="if(this.value == 'Type Keywords And Hit Enter...') {this.value = '';}"                 value="Type Keywords And Hit Enter..."                 class="searchfield"id="searchbox"name="s"/>
    </fieldset>
  </form>
</div>

And CSS for it:

/*------ TOP SEARCH ------ */

#header #topsearch {
    float: right;
}

#header #topsearch fieldset {
    height: 28px;
    width: 247px;
    background:transparent url(images/sprites.png) no-repeat left -69px;
}

#header #topsearch fieldset .searchfield {
    background-color: transparent;
    -x-system-font:none;
    text-transform: uppercase;
    border: none;
    color:#6f6f6f;
    font-family:Arial,Helvetica,sans-serif;
    margin: 3px 0 0 3px;
    padding:5px;
    width:200px;
}

When you are styling the searchfiled, you may get problem with placing the textfiled perfectly with the background behind it. That will be easy if you set border for your TextField first, then you can see clearly its position. When you think it’s ok, just set border for it to none, example:

I don’t use the button for submit the form because who still want to click on that such submit button instead of enter in this century 21?

With logo, in Photoshop, select the selection of this logo layer, then navigate to Image > Crop. Remember to hide the background and you will get the logo with transparent background.

Now, insert HTML code for your logo. However, don’t forget to put the a div with clear class to make sure there is no floating elements allowed on the left or the right side of your logo. That means your logo part will go down, it will not float on the header menu or search panel.

.clear {
    clear: both;
}

[smartads]

Insert it right after the end of header menu:

<div id="topsearch">

    .............

</div>

<div class="clear"></div>

<div id="logo">
    <a href="#"title="FrozenFlirt Homepage"><h1>FrozenFlirt Theme</h1></a>
    <h3>"Wordpress Theme From Scratch"</h3>
</div>

<div class="clear"></div>

And css for it:

/*------- TOP LOGO -------*/

#header #logo {
    float: left;
    margin: 20px 0px;
}

#header #logo h1 {
    background: transparent url(images/logo.png) no-repeat;
    text-indent: -9999px;
    width: 253px;
    height: 39px;
}

#header #logo h3 {
    margin-top: 5px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: normal;
}

Your header without clear one would be:

It would be better if using clear class:

Main Content

In Photoshop, hold CTRL then select the gradient background on the top of main content to make a selection. Crop it, hide background behind and you will have the gradient background with transparent. Although you will see your selection is just a small selection, the image will be larger when you crop.

The following code is for the content:

<div id="main-content">
 <div class="container">

     <div class="post exerpt clearfix">
         <a href="#">
             <img alt="ahh ahh ahh"src="images/post-image-1.png"width="200"height="200"class="thumbnail" />
         </a>

         <h2><a href="#"rel="nofollow">Fronze Flirt Theme</a></h2>                
         <small>Written by <a href="#"title="Lam Nguyen">Lam Nguyen</a> on <strong>Dec 11th</strong> in <a href="#"title="Tutorial Category">Tutorials</a></small>

         <div class="summary">

            <p>Lorem ipsum dolor sit amet, this is bold text consectetur adipiscing elit. This font is in italic cras lacinia pellentesque elit nec sodales. Etiam vehicula egestas interdum. Nulla facilisi. In at lectus odio, quis iaculis dui. </p>
            <p><a rel="nofollow"title="Read more this post"href="#">Continue Reading &raquo;</a></p>

         </div>
     </div>    

 </div>
</div>

CSS for it:

/*------ MAIN CONTENT -------*/
#main-content {
    width: 574px;
    background-color: #FFFFFF;
    border: solid 1px #bbbbbb;
    padding: 1px;
    float: left;
}

#main-content .container {
    width: auto;
    padding: 20px;
    background: url(images/gradient.png) repeat-x;
    border: none;
}

.post {
    display: block;
    position: relative;
    font-size: 100%;
    border-bottom:1px solid #DFDDD5;
    margin-bottom:25px;
    padding-bottom:5px;
}

.post .thumbnail {
    float:left;
    margin-right:15px;
    margin-bottom:15px;
    width:200px;
    height:200px;
}

.post h2 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2em;
    letter-spacing:-0.04em;
    line-height: 1.05em;
    padding-bottom: 5px;
}

.post h2 a {
    color: #000000;
    text-decoration: none;
}

.post h2 a:hover {
    text-decoration: underline;
}

.post small {
    background-color:#B50505;
    padding:3px;
    padding-left:8px;
    padding-right:8px;
    color:#fffffe;
    font-size:0.85em;
}

.post small a {
    color:#fffffe;
    text-decoration:none;
}
.post small a:hover {
    text-decoration:underline;
    color:#fffffe;
}
.post .summary {
    display:block;
    font-style: italic;
    margin-top:20px;
    float:left;
    width:300px;
}

.post p {
    padding-bottom:2em;
}

Duplicate this post for many times, you will have a list of posts in homepage or categories posts listing.

You should use WP-Pagenavi plugin for pagination because it is a popular pagination plugin for WordPress. Please write your HTML code as that plugin will generate. In the HTML file, use these code for pagination:

                <div class="wp-pagenavi">
                    <span class="pages">Page 1 of 8</span>
                    <span class="current">1</span>
                    <a title="2"class="page"href="http://aext.net/page/2/">2</a>
                    <a title="3"class="page"href="http://aext.net/page/3/">3</a>
                    <a href="http://aext.net/page/2/">&raquo;</a>
                    <span class="extend">...</span>
                    <a title="Last &raquo;"class="last"href="http://aext.net/page/8/">Last &raquo;</a>
                </div>

The pagination temporary looks like this:

Copy css file of WP-Pagenavi plugin and replace it with:

/* +----------------------------------------------------------------+ |                                                                | |   WordPress 2.5 Plugin: WP-PageNavi 2.31                       | |   Copyright (c) 2008 Lester "GaMerZ" Chan                      | |                                                                | |   File Written By:                                             | |   - Lester "GaMerZ" Chan                                       | |   - http://lesterchan.net                                      | |                                                                | |   File Information:                                            | |   - Page Navigation CSS Style                                  | |   - wp-content/plugins/wp-pagenavi/pagenavi-css.css            | |                                                                | +----------------------------------------------------------------+ */

.wp-pagenavi {
    text-align: right;
    font-size: 14px;
}

.wp-pagenavi a, .wp-pagenavi a:link {
    display: inline;
    line-height: 80%;
    text-align: center;
    margin: 2px;
    text-decoration: none;
    color:#333333;
    background-color: #cacaca;
    padding: 3px 8px;
}
.wp-pagenavi a:visited {
}
.wp-pagenavi a:hover {
    background-color: #B40000;
    color:#FFFFFF;
}
.wp-pagenavi a:active {
    color:#FFFFFF;
}
.wp-pagenavi span.pages {
    min-width: 14px;
    line-height: 80%;
    text-align: center;
    padding: 8px 6px 8px 0px !important;
    text-decoration: none;
    float: left;
}
.wp-pagenavi span.current {
    display: inline-block;
    text-align: center;
    margin: 2px;
    text-decoration: none;
    color:#fff;
    background-color: #B40000;
    margin-left:3px;
    padding: 3px 8px;
}
.wp-pagenavi span.extend {
    display: inline-block;
    line-height: 22px;
    min-width: 18px;
    padding: 0px 3px 0px 3px;
    text-align: center;
    margin: 2px;
    text-decoration: none;
    color:#333333;
}

Here is your result:

Sidebar

For the popular posts widget, I suggest you using WordPress Popular Posts Plugin. The default code that plugin will generate is:

                <div class="widget"id="popular-posts">
                    <h3>Popular Posts</h3>
                    <ul>
                    <!-- WordPress Popular Posts Plugin v1.5.0 -->
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">5 New Useful jQuery Plugins For Your Next Projects</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">35 Fresh and Cool Web Design Interfaces for Inspiration</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">Bubble Effect with CSS</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">CSS Absolute Positioning: Create A Fancy Link Block</span></a> </li>
                        <li><a title="blablabla"href="#"><span class="wpp-post-title">Incredible Drop Down Menu Solution With CSS Only</span></a> </li>
                    </ul>
                    <!-- End WordPress Popular Posts Plugin v1.5.0 -->
                </div>

Because we need to build a sidebar with widget ready, so it depends on what widgets you will use. CSS code for the whole sidebar I’m using is simple as:

/*------SIDEBAR-------*/

#sidebar {
    float: right;
    width: 314px;
}

#sidebar .widget {
    margin-bottom: 25px;
}

#sidebar .widget h3 {
    font-family: "Myriad Pro", Helvetica, Arial;
    font-size: 2.5em;
    letter-spacing:-0.04em;
    line-height: 1.05em;
    padding-bottom: 5px;
    color: #000;
    text-shadow:1px 1px 1px #FFFFFF;
}

#sidebar #adblocks {
    text-align: center;
}

#sidebar #adblocks img {
    border:5px solid #DFDFDF;
    margin:0 5px 5px;
}

#sidebar .widget ul li {
    font-size: 100%;
    margin-bottom: 5px;
}

#sidebar .widget ul li a {
    background: url(images/606060.gif) no-repeat left 3px;
    padding-left: 20px;
    color: #606060;
    text-decoration: none;
}

#sidebar .widget ul li a:hover {
    background: url(images/B40000.gif) no-repeat left 3px;
    color: #B40000;
}

Some others footer stuffs

In this theme, I’m using Flickr Stream and Twitter Update. Someone love to use plugins to fetch data from their Flickr and Twitter account but I like to use javascript to handle it.

            <div id="flickr-stream">

                <h3>Flickr Stream</h3>
                <hr />
                <div class="clear"></div>
                <div id="flickr">
                    <noscript>Your message for people w/o javascript enabled goes here.</noscript>
                </div>

            </div>      

            <div id="twitter-update">
                <h3>Twitter Update</h3>
                <hr />
                <div class="clear"></div>
                <div id="twitter">
                    <ul id='twitter_update_list'></ul>
                </div>
                <a href="http://twitter.com/prlamnguyen"title="Follow me on twitter"><span id="followme">Follow Me!</span></a>

            </div>

Add 2 lines of html code here at the end of your HTML file before closing body tag to display twitter update. Change it to your twitter username and the number of tweet you wanna display:

    <script type="text/javascript"src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript"src="http://twitter.com/statuses/user_timeline/prlamnguyen.json?callback=twitterCallback2&count=2"></script>

Javascript to display Flickr stream:

<script type="text/javascript">

function flickr(id){

    $("<div>").attr("id", "photos").prependTo("#flickr");

    var url = 'http://api.flickr.com/services/feeds/photos_public.gne?id='+ id +'&format=json&jsoncallback=?';

    $.getJSON( url , function(data){

        $.each(data.items, function(i,item){

            var mImg = item.media.m,
                sImg = (item.media.m).replace("_m.jpg", "_s.jpg");

            $("<img/>")
                .attr("src", sImg)
                .attr("id", "thumb")
                .appendTo("#photos")
                .wrap('<a href="' + item.link + '" title="' + item.title + '" target="_blank" ></a>');

            if( i >= 9 ) return false;

        });

    });
}

$(document).ready(function() {

    var id = '35591378@N03';
    flickr(id);

});

</script>

Remember to implement jQuery framework to your theme.

Conclusion

We have just walked throught the tutorial explains how to convert PSD layout to HTML. This is just for your blog homepage. However, other pages on your blog will change only the content part, from this layout, I can create a layout for display articles:

• Download PSD Source

• Download HTML