Changing the loop

Since we're touching up the theme, I want to change what the loop displays. We're going to assume this is a site for a client, and I know the client will eventually want to focus on the post's authors (there are many authors on this "hypothetical" site) and while the date is important, it shouldn't be on the same line as the author's name. I'm sure you've seen some blogs that have a little calendar or iCal-ish icons next to the post. I think that's a visually appealing way to display information like that, and not have the date take up a lot of room.

Using the free open source vector editor Inkscape (, I made a calendar background icon that can have the day's date up top in red and the three letter month below it. The icon is about 32 pixels square. You can use whichever graphic program you prefer, GIMP, Photoshop, Illustrator, and so on, to create a similar icon, or you can probably find a royalty-free image on the Web.

To get our calendar background behind our date and formatted properly, let's dig into the loop. The default theme's loop is located inside the template file called loop.php. This is a much longer loop than you may be used to if this is your first time working with the Twenty Ten default theme. Ultimately, we're interested in the "normal" or "everything else" view that is displayed on the site's "home" or default blog page. You'll find this code around line 127 starting with <div class="entry-meta">.

To start, comment out the custom PHP function twentyten_posted_on (it references a custom function in the theme's function.php file, getting into which is a bit beyond the scope of this title), and then add the following HTML markup and PHP template tags in bold:

<div class="entry-meta">

<?php //twentyten_posted_on();//comment this out ?> <small class="date">

<?php the_time('d') ?><br/> <span><?php the_time('M') ?></span> </small> </div><!-- .entry-meta -->

What we're focusing on is the date display. The date is displayed with a template tag called the_time which has parameters set to display the full month, the day "as said", and the year; for example; February 4, 2010.

I just want to display the date's number and the three-letter abbreviation of the month underneath that. the_time tag's parameters don't really let me add HTML break tags, so I'll separate my date into two separate the_time tag calls so that I can control the HTML a little better. I'll also want to ensure my style only applies to this loop and not the <small> date and content that's wrapped in other template page's loops, so I'll be sure to add a custom date class to the <small> tag. I'll also wrap the year date display inside some <span> tags so that I can have some additional style control over it. My date display and classes end up looking like this:

<small class="date">

<?php the_time('d') ?><br/> <span><?php the_time('M') ?></span> <!-- by <?php the_author() ?>--> </small>

We'll then open up the CSS style.css stylesheet and add the rules for the special class name that we added to the date display, and modify the header display. I simply add my modifications to the very bottom of the style.css stylesheet. If on the odd chance, any of my style names are the same as anything already defined in the stylesheet, my rules will inherit from the previous rule and amend it (Either that, or make it blatantly clear that I need a more unique style name.)

First, I'll move the h2 headers on the home page itself that are inside the .post class over 40 pixels, in order to make room for my date. Next, I'll move my date inside the .post class up about 25 pixels to have it sit next to the header. Within this rule, I also assign the dateBackground.png that I created in Inkscape and tweak the date number's size, color, and a few other properties a bit. Lastly, I set my month display size and color inside the span tag as follows:

/*----------twentyten chapter 3 customizations------------*/

.home .post .entry-ti tle{ padding-left: 40px;

.post{ display:block;

background: url(images/dateBackground.png) no-repeat;

padding-top: 4px;

width: 32px;

height: 32px;

font-size: 2 0px;

line-height: 12px;

text-align: center;

.post span{ font-size: 10px; color: #666;

And with that, the next screenshot shows what our post's headers and dates appear like now:

P3 public domain coastal image fab

Lorera ipsum dolor sit araet, con sect et ur adipis icing e incididunt Lit labore et dolore magna aliqua. Ut enim

Not bad! Now, let's tackle the sidebar.

Understanding Adobe Photoshop Features You Will Use

Understanding Adobe Photoshop Features You Will Use

Adobe Photoshop can be a complex tool only because you can do so much with it, however for in this video series, we're going to keep it as simple as possible. In fact, in this video you'll see an overview of the few tools and Adobe Photoshop features we will use. When you see this video, you'll see how you can do so much with so few features, but you'll learn how to use them in depth in the future videos.

Get My Free Video

Post a comment