Template files can't do a whole lot by themselves. The real power comes when they're put together.
WordPress has built-in functions to include the main template files, such as header.php, sidebar.php, and footer.php, in other templates. An include function is a custom PHP function that is built in to WordPress, allowing you to retrieve the content of another template file and display it along with the content of another template file. Table 3-5 shows the templates and the function to include them.
Template Name | Include Function |
header.php | <?php get_header(); ?> |
sidebar.php | <?php get_sidebar(); ?> |
footer.php | <?php get_footer(); ?> |
search.php | <?php get_search_form(); ?> |
comments.php | <?php comments_template(); ?> |
If you want to include a file that doesn't have a built-in include function, you need a different piece of code. For instance, if you want to add a unique sidebar to a certain page template, you could name the sidebar file sidebar_page.php. To include that in another template, you would use the following code:
<?php get_template_part('sidebar_page.php'), ?>
In this statement, the PHP get_template_part function looks through the main theme folder for the sidebar_page.php file and displays the sidebar.
In this section, you put together the guts of a basic Main Index template by using the information on templates and tags we provide so far in this chapter. There seem to be endless lines of code when you view the loop.php template file in the Twenty Ten theme, so we've simplified it for you with the following steps. These steps should give you a basic understanding of the WordPress Loop and common template tags and functions that you can use to create your own.
You create a new WordPress theme, using some of the basic WordPress templates. The first steps in pulling everything together are as follows:
This folder contains the themes that are currently installed in your WordPress blog. (Go to Book II, Chapter 2 if you need more information on FTP.)
In most FTP programs, you can right-click and choose New Folder. (If you aren't sure how to create a folder, refer to your FTP program's help files.)
<!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"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'), ?>; charset=<?php bloginfo('charset'), ?>" /> <title><?php bloginfo( 'name' ); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head> <body <?php body_class() ?>> <div id="page"> <div id="header"> <h1><a href="<?php bloginfo('url'), ?>"><?php bloginfo('name'), ?><?a></h1> <h2><?php bloginfo('description'), ?></h2> </div> <div id="main">
<?php if ( function_exists('register_sidebar') ) register_sidebar(array('nam e'=>'sidebar', )); ?>
The Theme Functions file registers the widget area for your site so that you are able to add widgets to your sidebar by using the available WordPress widgets from the Widget page in the Dashboard.
<div id="side" class="sidebar"> <ul> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_ sidebar('Sidebar') ) : ?> <?php endif; ?> </ul> </div>
The code here tells WordPress where you want the WordPress widgets to display in your theme; in this case, widgets are displayed in the sidebar of your site.
</div> <div id="footer"> <p>© Copyright <a href="<?php bloginfo('url'), ?>"><?php bloginfo('name'), ?></a>. All Rights Reserved</p> </div> <?php wp_footer(); ?> </body> </html>
/* Theme Name: My Theme Description: Basic Theme from WordPress All In One For Dummies example Author: Lisa Sabin-Wilson Author URI: http://lisasabin-wilson.com */ body { font-family: verdana, arial, helvetica, sans-serif; font-size:16px; color: #555; background: #eee; } #page { width: 960px; margin: 0 auto; background: white; border: 1px solid silver; }
#header { width: 950px; height: 100px; background: black; color: white; padding: 5px; } #header h1 a { color: white; font-size: 22px; font-family: Georgia; text-decoration: none; } #header h2 { font-size: 16px; font-family: Georgia; color: #eee; } #main { width: 600px; float:left; } #side { width: 220px; margin: 0 15px; float:left; } #footer { clear:both; width: 960px; height: 50px; background: black; color: white; } #footer p { text-align:center; padding: 15px 0; } #footer a { color:white; }
Using the tags provided in Table 3-4, along with the information on The Loop and the calls to the Header, Sidebar, and Footer templates provided in earlier sections, you can follow the next steps for a bare-bones example of what the Main Index template looks like when you put the tags together.
When typing templates, be sure to use a text editor such as Notepad or TextEdit. Using a word processing program such as Microsoft Word opens a whole slew of problems in your code. Word processing programs insert hidden characters and format quotation marks in a way that WordPress can't read.
Now that you have the basic theme foundation, the last template file you need to create is the Main Index template. To create a Main Index template to work with the other templates in your WordPress theme, open a new window in a text-editor program and then follow these steps. (Type the text in each of these steps on its own line. Press the Enter key after typing each line so that each tag starts on a new line.)
This template tag pulls the information in the Header template of your WordPress theme.
This template tag is an if statement that asks, “Does this blog have posts?” If the answer is yes, it grabs the post content information from your MySQL database and displays the posts in your blog.
This template tag starts The Loop.
This tag tells your blog to display the title of a post That's clickable (linked) to the URL of the post.
This template tag displays the date and time when the post was made. With these template tags, the date and time format are determined by the format you set in the Dashboard.
This template tag displays a comma-separated list of the categories to which you've assigned the post — Posted in: category 1, category 2, for example.
This template tag displays the actual content of the blog post. The ‘Read More..’ portion of this tag tells WordPress to display the words Read More, which are clickable (hyperlinked) to the post's permalink, where the reader can read the rest of the post in its entirety. This tag applies when you're displaying a post excerpt, as determined by the actual post configuration in the Dashboard.
This template tag displays the author of the post in this manner: Posted by: Lisa Sabin-Wilson.
This template tag displays the link to the comments for this post, along with the number of comments.
This template tag ends The Loop and tells WordPress to stop displaying blog posts here. WordPress knows exactly how many times The Loop needs to work, based on the setting in the WordPress Dashboard. That's exactly how many times WordPress will execute The Loop.
This template tag displays a clickable link to the previous page of blog entries, if any.
This template tag displays a clickable link to the next page of blog entries, if any.
This template tag refers to the if question asked in Step 2. If the answer to that question is no, this step provides the else statement — IF this blog has posts, THEN list them here (Step 2 and Step 3), or ELSE display the following message.
This is the message followed by the template tag that is displayed after the else statement from Step 13. You can reword this statement to have it say whatever you want.
This template tag ends the if statement from Step 2.
This template tag calls in the Sidebar template and pulls that information into the Main Index template.
This template tag calls in the Footer template and pulls that information into the Main Index template. Note: The code in the footer.php template ends the <body> and the <html> tags that were started in the Header template (header.php).
When you're done, the display of the Main Index template code looks like this:
<?php get_header(); ?> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> Posted on: <?php the_date(); ?> at <?php the_time(); ?> Posted in: <?php the_category(','), ?> <?php the_content('Read More..'), ?> Posted by: <?php the_author(); ?> | <?php comments_popup_link('No Comments', '1 Comment', '% Comments'), ?> </div> <?php endwhile; ?> <?php next_posts_link('« Previous Entries') ?> <?php previous_posts_link('Next Entries »') ?> <?php else : ?> Not Found Sorry, but you are looking for something that isn't here. <?php endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
In Notepad, you can save it by choosing FileSave As. Type the name of the file in the File Name text box, and click Save.
Our Main Index template code has one template tag that is explained in Chapter 6 in this minibook: <div <?php post_class() ?> id=“post-<?php the_ID(); ?>”>. This tag helps you create some interesting styles in your template by using CSS, so check out Chapter 6 to find out all about it!
This very simple and basic Main Index template that you just built does not have the standard HTML mark up in it, so you will find that the visual display of your blog differs somewhat from the default Twenty Ten theme. This example was used to give you the bare-bones basics of the Main Index template and The Loop in action. Chapter 4 of this minibook goes into detail about the use of HTML and CSS to create nice styling and formatting for your posts and pages.
Often, a theme uses multiple stylesheets for browser compatibility or consistent organization. If you use multiple stylesheets, the process for including them in the template is the same as any other stylesheet.
To add a new stylesheet, create a directory in the root theme folder called css. Next, create a new file called mystyle.css within the css folder. To include the file, you must edit the header.php file. The example below shows the code you need to include in the new CSS file.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'), ?>/css/mystyle.css" type="text/css" media="screen" />