Divi Tips 65

How do I add "updated on" to my Divi articles?

Updated on 17/09/2019 | Published on 02/09/2019 | 37 comments

1,785 words

7

The mention "updated on" allows you to indicate to your readers the date of the update of the article.

An article that is updated regularly helps to maintain good positions in the search results (SERP). This is an important SEO criterion!

However, Internet users may not realise at first glance that the article is recent, because most of the time it is the date of publication that appears.

If your article was published 5 years ago but you update it every year, it would be a shame to risk losing readers who think the article is out of date!

In this tutorial, we'll look at how to add "updated on" to the metadata of your Divi articles.

As you can see, this is displayed below the breadcrumb trail of my articles on Divi Tips.

Ajouter "article mis à jour le" dans Divi
On the left: default metadata - on the right: metadata with the mention "updated on".

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

Here is the programme of the article:

  1. What is article metadata?
  2. Why is it important to use the word "updated" rather than to change the date of publication of an article?
  3. The importance of updating a blog post
  4. How do I display the update date in a Divi article?
  5. Managing metadata in Divi
  6. In conclusion...

1 - What is article metadata?

WordPress post metadata is information related to the publication of a post. This information is automatically inserted into your posts without you having to do anything.

Of course, the types of metadata and where it is displayed depends on how the WordPress theme was coded.

Some themes do not display them, some display them automatically and some themes, such as Divi, offer options for choosing which metadata to display.

Metadata can be information related to :

  • the date of publication,
  • the author of the article,
  • the category or label in which the item has been classified
  • the number of comments
  • etc.

This metadata reveals important information to your reader.

I personally value this data when I do web searches for information. When the blog doesn't display them, it bothers me because I don't know if the article is recent and if I can trust its content... It also allows me to know if the blog in question is well maintained or not: frequency of publication or very random publication. All this information can therefore have an impact on the credibility of a blog.

obtenir Divi - get Divi

2 - Why is it necessary to use the words "updated on" rather than changing the date of publication of an article?

You're probably thinking that it's easy and that all you have to do is change the date of publication of the article?

Well, no, this is not the most recommended way of doing things as you can see in this article (or in this one in English).

If you have a bad habit of changing the date of publication of your articles in order to lure the robots and get "fresh" dates in the search results, your site could be penalised by Google.

This would not be fair to your readers either, especially if you have not changed a single word in the article! It would only increase your site's bounce rate and lose credibility.

In addition, some articles may not be date-stamped for the simple reason that there may be an inconsistency between the content and the date it was published. This could make the Internet user suspicious...

And finally, you should know that if you change the publication date of your articles, the comments will keep their original date.

For example: article published on 24 July 2019 - comment published on 12 April 2018. A bit weird isn't it? I'm sure you've seen this before!

That's why there is a better practice: add the date of update within the metadata of your article.

"mis à jour" apparait sur les vignettes du blog
The words "updated on" also appear on the blog's thumbnails

Why display the update date in the metadata rather than in the article itself?

Because the metadata is visible within the article, under the title, but also from the archive pages (blog page, category archive page etc.)

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

3 - The importance of updating a blog post

Updatingyour old articles is a strategy to stay competitive in search results and continue to drive traffic to your blog.

The Internet moves very fast and the topics covered are often covered by other bloggers. The idea is to try to keep a good place in the search results, even several years after publication.

Updatingyour articles helps to improve your SEO (natural referencing) and to capitalise on the work already done. Because yes, writing is hard work!

Just because your article doesn't mention that it has been updated doesn't mean that Google doesn't see it... Phew! That's already good news.

Effectivement, même si la date de mise à jour n’apparait pas dans les métadonnées de votre article, <strong>elle apparait dans le code source</strong> de celui-ci, au sein de la section <strong><head></strong>.

property "article:modified_time"
Meta property = "article:modified_time" - this tells the bots when your article was updated.

Comme vous pouvez le voir sur cette capture d’écran, une balise <strong><em><meta property= »article:modified_time » content= »2019-08-30″></em></strong> est insérée dans la section <strong><head></strong> de votre site lorsque vous modifiez un article déjà publié.

When scanning your site, Google sees this information which tells it that you are maintaining your blog. And soon your visitors will see it too thanks to this tutorial...

