To add in some WordPress classes, make the following changes to index.php:
- Edit the
<body>tag to remove any existing classes, and add a new template tag so it reads:<body <?php body_class($class); ?>>
- Edit the
<article>tag in your Loop, again removing any existing classes, so it reads:<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
- Still in the Loop, find the
<h2>tag that displays the post title and addclass="post-title"to it so it reads:<h2 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
- Finally, save your file and make any adjustments to your CSS; you might have to to apply it to the new classes instead of any old ones you were using. For example, if you've used a class for styling your
<body>tag, you may need to apply that styling to the<body>tag itself, or tobody.homeif it just applies to the home page. As we'll see in a moment, WordPress now automatically adds a class of home to the home page's<body>tag.
We added some functions to automatically give our content classes based on what the content is and where it's being displayed.
<?php body_class($class); ?>will give the<body>tag of each page a set of classes according to what kind of content is being viewed. For example:There are many more classes WordPress will automatically append using this function. For a full list, see http://codex.wordpress.org/Function_Reference/body_class.
- We also used
<?php post_class(); ?>to append the post class to our<article>tag plus anidof the post ID. This lets us style each type of post differently if we want to, as well as styling individual posts using the ID. Depending on how the post is being viewed, classes it might add include:postwhen a post is being displayedattachmentwhen an attachment is being displayedcategory-IDandcategory-namemean we can style posts from different categories differently – useful in a site where you want to color-code different categories, for example.stickyfor posts which have been designated as "sticky", sticking to the front page of the blog or the top of the blog listing
There are more classes which WordPress will append here. For a full list see http://codex.wordpress.org/Function_Reference/post_class.
- Finally, we added
class="post-title"to each post title listing. This will help us to style the post titles in a specific way should we want to override or add to the styling for the<h2>tag.
We now have come up with a main loop that looks something like the following:
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post();?>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2 class="post-title"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title();?></a></h2>
<p class="entry-meta">by <?php the_author_meta('first_name'), ?> <?php the_author_meta('last_name'), ?> in <?php the_category(", "); ?></p>
<div class="entry-content"><!--//post-->
<?php the_content();?>
</div><!--//.entry-content-->
<p class="left"><a class="more" href="<?php the_permalink(); ?>">Read more »</a></p>
<p class="right"><a class="comments-count" href="<?php the_permalink(); ?>"><?php comments_number("0", "1", '%'), ?></a></p>
<div class="push"></div>
</article>
<?php endwhile; ?>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php get_search_form(); ?>
<?php endif; ?>By now, you can see that by leveraging WordPress' template tags and functions, we can easily move on to including other WordPress content and features into our HTML mockup, making it a fully functional and dynamic theme. We'll move on to doing more of that in Chapter 4, Advanced Theme Features, but first we have to break our index.php file into its component parts.