Maybe you have installed WordPress a plenty of times and have used themes downloaded from Internet, as I did. Now it’s time to start you own, from zero. I am assuming that you already comfortable with making PHP + HTML + CSS websites.
You can start with a single index.php page, a style.css file and your pictures. Write it as you used to. Lets suppose that your theme’s name is “Twenty Ten“. So all your theme files must be placed under the wp-content/themes/twentyten WordPress directory.
But pay attention to those details below.
CSS
To WordPress recognize your theme, must there is a file called style.css and its first lines should provide the details in form of comment:
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width (optional)
License:
License URI:
General comments (optional).
*/
The index.php file
Only one index.php file is required but you can create other php files. I will talk about it later.
Document head
It is a good idea to start the document head like this:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
In this code you can see some of the WordPress Functions working for you. With this you keep the WordPress Admin Bar when your user is logged in.
Accessing files inside theme directory
When accessing files from your theme directory, like an image, use the bloginfo(‘template_url’) function.
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" />
Blog menu
Inside the WordPress Dashboard you can create pages. If you need a menu with links to all this pages use the wp_nav_menu() function, that returns it with a <li> notation.
Showing the posts
If you are used to work with PHP, you will easily understand this:
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
?>
That’s it. You can use HTML tags inside this loop to make the post’s appearance as you want. And there are a lot of functions that you can use inside this loop here: http://codex.wordpress.org/Template_Tags. They are self explanatory.
Other PHP files
The index.php file is enough. It can show the list of posts, a single post, a single page, the search results and more.
Let’s suppose that you want a different layout or show different information when opening a single post. For this you should create a single.php file. For a page, create a page.php file. Use the same source code above and WordPress will do the rest for you. All this page’s types are listed here: http://codex.wordpress.org/Template_Hierarchy.
And there is one more thing! When you start creating new PHP files, a part of the source should repeat in all of them. Specially the header, sidebar and footer parts. So, you can create the header.php, sidebar.php and footer.php files, write the source code on them and use the get_header(), get_sidebar() and get_footer() functions where you want them included.
Conclusion
With this you are ready to make a complete WordPress Theme. To become an expert you should start reading http://codex.wordpress.org/Theme_Development and its references.
Please feel comfortable to leave comments with questions, tips and suggestions to make this article better.
