When I first started designing custom themes for WordPress, I found this link and thought I would share it. It was a great starting point for me which helped me get to where I am now with theme development.
How WordPress Works
WordPress works in a rather straightforward manner but it may seem confusing if you are completely new to the concept. WordPress relies on PHP to call on different parts of your content from the database management system it stands on. For example, look in your /wp-content/themes/twentyten/ directory and open the header.php file. As you scroll through the code notice the PHP calls, they start with a <? and end with ?>. Look at line 37 and notice the call for your stylesheet URL:
[php]<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo(‘stylesheet_url’); ?>" />[/php]
This line uses PHP to look-up your stylesheet’s location from the database. This basic function of retrieving or calling some kind of data from your database and using PHP to display it in your XHTML is how WordPress works. Throughout this process you will be substitutingPHP for different parts of your content and your code. This will make editing easier in the long run, as you will find out. Now that you understand the basics of how WordPress works, lets get started.
First Things First
The first step is to create a new folder and name it whatever you want your theme to be called. Next, create two new files, style.css and index.php and place them in the folder. Believe it or not, these are the only two files you actually need for a WordPress theme. Now copy and paste the code from your original CSS file into the style.css file you just created. At the top add the following code:
[css]/* Theme Name: Replace with your Theme’s name.
Theme URI: Your Theme’s URI
Description: A brief description.
Version: 1.0
Author: You Author URI: Your website address. */[/css]
These comments simply help WordPress properly identify the theme. Your stylesheet is now ready to go.
Chop It Up
Now let’s start chopping up your HTML. Remember how we talked about WordPress using PHP to call data from your database? Well WordPress can also use PHP to call different files from within your template folder. Imagine your current HTML code chopped up into 4 (or more) different sections. For example, take a look at the layout and corresponding HTML of this page. The header comes first, followed by the content, then the sidebar, and finally the footer. Instead of keeping these 4 parts of the HTML together in one file, you are going to put each of them in their own separate file. Then call on them one by one using PHP.
So go ahead and sort through your HTML code and place some markers in the 4 places where you plan on cutting the code into 4 separate sections.
Note: These next steps assume you have your page set up left to right: header, content, sidebar, footer. If your page is ordered differently you will have to switch a couple of these steps around, but I am sure you can figure that out.
Now create 3 new files (header.php, sidebar.php, footer.php) and place them in your theme directory. Next take a look at the header.php file from the Twenty Ten theme we looked at earlier. Notice all the PHP that is used in between the <head> tags. Copy that code to your new header.php file. Now open up your original HTML file and copy the code you marked off for your header (1st section) into your new header.php file (underneath the <head> section). Save and close.
Now open up your new index.php file. Copy the second part of your original HTML code, the content (2nd section) into your new index.php file. Save and close.
Getting the hang of it?
Next open up your new sidebar.php file, copy the sidebar (3rd section) of your original code into the sidebar.php file. Finally, copy the original footer (4th section) of code into your new footer.php file.
Put It Back Together
Your original code should now be chopped up into 4 different files (header.php, index.php, sidebar.php, footer.php). Let’s put it back together using a few lines of PHP. Open up your index.php file, it should contain the HTML from the content (2nd section) of your original code. Add this line at the very top of the file:
[php]<?php get_header(); ?>[/php]
Now go to the absolute bottom of your index.php file and add these two lines:
[php]<?php get_sidebar(); ?>[/php] [php]<?php get_footer(); ?>[/php]
These 3 simple lines of PHP are telling WordPress to fetch and display your header.php, sidebar.php, and footer.php files within your index.php file. Your code is now officially put back together. Now, if you want to edit your sidebar you can just edit your sidebar.php file, instead of sorting through your index.php to find it. The same goes for your header.php and your footer.php.
The Loop
Your index.php is almost finished. The final step is to insert the actual content into the code. Luckily, WordPress uses PHP for this as well. The Loop is the PHP function WordPress uses to call and display your posts from the database they are saved in. Grab this code and paste it into your new theme’s index.php file (inside of whichever div you are using to hold your content).
[php]<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>
<?php endif; ?>[/php]
You just inserted a basic version of the loop into your code! WordPress will use the loop to display your posts and comments on your website.
This is an example of a basic commented loop in wordpress
[php]<!– Start the Loop. –>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<!– Display the Title as a link to the Post’s permalink. –>
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h2>
<!– Display the Time. –>
<small>
<?php the_time(‘F jS, Y’); ?>
</small>
<!– Display the Post’s Content in a div box. –>
<div class="entry">
<?php the_content(); ?>
</div>
<!– Display a comma separated list of the Post’s Categories. –>
<p class="postmetadata">Posted in
<?php the_category(‘, ‘); ?>
</p>
</div>
<!– closes the first div box –>
<!– Stop The Loop (but note the "else:" – see next line). –>
<?php endwhile; else: ?>
<!– The very first "if" tested to see if there were any Posts to –>
<!– display. This "else" part tells what do if there weren’t any. –>
<p>Sorry, no posts matched your criteria.</p>
<!– REALLY stop The Loop. –>
<?php endif; ?>
[/php]
The End
Now upload your theme folder to /wp-content/themes/. Then log into WordPress and activate your theme. Wasn’t that easy?
This tutorial covered the basics for converting your theme to WordPress. To further customize and enhance your theme start looking at the WordPress Codex, specifically Template Tags and Template Files. You can use template tags in your sidebar, in your header, or your footer to call menus, categories, posts, etc. As you learn more about template tags and template files you will discover the endless possibilities for customizing your new WordPress blog.
Source – The Theme Foundary
