\n\n\n\n\n\n\n<\/p>
How to Create a Custom WordPress Post Template<\/h2>
To create your own custom WordPress post template, you can use:<\/p>
- \n
- The block editor<\/strong> – a convenient option for users who want to avoid coding. Its user-friendly interface makes visual layout and design customization easy.<\/li>\n\n\n\n
- Code<\/strong> – suitable for those with coding skills or interested in exploring WordPress’s technical aspects. It involves directly editing or creating template files in the theme.<\/li>\n\n\n\n
- The theme’s settings <\/strong>– ideal for WordPress themes with built-in options for customizing post templates. It provides a simpler interface to adjust post layouts and elements within the theme’s predefined capabilities.<\/li>\n<\/ul>
How to Create a Custom WordPress Post Template Using the Block Editor<\/h3>
Creating single post templates with the WordPress Block Editor, also known as Gutenberg<\/a>, is simple. Note that this method is only available if you use a block-based theme, such as Twenty Twenty-Four<\/strong>.<\/p>
Here are the steps:<\/p>
- \n
- Log in to your WordPress dashboard and navigate to Appearance → Editor<\/strong>.<\/li>\n\n\n\n
- In the template editor, select Templates → Single Posts<\/strong>.<\/li>\n<\/ol>
\n![\"Selecting](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-template-editor-templates-single-posts-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- Click the Edit <\/strong>button to begin customizing the blog post template. The left sidebar will automatically be hidden.<\/li>\n<\/ol>\n
![\"Editing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-template-editor-single-posts-edit-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- Select the List View<\/strong> button at the top left of the screen to see all the blocks in the template.<\/li>\n<\/ol>\n
![\"Accessing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-template-editor-list-view-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- Click on the block to modify each block, such as changing fonts or styles.<\/li>\n\n\n\n
- Use the drag-and-drop feature in the List View<\/strong> panel to reorder the blocks.<\/li>\n\n\n\n
- Click the Toggle block inserter<\/strong> button to add a new element, like a contact form or a button.<\/li>\n<\/ol>
\n![\"Accessing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-template-editor-toggle-block-inserter-highlighted.png\/public\")
<\/a><\/figure><\/div>Typically, a single post template will include the following blocks:<\/p>
- \n
- Header <\/strong>– displays elements like your site’s title, logo, and navigation menu. Changes to the Header block affect all pages where it’s used.<\/li>\n\n\n\n
- Title <\/strong>– shows the post’s title. This block automatically displays the actual title in live posts.<\/li>\n\n\n\n
- Featured Image <\/strong>– used to display a prominent image representing the post’s theme or content.<\/li>\n\n\n\n
- Content <\/strong>– the main body of your post. It acts as a placeholder in the template and will show the actual content in live posts.<\/li>\n\n\n\n
- Post Meta <\/strong>– contains additional information about your post, such as the author’s name, publication date, categories, and tags.<\/li>\n\n\n\n
- Comments <\/strong>– displays comments on your post, promoting reader interaction.<\/li>\n\n\n\n
- Footer <\/strong>– typically includes contact information, additional navigation, or a WordPress credit. Like the page header, changes here apply site-wide.<\/li>\n<\/ul>
When editing, regularly click the View<\/strong> button to preview the template live. Once satisfied with your WordPress blog layout, click Save<\/strong> to apply your customizations.<\/p>
\n![\"Saving](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-template-editor-view-save-highlighted.png\/public\")
<\/a><\/figure><\/div>By default, any post you create will use the Single Post<\/strong> template. To verify, add a new post or edit an existing one and navigate to the Settings<\/strong> sidebar. The Template<\/strong> option should be set to Single Posts<\/strong>.<\/p>
\n![\"Selecting](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-post-editor-single-posts-highlighted.png\/public\")
<\/a><\/figure><\/div>How to Create a Custom WordPress Post Template Using Code<\/h3>
Creating a custom WordPress post template using code offers greater customization. It is best suited for users familiar with PHP or aspiring to be WordPress developers<\/a>.<\/p>
For Hostinger’s WordPress hosting<\/a> customers, you can easily follow this method using our File Manager. It lets you navigate the theme’s folder and create the PHP<\/strong> file directly.<\/p>
![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner.png\/public\")
<\/a><\/figure>Follow these steps:<\/p>
- \n
- Log in to your Hostinger account and navigate to Websites → Dashboard<\/strong> on your hosting plan.<\/li>\n\n\n\n
- From the dashboard, access the File Manager option. This will open a new tab.<\/li>\n<\/ol>
\n![\"Accessing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel-dashboard-file-manager-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- In the File Manager<\/strong>, go to public_html\/wp-content\/themes<\/strong>. Here, you’ll find folders for all your installed themes.<\/li>\n\n\n\n
- Select the theme you want to customize, like twentytwentyone<\/strong>.<\/li>\n<\/ol>
\n![\"Accessing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel-file-manager-twentytwentyone-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- In your theme’s directory, create a new PHP<\/strong> file. You might name it my-custom-template.php<\/strong>.<\/li>\n<\/ol>\n
![\"Creating](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel-file-manager-new-file.png\/public\")
<\/a><\/figure><\/div>- \n
- At the beginning of the file, insert the following code snippet to define it as a new post template:<\/li>\n<\/ol>
<?php\n\/*\n* Template Name: My Custom Post\n* Template Post Type: post\n*\/<\/pre>
You can start building your custom blog template from scratch in this file. Some common WordPress functions and structures you may include such as:<\/p>
- \n
- get_header();<\/strong> – this function includes the header template file.<\/li>\n\n\n\n
- if ( have_posts() ) : while ( have_posts() ) : the_post();<\/strong> – the Loop starts, iterating over each post.<\/li>\n\n\n\n
- get_template_part<\/a>( ‘template-parts\/content’, ‘single’ );<\/strong> – includes one template part for displaying post content.<\/li>\n\n\n\n
- the_title();<\/strong> – displays the post title.<\/li>\n\n\n\n
- the_content();<\/strong> – outputs the post content.<\/li>\n\n\n\n
- comments_template();<\/strong> – includes the comment template.<\/li>\n\n\n\n
- the_post_navigation();<\/strong> – adds navigation links for a previous and a next post.<\/li>\n\n\n\n
- get_sidebar();<\/strong> – includes the sidebar template file.<\/li>\n\n\n\n
- get_footer();<\/strong> – includes the footer template file.<\/li>\n<\/ul>
Here’s a simplified structure combining these elements:<\/p>
<?php\n\/**\n * Template Name: My Custom Post\n * Template Post Type: post\n *\/\n\nget_header();\n\nif ( have_posts() ) : \n while ( have_posts() ) : the_post();\n the_title();\n the_content();\n comments_template();\n the_post_navigation();\n endwhile;\nendif;\n\nget_sidebar();\nget_footer();\n?><\/pre>
Once your edits are complete, remember to click Save<\/strong> to apply all changes.<\/p>
\n![\"Saving](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel-file-manager-text-editor-save-highlighted.png\/public\")
<\/a><\/figure><\/div>To use this custom single-post template, access the Settings<\/strong> sidebar while adding a new post or editing an existing one. Then, change the Template<\/strong> from Default template <\/strong>to My Custom Post<\/strong>.<\/p>
How to Customize WordPress Post Template Using the Theme’s Settings<\/h3>
Creating custom single post templates can be done through your theme’s settings. Each theme may offer different customization options. We’ll use some examples to show how these adjustments can be made.<\/p>
Customizing the Post Template in the Post Editor<\/strong><\/p>
In some WordPress themes like Astra<\/a><\/strong>, you can customize post templates directly in the post editor. This is convenient for personalizing blog post templates without leaving the editor.<\/p>
Here’s how to do it in Astra:<\/p>
- \n
- Begin by opening the post you want to customize.<\/li>\n\n\n\n
- In the post editor, locate the Astra Settings <\/strong>button. Astra offers various options to modify the template’s layout.<\/li>\n<\/ol>\n
![\"Accessing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-post-editor-astra-settings-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- Choose the Container Layout<\/strong> and Container Style<\/strong> for your post. The chosen style is effective when selecting the Normal<\/strong> or Narrow<\/strong> layout option.<\/li>\n\n\n\n
- Adjust the position and appearance of your sidebar. Note that the sidebar is available when the Container Layout<\/strong> is set to Normal<\/strong>.<\/li>\n<\/ol>
\n![\"Opening](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-post-editor-astra-settings-sidebar-opened.png\/public\")
<\/a><\/figure><\/div>- \n
- Astra allows you to disable some elements for individual posts, such as the header, footer, or banner area.<\/li>\n\n\n\n
- You can disable the primary or mobile header in the Advanced Settings<\/strong> section. Additionally, you can set a transparent header.<\/li>\n<\/ol>\n
![\"Accessing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-post-editor-astra-settings-advanced-settings.png\/public\")
<\/a><\/figure><\/div>- \n
- Once you’ve made your adjustments, click Publish<\/strong> for a new post or Update<\/strong> for an existing one to apply the changes to your live site.<\/li>\n<\/ol>
Customizing the Post Template Using Customizer<\/strong><\/p>
Editing custom templates through the WordPress Customizer is another efficient method. Themes like Neve <\/strong>offer built-in settings for this. To utilize the Customizer in Neve, follow this step-by-step guide:<\/p>
- \n
- From your WordPress dashboard, go to Appearance → Customize<\/strong>.<\/li>\n\n\n\n
- In the Customizer<\/strong>, select Layout → Single Post<\/strong> to access the settings for individual blog posts.<\/li>\n<\/ol>
\n![\"Accessing](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-customizer-layout-single-post-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- Choose between NORMAL<\/strong> or COVER<\/strong> for the HEADER LAYOUT<\/strong>. Set the Title Alignment<\/strong> according to your preference.<\/li>\n<\/ol>\n
![\"Opening](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-customizer-single-post-header-layout-opened.png\/public\")
<\/a><\/figure><\/div>- \n
- Modify the order and spacing of elements on the page under PAGE ELEMENTS<\/strong> for a more organized appearance.<\/li>\n\n\n\n
- In PAGE SETTINGS<\/strong>, set the Content Vertical Spacing <\/strong>option. Select Inherit<\/strong> for default theme settings or Custom<\/strong> to define your own.<\/li>\n<\/ol>
\n![\"Opening](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-customizer-single-post-page-settings-opened.png\/public\")
<\/a><\/figure><\/div>- \n
- Under POST META<\/strong>, adjust the meta information order (like date and author), enable the display of author avatars for posts, and choose to show the last updated date instead of the publication date.<\/li>\n<\/ol>\n
![\"Opening](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-customizer-single-post-post-meta-opened.png\/public\")
<\/a><\/figure><\/div>- \n
- The Comments<\/strong> and Submit Form Section<\/strong> offers options to set titles and customize padding, background color, text color, and the submit button’s style.<\/li>\n\n\n\n
- After making adjustments, click Publish<\/strong> to apply and save your changes.<\/li>\n<\/ol>
Selecting Other Pre-Made Post Templates<\/strong><\/p>
Many WordPress themes, including Influencer Agency<\/strong>, offer a range of pre-made post templates. This feature is ideal for those looking to add variety to their blog’s appearance without engaging in custom design.<\/p>
To discover themes with pre-made templates in the WordPress repository, follow these steps:<\/p>
- \n
- Go to Appearance → Themes → Add New Theme<\/strong> in your WordPress dashboard.<\/li>\n<\/ol>\n
![\"Adding](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-dashboard-themes-add-new-theme-highlighted.png\/public\")
<\/a><\/figure><\/div>- \n
- Click the Feature Filter<\/strong>, select Template Editing<\/strong>, and then click Apply Filters<\/strong>.<\/li>\n<\/ol>\n
![\"Selecting](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-dashboard-add-themes-feature-filter-template-editing-selected.png\/public\")
<\/a><\/figure><\/div>After selecting a WordPress theme with multiple templates, you can easily switch between them when creating or editing a particular post. In the post editor, like with several other methods, select one of the available templates in the drop-down menu of the Template <\/strong>section.<\/p>
\n![\"Switching](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/wordpress-post-editor-template-options-opened.png\/public\")
<\/a><\/figure><\/div>When Should You Use a Custom WordPress Post Template?<\/h2>
Custom WordPress post templates adapt the content presentation to its purpose and audience. Choosing a suitable template can significantly enhance the reader’s experience, making your content more engaging and impactful.<\/p>
Norwegian Cruise Line<\/a>‘s website illustrates this perfectly. For their video-centric blog entries, they opted for a dynamic, full-width template that emphasizes the visual impact of the video content. This approach enhances the appeal of their cruise offerings to potential travelers.<\/p>
\n![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/norwegian-cruise-line-video-content-page.png\/public\")
<\/a><\/figure><\/div>In contrast, they employ a more traditional layout for text-heavy content focusing on text and images. This format effectively delivers detailed information, ideal for readers who prefer in-depth textual content.<\/p>
\n![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/norwegian-cruise-line-blog-content-page.png\/public\")
<\/a><\/figure><\/div>
- Click the Feature Filter<\/strong>, select Template Editing<\/strong>, and then click Apply Filters<\/strong>.<\/li>\n<\/ol>
- After making adjustments, click Publish<\/strong> to apply and save your changes.<\/li>\n<\/ol>
- The Comments<\/strong> and Submit Form Section<\/strong> offers options to set titles and customize padding, background color, text color, and the submit button’s style.<\/li>\n\n\n\n
- In PAGE SETTINGS<\/strong>, set the Content Vertical Spacing <\/strong>option. Select Inherit<\/strong> for default theme settings or Custom<\/strong> to define your own.<\/li>\n<\/ol>
- Modify the order and spacing of elements on the page under PAGE ELEMENTS<\/strong> for a more organized appearance.<\/li>\n\n\n\n
- In the Customizer<\/strong>, select Layout → Single Post<\/strong> to access the settings for individual blog posts.<\/li>\n<\/ol>
- From your WordPress dashboard, go to Appearance → Customize<\/strong>.<\/li>\n\n\n\n
- Once you’ve made your adjustments, click Publish<\/strong> for a new post or Update<\/strong> for an existing one to apply the changes to your live site.<\/li>\n<\/ol>
- Adjust the position and appearance of your sidebar. Note that the sidebar is available when the Container Layout<\/strong> is set to Normal<\/strong>.<\/li>\n<\/ol>
- Choose the Container Layout<\/strong> and Container Style<\/strong> for your post. The chosen style is effective when selecting the Normal<\/strong> or Narrow<\/strong> layout option.<\/li>\n\n\n\n
- if ( have_posts() ) : while ( have_posts() ) : the_post();<\/strong> – the Loop starts, iterating over each post.<\/li>\n\n\n\n
- get_header();<\/strong> – this function includes the header template file.<\/li>\n\n\n\n
- At the beginning of the file, insert the following code snippet to define it as a new post template:<\/li>\n<\/ol>
- Select the theme you want to customize, like twentytwentyone<\/strong>.<\/li>\n<\/ol>
- From the dashboard, access the File Manager option. This will open a new tab.<\/li>\n<\/ol>
- Title <\/strong>– shows the post’s title. This block automatically displays the actual title in live posts.<\/li>\n\n\n\n
- Click the Toggle block inserter<\/strong> button to add a new element, like a contact form or a button.<\/li>\n<\/ol>
- Select the List View<\/strong> button at the top left of the screen to see all the blocks in the template.<\/li>\n<\/ol>
- In the template editor, select Templates → Single Posts<\/strong>.<\/li>\n<\/ol>
- Code<\/strong> – suitable for those with coding skills or interested in exploring WordPress’s technical aspects. It involves directly editing or creating template files in the theme.<\/li>\n\n\n\n
![\"A](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/yatzer-agenda-content-page.png\/public\")
<\/a><\/figure><\/div>