How To Customize The Post Meta In Astra

Astra is a popular WordPress theme, that I use on many of my sites. It’s lightweight and looks great, but sometimes you just want to customize it more than it normally allows. Thankfully it has plenty of hooks.

By default, the post meta in Astra looks like this:

How to customize the post meta in Astra:

  1. Go to the standard WordPress Customizer (link in your menu bar)
  2. Navigate to Layout -> Blog -> Single Post
  3. Click the eye icon to make elements visible
  4. Drag the elements to reorder

To get the post meta to look the way I have in the image above, I’ve just got Author and Publish Date selected. The slash in between is automatically inserted.

How To Change The Slash That Astra Automatically Adds To Post Meta

The slash that Astra automatically adds between the elements of the post meta is usually fine, but sometimes you want something else.

How do you change the slash that Astra automatically adds to the post meta? Add a filter to astra_single_post_meta that fetches astra_get_post_meta with your desired separator.

This is the code to make that happen:

add_filter('astra_single_post_meta', 'custom_post_meta');
function custom_post_meta($old_meta)
{
 $post_meta = astra_get_option('blog-single-meta');
 if (!$post_meta) return $old_meta;
 
 $new_output = astra_get_post_meta($post_meta, ":");
 if (!$new_output) return $old_meta;
 
 return "<div class='entry-meta'>$new_output</div>";
}

You put that code into the functions.php file of your child theme. Never edit the Astra files directly.

The call to astra_get_option() pulls in the Customizer settings you did above.

After error checking, that then gets passed into astra_get_post_meta(), which constructs the post meta as a string. The second argument is the new separator, in this instance a colon, but you can do any character or nothing.

You can even pass html in as the separator, maybe something like a Font Awesome tag. Since Astra doesn’t come with Font Awesome installed, you can use something like the Better Font Awesome plugin instead. You don’t need to worry about this if you use a page builder like Beaver Builder or Elementor, like I normally do.

Now it looks like this:

To get it to look like this, I changed $new_output to:

$new_output = astra_get_post_meta($post_meta, "&nbsp;&nbsp;<i class='fa fa-calendar'></i>");

Note the use of &nbsp; to add spacing. If you wanted it on another line, switch the two &nbsp; with <br>.

Remember, whatever you put in as the separator will be the separator for each of the elements of the post meta. If you have more elements than what I have here, it could look a little weird.

If you want to have multiple, individual Font Awesome icons in the post meta, you’ll have to rewrite astra_get_post_meta(), which you can find in
astra/inc/blog/blog-config.php.

The code above will only change the post meta on single posts. If you want to change the formatting on category pages, use this code as well or instead:

add_filter('astra_blog_post_meta', 'custom_blog_meta');
function custom_blog_meta($old_meta)
{
 $post_meta = astra_get_option('blog-meta');
 if (!$post_meta) return $old_meta;
 
 $new_output = astra_get_post_meta($post_meta, ":");
 if (!$new_output) return $old_meta;
 
 return "<div class='entry-meta'>$new_output</div>";
}

How To Display “Last Modified” Date

Sometimes you want to display the Last Modified or Last Updated date in your post meta. You might want to do this instead of the Published Date or as well as it.

How do you display the “Last Modified” date in Astra? The “Last Modified” date is already in the html of the post meta. All you need to do is unhide it with CSS. Put this code into your custom CSS:

.post .posted-on .updated {
 display: inline;
}

To hide the Published Date, put this code into your custom CSS:

.post .posted-on .published {
	display: none;
}

How To Modify The Post Meta Date

Lastly, the whole reason I went down this particular rabbit hole was to figure out how to modify the post meta date with my own text. I wanted something that looked like this:

How do you modify the post meta date in Astra? Replicate astra_post_date(), add your own text or formatting and return the output.

To get the post meta looking the way it is in this picture, I used the following code, in combination with the filters and CSS mentioned above:

/* Replaces same named function in /inc/blog/blog-config.php */
function astra_post_date()
{
 $format = apply_filters('astra_post_date_format', '');
 $published = esc_html(get_the_date($format));
 $modified = esc_html(get_the_modified_date($format));

 $output = '<p class="posted-on">';
 $output .= 'Published: <span class="published" ';
 $output .= 'itemprop="datePublished">' . $published;
 $output .= '</span><br>';
 $output .= 'Last Modified: <span class="updated" ';
 $output .= 'itemprop="dateModified">' . $modified . '</span>';
 $output .= '</p>';
 
 return apply_filters('astra_post_date', $output);
}

You put that code in your functions.php file of your child theme.

I broke up the $output lines for ease of reading in this tutorial. Change it to suit your code.

Play around with that code to get it looking the way you want. It should be pretty clear what each part does. If you get stuck, just comment below and I’ll help you out.

Leave a Comment