GeneratePress is one of the most popular lightweight WordPress themes. Though the theme is lightweight, you can customize each element on the theme as per your need. By default, the theme will show you the original published date in all relevant places of your site. However, if you want to show last updated or modified date in GeneratePress theme, follow this tutorial.
Dates in WordPress
Before proceeding further, you have to understand how WordPress works with the default theme. WordPress stores two dates for each post you publish on your site:
- Published date – this is the original date you publish the article on your site.
- Modified date – this is the last date you have updated the post content.
If you have not modified a post after originally publishing, then last modified date will be same as original published date for that article. Generally, you can find the dates in the following places:
- Post meta date – this is shown along with (below or above) post title and other details like post author.
- Archive meta date – this is shown in the archive pages like blog index, category archives, tag archives, author archives, etc.
- Widgets and custom display – there are some widgets like recent post that has an option to display the post meta data. By default, the widgets will use original published date unless there is a custom option available. You can showcase these widgets in sidebar and footer area or anywhere inside your content with the full site editing feature.
When you decided to show the last modified date in GeneratePress theme, make sure to check the correct date is shown in all relevant places.
Why to Show Last Modified Date?
In general, you do not need to show last updated date. However, there are many reasons you may be interested to show the last modified date instead or along with published date.
- You have an updated article that still shows published date confusing the validity of the readers.
- Google shows original published date in search results which is outdated, however you have updated the content to the latest. In this case, you may loose the traffic due to the old date showing in search results.
How to Show Last Modified Date in GeneratePress Theme?
There are multiple ways to show the last modified date depending upon your requirements.
1. Show Both Published and Modified Dates
This is the ideal option in most cases that you want to show both published and modified dates in your post. GeneratePress uses CSS classes “entry-date” and “updated” for displaying published and modified dates respectively. You can play around with these CSS classes to show or hide the dates you need.
- Login to your WordPress admin panel and navigate to “Appearance > Customize” section.
- Add the following CSS code under “Additional CSS” section.
.posted-on .updated {
display: inline-block;
}- It should look like below in the customizer.
- Preview the changes in the customizer and click “Publish” button to make the changes live.
- This code will show both published and modified dates in a single line (generally below the title) in post and archive pages.
If you want to add a text before the modified date, then you can use CSS pseudo element “before” like below:
.posted-on .updated {
display: inline-block;
}
.posted-on .updated:before {
content: "Last Modified on: ";
}Make sure to add a space after the text, so that it will looks on the meta data. You can change the “Last Modified on: ” text to any other text like “Updated on: ” or “Last Updated on: “.
2. Only Show Last Modified Date
Sometimes, you do not want to show the published date and only want to show the last modified date. In such a case, simply hide the published date with “display:none” and the complete code is below for showing only last modified date.
.posted-on .updated {
display: inline-block;
}
.posted-on .updated + .entry-date {
display: none;
}
.posted-on .updated:before {
content: "Last Modified on: ";
}2.1. Testing the Date Display
The good part with GeneratePress theme is that you can preview the CSS changes live in the editor. However, you can publish the site and test the single post and archives on the live site. It will look something like below in single post meta data:
You can also find the last modified date is show in the archive pages like below.
Remember, you will only see the original published date in both single post and archives if you have never modified the post after publishing.
3. Completely Hiding Published Date in Google Search
The above method will completely hide the code from frontend display on the browser. However, when you view the source code of the page, it will contain both published date as well as modified date. You can do this by right clicking on the page and select “Inspect Element” to open developer console in the browser. Check the post meta data section which should show something like below:
As you can see, the updated date of the article is showing as 2021-07-18 and the published date is 2020-10-31. In most cases, Google will pick up the published date and show it in the search results instead of modified date. You can check your page in Google search result using the syntax “your keywords inurl:yoursite.com” and it should show the published date. In our case, it shows Nov 1, 2020 which is the published date (date changed from Oct 31, 2020 to next date Nov 1, 2021 due to the timezone difference).
There are no real ways to instruct Google and other search engines what date should be picked by from the meta data. If you want Google to show the modified date, the best option is to remove the published date completely from the source code.
You can remove the published date by using the above CSS and adding the below code in your functions.php file. Make sure to use a child theme and add the code in your child theme’s functions.php file.
add_filter( 'generate_post_date_show_updated_only', '__return_true' );4. Add Icon and Remove Link
If you want to add an icon below the date, then insert the below code in your child theme’s function.php file.
add_filter( 'generate_post_date_output','tu_add_to_post_date' );
function tu_add_to_post_date( $output ) {
return '<i class="fa fa-clock-o" aria-hidden="true"></i> ' . $output;
}By default, GeneratePress will link the date to the date archive page. You can disable the date archives and link on the date by using plugins like Yoast SEO. However, you can also use the following code in your functions.php file to disable the date link.
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
printf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );5. Last Modified Date in Page Header
The above CSS code will work perfectly on the sites without page hero header layout. However, there is an exception to the above method. If you have imported a site having page header, then it’s a bit tricky to show last modified date.
- First install and activate Code Snippets plugin and create a custom shortcode with the below PHP code.
function post_modified_date() {
return get_the_modified_date();
}- Name your shortcode anything like [modifed_date] pr [last_updated_date].
- Go to “Appearance > Elements” section and create a new “Header” element.
- Paste the shortcode you have created with the Code Snippets plugin and save the element.
This should show the last modified date in the page header section. You may need to adjust the CSS code if required for proper alignment of the date.
6. Using Plugin to Show Last Modified Date
If the above options are not working, you can post a help request or raise a ticket with GeneratePress developer’s site. Alternatively, you can use a plugin to change the dates as per your need with few clicks. WordPress has a plugin for everything and you can use WP Last Modified Info plugin to showcase the required dates easily. This is the super easy way as it works smoothly on all type of site’s structure.
Remember, using plugin for everything is not needed especially when you can put little effort and adjust the theme’s display.