1

I am using underscore_s barebone theme to build mine and came across this challenge that I would like to style date month and year separately with CSS and the code output puts them together.

I dug around and found out I can put formatting inside the following line of code (not sure if this is right way, tried everything and this worked...)

esc_html( get_the_date( 'd,M,Y' ) ),

but the output is stacked together like 8,Oct,2014 and I am failing at assigning classes to them individually. (or even outputting them separately)

full code of the segment is in functions.php and is called with <?php mytheme_posted_on(); ?>

function mytheme_posted_on() {
$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
    $time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
}

$time_string = sprintf( $time_string,
    esc_attr( get_the_date( 'c' ) ),
    esc_html( get_the_date() ),
    esc_attr( get_the_modified_date( 'c' ) ),
    esc_html( get_the_modified_date() )
);

$posted_on = sprintf(
    _x( '%s', 'post date', 'mytheme' ),
    '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
);

echo '<span class="posted-on">' . $posted_on . '</span>'; } endif;

Thank you in advance, if anyone can help me out to break down the above code and comprehend this.

closed as off-topic by Mark Kaplun, Pieter Goosen, Johannes Pille, s_ha_dum Oct 10 '14 at 18:23

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • The code in that function outputs content directly via the esc_* and _x functions ( and the echo ). There are no filters that might help you. You are basically looking at hacking the theme, which is not advisable. Additionally, questions dependent on third party code are off-topic. – s_ha_dum Oct 10 '14 at 18:23
1

As suggested, you can break down the date format in different parts.

echo '<span class="date-day">' . get_the_date( 'd' ) . '</span>';
echo '<span class="date-month">' . get_the_date( 'M' ) . '</span>';
echo '<span class="date-year">' . get_the_date( 'Y' ) . '</span>';

Now each item have class associated with it, so you can style each differently as you require.

  • Use updated code. I have made changes in it and removed commas. – Robert hue Oct 9 '14 at 14:49
  • Thank you, I saw them later, how silly I didn't see the commas in front of me. sry. Thank you. – annkswe Oct 9 '14 at 14:54
  • My final code is like this: <?php echo '<span class="date-day"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . get_the_date( 'd' ) . '</a></span> '; ?> <?php echo '<span class="date-month"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . get_the_date( 'M' ) . '</a></span> '; ?> <?php echo '<span class="date-year"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . get_the_date( 'Y' ) . '</a></span>'; ?> – annkswe Oct 9 '14 at 14:55
  • That's great! :) – Robert hue Oct 9 '14 at 15:00
  • after serious poking around I discovered I could also do this: '<span class="date-day">' . esc_html( get_the_date( 'd' ) ) . '</span>' . '<span class="date-month">' . esc_html( get_the_date( 'M' ) ) . '</span>' . '<span class="date-year">' . esc_html( get_the_date( 'Y' ) ) . '</span>', what do you think. – annkswe Oct 9 '14 at 17:00
0

Output them separate like d, then m, then year. And style them according

Not the answer you're looking for? Browse other questions tagged or ask your own question.