Format reading time post metadata to match look and feel of publish date

Hello,

I am a Pro theme user and am trying to launch a new blog/site. I recently installed the WP Reading Time plugin and am trying to add the shortcode for the plugin to my functions.php theme file. I’ve set up a child theme for Pro in order to edit the post meta that appears at the top of each blog post underneath the title. I’d only like to show publish date or last updated date (whichever is more recent) AND the reading time – I don’t want to show author, categories or comments. I used this guidance to show publish date OR last updated date, but could use help formatting the reading time properly.

I’ve updated my functions.php child theme to the following, but can’t figure out how to get the reading time to have the same format/styling (font size, uppercase, color as the publish & last updated date. I’d also like the reading time to show up on the same row as the publish or last updated date. I’m attaching a screenshot of how the post metadata currently looks on a test blog post.

Here is the code I’m currently using on the functions.php file. I don’t have anything input for the stylesheet and don’t know how to write CSS (or PHP), so any help would be greatly appreciated. Thanks!

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
function x_integrity_entry_meta() {

//
// Date.
//

$original_time = get_the_time('U');
$modified_time = get_the_modified_time('U');
if ($modified_time >= $original_time + 86400) {
		$date = sprintf( '<span>Last updated on <time class="entry-date" datetime="%1$s"> %2$s</time></span>',
      esc_attr( get_the_modified_date( 'c' ) ),
      esc_html( get_the_modified_date() )
    );
} else {
		$date = sprintf( '<span><time class="entry-date" datetime="%1$s"><i class="x-icon-calendar" data-x-icon="&#xf073;"></i> %2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );
}

//
// Output.
//

if ( x_does_not_need_entry_meta() ) {
  return;
} else {
  printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
    $author,
    $date,
    $categories_list,
    $comments
  );
}
echo do_shortcode( '[rt_reading_time label="" postfix="minute read" postfix_singular="minute read"]' );
  }
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================

s

Hi Michael,

Thanks for reaching out.

The reason for that is because you displayed it outside the post-meta (eg. <p class="p-meta"></p>). It should be like this

if ($modified_time >= $original_time + 86400) {
		$date = sprintf( '<span>Last updated on <time class="entry-date" datetime="%1$s"> %2$s</time></span><br><span>%3$s</span>',
      esc_attr( get_the_modified_date( 'c' ) ),
      esc_html( get_the_modified_date() ),
      do_shortcode( '[rt_reading_time label="" postfix="minute read" postfix_singular="minute read"]' )
    );
}

Instead of echo.

Thanks!

Thanks! I actually updated my functions.php to the following, and it’s mostly producing the desired result, except for two things:

  • Is it possible to change the “/” between the date & reading time to a “.” or create a line break (
    ) so they show up on separate lines/rows?
  • If possible, I’d love to update the default WordPress calendar icon with the “calendar-0” icon listed here: https://demo.theme.co/integrity-1/shortcodes/icons/

Here is a screenshot of the way it currently looks:

Here is my current functions.php code:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
function x_integrity_entry_meta() {

//
// Date.
//

$original_time = get_the_time('U');
$modified_time = get_the_modified_time('U');
if ($modified_time >= $original_time + 86400) {
		$date = sprintf( '<span><time class="entry-date" datetime="%1$s"><i class="x-icon-calendar" data-x-icon="&#xf073;"></i> Last updated  %2$s</time></span>',
      esc_attr( get_the_modified_date( 'c' ) ),
      esc_html( get_the_modified_date() )
    );
} else {
		$date = sprintf( '<span><time class="entry-date" datetime="%1$s"><i class="x-icon-calendar" data-x-icon="&#xf073;"></i> %2$s</time></span>',
      esc_attr( get_the_date( 'c' ) ),
      esc_html( get_the_date() )
    );
}
$post_read_time = do_shortcode('[x_icon type="clock-o"]  [rt_reading_time label="" postfix="minute read" postfix_singular="minute read"]');

//
// Output.
//

if ( x_does_not_need_entry_meta() ) {
  return;
} else {
  printf( '<p class="p-meta">%1$s%2$s%3$s%4$s</p>',
    $author,
    $date,
	$post_read_time,
    $categories_list,
    $comments
      );
    }
  }
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================

Hello Michael,

Your code is not as organized as it was before. Chances are, it may cause some issues or conflict later on. Please have it updated and use this code instead:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================


function x_integrity_entry_meta() {

  //
  // Date.
  //

  $original_time = get_the_time('U');
  $modified_time = get_the_modified_time('U');
  if ($modified_time >= $original_time + 86400) {
      $date = sprintf( '<span><time class="entry-date" datetime="%1$s"><i class="x-icon-calendar-o" data-x-icon="&#xf133;"></i> Last updated  %2$s</time></span>',
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
      );
  } else {
      $date = sprintf( '<span><time class="entry-date" datetime="%1$s"><i class="x-icon-calendar-o" data-x-icon="&#xf133;"></i> %2$s</time></span>',
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() )
      );
  }

  $post_read_time = do_shortcode('[x_icon type="clock-o"]  [rt_reading_time label="" postfix="minute read" postfix_singular="minute read"]');

  //
  // Output.
  //

  if ( x_does_not_need_entry_meta() ) {
    return;
  } else {
    printf( '<p class="p-meta">%1$s%2$s%3$s%4$s%5$s</p>',
      $author,
      $date,
      $post_read_time,
      $categories_list,
      $comments
    );
  }
}

1.) To remove the / in the post meta, please remove the <span> </span> from the code above.

2.) The calendar icon has been changed in the code already.

We would love to know if this has worked for you. Thank you.

Thank you so much! That works perfectly. I replaced the tags and formatted it to look like this (which is exactly what I was hoping for. I appreciate your help and the very quick replies!

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.