Putting It All Together

Template files can't do a whole lot by themselves. The real power comes when they're put together.

Connecting the templates

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.

Table 3-5 Template Files and Include Functions

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:

  1. Connect to your Web server via FTP, click the wp-content folder, and then click the themes folder.

    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.)

  2. Create a new folder, and call it mytheme.

    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.)

  3. In your favored text editor (like Notepad for the PC or Textmate for the Mac) create and save the following files with the lines of code we provide for each:
    • Header template: Create the file with the following lines of code then save it with the filename: header.php: 
      <!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() ) { ?>
&raquo; 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">
    • Theme Functions: Create the file with the following lines of code and then save it with the filename: functions.php: 
      <?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.

    • Sidebar template: Create the file with the following lines of code and then save it with the filename: sidebar.php: 
      <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.

    • Footer template: Create the file with the following lines of code and then save it with the filename: footer.php: 
      </div>
<div id="footer">
<p>&copy; Copyright <a href="<?php bloginfo('url'), ?>"><?php
bloginfo('name'), ?></a>. All Rights Reserved</p>
</div>
<?php wp_footer(); ?>
</body>
</html>
    • Stylesheet: Create the file with the following lines of code and then save it with the filename: style.css (more CSS is covered in Chapter 4 of this minibook — this example gives you just some very basic styling to create your sample theme): 
      /*
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.

image 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.)

  1. Type <?php get_header(); ?>.

    This template tag pulls the information in the Header template of your WordPress theme.

  2. Type <?php if (have_posts()) : ?>.

    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.

  3. Type <?php while (have_posts()) : the_post(); ?>.

    This template tag starts The Loop.

  4. Type <a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a>.

    This tag tells your blog to display the title of a post That's clickable (linked) to the URL of the post.

  5. Type Posted on <?php the_date(); ?> at <?php the_time(); ?>.

    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.

  6. Type Posted in <?php the_category(‘,’); ?>.

    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.

  7. Type <?php the_content(‘Read More..’); ?>.

    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.

  8. Type Posted by: <?php the_author(); ?>.

    This template tag displays the author of the post in this manner: Posted by: Lisa Sabin-Wilson.

  9. Type <?php comments_popup_link(‘No Comments’, ‘1 Comment’, ‘% Comments’); ?>.

    This template tag displays the link to the comments for this post, along with the number of comments.

  10. Type <?php endwhile; ?>.

    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.

  11. Type <?php next_posts_link(‘&laquo; Previous Entries’); ?>.

    This template tag displays a clickable link to the previous page of blog entries, if any.

  12. Type <?php previous posts link(‘&raquo; Next Entries’); ?>.

    This template tag displays a clickable link to the next page of blog entries, if any.

  13. Type <?php else : ?>.

    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.

  14. Type Not Found. Sorry, but you are looking for something that isn't here.

    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.

  15. Type <?php endif; ?>.

    This template tag ends the if statement from Step 2.

  16. Type <?php get_sidebar(); ?>.

    This template tag calls in the Sidebar template and pulls that information into the Main Index template.

  17. Type <?php get_footer(); ?>.

    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('&laquo; Previous Entries') ?>
<?php previous_posts_link('Next Entries &raquo;') ?>
<?php else : ?>
Not Found
Sorry, but you are looking for something that isn't here.
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
  18. Save this file as index.php , and upload it to the mythemes folder.

    In Notepad, you can save it by choosing FileimageSave As. Type the name of the file in the File Name text box, and click Save.

  19. Activate the theme in the WordPress Dashboard, and view your blog to see your handiwork in action!

image 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.

Using additional stylesheets

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" />
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.217.177