Metadata for articles in WordPress or (Metadata) is the additional information that WordPress stores about this article, such as the author of the article, the date and time of publication of the article, and the tags and classifications of the article. You can also add your own metadata or what is known as custom fields to articles. for your site.
The method and location of displaying this data depends mainly on the WordPress template, and in our article today we will learn about the concept of metadata in WordPress, and we will explain through practical application the programming code that you need to write in the WordPress template files to display this metadata and how to control its format within the pages of your site.
What is Post Meta Data?
Metadata for articles in WordPress is information that is not part of the actual content of the article, but rather additional information that is displayed to readers about this article, such as:
- Name of the article writer.
- Date and time the article was published.
- Article categories.
- Custom classifications.
- Article tags..
The way this metadata is displayed and where it is displayed depends on the WordPress template, as we mentioned at the beginning. Most templates display this information directly at the top of the article or at the end of the article, while others display it in the sidebar, or in the footer or header of the site.
You are, of course, free to design and display the data. Descriptive in the way you prefer. Follow the following paragraphs in which we will explain how to display it through practical examples in which we will work on modifying the WordPress template files in order to display this data on our website in the appropriate way.
How to display article metadata programmatically
The metadata that we want for each article is obtained programmatically through the use of a set of ready-made programming functions in WordPress written in the PHP language whose task is to fetch the article data from the site’s database.
These functions are known as template tags. There are a large number of template tags available to you in the WordPress system that can greatly benefit you as a WordPress developer, but what interests us here are those that display metadata about each article.
For example, you can easily get the name of the author of any article by calling the template tag function the_author as follows:
You can also get the publication date of any article by calling the template tag function the_time as follows:
We can pass to the date function certain characters that represent formats through which the function determines the way the date and time are displayed on the site. For example, these formats include:
- j: Displays the day number of the month without leading zeros (from 1 to 31).
- D: Displays the abbreviation of the day of the week (Sun, Mon, Tue, Wed).
- m: Displays the month number with leading zeros (from 01 to 12).
- M: Displays the abbreviated name of the month (Jan, Feb, Mar)
- Y: Displays four numbers representing the year (2022).
- y: Displays two numbers representing the year (22).
- h: 12-hour clock with leading zeros (from 01 to 12).
- g: 12-hour clock without leading zeros (1 to 12)
- H: 24-hour clock (00 to 23).
- A: AM or PM.
- i:Displays minutes (00 to 59).
- s: Displays the seconds (00 to 59).
- For more information about time and date formats in WordPress, see the following reference
Any of the previous characters can be combined to obtain the format we want. For example, the following code displays the result in the following form: Article publication date 07/30/22 3:54 PM
While the following code displays the result as follows: Article publication date: Saturday-July-2023
You may also prefer to display the updated date instead of the published date if your articles are subject to frequent updates, for example if we want to display the article’s modification date instead of the published date if the difference between the date the article was published and the date it was modified is more than one day (which is equivalent to 86400 seconds)
To do this, we write the following code. You can write the following code on the site where you want to display the date of the last update:
Displaying the date your posts were last updated can help show the freshness of your content and encourage readers to look at older articles published long ago on your site.
Read more: Show the latest time to update articles in an easy way and without additions
If you want to get the categories or tags of any article, you can call the two functions and the_tags() respectively:
These programming functions are usually called in the main WordPress theme file, index.php, the archive.php file, the single post file, and other template files in which you need to display information about articles.
Read more : Learn about the basic structure of WordPress templates and their hierarchy
A practical example of displaying and formatting post metadata in a WordPress theme
In the main template template file, we will display the blog articles, with the metadata for each article displayed directly under the article title, as shown in the following image:
As you can see from the previous example, here we need to go through each article through the WordPress loop , and display the beginning of the article’s title in the form of a link, and then display the article’s meta data (the name of the writer in the form of a link to the author’s page, the date in the form of the day of the week without a zero prefix, and the name of the month, The year is in the form of 4 boxes, then we display the classification with a link to the classification archive page), then we display a thumbnail of the article, and finally the content of the article itself.
First, we will write the following code in the index.html file of our website template:
This code initially calls the site header get_header() , then it defines a WordPress loop to scroll through the articles and calls within it the the_title() function, which displays each article title as a fixed link to the article page itself, then displays the name of the article’s author through the the_author() function, and the date of the article. By calling the_time(‘j F Y’) function in the desired format.
The thumbnail of the article, if any, is then displayed through the the_post_thumbnail() function . This will display the image in its original dimensions, but the dimensions of the thumbnail display can be controlled (we will make it 200X200) by adding the following code to the template functions file functions.php:
Finally, we displayed the content of the article itself through the_content() function , then exited the loop and displayed the site footer get_footer(). The result of executing the above code will be as follows:
As you can see from the image above, the writer’s name appears in the form of a text string, so we need to improve the previous code by adding a link to the writer’s archive page, so we must replace the tenth line in the previous code.
Instead, we write the following code:
Here we called the function get_author_posts_url , which returns to us the URL of the author’s page, which has a specific ID, and we passed to it the ID of the author of the current article, which we obtained through the helper function get_the_author_meta, which enables us to obtain all the data of the author of the current article, such as the ID, name, email, description, and so on. But here we only want the writer’s ID to be specified as the argument to this function.
Now, if we display the page after this modification, we will get the writer’s name in the form of a link to his articles page as follows:
When we click on the author’s name, we will be taken to a path similar to the following path: http://yourdomin.com/?author=2, where the number 2 is the writer’s ID here, and this page displays all articles by this writer only.
The last step is to display the article category, which we can get by calling the_category() function after the article history display function.
But we must be careful here because a single article may have more than one classification, and in this case the classifications will appear in the form of a bulleted list under each other, so to display all these classifications on one line and separate them, we pass the required separator form to the function as follows:
Now the classifications will be displayed next to each other after the date of the article, and the classification will be automatically attached here with a link that will take us to the classification archive page as follows:
Article meta data format
Let’s add some simple formatting to the article title and metadata for each article. To do this, we give rows or identifiers to the HTML tags that we need to format and assign them within the template’s style.css file.
Read more: Explaining HTML and CSS and how to use them and modify their codes completely.
We will know a row or class named post for the <article> tag, which displays each article, and another description named post-meta for the paragraph tag, which displays the article’s metadata <p>, so that the code becomes complete for the template sample file. index.php as follows:
Now we move to the template formats file and add some formats to the required elements as follows:
Now when we browse the home page of our website we will get the following result:
Conclusion
In today’s article, we explained how to display the default metadata for articles within a WordPress template, and what are the ready-made functions that enable us to obtain and display this data, and we learned how to format it in the way we want.
Finally, it is worth noting that you can add your own metadata to WordPress articles through Custom Fields, but we have limited ourselves to explaining how to deal with default tags within the confines of this article because we will only deal with them when developing our WordPress template.
