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

1 Views

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:

Read More

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.

Post Views: 1

Related posts

Leave a Reply

6 comments

  1. 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>

  2. <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>

  3. 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>

  5. Put this in your themes functions.php and customize with instructions from http://codex.wordpress.org/Formatting_Date_and_Time 

    // Add date
function post_date() {
$date = explode(",", get_the_time("F,j,Y", "", "", false));
echo '<div class="post-date">';
echo '<div class="container">';
echo '<div class="month">' . $date[0] . '</div>';
echo '<div class="day">' . $date[1] . '</div>';
echo '<div class="year">' . $date[2] . '</div>';
echo '</div>';
echo '</div>';
}

    And then use 

    <?php post_date(); ?>

    where you want the date to show up.