This is the 3rd in a series of articles discussing the different pieces of WordPress. We’ve already discussed the header.php and the footer.php—but they are only part of the picture. What happens between the two files is the actual content on your WordPress site and pages, and we will now delve into templates: where the header, footer, and content areas are put together.
What’s displayed to the end user in their browser is directed by the “template file” being used. WordPress has a hierarchy that determines which template file is used in specific situations, and although it may initially seem confusing, there is a pattern and a logic behind it. Additionally, you can create your own page templates that are used where you say so, bypassing the WordPress hierarchy entirely.
The “homepage” on a WordPress site is either your blog post’s page, or a static page of your choosing. You set this in Settings >> Reading. Most of the sites I create using WordPress are not blogs; most don’t even have a blog! I create “pages,” rather than “posts,” and use a static page as the “home” page.
The template for those pages is page.php. You can create a different look for the homepage by creating front-page.php, which will be used instead of page.php for the static homepage if it’s present. If there’s no front-page.php in your theme, page.php will be used to build the home and other pages.
Let’s break down page.php and see how it works!
I’ll start by using page.php from the Twenty Thirteen theme, then make some changes to customize it for my “childof2013” theme. The start of the file is informational.
<?php /** * The template for displaying all pages. * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages and that other * 'pages' on your WordPress site will use a different template. * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */
Next, we get the header.php file, and open the divs to hold our content:
get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content" role="main">
The content is pulled in by means of “the loop,” the key process that defines WordPress. In it’s most basic form:
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
<?php endwhile; ?>
This will put the content that you have on your WordPress Page into the html that is generated in the user’s browser as they view your page. Of course, that would be quite plain, so there is much more code that adds the Page title, formatted, and comments (if this is a post or you have allowed comments). The actual twentythirteen page.php “loop” looks like:
<?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php if ( has_post_thumbnail() && ! post_password_required() ) : ?> <div class="entry-thumbnail"> <?php the_post_thumbnail(); ?> </div> <?php endif; ?> <h1 class="entry-title"><?php the_title(); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?> </div><!-- .entry-content --> <footer class="entry-meta"> <?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- .entry-meta --> </article><!-- #post --> <?php comments_template(); ?> <?php endwhile; ?>
I’ve highlighted the basic loop. What else is happening here?
Prior to displaying the content, it’s grabbing the post ID for reference, the thumbnail image (if it exists), and the post title. It then displays them with the appropriate CSS from style.css.
After the content is displayed, it provides for links to previous and later content, and comments.
Now let’s tinker with this template. Bear in mind that it will be the template for all the static pages in our “childof2013” child theme that we have not designated otherwise…
<h1 class="entry-title"><?php the_title(); ?></h1>
This will show the post title in the <h1> style based on the class “entry-title” in our style.css file. Maybe you want to create your own title for the page—different than the post title. . . Simply delete this line from the template. Then, on the actual page in either Visual or Text mode, you can then use the h1 tag and any class to style the page title however you’d like, and make it say anything you want! Or leave it out entirely—it’s up to you.
Don’t want comments to show (or even be available) on your regular site pages? Remove this from the template:
<?php comments_template(); ?>
Simple, eh?
Finally, the last part of the page.php closes the divs for the content portion, then pulls in our sidebar(s) and footer to complete the page.
</div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
You can hard code any HTML if you have something you want to show up on every page; you can use hooks to pull in other WordPress and database content. Once this is set up the way you want, save it as page.php in your childof2013 theme folder. WordPress will look in your child theme folder first to see if there is a page.php, and use it if it exists. If it doesn’t, it will default to the parent theme (2013) page.php.
Next, I’ll dissect a couple of blog page templates, since many of you do actually use WordPress to blog! (home.php and single.php) Then I plan to create a couple of custom templates, and show you how to use them in your theme and on your site.
Sue Laren is a freelance website designer/developer living in the SF Bay Area (North Bay), married 33 years, with four grown children and two grandchildren. She taught computer lab (basic computer skills) at a local elementary school for many years, and in 2007 started her own web design business, Laren Net Works. Follow her on Twitter at @LarenNetWorks.
No Comments