An Introduction to WordPress Templates and Uses

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.

• Search Results – the results based upon a search page
• Archive Page – a list of posts, but in many forms
  • Category
  • Tag
  • Date
  • Author
  • Custom Post Type
  • Custom Taxonomy
• Single Page – The results of a single posting

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();

• loads header.php
• It will also execute code to add/run additional filters/functions
• Typically it will contain the doctype, html, and head tag, and the opening body tag.
• It will contain the header information, and give a location for a dynamic menu to be placed, of have it hard coded.

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

get_footer();

• loads footer.php.
• It will also execute code to close out the file. This is through the command wp_footer(); which should be in footer.php Examples might be:
  • add in JavaScript code
  • Track usage
  • etc
• This usually displays the footer div, closes out the containing div, and closes out the body and html tags.

get_sidebar();

• loads sidebar.php.
• Sidebars generally display widgets which can be added through a display options page in the WordPress menu
• You can define multiple widget areas with the code below (Other CMSes will use different methods to do the same thing.)

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.

• Comments – for displaying a comment form, and the comments
• Search Box – for displaying how the search box should look

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>
 <h1><?php the_title(); ?></h1>
	<?php if ( 'post' == get_post_type() ) : ?>
  	<div>
  		<?php twentyeleven_posted_on(); ?>
  	</div><!-- .entry-meta -->
  	<?php endif; ?>
  </header><!-- .entry-header -->
 <div>
  <?php the_content(); ?>
  <?php wp_link_pages( array( 'before' => '<div><span>' 
		. __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
  </div><!-- .entry-content -->
 <footer>
  <?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>&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.

An Introduction to WordPress Templates and Uses was originally found on Access 2 Learn