DIGITALREP

How to make a basic WordPress templateOctober 13, 2013

So you’ve decided that this WordPress thing is pretty cool, but you really want to make your own WordPress template? Well, it all begins with index.php; at the bare minimum, index.php contains three php functions and ‘the loop’ (the loop that runs until it has grabbed all of the blog’s posts and displayed them on the front page). The other functions simply grab other parts of the template (the header, the sidebar and the footer) in order to glue them together with the loop on the front page.

The index.php file

Here’s an example of a bare-bones index.php with no HTML elements or CSS formatting, adapted from the WordPress theme twentyeleven:


<?php 
   get_header();
    // The Loop:
    if (have_posts()) :
        while(have_posts()) : 
        the_post();
        get_template_part(‘content’, get_post_format());
    endwhile;
    else:
        echo “<p>There are no posts.</p>”;
    endif;
    get_sidebar();
    get_footer();
?>

The loop calls the function the_post() to get information about each post one at a time, then calls get_template_part() with the arguments ‘content’ and the post format. If the post is on the index page, there will be no additional post format; the function will simply insert content.php into index.php for each post.

If you were viewing the post on its own page, however, the post format might be ‘single’ and content-single.php would be inserted into index.php.

There is usually a template file for all of the post formats, i.e. content-aside, content-gallery, even content-none for when a search has returned no results or a bad url has been tried.

In some themes, content.php covers index.php, single post, and the search pages all at once.

Content.php

Here is an example of what a bare-bones content.php might look like:


<div class=”post”>
    <p>
       <a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>
       Posted on <?php the_date(); ?> by <?php the_author(); ?>
   </p>
   <p><?php the_content(); ?></p>    <p>This entry was posted in <?php the_category(‘, ‘); ?> and tagged <?php the_tags(‘’, ‘, ‘, ‘’); ?></p> </div>

As you might have guessed, the_header() simply inserts header.php. Similarly, the_sidebar() and the_footer() inserts sidebar.php and footer.php.

Header.php

An example header.php:


<html>
<head>
    <title><?php bloginfo( 'name' ); ?></title>
    <link rel=”stylesheet” type=”text/css” media=”all” href=” <?php bloginfo( 'stylesheet_url' ); ?>”> 
</head>
<body>
   <div id=”header”>Welcome to My Blog</div>

Footer.php

And an example footer.php:


    <div id=”footer”>Copyright © 2013 My Blog</div>
</body>
</html>

Most of the other files included in the wordpress template are only concerned with changing the way things look, i.e. dictating which html elements surround certain information. Some of these files include:

comments.php, archive.php, search.php, single.php, author.php, etc.

Comments.php

An example of a heavily abbreviated comments.php:


<div id=”comments”>
   <?php if(comments()) : ?>
      <h2><?php get_the_title(); ?></h2>
      <ol><?php wp_list_comments(); ?></ol>
   <?php endif; ?>
   <?php comment_form(); ?>
</div>

As you can see here, wp_list_comments() takes care of wrapping the comments in html elements as it sees fit; it also takes care of trackbacks and pingbacks.

Style.css

The main stylesheet used in the wordpress theme is style.css. This is used simply to style the aforementioned html elements. An example relating to comments.php:


#comments
{
   padding: 12px;
   border: solid 1px #ccc;
   box-shadow: 0px 0px 3px #aaa;
}
#comments h2
{
   font-weight: bold;
   font-family: Bazukah;
}
#comments ol
{
   background: #aaa;
}

Overriding WordPress functions

In order to override wp_list_comments() with your own function so that you can display comments the way you want to, it must be called with arguments; specifically, the function you would like to be called instead of the default WordPress function:


   <ol><?php wp_list_comments(‘type=comment&callback=custom_comments’); ?></ol>

Functions.php

Which brings us to another very important template file: functions.php. This is where all the custom override functions like the one called above go.

Functions.php, which now includes our custom comments override function, (which has been heavily simplified) will now look like:


function custom_comments($comment) 
{
  $GLOBALS[‘comment’] = $comment;
  echo “<li>”;
  echo get_avatar($comment, 39);
  echo “On “ . get_comment_date() . “ at “ . get_comment_time() . “, “;
  echo “<strong>” . get_comment_author_link() . “</strong> said: “;
  echo comment_text() . “</li>”;
}

Custom Static Frontpage

If you want a frontpage that’s different to the default that comes with wordpress, which is simply a list of blog posts with widgets on the side (latest posts, archives, about me etc), then all you have to do is create it and call it front-page.php and include it with the other page files in your theme.

You can make this front page template look any way you want – usually they don’t include widgets but they do include the latest few posts, the header and the footer. Sometimes they include sliders and contact forms. It’s really up to you.

To set front-page.php as the front page you go to customize your site or (Settings -> Reading) and select a static page to display as the front page rather than a list of posts.

The front-page.php must contain this loop:


<?php while ( have_posts() ) : the_post(); ?>
  <article id="post-" >
    <header class="entry-header">
      <h1 class="entry-title">
    </header>

    <div class="entry-content">
      <?php the_content(); ?>
      <?php wp_link_pages(array('before' =>'')); ?>
    </div>
    <footer class="entry-meta">
      <?php edit_post_link(__('Edit', 'twentytwelve'), '', ''); ?>
    </footer>
  </article>
<?php endwhile;?> 

Category: Tutorials
Tags:  

Leave a Reply

Your email address will not be published. Required fields are marked *