How do I give separate classes to the styling of the month and year in the Wordpress Date function?

Question

I'm in wordpress, trying to format the date output. This is the code I'm using at present:

<div class="date"><?php the_date('M, Y'); ?></div>

It's output looks like this:

MAY, 2010

What I want to do is have the date display like this (The month on top of the year):

MAY

2010

I'm just not familiar enough with PHP to get things working. A simple line break wouldn't quite be sufficient because I want to play with sizing, placement of each separately (month text larger than the year text, both centered, etc.). Separate classes applied to each would be ideal.

Answer 1

Actually, a line break is a good place to begin:

<div class="date"><?php the_date('M'); ?><br /><?php the_date('Y'); ?></div>

And then add additional CSS as needed. For example, if you then add div's, it becomes apparent that the line break can go away, since separate div's will break on their own as long as the display: property on the parent div (#date) is block.

e.g.:

<div class="date"><div style="something-special..."><?php the_date('M'); ?></div><div style="something-else..."><?php the_date('Y'); ?></div></div>

Answer 2

mmmm... I did some more searching and, while I still don't know how to get the "the date" function to display multiple lines correctly, using the "the time" function seems to do the same thing without breaking. Here's the code I'm using. Works great.

<div class="month"><?php the_time(M) ?></div><br />
<div class="year"><?php the_time(Y) ?></div>

Answer 3

you should be able to just do

<?php the_date('M<b\r>Y')?>

or any other tags making sure you escape the characters listed here

Answer 4

<div class="date">
  <span class='month'><?php the_date('M');?></span>
  <span class='year'><?php the_date('Y'); ?></span>
</div>

You can then set the spans to display: block if you want them to each be on their own line:

<style type='text/css'>
  .date span { display: block ; } 
</style>