Our blog, keeping you up-to-date on our latest news.

 

Tutorial: Code a WordPress Theme from Scratch (part 2)

November 4, 2010 at 5:56 pm | Blog | 7 comments

 

Following on from the previous blog Tutorial: Code a WordPress Theme from Scratch (part 1), we are now going to add more functions, files to make the theme more serious.

Before we creating files, let’s first go over how wordpress generates a page. The following diagram shows which template files are called to generate a WordPress page based on the WordPress Template hierarchy. It only includes some major templates, for a whole pictures, please go to http://codex.wordpress.org/Template_Hierarchy.

For example, “If a visitor goes to your home page at http://example.com/wp/, WordPress first determines whether it has a static front page. If a static front page has not been set(configured in the backend), then WordPress looks for a template file called home.php and uses it to generate the requested page. If home.php is missing, WordPress looks for a file called index.php in the active theme’s directory, and uses that template to generate the page.” so as to the other pages.

For all the pages, the final template to choose is always the index.php. That’s why for a wordpress theme, the index.php is a must.

Now, for our “simple type” theme. we are going to add a home.php, and to make the index.php more general, which means it fits for categories, pages, and singles (single pages or single posts) etc.

Step 1. Create home.php

As, we are going to use home.php for the front page, instead of index.php. we are going to create the home.php which is in a higher priority to index.php for the wordpress to pick for home page.
we just want to remain the front page the same, so just copy everything from index.php to home.php. or just rename the index.php to home.php.

Step 2. change the index.php

We have a home.php template to show the home page, we now need to change the index.php file to display everything else. For the index.php, we just only want to display the content of the category, the page, the single post etc. So we can add a loop in the main content. just find

<div id="articles" class="grid_12">
</div>

block. we will replace everything with our content retrieved from database. So replace the original html code with the following code snippet.

<div id="articles" class="grid_12">
	<?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
		<h1 class="entry-title"><?php the_title(); ?></h1>
		<div class="entry-content">
			<?php the_content(); ?>
		</div><!-- .entry-content -->
	<?php endwhile; else: ?>
	<h2>Woops...</h2>
        <p>Sorry, no posts we're found.</p>
        <?php endif; ?>
</div>

This code snippet is called a WordPress Loop. The first line of PHP starts this
loop, endwhile is the end of it. WordPress fills out the loop for each
article on the site, and if there isn’t any it displays that “Woops…” content.

The WordPress Loop is the core for a theme developer to know.

For now, we are having home.php and index.php. we found that both of the two files contains a lot of duplicate codes. which is very hard to maintain. if you want to add a menu in the footer, we need to change both files. So now we are going to introduce header.php and footer.php.

Step 3. add header.php and footer.php

As you can see header.php and footer.php are actually optional, the theme is working properly without them. But it is better to use theme, because, it will make your code neat, easy to maintain. and after all, it is easy to understand and to use.

for example, in our “simple type” theme, now we are having two php files index.php and home.php. For both of theme they have two copies of the following codes

<!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" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title><?php  bloginfo('name'); ?></title>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
</head>
<body>
<div id="wrapper" class="container_12">
	<div id="main" class="grid_12">
		<h1><a href="#" title="Chergaoui.com">Chergaoui.com</a></h1>
		<h2><a href="#" title="Main article title">Featured post : here goes a title</a></h2>
		<a href="#" title="Chefchaouen , Morocco - Africa">
                        <img src="<?php bloginfo('template_directory'); ?>/img/photo.jpg" title="Chefchaouen , Morocco" alt="Chefchaouen , Morocco" />
               </a>
         </div>
		<div id="footer" class="grid_12">
			<p>Made by <a href="http://chergaoui.com" title="Chergaoui.com">Ahmed Chergaoui</a>. Image courtesy of <a href="http://www.flickr.com/photos/danielebefera/1525784287/" title="marghe00">marghe00</a>.</p>
			<ul>
				<li><a href="#" title="Home">Home</a></li>
				<li><a href="#" title="About">About</a></li>
				<li><a href="#" title="Archives">Archives</a></li>
				<li><a href="#" title="Contact">Contact</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

and, as they are duplicate, why not put them in separate files, and include them in every other files which need them. And yes, wordpress does take this way. and you can put it in a file header.php and footer.php separately, and call functions get_header(); and get_footer() to include these codes.

we are now going to create header.php, copy the first code snippet into it. and to create another file footer.php, and copy the second above code snippet into it. they are ready to be called in the next step.

Step 4. call get_header() and get_footer() in other templates

following on from the last step, we have header.php and footer.php. We can use wordpress functions to include these two templates in other theme files.

for example, for the index.php, we should replace everything in the file which is already in the header.php with the function get_header(), and replace everything which is also in the footer.php with function get_footer.php.

and now the index.php looks neat and easy to read:

<?php get_header(); ?>
<div id="articles" class="grid_12">
		<?php if ( have_posts() ): while ( have_posts() ) : the_post(); ?>
				<h1 class="entry-title"><?php the_title(); ?></h1>				
					<div class="entry-content">
						<?php the_content(); ?>
					</div><!-- .entry-content -->
		<?php endwhile; else: ?>
			<h2>Woops...</h2>
			<p>Sorry, no posts we're found.</p>
		<?php endif; ?>
</div>
<?php get_footer(); ?>

If you once want to change something in the header.php or footer.php, you just change only one file, and it will take effect for every other files that include theme.

Reference

http://codex.wordpress.org/Template_Hierarchy
http://codex.wordpress.org/The_Loop_in_Action

To be Continued…

You can download the mediate theme here simple-type-part2.zip (Size 464.3 kB)

In the next tutorial part 3, I will elaborate on how to get the contents from database with wordpress Loop. please stay tuned.

<< Back to Blog Discuss this post

 

7 Comments to “Tutorial: Code a WordPress Theme from Scratch (part 2)”

  1. Violilla says:

    This is a good blog message, I will keep the post in my mind. If you can add more video and pictures can be much better. Because they help much clear understanding. :) thanks Violilla.

  2. wikileaks says:

    i am a big fan of wikileaks and love it to the core…..us sucks

  3. Prakash says:

    Well written tutorial which has the effective & useful notes with the proper, clear illustrations. It will be more helpful to us. These steps provides a clear idea with the appropriate codings, which are simple to understand & easy to follow.

    Thank you so much for sharing this sweet stuff. Keep on sharing such good things always.

  4. jerichoun says:

    Great blog!!! A++++

  5. goalcownelo says:

    большое спасибо было очень интересно читать

    admin Reply:

    thanks for reading, you are welcome. but could you please use english?