Template Design

A WordPress template is a PHP file, or set of files, used to display WordPress content. Regardless of the Content Management System (CMS) used, the template system will work in a similar manner. However, each CMS system will have slight differences to the way they define their template system.

A CMS Template does many of the same things that a Dreamweaver template does. It looks to display common areas, in a consistent manner, and then to display content that changes in a consistent, but unique to that page, manner.

A template will often split out the header, footer, and sidebar(s) from the content, so the main file can be simplified. Often the main content section will have several ways to be displayed depending upon the type of content that is being displayed.

A template file(s) will also reference the necessary external files to properly display the web page. This would be the CSS and JavaScript files.

WordPress Themes (aka Templates)

WordPress themes are notoriously flexible, but that also makes them potentially complicated, with many files involved.

However, the themes follow a hierarchy. This allows WordPress to know which file to grab. If it can't find that file, it always can fall back, until it reaches a single file, the index.php file. If that doesn't exist.... hmm.....

Common Types of Content (for Wordpress)

Wordpress has several common "page" types. These are normally supported by most, if not all themes. There are many more of course, some of which are rarely supported, or only supported when an individual builds a theme based upon their usage.

To use one of these types, WordPress has defined a series of files, and one only needs to use the right file name.

The standard sections

WordPress has design several standard functions for calling the normal files which make up the consistent part of the layout. Each file can have PHP code within it.

get_header();

wp_nav_menu( array( 'theme_location' => 'primary' ) )

get_footer();

get_sidebar();

dynamic_sidebar( 'sidebar-1' )

Other Common Files

Because so many file types exist, there are often sections of files which are repeated. To keep them similiar, a theme designer may import those from an external file, so if there needs to be a structural change, it can happen in only one place.

Executing through "the Loop"

The loop is what WordPress calls running through the list of post(s) which should be displayed for a given page. How the post(s) will be displayed may change based upon what type of page you are looking at.

A list of posts will be designated before hand. Normally going through the loop will look something like: 

<?php while ( have_posts() ) : // while there are more post to go through, 
	//do this loop
the_post(); // set up information about the post to be displayed. 
// This sets up several variables behind the scenes
?>

<?php endwhile; ?>

The content of the post can then be put inside the loop. This may include things like navigation to the next/last posts, "metadata" about the posts (author, date, categories, tags, etc.) and more.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="entry-header">
 <h1 class="entry-title"><?php the_title(); ?></h1>
	<?php if ( 'post' == get_post_type() ) : ?>
  	<div class="entry-meta">
  		<?php twentyeleven_posted_on(); ?>
  	</div><!-- .entry-meta -->
  	<?php endif; ?>
  </header><!-- .entry-header -->
 <div class="entry-content">
  <?php the_content(); ?>
  <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' 
		. __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
  </div><!-- .entry-content -->
 <footer class="entry-meta">
  <?php
  /* translators: used between list items, there is a space after the comma */
  $categories_list = get_the_category_list( __( ', ', 'twentyeleven' ) );
 /* translators: used between list items, there is a space after the comma */
  $tag_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
  if ( '' != $tag_list ) {
  $utility_text = __( 'This entry was posted in %1$s and tagged %2$s by 
		<a href="%6$s">%5$s</a>. Bookmark the 
		<a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 
		'twentyeleven' );
  } elseif ( '' != $categories_list ) {
  $utility_text = __( 'This entry was posted in %1$s by <a href="%6$s">%5$s</a>. 
		Bookmark the 
		<a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 
		'twentyeleven' );
  } else {
  	$utility_text = __( 'This entry was posted by <a href="%6$s">%5$s</a>. 
		Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">
		permalink</a>.', 'twentyeleven' );
  }
 printf(
  $utility_text,
  $categories_list,
  $tag_list,
  esc_url( get_permalink() ),
  the_title_attribute( 'echo=0' ),
  get_the_author(),
  esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) )
  );
  ?>
 <?php if ( get_the_author_meta( 'description' ) && 
		( ! function_exists( 'is_multi_author' ) || is_multi_author() ) ) : 
	// If a user has filled out their description and this is a multi-author blog,
	// show a bio on their entries ?>
  <div id="author-info">
  	<div id="author-avatar">
  	<?php echo get_avatar( get_the_author_meta( 'user_email' ), 
			apply_filters( 'twentyeleven_author_bio_avatar_size', 68 ) ); ?>
  	</div><!-- #author-avatar -->
  <div id="author-description">
  	<h2><?php printf( __( 'About %s', 'twentyeleven' ), get_the_author() ); ?></h2>
  	<?php the_author_meta( 'description' ); ?>
  	<div id="author-link">
  		<a href="<?php echo esc_url( 
				get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" rel="author">
  		<?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 
				'twentyeleven' ), get_the_author() ); ?>
			</a>
  	</div><!-- #author-link	-->
  </div><!-- #author-description -->
  </div><!-- #entry-author-info -->
  <?php endif; ?>
  </footer><!-- .entry-meta -->
  </article><!-- #post-<?php the_ID(); ?> -->

 

Another Method - SMARTY

SMARTY is a templating system for PHP. I have seen it used in several CMS systems. However, it is not used in WordPress, or any of the major CMS systems.