Understanding WordPress Templates

Posted in Featured, Web
Understanding WordPress Templates

Wordpress is king when it comes to the contemporary blog movement. With over 73 million sites the network is incredibly robust, which allows for a wide range of tutorials and support. But for those looking to develop pages beyond the blog, or at least beyond the pre-made templates, it can take a bit of expertise.

As I recently designed and developed my first WordPress site, I (like any new developer) had a few questions. After creating semantic HTML and CSS, the process of developing my WordPress template wasn’t too painful but still required a significant amount of research and understanding. Within this post I’ve compiled some basic information about WordPress templates that I found very helpful. You’ll have the opportunity to look at my code and see how I was able to develop this site in a relatively quickly amount of time.

What is a template?

A WordPress template is made up of a relatively small set of PHP* files along with a main CSS script. Each of these files describes a certain aspect of a website –header, footer, posts, etc.—which are then pieced together to create unique web pages. Below is a list and explanation of each of the required files needed to develop your custom WordPress template.

*As WordPress is based in PHP, your HTML will need to be infused with a little bit of outside code—this is most commonly understood as the “Wordpress Codex.” If you want to learn more about PHP, visit W3 Schools. If you’re interested in further details associated with the WordPress Codex, check out the Codex Manual.

style.css

For your WordPress site, the first thing you’ll need is your main CSS file (you’ll need this for any site that you develop).Take your CSS file and rename it “style.css.” This script will provide the styling for your entire WordPress site. Place this file, along with all of the other php files, in the main directory of your template folder.

header.php

Your header.php is, well…your header. This, along with your footer.php file, will be present on each of your WordPress pages. Your header is made up of your HTML code (before the </header> tag) with a bit of the WordPress codex inserted.

See the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
    <title><?php bloginfo('Luke Clum'); ?> <?php wp_title(); ?></title>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" />
    <link href='http://fonts.googleapis.com/css?family=Contrail+One' rel='stylesheet' type='text/css' />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <?php wp_head(); ?>
</head>
<body>
    <div id="header">
        <div class="container">
                <a href="/" class="logo">Luke Clum - A Designer and Marketer<span></span></a>
                <ul id="menu">
                <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
                </ul>
        </div>
    </div>

Now this may look a bit confusing, but lets break down a few of the main elements. (Note that all of the PHP code will be displayed in green)

language_attributes() – Establishes the language type
bloginfo() – Accesses the predetermined information about the blog such as the name
wp-title() – Simply returns the title of page
wp_head() – This essentially pulls the javascript and other header stuff
wp_list_pages() – Pulls pages from WP and lists them in the header navigation

footer.php

Your footer file is made up of everything from <div id=”footer”> tag downwards within your HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="footer">
	<div class="container">
	<div id="footer-content" class="block">
        <div class="footer_inside">
               <div class="footer-nav">
               <ul>
	       <li>Site Designed &amp; Developed by Luke Clum<br />
               Copyright <?php the_time('Y'); ?> <a href="http://www.updateyourbrowser.net/en/" class="browser">Update Your Browser</a>
               </li>
               </ul>
               </div>
               <div class="footer-icons">
	       <a href="http://www.facebook.com/lukeclum" class="facebook">Facebook<span></span></a>
	       <a href="http://www.linkedin.com/in/lukeclum" class="linkedin">LinkedIn<span></span></a>
	       <a href="mailto:clum.luke@gmail.com" class="email">Email<span></span></a>
               </div>
        </div>
        </div>
	</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

the_time('Y') – Displays the current year

index.php

All right, now your Index.php file is the meat and potatoes of your blog. Within this file you will be inserting the famous “Wordpress loop” which will essentially search for your posts, organize your posts and then display them according to your specifications.

Below is a very basic index.php file with a barebones version of the loop.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php get_header(); ?>
<div id="content">
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
	<?php the_content(); ?>
	<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p>
	<?php endwhile; else: ?>
	<h2>Woops...</h2>
	<p>Sorry, no posts we're found.</p>
	<?php endif; ?>
	<p align="center"><?php posts_nav_link(); ?></p>
</div>
<?php get_footer(); ?>

You’ll notice that the code begins with get_header() and ends with get_footer(). These functions will pull your header and footer templates and display them within your webpage.

Now lets take a look at the code for my index file – aka for my main blog page (www.lukeclum.com/blog).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<?php get_header(); ?>
<div id="main">
<div class="container">
 
         <div id="block_content" class="block">
	 <div class="subblock_inside">
              <h2>I'm a Designer and Marketer</h2>
              <a href="/about" class="learn-more">Learn More<span></span></a>
         </div>
         </div>
 
         <div id="blog-feature" class="block">
              <div class="feature-content">
                   <?php if (is_home() && !is_paged()) : ?>
   	           <?php query_posts('cat=3&showposts=1'); // shows only one single Featured post ?>
    		   <?php while (have_posts()) : the_post(); $thumb = get_post_meta($post->ID, 'featured-img', $single = true); ?>
                   <div class="feature-image-block">
                       <?php // if there's a thumbnail
			   if($thumb !== '') { ?>
			   <img src="<?php echo $thumb; ?>" />
			   <?php } // end if statement
			   // if there's not a thumbnail
			   else { echo ''; } ?>
                    </div>
        	    <div class="feature-text-block">
                           <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
                           <p><small>Posted in <?php the_category(', ') ?></small></p>
                           <?php the_content(''); ?>
		    </div>
                    <?php endwhile; ?>
                    <?php endif; wp_reset_query(); ?>
		    <?php query_posts('cat=-3'); // excludes Featured posts ?>
              </div>
         </div>
 
         <div id="blog" class="block">
              <?php if ( have_posts() ) : ?>
	      <?php while ( have_posts() ) : the_post(); ?>
              <div id="blog-content">
  		     <div class="blog-post">
                          <div <?php post_class() ?>>
                               <?php if ( has_post_thumbnail() ) : ?>
                               <div class="post-thumb">
                               <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
                               </div>
                               <?php endif; ?>
                               <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
                               <?php the_content(''); ?>
            		       <p><small>Posted in <?php the_category(', ') ?></small></p>
                           </div>
  		      </div>
	      </div>
              <?php endwhile; ?>
              <?php else : ?>
                      <h2>Nothing Found</h2>
                      <p>Sorry, but there's nothing here...</p>
                      <p><a href="<?php echo get_option('home'); ?>">Return to Homepage</a></p>
              <?php endif; ?>
              <?php get_sidebar(); ?>
              <div style="clear:both"></div>
         </div>
 
