To add in some WordPress classes, make the following changes to index.php
:
<body>
tag to remove any existing classes, and add a new template tag so it reads:<body <?php body_class($class); ?>>
<article>
tag in your Loop, again removing any existing classes, so it reads:<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<h2>
tag that displays the post title and add class="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>
<body>
tag, you may need to apply that styling to the <body>
tag itself, or to body.home
if 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.
<?php post_class(); ?>
to append the post class to our <article>
tag plus an id
of 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:post
when a post is being displayedattachment
when an attachment is being displayedcategory-ID
and category-name
mean we can style posts from different categories differently – useful in a site where you want to color-code different categories, for example.sticky
for posts which have been designated as "sticky", sticking to the front page of the blog or the top of the blog listingThere are more classes which WordPress will append here. For a full list see http://codex.wordpress.org/Function_Reference/post_class.
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.