- \n
- An introduction to templates in WordPress<\/a> \ud83c\udfac<\/li>\n\n\n\n
- How to create templates with Full Site Editing in WordPress<\/a> \ud83d\udea7<\/li>\n\n\n\n
- How to customize existing page templates<\/a> \ud83c\udfa8<\/li>\n<\/ul>\n\n\n\n\t\t
<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tHow to create and customize page templates in #WordPress via Full Site \ud83d\udcbb Editing<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n\n\n\nAn introduction to templates in WordPress \ud83c\udfac<\/h2>\n\n\n\n
Templates are files that determine the layout and structure of your theme. A template might decide how your specific pages look, such as your 404 page<\/a>, blog posts, and archives.<\/p>\n\n\n\n
You can also get more specific, such as creating a special template that only applies to blog posts in a certain category. \ud83d\udc49 For example, if you publish reviews and tutorials, you might use different templates for those different categories of posts.<\/p>\n\n\n\n
Previously, you needed to install a WordPress page builder<\/a> or use code to create and customize a template. However, with the introduction of Full Site Editing, you can now access and edit templates from your WordPress dashboard.<\/p>\n\n\n\n
Additionally, you can adjust individual template parts, which are smaller components within templates. \ud83d\udc49 For example, you can design and edit your website’s footer and header layouts.<\/p>\n\n\n\n
Full Site Editing<\/a> enables you to customize your website layout to match your branding and enhance your user experience (UX)<\/a>. Plus, you can speed up the design process without investing in premium page builders or plugins.<\/p>\n\n\n\n
Moreover, editing and creating templates in this way is very user-friendly. You won’t need to touch your theme’s template files and risk breaking your site with incorrect coding. Therefore, even if you’re a WordPress beginner, templates can help you redesign your site in a low-risk way. <\/p>\n\n\n\n
Keep in mind \ud83d\udca1 that you currently need to use a WordPress block theme<\/a> to access Full Site Editing. You’ll also need to have at least WordPress 5.9 on your site.<\/p>\n\n\n\n
To find block themes that support Full Site Editing, you can also check out our roundup of the best free FSE themes<\/a>.<\/p>\n\n\n
<\/div>\n\n\n\nHow to create templates with Full Site Editing in WordPress \ud83d\udea7<\/h2>\n\n\n\n
Depending on your chosen theme, you’ll be able to create new templates for different pages on your WordPress website. For this tutorial, we’ll be working with Neve FSE, the block version of our popular Neve theme<\/a>.<\/p>\n\n\n\n
- \n
- Step 1: Access the Site Editor<\/a><\/li>\n\n\n\n
- Step 2: Build your template<\/a><\/li>\n<\/ul>\n\n\n
\n\n\n\n\ud83d\udca1 Note: If you’d like to use Neve FSE as well, please head to the Neve FSE page<\/a> and click Download<\/strong> to get the ZIP installation file. Then go to your WordPress dashboard and choose Appearance > Themes<\/strong> from the sidebar menu, followed by clicking the Add New<\/strong> button on the Themes page. On the subsequent page, click Upload Theme<\/strong> and then drag-and-drop the ZIP file you just downloaded into the Choose File<\/strong> area. Finally, click Install Now<\/strong> and give WordPress a few moments to set up the theme.<\/p>\n\n\n<\/div><\/div>\n
<\/div>\n\n\n\nStep 1: Access the Site Editor<\/h3>\n\n\n\n
Once you’ve installed and activated your block theme, navigate to Appearance > Editor<\/strong> in your WordPress dashboard. <\/p>\n\n\n\n
\u26a0 Remember<\/strong> – if you don’t see the Site Editor in your dashboard, that probably means that your current theme isn’t compatible with Full Site Editing.<\/em><\/p>\n\n\n\n
This will launch the new Site Editor, which displays your home page by default, along with a sidebar on the left.<\/p>\n\n\n\n
Click on Templates<\/strong>:<\/p>\n\n\n
\n![\"Creating](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2022\/08\/Creating-templates-in-WordPress-using-the-Full-Site-Editor1.webp\")
<\/figure><\/div>\n\n\nThen, select the (+)<\/strong> icon next to “Templates” in the left sidebar. Depending on your theme, you’ll be able to choose from a list of template types, such as Page<\/strong>, Author<\/strong>, and Category<\/strong>:<\/p>\n\n\n
\n![\"WordPress](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:468\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/neve-fse-editor-list-of-templates.png\")
<\/figure><\/div>\n\n\nIf you want to edit your default post template, you can find it on this list (more on this in the next section<\/em>). If you want to create a custom template for specific post or page<\/a> types, it should also be on this list. In Neve FSE it’s the bottom most choice.<\/p>\n\n\n\n
Alternatively, you can also create a custom template by opening up a new page or post. Then, selecting Template<\/strong> from the settings panel and clicking on the “Add template<\/strong>” icon:<\/p>\n\n\n
\n![\"Add](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:502\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/add-new-template-in-Neve-fse.png\")
<\/figure><\/div>\n\n\nYou’ll then be prompted to name your template:<\/p>\n\n\n
\n![\"name](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:475\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/name-template.png\")
<\/figure><\/div>\n\n\nJust click on Create<\/strong> to finish the process. You can now start working on your template.<\/p>\n\n\n
<\/div>\n\n\n\nStep 2: Build your template<\/h3>\n\n\n\n
Once you’ve created and named your new template, you should see a blank page that looks something like below. Or, if you’ve edited an existing template, you’ll see that template’s content:<\/em><\/p>\n\n\n
\n![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:275\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/blank-template.png\")
<\/figure><\/div>\n\n\nNow it’s just a matter of inserting and customizing blocks to build your page. This process works the same as if you were creating a regular WordPress post or page. However, you’ll get special theme blocks to help you build your template, such as blocks to insert a post’s title or content.<\/p>\n\n\n\n
You can also access template parts while building your template. You can do this by selecting Template Part <\/strong>from the list of WordPress blocks and choosing an option from the popup window:<\/p>\n\n\n
\n![\"Template](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:466\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/template-part-block.png\")
<\/figure><\/div>\n\n\nIn our example, we’re creating a template for product reviews. So, we’re adding a Header<\/strong> and a Post Title<\/strong>. We’re also adding a Post Excerpt<\/strong> that will summarize the best product for each review and an Author Bio<\/strong> <\/em>at the bottom of the post. <\/p>\n\n\n\n
Keep in mind \ud83d\udca1 that these elements won’t be visible while you’re writing your posts. Since they form your page template, you’ll need to preview the post on the front end to see the template parts. The easiest way to do this is to have two browser tabs open. One tab can be the Site Editor, where you’ll edit your template. The other tab can be a page or post that you can refresh after you save your edits.<\/p>\n\n\n\n
You can add as many elements as you wish, and you’ll be able to see them listed on the left side of your page. You can also drag and drop them into different positions until you’re happy with the layout:<\/p>\n\n\n
\n![\"Custom](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:295\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/new-template-layout.png\")
<\/figure><\/div>\n\n\nWhen you’re ready, click on Save<\/strong> at the top right. You can follow the same process to create new templates for various pages on your site. However, \u26a0 remember to add header and footer sections, since they might not be included by default when working with custom templates. <\/p>\n\n\n\n
When you’re working on a post or page, you can select your template from the right-hand menu to apply it to your content:<\/p>\n\n\n
\n![\"Selecting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:451\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/new-saved-template.png\")
<\/figure><\/div>\n\n\nKeep in mind \ud83d\udca1 that you won’t see all the templates for your theme in this dropdown menu. Some templates can only be applied to content that is generated automatically, such as your Author<\/strong> or Category<\/strong> pages. Therefore, if you want a layout that you can apply to any post or page, you’ll want to stick with the Custom<\/strong> type. <\/p>\n\n\n
<\/div>\n\n\n\nHow to customize existing page templates \ud83c\udfa8<\/h2>\n\n\n\n
You can also customize existing page templates to fit your needs and branding better. This method can be helpful if you’re happy with the available template types but want to tweak their layouts and design. <\/p>\n\n\n\n
- \n
- Step 1: Access the template<\/a><\/li>\n\n\n\n
- Step 2: Edit and save the template<\/a><\/li>\n<\/ul>\n\n\n
<\/div>\n\n\n\nStep 1: Access the template<\/h3>\n\n\n\n
To access existing templates, navigate to Appearance > Editor<\/strong>. Then, select Templates<\/strong> and click on the template you want to edit:<\/p>\n\n\n
\n![\"\"](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:481\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/select-theme-template.png\")
<\/figure><\/div>\n\n\nAs we showed you in the previous section, you can also access some templates while using the Block Editor for posts and pages. Simply open Templates<\/strong> from the settings menu, select the design you want to use, and click on Edit<\/strong> instead of New<\/strong>: <\/p>\n\n\n
\n![\"Editing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:467\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/edit-template.png\")
<\/figure><\/div>\n\n\nEither method will take you to a template editing screen. Once there, you can start changing your template’s layout and appearance. \u26a0 Remember that the selection of available templates will vary, depending on your theme.<\/p>\n\n\n
<\/div>\n\n\n\nStep 2: Edit and save the template<\/h3>\n\n\n\n
Now, you’ll just need to move, add, and delete blocks to customize the existing template. Again, you’ll be able to see all the current blocks in List View<\/strong>, enabling you to reorder them very easily:<\/p>\n\n\n
\n![\"Home](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:324\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/05\/edit-front-page-template-Neve-FSE.png\")
<\/figure><\/div>\n\n\nWhen you’re happy with your changes, click on Save<\/strong>. Your template will now be updated.<\/p>\n\n\n\n
\u2139\ufe0f Note that this will also update the layout of every page on your website that uses the corresponding template. Therefore, you might like to trial these changes on a WordPress staging site<\/a> before pushing them live. Otherwise, you risk making minor errors that could confuse your visitors.<\/p>\n\n\n
Go to top<\/a><\/div>\n\n\n\nCreate templates in WordPress today \ud83c\udfc1<\/h2>\n\n\n\n
\n\nCreating new templates with Full Site Editing is one of the easiest ways to customize your website’s appearance. As long as you are using WordPress 5.9 or higher, and have a block theme like Neve FSE<\/a> installed, then you can use it to make and edit templates.<\/p>\n<\/div>\n\n\n\n
\n\t\t<\/div>\n\t\t\t\n\t\t \t\n\t\t \t\tHow to create and customize page #templates in #WordPress via Full Site \ud83d\udcbb Editing<\/a>\n\t\t \t<\/div>\n\t\t \t\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n\n\n\n\ud83d\udc49 If you want even more flexibility for building your templates, you can also use block patterns<\/a> for templates or install block plugins<\/a> to add new features.<\/p>\n\n\n<\/div><\/div>\n\n\n\n
Do you have any questions about how to create templates in WordPress? Let us know in the comments section below!<\/em><\/strong><\/p>\n\n\n
- Step 2: Edit and save the template<\/a><\/li>\n<\/ul>\n\n\n
- Step 2: Build your template<\/a><\/li>\n<\/ul>\n\n\n
- How to create templates with Full Site Editing in WordPress<\/a> \ud83d\udea7<\/li>\n\n\n\n