</div>
</div>
<?php get_footer(); ?>

You can see that my blog is broken up into 3 main sections. The top “about me” section is merely html. Next I’ve coded in a “featured blog” section which will highlight a preselected blog. Within the third and final section you’ll notice my modified version of the loop. Once you recognize the WordPress codex, you can begin to create classes and add styling.

A few things to notice.

the_post_thumbnail() – Displays a the posts “featured image.”
the_title() – Calls the posts title.
the_content('') – Displays all of the posts content.
the_category(', ') – Returns the posts categories.
get_sidebar() – Will pull the sidebar.php file and display your blog sidebar.

sidebar.php

The sidebar file will display your page archives, categories, text, images or pretty much anything you want. Lets look at some code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="blog">
<div id="sidebar">
 
	<a href="/blog"><h4>Blog home</h4></a>
        <div class="separator"></div>
        <h4>Categories</h4>
	<ul>
	<?php wp_list_categories('title_li=&exclude=3'); ?>
	</ul>
 
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
<?php endif; ?>
 
</div>
</div>

Now I have added some custom styling to my sidebar. First I’ve inserted a static “Blog Home” link, next a line separator, and finally a specialized version of the categories widget which restricts one of my categories from displaying. However, the most important code within the sidebar is that last function titled “dynamic_sidebar.”

dynamic_sidebar() – This is really important if you wish to have a non-static sidebar. Meaning that you can drag widgets from within your WP Admin directly into your sidebar.

archive.php

Most blogs will contain either an archive or a category list. The job of the archive.php file is to display these filtered posts successfully. So, if you click on “May” posts, the qualified posts will be displayed according to your archive file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php get_header(); ?>
<div id="main">
<div class="container">
 
         <div id="block_content" class="block">
	 <div class="archive_inside">
               <?php if ( have_posts() ) : ?>
               <?php if (is_category()) { ?>
                    <h2 class="archive-title">Post from Category: <?php single_cat_title(); ?></h2>
               <?php } elseif (is_month()) { ?>
                    <h2 class="archive-title">Posts from <?php the_time('F, Y'); ?></h2>
               <?php } ?>
         </div>
         </div>
 
         <div id="blog" class="block">
              <?php if ( have_posts() ) : ?>
	      <?php while ( have_posts() ) : the_post(); ?>
              <div id="blog-content">
  		     <div class="blog-post">
                          <div <?php post_class() ?>>
                               <?php if ( has_post_thumbnail() ) : ?>
                               <div class="post-thumb">
                               <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
                               </div>
                               <?php endif; ?>
                               <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>
                               <?php the_content(''); ?>
            		       <p><small>Posted in <?php the_category(', ') ?></small></p>
                           </div>
  		      </div>
	      </div>
              <?php endwhile; ?>
              <?php else : ?>
                      <h2>Nothing Found</h2>
                      <p>Sorry, but there's nothing here...</p>
                      <p><a href="<?php echo get_option('home'); ?>">Return to Homepage</a></p>
              <?php endif; ?>
              <?php get_sidebar(); ?>
              <div style="clear:both"></div>
         </div>
 
</div>
</div>
<?php get_footer(); ?>

One of the first things you should notice is how similar the archive.php is to the index.php. In my site, the loop is identical. However, unlike the index.php, I don’t have the “about me” section or the “featured blog” section. Instead I have some simple code that displays the title of the category/archive date.

if (is_category()...single_cat_title() – States that if the post category was picked, display the category title.
elseif (is_month()...the_time('F, Y') - States if the category was not selected and the month was, display the time.

single.php

Your single.php file will be the template for displaying a single blog post. The file should be very simple and reflect a basic Wordpress loop. See below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php get_header(); ?>
 
<div id="main">
<div class="container">
 
        <div id="blog" class="block">
        <?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : the_post(); ?>
             <div <?php post_class() ?>>
             <div id="blog-title">
                    <h1><?php the_title() ?></h1>
                    <small>Posted in <?php the_category(', ') ?></small>
             </div>
             <div id="blog-content">
                    <?php the_content(''); ?>
             </div>
        </div>
        <?php endwhile; ?>
        <?php endif; ?>
        <?php get_sidebar(); ?>
        <div style="clear:both"></div>
        </div>
 
</div>
</div>
<?php get_footer(); ?>

You will notice that I’ve simply run the loop, classed my title and content for styling and called for the sidebar. This should feel really easy, especially after developing your index.php.

page.php

Your page.php file is the template for all of your pages. It can be identical to your single.php, but can also be customized if you wish to do so.

Creating Additional Templates

So, now that you’ve developed the main structure of your new WordPress site, you may want to develop a few additional templates for some customized pages. Simply develop your php file and add the below code before the get_header() tag – Replace “New Template” with your template title.

1
2
3
4
5

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

So there you have it. Above are the main PHP files needed to design your own custom WordPress. There is a lot more that you can do, but it pays to start with the basics. Hope you enjoyed!