Want to customize Divi like a pro? Check out all the tutorials!

4 - How do I display the update date in a Divi article?

To edit the metadata of your Divi posts, you will need a child theme.

This is the safest way to modify a WordPress theme without losing its customizations at the next update and without risking irreversible mistakes.

You can get a Divi child theme here for free or learn how to create it.

A child theme must use a functions.php file, you will just have to edit it and add the following piece of code:

function ad_last_updated_post( $the_date ) {
     if ( 'post' === get_post_type() ) {
         $the_time = get_post_time( 'His' );
         $the_modified = get_post_modified_time( 'His' );
         
         $last_modified =  sprintf( __( 'Mis à jour le %s', 'Divi' ), esc_html( get_post_modified_time( 'd/m/Y' ) ) );
         $published =  sprintf( __( 'Publié le %s', 'Divi' ), esc_html( get_post_time( 'd/m/Y' ) ) );     
         
         $date = $the_modified !== $the_time ? $last_modified . ' | ' .  $published : $published; 
    
         return $date; }
 }

 add_action( 'get_the_date', 'ad_last_updated_post' );
 add_action( 'get_the_time', 'ad_last_updated_post' );

See the source of this PHP code.

Once you have added this code, you will see the date of the last modification of your articles.

"mis à jour le"

You can of course adapt the code to your needs and change the format of the date or its wording. Use :

  • d/m/Y for a date such as 30/08/2019
  • d/m/y for 30/08/19
  • M j, Y for a date such as Aug 30, 2019
  • F j, Y for August 30, 2019

Others date formats are possible here.

Updateof 17 September 2019: following a very good comment from David, the previous code had the problem of displaying the update date as soon as the publication date. David then proposed the following code so that the update date would not be displayed if the modification date of the article took place in the 5 days following its first publication date:

function ad_last_updated_post( $the_date ) {
    if ('post' === get_post_type() ) {
        $nb_days_between = (get_post_modified_time() - get_post_time())/86400;
        $nb_days_to_compare = '5';
        $last_modified =  sprintf( __( 'Mis à jour le %s', 'Divi' ), esc_html( get_post_modified_time( 'd/m/Y' ) ) );
        $published =  sprintf( __( 'Publié le %s', 'Divi' ), esc_html( get_post_time( 'd/m/Y' ) ) );
        $date = $nb_days_between > $nb_days_to_compare ? $last_modified . ' | ' .  $published : $published;
        return $date;
    }
}
add_action( 'get_the_date', 'ad_last_updated_post' );
add_action( 'get_the_time', 'ad_last_updated_post' );

Thanks David 😉 !

5 - Managing metadata in Divi

Beyond adding the date of update to your articles, you may need to enable or disable some other article metadata.

This will be possible from 2 different locations:

  1. Divi theme options
  2. The Blog module options

5.1 - From the theme options

métadonnées page d'archive Divi
Set the metadata to be displayed on the archive pages

At the Divi tab > Theme Options > Layout tab, you will find options for displaying metadata.

Everything is detailed in this article dedicated to the Layout tab of the Divi theme options.

5.2 - From the Blog module options

choisir les métadonnées à afficher dans le module blog Divi
Choose the metadata to be displayed in the Divi blog module

If you use Divi's Blog module to display your posts, you'll see a bunch of options available.

In the module settings, go to the Content > Elements tab to enable or disable the following information:

  • Highlight image,
  • The read more button,
  • The name of the author,
  • The date of publication,
  • The categories,
  • The number of comments,
  • The extract.

So you can decide what should appear on your blog post thumbnails.

If you have added "Updated on", it will be visible if the publication date display is active.

6 - In conclusion...

Too bad Divi doesn't offer this option natively! But you've seen in this article that it's not hard to add an update date to your Divi posts...

Oh, I almost forgot! Here's one last little SEO tip:

Rich search results (rich snippets) will not show the date of update of your article but always the date of publication.

This means that the user will not know - from the search results - that your article has been revised recently!

So why not add a little mention within the meta description, the one you enter using the Yoast plugin?

Afficher "mis à jour le" dans la méta-description
Display the words "updated on" in the meta description of Yoast SEO

