Follow Me
Contests: Vote or Join!
Coding A WordPress Theme From Scratch Part 6
By Aashni on January 3rd, 2011. Filed under Web Help, WordPress sub articlesThis is the sixth part in a tutorial series on how to create a wordpress theme from scratch. If you landed on this page randomly, I suggest you start at the beginning of this tutorial series. You can also go to the previous part of the tutorial series.
We’ve finished the basic structure of the WordPress Loop. One advantage of using WordPress, as I have said before, is that it is very customizable. By adding an ID to the posts, we can create special stylings for posts, depending on their ID’s. For example, if you have two types of posts, news announcements and personal blogs, you may want to style them differently. The easiest way to do this is by adding an ID tag to them. Replace <div class="post"> with the following code:
<div id="post-<?php the_ID(); ?>">
What happens is in your CSS code, you can assign specific codes to different ID tags, for example all posts with the ID dog will have a paw print in the header, then whenever the loop produces a post with the ID dog, it will call the special CSS assigned to the ID, and add a paw print into the header.
Next, we’ll add a title to your Post Heading links. When rolling over a link, a title may appear that provides a description about a link. By adding the following code into the title’s permalink code, the title for each post’s link will be the same. Add the following code after <a href="<?php the_permalink(); ?>" and before you close this tag.
title="<?php the_title(); ?>"
You don’t have to use between the quotes, you can simply add text such as “Click Me”.
Finally, we will include links to the previous and next posts. Paste the following code between <?php endwhile; ?> and <?php else : ?>.
<div class="navigation> <?php posts_nav_link(); ?> </div>
The <?php posts_nav_link(); ?> is a wordpress function that automatically sets the Next and Previous Links. By placing them inside the navigation div, you can edit the links later, and style them in style.css.
To be more creative with you’re Next and Previous links, you can use the following code.
<?php posts_nav_link('Between','before','after'); ?>
By using this code instead, you can assign what comes between the previous and next links, what comes between them, and what comes after them.
Great new tutorial!
I love traveling too, although I’m not so keen on constantly long car journeys, haha.
[Reply]