In this section, you put together the guts of a basic Main Index template by using the information on templates and tags I've provided 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 I'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 templates included in the default Twenty Ten theme. 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. (See Chapter 6 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. Upload the following files from the default Twenty Ten theme:
• The images folder
You find the default Twenty Ten theme files in the original WordPress files that you downloaded from the WordPress Web site (or installed directly from your Web server). Do not upload the index.php file, as you are about to create your own index.php file in the next section.
Using the tags provided in Table 12-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.
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.
3. Type <?php while (have_posts()) : the_post(); ?>. This template tag starts The Loop.
4. Type <a href=M<?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 perma-link, 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.
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.
This template tag calls in the Comments template (comments.php). All code and information in the Comments template is pulled into the Main Index template at this point. The Comments template is displayed only on the single post page, however, not on the front page of your blog site.
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.
12. Type <?php next_posts_link('« Previous Entries'); ?>.
This template tag displays a clickable link to the previous page of blog entries, if any.
13. Type <?php previous posts link('» Next Entries'); ?>.
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.
15. 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 14. 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. (See the "Using Tags with Parameters for Sidebars" section later in this chapter, for further descriptions of tags for this 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(','); ?>
Posted by: <?php the_author(); ?> | <?php comments_popup_link('No
<?php next_posts_link('« Previous Entries') ?>
<?php previous_posts_link('Next Entries »') ?>
Sorry, but you are looking for something that isn't here.
<?php get_sidebar(); ?> <?php get_footer(); ?>
19. Save this file as index.php, and upload it to the mythemes folder.
In Notepad, you can save it by choosing FileOSave As. Type the name of the file in the File Name text box, and click Save.
20. Activate the theme in the WordPress Dashboard, and view your blog to see your handiwork in action!
^ My Main Index template code has one template tag that is explained in
Chapter 13: <div <?php post_class() ?> id="post-<?php the_ i(oil id(); ?>">. This tag helps you create some interesting styles in your template using CSS, so check out Chapter 13 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 13 goes into details about the use of HTML and CSS to create nice styling and formatting for your posts and pages.
Was this article helpful?