The Internet user will be able to see at first glance that your article is recent = increase in the click rate.

This way, you will continue to generate traffic while respecting Google's recommendations.

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials!

Mention "mis à jour" article Divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

37 Commentaires

  1. Adrien

    Article impeccable !!

    Je vais bientôt me lancer dans ces modifications sur mon site utilisant Extra de ET grâce à vous ! 🙂

    Bien vu le petit bonus dans la méta-description 😉

  2. Lycia Diaz

    Merci Adrien, il faudra tester en local pour voir si ce code fonctionne pour le thème Extra. C’est possible.
    À bientôt 😉

  3. David

    Super ce code Lycia… Par contre je pense qu’il faudrait mettre une condition :
    Ne pas afficher la date si elle est inférieur à 5 jours (plus ou moins suivant son besoin) par rapport à la date de création.
    Là par exemple, pour ton article, la date de modification est la même que la date de création, ce qui ne rend pas très bien. J’avais remarqué ça sur tous tes articles.

  4. Lycia Diaz

    Hi hi oui ! David ! C’est une très bonne idée effectivement. Mais tu as bien compris que je n’étais pas developpeuse dans l’âme… j’ai d’ailleurs cité la source du code dans l’article. Je l’ai un peu modifié mais je ne sais pas si j’arriverai à ajouter un If/Else … je serai capable de tout casser MDR !

  5. David

    Bah tu as les variables avec les valeurs des dates… Je pense qu’il est simple de faire une condition avec une comparaison… Je vais voir si j’y arrive. Je ne suis pas non plus développeur mais quand quelque chose me résiste j’y passe des fois plusieurs heures lol.

  6. David

    Bon en fait, la condition existe déjà dans la déclaration de la variable $date
    $date = $the_modified !== $the_time ? $last_modified .’ | ‘ .$published : $published;

    Explication :
    Si $the_modified n’est pas égale à $the_time alors $date = $last_modified .’ | ‘ .$published
    sinon $date = $published

    Où : (condition ? action_if_true: action_if_false;)
    Plus d’explication ici : https://www.php.net/manual/fr/control-structures.if.php

    Alors, pourquoi ca ne fonctionne pas… Et bien parce que la date « timestamp » remontée est brut avec les secondes, etc… du coup vu que la création du post et la publication sont espacé de plusieurs minutes, voir des heures pour certains articles (hein Lycia), ce ne sont pas les mêmes.

    Plus d’info ici : https://codex.wordpress.org/Function_Reference/get_post_modified_time

    Il faut donc convertir les dates pour avoir un format sans les minutes et seconde qu’on peut comparer facilement.

    On peut s’apercevoir que WordPress nous mâche le travail avec une fonction qu’ils implémentent dans leur code avec la fonction esc_html comme ceci : esc_html(get_post_time(‘d/m/Y’)

    Donc voici le nouveau code :

    function ps_last_updated_post($the_date) {
    if (‘post’ === get_post_type()) {
    $the_time = esc_html(get_post_time(‘d/m/Y’));
    $the_modified = esc_html(get_post_modified_time(‘d/m/Y’));
    $last_modified = sprintf(__(‘Mis à jour le %s’, ‘Divi’), $the_modified);
    $published = sprintf(__(‘Publié le %s’, ‘Divi’), $the_time);
    $date = $the_modified !== $the_time ? $last_modified .’ | ‘ .$published : $published;
    return $date;
    }
    }
    add_action(‘get_the_date’, ‘ps_last_updated_post’);
    add_action(‘get_the_time’, ‘ps_last_updated_post’);

    Attention tout de même, ce code s’exécute à chaque fois que WordPress demande une date ou une heure (fonctions get_the_date et get_the_time).

  7. David

    Et voici le code pour faire de la comparaison sur plusieurs jours.
    En effet, il est intéressant de ne pas afficher la dernière modification si celle-ci s’effectue dans les 5 jours suivants… Souvent suite à des commentaires pour des fautes d’orthographe (plutôt de frappe lol), une p’tite erreur dans le code ou encore pour améliorer le contenu mais qu’on s’en est souvenu après coup.

    function ps_last_updated_post($the_date) {
    if (‘post’ === get_post_type()) {
    $nb_days_between = (get_post_modified_time() – get_post_time())/86400; // 86 400 = 60*60*24
    $nb_days_to_compare = ‘5’;
    $last_modified = sprintf(__(‘Mis à jour le %s’, ‘Divi’), esc_html(get_post_modified_time(‘d/m/Y’)));
    $published = sprintf(__(‘Publié le %s’, ‘Divi’), esc_html(get_post_time(‘d/m/Y’)));
    $date = $nb_days_between > $nb_days_to_compare ? $last_modified .’ | ‘ .$published : $published;
    return $date;
    }
    }
    add_action(‘get_the_date’, ‘ps_last_updated_post’);
    add_action(‘get_the_time’, ‘ps_last_updated_post’);

    Pour expliquer :

    Je récupère le timestamp des deux dates pour savoir le nombre de secondes (parce que le timestamp est exprimé en seconde) qu’il y a entre les deux afin de les soustraire entre eux…
    Sinon la soustraction n’est pas possible avec une date formé à la fransaise… Essayé de soustraire 05/08/18 à 23/06/16… Alors alors, combien de jours ? 🙂

    Après ca, je divise par 86 400 pour avoir le résultat en jour. (conversion des secondes en jours)

    Je me suis aidé ici : https://openclassrooms.com/forum/sujet/nombre-de-jours-entre-2-dates-31730

    Puis je renseigne une valeur de nombre de jour souhaité pour comparaison dans la variable $nb_days_to_compare.

    Ensuite, une simple condition si le nombre de jour entre les deux dates est supérieur au nombre dans la variable $nb_days_to_compare.

    C’est cadeau, en même temps c’était pas très compliqué 😉

  8. Lycia Diaz

    Merci David ! C’est super. J’ai pas eu le temps de me pencher dessus depuis ton commentaire précédent… Merci encore !

  9. Gilles

    Merci pour ce tuto
    Comment faire pour simplement remplacer la date de publication par défaut du module Blog par la date de dernière modification ?

  10. Lycia Diaz

    Salut Gilles, tu dois juste un peu modifier le code proposé dans ce tuto pour qu’il corresponde à tes besoins.

  11. Gilles

    Ok merci mais si on veut formater la date en 2 langues différentes sur un site multilingue ?

  12. Gilles

    Merci Lycia !

  13. Adrien

    Bonjour Lycia, sais-tu comment cacher dans la description des moteurs de recherche la date d’un article, mais la conserver sur son blog ?

  14. Lycia Diaz

    Salut Adrien.
    Utilises-tu Yoast SEO ? Car dans ses paramètres, tu peux demander à ce que la date soit cachée dans les méta-descriptions.
    Mais par expérience, Google fait ce qu’il veut et même si tu désactives cette option, il peut décider d’afficher la date s’il trouve que c’est pertinent.
    C’est « Dieu » Google quoi 😉

  15. Adrien

    Bonjour Lycia, j’ai masqué la date dans les articles grâce aux paramètres d’Extra.
    Depuis, la date de publication n’apparaît plus dans les résultats de Google. 🙂

    C’est parfait pour moi. 😀

  16. Lycia Diaz

    Ah ok … je n’utilise jamais Extra donc je sais pas trop mais si ça te convient, tant mieux 😉

  17. Thomas

    Bonjour et merci pour cet article.

    J’utilise Divi sur un site crée très récemment et précise que mes connaissances en langage informatique sont quasi nulles.

    J’ai suivi la procédure mais je constate dans l’espace « Activité » du back-office de WordPress que pour chaque article publié, j’ai 3 fois la même alerte:

    Warning: gmdate() expects parameter 2 to be int, string given in /homepages/46/d821463696/htdocs/clickandbuilds/…/wp-admin/includes/dashboard.php on line 955 / 957 et 959

    Si je retire le code, les alertes disparaissent.

    J’ai cherché un peu sur internet, j’ai trouvé quelques pistes mais mes compétences sont trop limitées pour bien comprendre. Si quelqu’un a une idée, je suis preneur.

  18. Lycia Diaz

    Bonjour Thomas, j’utilise le code et je n’ai pas de warning. J’espère que quelqu’un aura la réponse à ta question.

  19. Thomas

    Merci Lycia, je vais préciser la situation au cas où.
    J’ai créé un thème enfant, collé le code de « David » dans functions.php du thème enfant.
    J’ai testé avec ton code aussi, mais les alertes sont présentes aussi.
    Je vais continuer mes recherches et posterai un commentaire si je trouve la solution.

    Dans tous les cas, merci pour ton travail, ton site est ma « bible » depuis quelques jours.

  20. Thomas

    Je pense avoir trouvé l’origine du problème.
    En relisant le code, j’ai constaté que j’avais copié le code après le dernier } de function theme_enqueue_styles()
    alors qu’en collant le code avant, les alertes disparaissent.

  21. Lycia Diaz

    Ah super !

  22. Rico

    Bonjour

    J’ai installé le code il y a un moment, 1 ou 2 mois, par contre ce matin 14/09/2020 une erreur dans le fichier function détecté et site HS

    J’ai une erreur au chargement de ad_last_updated_post, Je l’ai remis en place je verrais demain et je regarderais le fichier erreurs ce soir

    Je suis à jour dans toutes les versions, wordpress, plugins, pas d’intervention autre qu’écriture d’articles, mises à jour manuelles, j’utilise Divi, une idée ?

    Merci

  23. Lycia Diaz

    Salut Rico,
    Est-ce que le problème est toujours d’actualité ?

  24. VRIGNAUD Sylvain

    Bonjour,

    Merci beaucoup pour ces explications très claires !

    Comme je suis presque nul en terme d’informatique, je n’ai pas réussi à faire apparaitre la mention « Mise à jour » des pages.
    En effet, je veux en mettre pour les « pages » et non pour les « articles » sur Divi.
    Sauriez-vous comment faire ?

    Merci beaucoup !

  25. Lycia Diaz

    Salut Sylvain.
    Je ne crois pas que cela soit possible. Ou du moins, je ne sais pas comment.

  26. David C.

    En soit c’est possible en créant un shortcode pour faire appel aux fonction wordpress afin d’aller chercher les dates de publication / mise à jour et de les renvoyer… Mais cela demande un peu de code PHP.

  27. Lycia Diaz

    Merci David. Oui, j’imagine !

  28. Lilie, Créatrice de Style

    Merci. Cet article m’a vraiment aidé. Je cherchais à faire exactement ça depuis longtemps…

  29. Lycia Diaz

    Merci Lilie

  30. Benoit

    Bonjour,
    Sur ma page d’accueil, j’ai une section  » Les derniers articles ».
    Les articles se classent d’une certaine façon
    Comment classer les articles du plus récents aux plus anciens soit en fonction de la date de création soit en fonction de la date de modification ?
    Je n’arrive pas à comprendre le classement des articles

    Merci de vos retours

  31. Lycia Diaz

    Normalement les articles se classent du plus récent au plus ancien, c’est le par défaut. Je ne pense pas qu’on puisse classer par date de modifications.

  32. Tristan

    Bonjour,

    Que dois-je modifier dans le code si je veux faire apparaître la date de publication avant la date de mise à jour ?

  33. Lycia Diaz

    Bonne question, il faudrait que je fasse des essais. Donc si quelqu’un passe par là, ce serait cool d’aider Tristan.

  34. Bard

    Your code has worked very fine until I upgraded from PHP 7.4 to PHP 8. After that I get an error:
    (TypeError thrown
    gmdate(): Argument #2 ($timestamp) must be of type ?int, string given)

    … whenever I try to open the WP Dashboard. Otherwise the website functions well.

    I found that by removing this function from the Child theme, the Dashboard loads properly.
    So, what argument causes this exactly, and how do we fix this problem? Thomas’ suggestion to move the code before the enqueue_styles argument does not fix this error.

  35. Sandalsand

    Hi,
    Your code (David’s) worked well for a long time. Recently something happened. When I try to open the WordPress dashboard it only responds with this error message: « TypeError thrown gmdate(): Argument #2 ($timestamp) must be of type ?int, string given »
    The actual function works great on the front end, and there is no problem working with WP on the backend. Apart from the Dashboard which is unavailable until I remove the date code.

  36. Lycia Diaz

    Ok Thanks ! I think I have to update this post, then. Thank for that.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.