homepage Welcome to WebmasterWorld Guest from 50.19.206.49
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Styling the date display in WordPress
<?php the_time('D j M Y')?>
PublicSphere




msg:3462455
 10:44 am on Sep 27, 2007 (gmt 0)

I have been using a poor method to style my date display on my WordPress blogs.

I use <p> tags to put the month on its own line, like this:

<?php the_time('D j <p>M</p> Y')?>

This gives the desired visual effect:

Wed 26
SEP
2007

Anyway, I don't think this is the proper way to do it. Does anyone know what the proper way to give seperate style to individual parts of the date stamp is?

I've also been doing something similar with the comments link:

I wrap the 'No' or the '1' or the 'n' in p tags, so you get

NO
comments

or

21
comments

However this does not validate because the p tags get placed inside the a tags.

That's what made me think I'm doing it wrong by using p tags to seperate parts of the php.

Does anyone have any suggestions for better ways of seperating individual parts of the php for styling purposes?

 

penders




msg:3462685
 2:43 pm on Sep 27, 2007 (gmt 0)

To be valid you probably want to use the <span> (inline) tag - particulary since you say it's included in an anchor. However, by itself it won't do anything, so you'll need to add some CSS.

A p-tag is really for a paragraph of text. To surround just the 'month' in a date is not very semantic.

So, you could do something like...
<?php the_time('D j <span class="month">M</span> Y')?>

CSS:
.month {
display:block;
font-weight:bold;
font-size:larger;
}

More semantic, but more typing.

PublicSphere




msg:3462723
 2:59 pm on Sep 27, 2007 (gmt 0)

Thanks penders,

That was also my initial instinct. However, unfortunately the 'n' in 'span' renders as a numerical articulation of an element of the date display in php I think (see [uk.php.net...] ).

Lowercase 'p' does not render as anything, which is why I went for it as a bit of a quick bodge, just because I was designing and wanted quick results.

Now that I have the desired result aesthetically I'm trying to make my code semantic -- like you say.

I don't know anything about php so I don't know if there is a way to stop it rendering letters, or if there is another workaround; or prefarably a clean way of doing it that I don't know about?

Any ideas?

Thanks for your input penders.

penders




msg:3463024
 6:51 pm on Sep 27, 2007 (gmt 0)

However, unfortunately the 'n' in 'span' renders as a numerical articulation of an element of the date display in php I think...

Ah, ok. the_time() isn't a std PHP function, but it seems to be calling date() or similar. In that case you could try escaping (with a single backslash '\') all the special characters as mentioned on the date() PHP manual page you link to.

Unfortunately there's a few so it gets kind of messy...
<?php the_time('D j <\sp\a\n \c\l\a\s\s="\m\o\n\t\h">M</span> Y')?>

Like you've found, the only none special character in that sequence is the 'p'! (I don't think there is any harm in escaping all characters you want to output, including the 'p'.)

Another thought... do you know the class (or ID) of the anchor that contains your date in the output?

For instance, it it outputs:
<a class="thedate">whatever date</a>

Then you could simply use a <b> tag in your date string and format that. I don't think a lowercase 'b' has any special meaning in a date-format string.

So you could try:
<?php the_time('D j <b>M</b> Y')?>

CSS:
a.thedate b {
display:block;
fonr-weight:bold;
font-size:larger;
}

It's a little less semantic, but is valid HTML.

milanmk




msg:3463202
 9:47 pm on Sep 27, 2007 (gmt 0)

<?php the_time('D j ')?> <p><?php the_time('M')?></p> <?php the_time(' Y')?>

Milan

PublicSphere




msg:3463611
 11:12 am on Sep 28, 2007 (gmt 0)

Penders,

Yes, I have class="date", and I was using just <?php the_time('D j <span>M</span> Y')?> before.

I din't know you could escape the characters like that -- thanks for the tip.

I think I'll use milanmk's method though as that would mean I could be neat and semantic -- that makes sense to me now.

Thanks both of you -- really useful information; hopefully this will help other people looking for the same answer as well.

[edited by: PublicSphere at 11:13 am (utc) on Sep. 28, 2007]

penders




msg:3463666
 12:29 pm on Sep 28, 2007 (gmt 0)

I din't know you could escape the characters like that -- thanks for the tip.

That is how you 'escape' characters in the PHP date() function, I'm assuming your WordPress function is the same.

I think I'll use milanmk's method though as that would mean I could be neat and semantic...

Yes, I'd overlooked milanmk's method. HOWEVER, if your the_time() function does indeed return an anchor with the formatted date inside, then you're going to end up with 3 links, which isn't particularly semantic or accessible. Just a thought. :)

milanmk




msg:3463955
 4:23 pm on Sep 28, 2007 (gmt 0)

For comments link.

<a href="<?php comments_link('', display); ?>"><b><?php comments_number('No','1','%'); ?></b> comments</a>

Milan

PublicSphere




msg:3467999
 3:01 pm on Oct 3, 2007 (gmt 0)

HOWEVER, if your the_time() function does indeed return an anchor with the formatted date inside, then you're going to end up with 3 links, which isn't particularly semantic or accessible. Just a thought. :)

Good point -- fortunately the date is not linked but that would cause problems with styling the comments php as that is linked.

However I think Milans suggestion to use the <b> tag (similar to how you suggested earlier) will work fine there.

Thanks both of you -- very useful.

I think this page has become a good resource for styling the wordpress date -- I shall bookmark it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved