today’s article we will create an important template file in our WordPress theme which is the single.php file which is mainly used to display and format all the individual posts or articles published on your WordPress site.
Through this general file, you can flexibly customize the page of any post, and you can also create more customized files to have more control over the way specific posts are displayed on your site. For example, you can customize the way articles that belong to a specific category or that were written by specific authors are displayed differently from the rest of the articles, or display custom post types (CustomPosts) differently, and many other options.
Follow the paragraphs of this article and learn the detailed steps on how to customize this template, and the great flexibility it provides you to customize the presentation of your website articles.
How to Create Custom Single Post Templates in WordPress.
We have explained in previous lessons in the WordPress template development series that any WordPress theme essentially needs the main template file index.php to display the site’s pages, and the style.css file that controls the appearance of these pages. We indicated that the template developer can optionally add many template files for further customization.
As the template template files follow a specific hierarchy through which we ensure that any article or page that we review on your site has a dedicated template file suitable for it within this hierarchy and is used before other template files provided by your template.
If there is no file specifically dedicated to displaying the desired page, we move to the file located at a higher level in the hierarchy (a more general file) and so on until we finally reach the basic template file for the index.php template.
In today’s article, we will complete the template that we started developing in the last two lessons ( Practical Application 1 for building a WordPress template and Practical Application 2 for building a WordPress template ) and we will work on creating a new template file in our template, which is the single post template file single.php, in order to take care of displaying the site’s articles according to the required design.
clarification:
The word “posts” in WordPress includes several types, including default post types in WordPress, or custom post types.
As for the single.php file, it specializes, as we mentioned, in displaying single pages for all types of default or custom posts, with the exception of static pages ( page) The latter is concerned with a custom template file known as page.html , which we will create and customize in later lessons in the series.
Read more: The difference between Pages and Posts in WordPress
For today’s lesson, we will be interested in creating the single.php file only in order to customize all of our individual site articles. You can of course create whatever you want from more specific template files for your site’s articles or posts if you need more customization in the way these posts are displayed, as shown in the following image. .
As shown in the image above, the file called single-{post-type}.php is used to customize the display of a post that has a specific type. For example, if you have a blog post type, WordPress will search for the file single-post.php. To display the article, if you have a custom post of type product (product), WordPress will search for a custom file named single-product.php to display it, and so on..
If WordPress does not find a file dedicated to the specified post type within the template folder, it will then search for the presence of a file named single.php to display posts of any type. If it does not find it, it will search for the presence of the backup file singular.php and use it. If it does not find it, it will return as We mentioned the main file index.php at the end and it depends on it to display the post.
Most theme developers, when developing their custom themes, rely on creating only the single.php template file in their templates to make them as simple as possible. This file is specific enough to display single posts and there is no need to create more customized files.
In the following paragraphs we will start by creating the single.php template folder, and we will rely on it to format all the individual posts or articles on our site. When we click on the title of any article on the home page or one of the other pages of the site and move to the page of this article, we want a page to appear that includes the elements of the article according to the following structural chart:
Create a single.php file and add article data to it.
We first have to create a new file called single.php in our theme folder (located in the wp-content < themes directory in the root folder of our site) and add the necessary code to display the required data on the single article page.
First, we call in the template file the site header and footer that we created in the previous lesson through the functions get_header() and get_footer(), and between them we write the <main> tag to display the page content within it later, so the code is as follows:
Then, within the <main> tag, we need to write a WordPress loop that initially extracts, as shown in the proposed wireframe design, the title of the article, then some metadata for the article (such as the categories of the article being displayed, the name of the writer, and the date of publication).
Then we display the featured image for each article, and here we will also use a default image if the writer has not uploaded a featured image for this article.
Finally, we display the actual content of the article by calling the the_content() function . This function fetches all the HTML code that results from editing the article, whether through the default Gutenberg editor or other page building tools (it brings you all the text, images, video clips, and other elements that you added of the article through the editor, and place it in the desired position in the template file).
Now the code will be within the opening tag <main class=”post”> and the closing tag </main>, which displays all the required article data as follows:
Add social media sharing icons at the bottom of the article
Then, as you can see in the wireframe, we have to display icons for sharing the article title and the link to the current article via our social networking accounts. The idea here is that you have to include icons for each of the networks that you want, and here we will use SVG vector icons and include the codes for these icons through the tag < svg>, through which we can specify the drawing path, colors, code class, and other data for each icon we want to display.
To obtain these codes, you can simply download the svg icon for any social network you want, and you can customize the icon with vector drawing programs if you wish, then open the file in any text editor and copy the code you obtained and include it in the position you want in the file. You can also obtain the code Customized for many icons through the following link .
Then we will pass the custom API link to share the link on social media. To do this, you must know the link assigned to each of the different networks, for example:
Link to share on Facebook:
Link to share on WhatsApp:
Link to share on LinkedIn:
Link to share on Telegram:
Of course, you must obtain the link to your website or blog and the link to the current article, and include it dynamically in the required sharing link within the template instead of the fixed link to our website wpar.net that we mentioned in the previous codes.
To do this task, let us create a new section tag, give it the social class, and display within it one share link to Twitter – before the WordPress loop closing code – and in a similar way, you can place the link to any other social network you prefer.
We need to specify through the href attribute the URL of the sharing page on Twitter that the link will go to. We need to get the URL of the current article through the urlencode() function , which we want to pass the URL of the site get_site_url(), and pass the permalink of the article get_permalink() as well. Pass the main title of the article get_the_title() as the title of the post in the social network.
We will also specify, through the class=”social-twitter” attribute, a class to help us format the link, and through the target=”_blank” attribute, we will force the link to open on a new page when clicked on it, and finally, we will specify both the link title and the icon for the social network.
The final code to share the article on Twitter will be as follows:
This is all we will add to the single article page of our template in this lesson. In our next lesson, we will complete the article page information and add to it the section dedicated to displaying the comments form in addition to the comments themselves after the social sharing icons.
Now we have to format all this information as required by writing the required formats in the template formats file style.css
Create a style.css file to format the article
After we have brought the data required for the single article page, we must now design the page for this article so that the elements appear as required according to the proposed network diagram.
So edit the style.css file with a code editor and add the element styling codes you added to the single.php file at the end as follows:
Now view the site in the browser, and click on one of the titles of the articles published on the site to go to the page of this article, and you will find that the article will appear as follows:
Conclusion
In today’s article, we learned about how to create and customize the single.php file, which is responsible for displaying individual posts on the WordPress site differently from the list of articles displayed on the first page of the site and from the way the static pages of the site are displayed.
In this file, we mainly relied on the WordPress loop code that we had used in a previous lesson when creating the index.php template file, with some slight differences here in the information that the loop brings.
Finally, we added the required formats to display this file by modifying the style.css template format file so that it appears as required according to the proposed design scheme.
