{"id":33726,"date":"2022-05-02T08:08:12","date_gmt":"2022-05-02T15:08:12","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=33726"},"modified":"2025-05-21T19:43:28","modified_gmt":"2025-05-22T02:43:28","slug":"wordpress-templates-template-parts","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/","title":{"rendered":"Decoding WordPress: Custom Templates and Template Parts"},"content":{"rendered":"\n<p>With the introduction of <a href=\"https:\/\/wordpress.org\/support\/wordpress-version\/version-5-9\/\" target=\"_blank\" rel=\"noopener\">WordPress 5.9<\/a>, you can now use Full-Site Editing to customize the appearance of your theme. Furthermore, you can access more design features to build your website without coding using a block-based theme. However, these basic settings might not meet your needs.<\/p>\n\n\n\n<p>Fortunately, you can easily add custom templates and template parts to your WordPress block theme. Whether by using Full-Site Editing or editing your theme file, you can create a <a href=\"https:\/\/www.dreamhost.com\/blog\/website-builder-template-examples\/\" target=\"_blank\" rel=\"noopener\">custom layout<\/a> to reuse when designing new content.<\/p>\n\n\n\n<p>In this article, we\u2019ll discuss what templates and template parts are. Then, we\u2019ll show you how to create these in WordPress. Let\u2019s get started!<\/p>\n\n\n\n<h2 id=\"h-an-introduction-to-wordpress-page-templates\" class=\"wp-block-heading\"><b>An Introduction to WordPress Page Templates<\/b><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"639\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-hierarchy-1024x639.png\" alt=\"WordPress page template hierarchy chart\" class=\"wp-image-37192 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-hierarchy-1024x639.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-hierarchy-300x187.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-hierarchy-768x479.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-hierarchy-1536x958.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-template-hierarchy-600x374.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-template-hierarchy-750x468.png.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-hierarchy-100x62.png 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-template-hierarchy.png.webp 1685w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/639;\" \/><\/figure><\/div>\n\n\n<p>Themes are some of WordPress\u2019 most versatile features. By installing a theme on your site, you can radically alter its appearance to suit your needs. Plus, it\u2019s usually easy to find themes that cater to your particular niche and offer lots of flexibility during the design process.<\/p>\n\n\n\n<p>However, there are a few things that are difficult to do if you\u2019re only using a theme to customize your site\u2019s appearance. For example, what if you want your archives to have a very different layout than the rest of your pages? Similarly, you might want the sidebar to contain different information on various page types.<\/p>\n\n\n\n<p>Enter page templates \u2014 a way to get more control over your site\u2019s look. In some ways, page templates are very similar to themes. Both are files with code that tell your site how to display information.<\/p>\n\n\n\n<p>As the name suggests, however, a page template only controls the style of a particular page (or type of page). Many themes come with various page templates to choose from, but you can also create your own. That way, you can decide exactly how it should be set up and what pages should be assigned to follow that template.<\/p>\n\n\n\n<p>Understanding and using templates is a bit more technical than dealing with themes. If you really want to get a feel for how templates work, you may want to spend some time reading up on the <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/template-hierarchy\" target=\"_blank\" rel=\"noopener\">WordPress Template Hierarchy<\/a>. This system assigns a priority level to each type of template so that your WordPress site always knows which one to display.<\/p>\n\n\n\n<p>We won\u2019t go into too much detail about this concept right now since we\u2019ll first be focusing specifically on page templates. Let\u2019s start by exploring why you might want to use templates in the first place.<\/p>\n\n\n\n<h2 id=\"h-the-benefits-of-using-page-templates\" class=\"wp-block-heading\"><b>The Benefits of Using Page Templates<\/b><\/h2>\n\n\n\n<p>By now, you should have some idea of why page templates are so useful. They provide a lot more control over your site\u2019s look and layout than you can usually get by modifying your theme. The applications for page templates are numerous \u2014 the only limit is your own creativity.<\/p>\n\n\n\n<p>To give you a sense of the importance of this feature, however, here are a few examples of situations in which you might want to use a page template:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you want a particular page to have a full-width layout while keeping a fixed-width design for the other pages.<\/li>\n\n\n\n<li>To create a custom page that uses widgets not displayed on other pages.<\/li>\n\n\n\n<li>For displaying recommended posts to readers that are relevant to the specific content they\u2019re browsing.<\/li>\n\n\n\n<li>To build a page with a unique set of features, such as a contributor or archives page.<\/li>\n<\/ul>\n\n\n\n<p>At the end of this post, we\u2019ll show you how to do each of these things. Once you\u2019ve started experimenting with page templates and getting a feel for how they work, you\u2019ll be able to do whatever you\u2019d like with them.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-an-introduction-to-full-site-editing-with-templates-and-template-parts\" class=\"wp-block-heading\"><b>An Introduction to Full Site Editing With Templates and Template Parts<\/b><\/h2>\n\n\n\n<p>Using <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-full-site-editing\/\" target=\"_blank\" rel=\"noopener\">Full-Site Editing<\/a>, you can design the layout of your website with blocks. You probably already use blocks to create WordPress posts. Now, they can build your entire site, including non-content areas.<\/p>\n\n\n\n<p>One advantage of Full-Site Editing is its page templates. They allow you to easily see and customize your templates without having to edit your theme files manually:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"631\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-screen-wordpress-1024x631.jpg\" alt=\"the WordPress templates screen\" class=\"wp-image-37186 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-screen-wordpress-1024x631.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-screen-wordpress-300x185.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-screen-wordpress-768x473.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-screen-wordpress-1536x947.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/templates-screen-wordpress-600x370.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/templates-screen-wordpress-750x462.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-screen-wordpress-100x62.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/templates-screen-wordpress.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/631;\" \/><\/figure><\/div>\n\n\n<p>In WordPress, there are also template parts, which function as smaller structural sections of a page template. You will usually see template parts for headers or footers:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"591\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-1024x591.jpg\" alt=\"the template parts screen in WordPress\" class=\"wp-image-37184 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-1024x591.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-300x173.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-768x443.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-1536x886.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/template-parts-screen-in-wordpress-600x346.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/template-parts-screen-in-wordpress-750x433.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-100x58.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/template-parts-screen-in-wordpress.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/591;\" \/><\/figure><\/div>\n\n\n<p>Using a template, you can build pages with unique features. For instance, you might not want your <a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-front-page\/\" target=\"_blank\" rel=\"noopener\">home page<\/a> to have the same layout as the rest of your content. Therefore, you can achieve a unique design with a page template.<\/p>\n\n\n\n<p>Furthermore, you can save time during the design process by reusing templates and template parts. By simply clicking on a template or individual element, you can implement it instantly.<\/p>\n\n\n\n<h2 id=\"h-how-to-make-templates-in-wordpress-with-the-template-editor\" class=\"wp-block-heading\"><b>How to Make Templates in WordPress with the Template Editor<\/b><\/h2>\n\n\n\n<p>If you\u2019re using a block theme, it comes with the <a href=\"https:\/\/wordpress.org\/support\/article\/template-editor\/\" target=\"_blank\" rel=\"noopener\">Template Editor<\/a>. Using this feature, you can create and edit templates for any page or post on your website. It works similarly to the Block Editor, enabling you to customize your theme with blocks.<\/p>\n\n\n\n<p>To get started, you\u2019ll need to install a block theme. In your WordPress dashboard, navigate to <i>Appearance &gt; Themes &gt; Add New<\/i>. Then, filter the results with a <i>Full Site Editing<\/i> tag:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"561\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/enabling-full-site-editing-in-wordpress-1024x561.jpg\" alt=\"enable full site editing in WordPress\" class=\"wp-image-37182 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/enabling-full-site-editing-in-wordpress-1024x561.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/enabling-full-site-editing-in-wordpress-300x164.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/enabling-full-site-editing-in-wordpress-768x421.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/enabling-full-site-editing-in-wordpress-1536x842.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/enabling-full-site-editing-in-wordpress-600x329.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/enabling-full-site-editing-in-wordpress-750x411.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/enabling-full-site-editing-in-wordpress-100x55.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/enabling-full-site-editing-in-wordpress.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/561;\" \/><\/figure><\/div>\n\n\n<p>Select <i>Apply Filters<\/i>. In the search results, install and activate a theme. We\u2019ll be using the default Twenty Twenty-Two theme for this tutorial:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"729\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/customize-themes-in-wordpress-1024x729.jpg\" alt=\"customizing themes in WordPress\" class=\"wp-image-37181 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/customize-themes-in-wordpress-1024x729.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/customize-themes-in-wordpress-300x214.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/customize-themes-in-wordpress-768x547.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/customize-themes-in-wordpress-600x427.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/customize-themes-in-wordpress-750x534.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/customize-themes-in-wordpress-100x71.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/customize-themes-in-wordpress.jpg.webp 1422w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/729;\" \/><\/figure><\/div>\n\n\n<p>To create a new template, start by adding a new post or page. Then, in the <i>Post<\/i> settings tab, find the <i>Template<\/i> section and select the <i>New<\/i> button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"447\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/select-page-template-in-wordpress-editor-1024x447.jpg\" alt=\"selecting your WordPress page template in the editor\" class=\"wp-image-37183 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/select-page-template-in-wordpress-editor-1024x447.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/select-page-template-in-wordpress-editor-300x131.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/select-page-template-in-wordpress-editor-768x335.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/select-page-template-in-wordpress-editor-1536x670.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/select-page-template-in-wordpress-editor-600x262.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/select-page-template-in-wordpress-editor-750x327.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/select-page-template-in-wordpress-editor-100x44.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/select-page-template-in-wordpress-editor.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/447;\" \/><\/figure><\/div>\n\n\n<p>In the pop-up window, give your new template a name. Then, select <i>Create<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"842\" height=\"580\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/create-a-new-custom-template-in-wordpress.jpg\" alt=\"create a new custom template in WordPress\" class=\"wp-image-37180 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/create-a-new-custom-template-in-wordpress.jpg.webp 842w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/create-a-new-custom-template-in-wordpress-300x207.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/create-a-new-custom-template-in-wordpress-768x529.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/create-a-new-custom-template-in-wordpress-600x413.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/create-a-new-custom-template-in-wordpress-750x517.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/create-a-new-custom-template-in-wordpress-100x69.jpg 100w\" data-sizes=\"(max-width: 842px) 100vw, 842px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 842px; --smush-placeholder-aspect-ratio: 842\/580;\" \/><\/figure><\/div>\n\n\n<p>This will automatically open the Template Editor. You can design your template using the same blocks you\u2019d use in a post. However, it\u2019s important to note that these blocks will be added to every post with this template:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"624\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/adding-blocks-to-a-new-template-part-1024x624.jpg\" alt=\"adding blocks to a new template part in WordPress\" class=\"wp-image-37179 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/adding-blocks-to-a-new-template-part-1024x624.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/adding-blocks-to-a-new-template-part-300x183.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/adding-blocks-to-a-new-template-part-768x468.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/adding-blocks-to-a-new-template-part-1536x936.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/adding-blocks-to-a-new-template-part-600x366.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/adding-blocks-to-a-new-template-part-750x457.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/adding-blocks-to-a-new-template-part-100x61.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/adding-blocks-to-a-new-template-part.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/624;\" \/><\/figure><\/div>\n\n\n<p>You can also insert blocks related to your theme. By scrolling down to the <i>Theme<\/i> section of the block options, you can display a logo, tagline, post comments, and more:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"548\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-theme-blocks-1024x548.jpg\" alt=\"selecting available WordPress theme blocks\" class=\"wp-image-37194 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-theme-blocks-1024x548.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-theme-blocks-300x161.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-theme-blocks-768x411.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-theme-blocks-1536x822.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-theme-blocks-600x321.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-theme-blocks-750x401.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-theme-blocks-100x54.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-theme-blocks.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/548;\" \/><\/figure><\/div>\n\n\n<p>When you finish customizing your template, click on <i>Publish<\/i>. Then, whenever you want to assign a post or page to that template, simply select it in the settings tab.<\/p>\n\n\n\n<h2 id=\"h-how-to-create-template-parts-in-wordpress-with-the-site-editor\" class=\"wp-block-heading\"><b>How to Create Template Parts in WordPress with the Site Editor<\/b><\/h2>\n\n\n\n<p>With a block theme, you can edit templates with the Site Editor. You can edit your theme directly rather than making a new post or page.<\/p>\n\n\n\n<p>First, go to your dashboard. Then, select<i> Appearance &gt; Editor (beta)<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"334\" height=\"246\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-themes-editor.jpg\" alt=\"WordPress themes editor setting in the Appearance menu\" class=\"wp-image-37195 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-themes-editor.jpg.webp 334w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-themes-editor-300x221.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-themes-editor-100x74.jpg 100w\" data-sizes=\"(max-width: 334px) 100vw, 334px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 334px; --smush-placeholder-aspect-ratio: 334\/246;\" \/><\/figure><\/div>\n\n\n<p>This will open the Site Editor. To find your theme\u2019s templates and template parts, click on the WordPress icon in the upper left corner:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"477\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-site-editor-1024x477.jpg\" alt=\"WordPress site editor\" class=\"wp-image-37191 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-site-editor-1024x477.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-site-editor-300x140.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-site-editor-768x358.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-site-editor-1536x716.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-site-editor-600x280.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-site-editor-750x350.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-site-editor-100x47.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-site-editor.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/477;\" \/><\/figure><\/div>\n\n\n<p>After selecting <i>Template Parts<\/i>, you\u2019ll see a list of default options. To add a new template part, click on the <i>Add New<\/i> button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"591\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-1024x591.jpg\" alt=\"the template parts screen in WordPress\" class=\"wp-image-37184 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-1024x591.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-300x173.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-768x443.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-1536x886.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/template-parts-screen-in-wordpress-600x346.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/template-parts-screen-in-wordpress-750x433.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/template-parts-screen-in-wordpress-100x58.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/template-parts-screen-in-wordpress.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/591;\" \/><\/figure><\/div>\n\n\n<p>Then, create a name for your template part and choose where to place it. The three placement areas are <i>General<\/i>, <i>Header<\/i>, and <i>Footer<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"905\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-create-a-template-part-1024x905.jpg\" alt=\"creating a new template part in WordPress\" class=\"wp-image-37189 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-create-a-template-part-1024x905.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-create-a-template-part-300x265.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-create-a-template-part-768x679.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-create-a-template-part-600x531.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-create-a-template-part-750x663.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-create-a-template-part-100x88.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-create-a-template-part.jpg.webp 1244w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/905;\" \/><\/figure><\/div>\n\n\n<p>When you\u2019re done, select <i>Create<\/i>. This will take you to the isolated template part, which you can customize by adding blocks:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"624\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-add-new-template-part-1024x624.jpg\" alt=\"WordPress add new Template Part\" class=\"wp-image-33804 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-add-new-template-part-1024x624.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-add-new-template-part-300x183.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-add-new-template-part-768x468.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-add-new-template-part-1536x936.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-600x366.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-1200x731.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-730x445.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-1460x890.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-784x478.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-1568x955.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-877x534.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part-1754x1069.jpg.webp 1754w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-add-new-template-part.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/624;\" \/><\/figure><\/div>\n\n\n<p>You could display a simple call to action, website logo, or anything you might want to reuse as a template part. Once it\u2019s saved, you can add it to any template by simply inserting the <i>Template Part<\/i> block.<\/p>\n\n\n\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\t22 WordPress Block Themes Perfect for Full Site Editing [2026]\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-block-themes\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n\n\n<h2 id=\"h-how-to-create-custom-templates-and-template-parts-in-wordpress-manual-coding\" class=\"wp-block-heading\"><b>How to Create Custom Templates and Template Parts in WordPress (Manual Coding)<\/b><\/h2>\n\n\n\n<p>Although Full-Site Editing enables you to create templates and template parts for an existing theme, you might want to <a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-developing-a-wp-theme\/\" target=\"_blank\" rel=\"noopener\">develop your theme<\/a>. In addition, this option can give you more control over the appearance of your website.<\/p>\n\n\n\n<p>If you\u2019re building your new theme from an existing one, we recommend <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-create-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">creating a child theme<\/a>. This step ensures that new updates on the parent theme won\u2019t override your customizations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-add-a-configuration-file\"><b>Step 1: Add a Configuration File<\/b><\/h3>\n\n\n\n<p>With previous <a href=\"https:\/\/www.dreamhost.com\/wordpress\/guide-to-wp-functions\/\" target=\"_blank\" rel=\"noopener\">PHP-based themes,<\/a> you could edit the header of your template file. However, to create custom content in a block-based theme, you\u2019ll need to create a new <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\" target=\"_blank\" rel=\"noopener\"><i>theme.json<\/i> file<\/a>.<\/p>\n\n\n\n<p>You\u2019ll first need to access your site via <a href=\"https:\/\/www.dreamhost.com\/blog\/ftp-sftp-guide-for-wordpress-users\/\" target=\"_blank\" rel=\"noopener\">Secure File Transfer Protocol (SFTP)<\/a> or your hosting provider\u2019s site manager dashboard. Then, look for the <i>themes<\/i> folder, which should be under <i>wp-content<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"420\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wp-content-themes-folder-1-1024x420.jpg\" alt=\"wp-content themes folder in WordPress via FTP\" class=\"wp-image-37197 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wp-content-themes-folder-1-1024x420.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wp-content-themes-folder-1-300x123.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wp-content-themes-folder-1-768x315.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wp-content-themes-folder-1-1536x629.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wp-content-themes-folder-1-600x246.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wp-content-themes-folder-1-750x307.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wp-content-themes-folder-1-100x41.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wp-content-themes-folder-1.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/420;\" \/><\/figure><\/div>\n\n\n<p>In your child theme folder, create a new file. Label it \u201ctheme.json\u201d:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"363\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/theme-json-file-1024x363.jpg\" alt=\"theme.json file\" class=\"wp-image-37187 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/theme-json-file-1024x363.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/theme-json-file-300x106.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/theme-json-file-768x272.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/theme-json-file-600x213.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/theme-json-file-750x266.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/theme-json-file-100x35.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/theme-json-file.jpg.webp 1274w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/363;\" \/><\/figure><\/div>\n\n\n<p>In this file, include the version number within curly brackets. If you don\u2019t add this, it will be read as \u201cversion 0\u201d:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n &nbsp;&nbsp;&nbsp;\"version\": 2\n}<\/pre>\n\n\n\n<p>You\u2019ll have to configure this <i>theme.json<\/i> file to support the width of your content. After your version number, copy and paste <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/theme-json\/#layout\" target=\"_blank\" rel=\"noopener\">this extra code<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"version\": 2,\n\"settings\": {\n\"layout\": {\n\"contentSize\": \"840px\",\n\"wideSize\": \"1100px\"\n }\n }\n}<\/pre>\n\n\n\n<p>This will set your content width to 840px. The wide width will also be updated to 1100px. These values match the default widths in the Site Editor, but you can edit them as needed.<\/p>\n\n\n\n<p>Since the content width is now 840px, it will provide a lot of space for each line of characters. Depending on your chosen font and size, you might need to adjust it so that viewers can comfortably read your content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-create-new-template-parts\"><b>Step 2: Create New Template Parts<\/b><\/h3>\n\n\n\n<p>Then, go back to your <i>themes<\/i> folder and open the <i>templates<\/i> folder:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"419\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-folder-in-theme-folder-1024x419.jpg\" alt=\"templates folder location within themes folder via FTP client\" class=\"wp-image-37185 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-folder-in-theme-folder-1024x419.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-folder-in-theme-folder-300x123.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-folder-in-theme-folder-768x314.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-folder-in-theme-folder-1536x629.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/templates-folder-in-theme-folder-600x246.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/templates-folder-in-theme-folder-750x307.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/templates-folder-in-theme-folder-100x41.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/templates-folder-in-theme-folder.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/419;\" \/><\/figure><\/div>\n\n\n<p>Here, create an <i>index.html<\/i> file:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"332\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-wp-content-themes-folder-1024x332.jpg\" alt=\"WordPress wp-content themes folder\" class=\"wp-image-37196 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-wp-content-themes-folder-1024x332.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-wp-content-themes-folder-300x97.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-wp-content-themes-folder-768x249.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-wp-content-themes-folder-1536x498.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-wp-content-themes-folder-600x194.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-wp-content-themes-folder-750x243.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-wp-content-themes-folder-100x32.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-wp-content-themes-folder.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/332;\" \/><\/figure><\/div>\n\n\n<p>Return to your theme folder and click on <i>template-parts<\/i>. Inside this folder, create files for <i>footer.html<\/i> and <i>header.html<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"520\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-footer-php-file-location-1024x520.jpg\" alt=\"the WordPress footer.php file location via FTP client\" class=\"wp-image-37190 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-footer-php-file-location-1024x520.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-footer-php-file-location-300x152.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-footer-php-file-location-768x390.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-footer-php-file-location-1536x781.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-footer-php-file-location-600x305.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-footer-php-file-location-750x381.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-footer-php-file-location-100x51.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-footer-php-file-location.jpg.webp 1999w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/520;\" \/><\/figure><\/div>\n\n\n<p>Inside the <i>header.html<\/i> file, add code for your site title and tagline blocks. You can do this by including this <a href=\"https:\/\/fullsiteediting.com\/lessons\/templates-and-template-parts\/\" target=\"_blank\" rel=\"noopener\">block markup<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- wp:site-title \/--&gt;\n&lt;!-- wp:site-tagline \/--&gt;<\/pre>\n\n\n\n<p>Next, go to the footer.html file and paste the following code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- wp:paragraph {\"align\":\"center\"} --&gt;\n&lt;p class=\"has-text-align-center\"&gt;Proudly powered by \n&lt;a href=\"https:\/\/wordpress.org\/\"&gt;WordPress&lt;\/a&gt;.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph \/\u2014-&gt;<\/pre>\n\n\n\n<p>Once you add these template parts, they can easily be identified when you\u2019re ready to test your theme.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-combine-the-template-parts\"><b>Step 3: Combine the Template Parts<\/b><\/h3>\n\n\n\n<p>The next step is to place block markup for your template parts into your template HTML file. Open the <i>templates<\/i> folder and find the <i>index.html<\/i> file you created in the last step.<\/p>\n\n\n\n<p>Then, you\u2019ll need to add code for your two template parts:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!-- wp:template-part {\"slug\":\"header\"} \/--&gt;\n&lt;!-- wp:template-part {\"slug\":\"footer\"} \/\u2014-&gt;<\/pre>\n\n\n\n<p>Based on the name of the template part file, this name will become the slug. For example, the <i>header.html<\/i> template part will have \u201cheader\u201d as its slug.<\/p>\n\n\n\n<p>Next, add the correct HTML element for each template part. They will identify the location of the template part:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"tagName\":\"header\"\n\"tagName\":\"footer\"<\/pre>\n\n\n\n<p>If you plan on using CSS to identify this header and footer, you\u2019ll need to add a custom CSS class name. You can place this code at the end of each line:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"className\":\"site-header\"\n\"className\":\"site-footer\"<\/pre>\n\n\n\n<p>Lastly, the layout setting you inserted into the <i>theme.json<\/i> file needs to be supported. To do this, add this code to each template part:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"layout\":{\"inherit\":true}<\/pre>\n\n\n\n<p>Here\u2019s what the resulting code should look like:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"219\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-part-code-1024x219.jpg\" alt=\"WordPress template part code snippets\" class=\"wp-image-37193 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-part-code-1024x219.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-part-code-300x64.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-part-code-768x165.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-part-code-1536x329.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-template-part-code-600x129.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-template-part-code-750x161.jpg.webp 750w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/wordpress-template-part-code-100x21.jpg 100w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2022\/05\/wordpress-template-part-code.jpg.webp 1998w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/219;\" \/><\/figure><\/div>\n\n\n<p>Once you\u2019ve finished coding, you can preview your site to view these changes to your layout.<\/p>\n\n\n\n<h2 id=\"h-ready-to-create-your-own-custom-templates\" class=\"wp-block-heading\"><b>Ready to Create Your Own Custom Templates?<\/b><\/h2>\n\n\n\n<p>If you want to streamline your website design process, it\u2019s a good idea to use Full-Site Editing. You can easily customize your site\u2019s appearance with templates and template parts using this feature. This approach can be a simpler alternative than completely redesigning every page from scratch.<\/p>\n\n\n\n<p>To review, here are the different ways you can create templates and template parts in WordPress:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Make a new template with the Template Editor.<\/li>\n\n\n\n<li>Create template parts with the Site Editor.<\/li>\n\n\n\n<li>Manually code templates and template parts.<\/li>\n<\/ol>\n\n\n\n<p>Coding your own theme can be tricky, especially if you don\u2019t have experience with web development. If you need to customize your layout from scratch, you might want to hire a professional designer. With our <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">Custom Web Design Pro Service<\/a>, you can avoid this complicated coding process and get a high-quality website designed for your brand!<\/p>\n\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Get a Custom Website You\u2019re Proud Of\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Our designers will create a gorgeous website from scratch to perfectly match your brand.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Learn More                    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>With the introduction of WordPress 5.9, you can now use Full-Site Editing to customize the appearance of your theme. Furthermore, you can access more design features to build your website without coding using a block-based theme. However, these basic settings might not meet your needs. Fortunately, you can easily add custom templates and template parts [&hellip;]<\/p>\n","protected":false},"author":1062,"featured_media":37177,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"With WordPress, you can now use Full-Site Editing to customize the appearance of your theme. Learn more about Templates and Template Parts.","toc_headlines":"[[\"h-an-introduction-to-wordpress-page-templates\",\"<b>An Introduction to WordPress Page Templates<\/b>\"],[\"h-the-benefits-of-using-page-templates\",\"<b>The Benefits of Using Page Templates<\/b>\"],[\"h-an-introduction-to-full-site-editing-with-templates-and-template-parts\",\"<b>An Introduction to Full Site Editing With Templates and Template Parts<\/b>\"],[\"h-how-to-make-templates-in-wordpress-with-the-template-editor\",\"<b>How to Make Templates in WordPress with the Template Editor<\/b>\"],[\"h-how-to-create-template-parts-in-wordpress-with-the-site-editor\",\"<b>How to Create Template Parts in WordPress with the Site Editor<\/b>\"],[\"h-how-to-create-custom-templates-and-template-parts-in-wordpress-manual-coding\",\"<b>How to Create Custom Templates and Template Parts in WordPress (Manual Coding)<\/b>\"],[\"h-ready-to-create-your-own-custom-templates\",\"<b>Ready to Create Your Own Custom Templates?<\/b>\"]]","hide_toc":false,"footnotes":""},"categories":[13121,12852,696],"tags":[],"class_list":["post-33726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-decoding-wordpress","category-website-design","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Decoding WordPress: Templates &amp; Template Parts - DreamHost<\/title>\n<meta name=\"description\" content=\"With WordPress, you can now use Full-Site Editing to customize the appearance of your theme. Learn more about Templates and Template Parts.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Decoding WordPress: Custom Templates and Template Parts\" \/>\n<meta property=\"og:description\" content=\"With WordPress, you can now use Full-Site Editing to customize the appearance of your theme. Learn more about Templates and Template Parts.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-02T15:08:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-22T02:43:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/WordPress-Page-Templates-Social.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jason Cosper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/WordPress-Template-Parts-social.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jason Cosper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Decoding WordPress: Templates & Template Parts - DreamHost","description":"With WordPress, you can now use Full-Site Editing to customize the appearance of your theme. Learn more about Templates and Template Parts.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/","og_locale":"en_US","og_type":"article","og_title":"Decoding WordPress: Custom Templates and Template Parts","og_description":"With WordPress, you can now use Full-Site Editing to customize the appearance of your theme. Learn more about Templates and Template Parts.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2022-05-02T15:08:12+00:00","article_modified_time":"2025-05-22T02:43:28+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/WordPress-Page-Templates-Social.jpg","type":"image\/jpeg"}],"author":"Jason Cosper","twitter_card":"summary_large_image","twitter_image":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/WordPress-Template-Parts-social.jpeg","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jason Cosper","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/"},"author":{"name":"Jason Cosper","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4"},"headline":"Decoding WordPress: Custom Templates and Template Parts","datePublished":"2022-05-02T15:08:12+00:00","dateModified":"2025-05-22T02:43:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/"},"wordCount":1932,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/WordPress-Page-Templates-Feature.jpg","articleSection":["Decoding WordPress","Website Design","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/","name":"Decoding WordPress: Templates & Template Parts - DreamHost","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/WordPress-Page-Templates-Feature.jpg","datePublished":"2022-05-02T15:08:12+00:00","dateModified":"2025-05-22T02:43:28+00:00","description":"With WordPress, you can now use Full-Site Editing to customize the appearance of your theme. Learn more about Templates and Template Parts.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/WordPress-Page-Templates-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/05\/WordPress-Page-Templates-Feature.jpg","width":900,"height":598,"caption":"WordPress page templates and template parts"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wordpress-templates-template-parts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Decoding WordPress: Custom Templates and Template Parts"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/2273b8bf7336df78f6d99a89c17253c4","name":"Jason Cosper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/02\/IMG_4807-scaled.jpeg","caption":"Jason Cosper"},"description":"Jason is DreamHost\u2019s WordPress Product Advocate, based out of Bakersfield, CA. He is currently working on making our DreamPress product even better. In his free time, he likes to curl up on the couch and watch scary movies with his wife Sarah and three very small dogs. Follow him on Twitter.","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jasoncosper\/"}]}},"lang":"en","translations":{"en":33726,"es":33728,"uk":52735,"pt":56850,"de":56853,"pl":56856,"ru":56859,"it":68366,"fr":70315,"nl":70336},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1062"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=33726"}],"version-history":[{"count":10,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33726\/revisions"}],"predecessor-version":[{"id":61547,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/33726\/revisions\/61547"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/37177"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=33726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=33726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=33726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}