{"id":11813,"date":"2022-09-15T10:30:00","date_gmt":"2022-09-15T15:30:00","guid":{"rendered":"https:\/\/devblog.jacobmartella.com\/?p=11813"},"modified":"2022-09-15T10:30:00","modified_gmt":"2022-09-15T15:30:00","slug":"creating-a-wordpress-block-theme-creating-the-template-parts","status":"publish","type":"post","link":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/2022\/09\/15\/creating-a-wordpress-block-theme-creating-the-template-parts\/","title":{"rendered":"Creating a WordPress Block Theme \u2014 Creating the Template Parts"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Creating a WordPress Block Theme \u2014 Creating the Template Parts\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/UtkU8qRU3Tk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Hey there and welcome back!<\/p>\n\n\n\n<p>So far with our FSE theme, we have looked at the designs, we have looked at the theme dot json file and the styling and we\u2019ve discussed block patterns. Now we\u2019re going to take it a little step further and talk about template parts that we\u2019re, well, going to build from block patterns.<\/p>\n\n\n\n<p>Yes, we\u2019re going to touch on how to create the header and the footer template parts as well as a sidebar template part that we\u2019ll use later on.<\/p>\n\n\n\n<p>But before we get started, if you want to see the rest of the videos in this series as well as more videos on WordPress development and web development in general, be sure to hit the subscribe button and to ring the bell for notifications.<\/p>\n\n\n\n<p>Now let\u2019s get started.<\/p>\n\n\n\n<p>Okay so first off we\u2019re going to create the header template part. The first thing that we need to do with this is create a block pattern for the header. So to do that, we\u2019re going to come over here to pages and add new.<\/p>\n\n\n\n<p>And we\u2019re going to create a group first. And one thing that I want to do before we really get started is we\u2019re going to come down here to advanced and because we want this to be a header, we want this to use the header HTML element like that. And then we\u2019ll say it\u2019s like that.<\/p>\n\n\n\n<p>And finally let\u2019s add in some padding before we get too far along. And then we\u2019ll make sure that it inherits (the layout) like that. And finally we\u2019re going to make it full width.<\/p>\n\n\n\n<p>Okay, so that\u2019s in place. Now we\u2019re going to add in the site title like this. Make it wide aligned and text align. And with this we\u2019re going to make sure that it\u2019s a link to the homepage. And we\u2019re not going to worry too much about the colors because this is already set for us with the default styling. So we don\u2019t need to worry about that.<\/p>\n\n\n\n<p>So next we\u2019re going to add in the tagline like so. We\u2019re also going to center that. And we\u2019re going to make sure that this is \u2013 we\u2019re going to add in a custom size at 35 pixels. And it looks good.<\/p>\n\n\n\n<p>And finally for the header we\u2019re going to add in the navigation. This is something that\u2019s a little bit \u2013 can be a little bit confusing. There are a lot of moving parts with the navigation block. For now I\u2019m just going to select a menu to make it really easy. I want to align. You can also add in \u2013 hit there to add in a link and whatnot. Yeah, there\u2019s a lot here, and at some point I\u2019ll go more in depth about the navigation block because there really is a lot that\u2019s going on here.<\/p>\n\n\n\n<p>We do sort of want the overlay or the mobile menu when it\u2019s on mobile. We want to show the arrow if there are sub menus.<\/p>\n\n\n\n<p>So that\u2019s the quick and easy overview about how we\u2019re creating the header. And if you noticed, that didn\u2019t take me very long even with a few cuts versus what it would take with using a legacy PHP theme.<\/p>\n\n\n\n<p>So now we\u2019re going to go like before. I\u2019m going to copy it. And now we\u2019re going to come in here like always and just unescape it like so. And then we\u2019re going to come into our theme here and I\u2019ve already sort of set up the default pattern file right here in our patterns directory. I\u2019m just kind of going to paste it in there. And hit save.<\/p>\n\n\n\n<p>Now the next part comes here when we get into the parts directory. If you\u2019ve developed with PHP themes or still do most of the time it\u2019s template hyphen parts, but with FSE themes now we just say parts. And you can park them right here. So we have this header dot HTML file. And really all this is doing is calling that pattern we just created. That\u2019s all we have to do with it.<\/p>\n\n\n\n<p>It makes it super simple. It also makes it pretty easy if you want to have multiple header patterns that a user could use. I\u2019ve seen that with a number of themes already. I kind of do it with my personal theme actually because I have one for the homepage as well as one for inner pages as well as one for landing pages.<\/p>\n\n\n\n<p>So this sort of makes it easy to organize it and select. So we\u2019re just calling that block pattern that we just created. And then we\u2019ll get into this a little later, or at least in the next video when we talk about templates, but then we would call this template part like in here and just call it like that. So template part, the slug for it, the tag name you might have for it, like all of that. That all goes right here. That\u2019s all we have to worry about.<\/p>\n\n\n\n<p>And so now whenever we go into a page or whatever, we can see our header block pattern right here. It\u2019s just as simple as that. And that took me less than five minutes and most of that was because I couldn\u2019t figure out what to say.<\/p>\n\n\n\n<p>So, I mean it\u2019s super easy. I mean, depending on how complex you want your header to be, you might have to play around with it a little bit longer. You might have to add in some styling especially right now because it\u2019s not complete. I mean there are things with hover and focus states that you have to do, but for the most part I found it to be a lot easier versus what we had to do in the past.<\/p>\n\n\n\n<p>So now that that\u2019s done, let\u2019s go ahead and create a footer. Just because why not at this point. So we\u2019ll do what we did last time. Okay so now I have our group set up for our footer block pattern. Again we\u2019re going to go with the site title. I\u2019ll just make sure that it\u2019s a paragraph because it should not be an H1. Do center like so. Make it wide align like that.<\/p>\n\n\n\n<p>And then we\u2019re going to add in the copyright. This would be something that either a developer could do or if we can figure out some way to make this like the date automatic like we used to do with php using just the year. That would be wonderful if someone could figure that out so we don\u2019t all end up having to update the copyright by hand, because I will forget come January or whatever. So that would be wonderful.<\/p>\n\n\n\n<p>But anyway, we\u2019re going to add in some social links, social icons. This is generally pretty simple. Make sure icon color is this primary. And we want logos only.<\/p>\n\n\n\n<p>Okay, so now I\u2019ve added in the social icons. That\u2019s generally pretty simple. You can add in as many as you want by default and then a user can come in here and change it up to fit however they want it to.<\/p>\n\n\n\n<p>And then finally we\u2019re just going to add in one last navigation. Just going to select the short menu like so. And we don\u2019t want the overlay menu that would appear down here. And like that.<\/p>\n\n\n\n<p>And now we have a footer. And we\u2019ll go ahead and do the same thing that we did with the header. And come over here. And then we would paste it in there like that. And we should now see it on the front end when we reload the page like that.<\/p>\n\n\n\n<p>So now we can see it here on the front end.<\/p>\n\n\n\n<p>Now I do want to mention that users can go in and edit any of the templates or template parts using the site editor. So up here in edit site. You can either edit it here in whatever template loads or you can come over here and we can get it specifically if we just want the header like this. And you can straight up just edit the menu. We can select a different menu, like so. And then you would hit save and this would update everywhere on the site.<\/p>\n\n\n\n<p>I do also want to note from a developer\u2019s perspective that I would recommend not touching any of the site editor stuff when you\u2019re developing a theme simply because that will overwrite anything you write in the code. Which is why I created the header and the footer patterns in a new page versus coming straight here and editing it. It\u2019s a small thing but it can make a big difference.<\/p>\n\n\n\n<p>And then finally I want to come over here and talk a little bit about what I had to do with the sidebar template part. This is a little bit different just because it\u2019s obviously not one of the generic header footer ones. It was just something that I was trying out with this theme to see if it was even possible, and it turns out it is.<\/p>\n\n\n\n<p>I don\u2019t really use it on my dev blog, which is where I use this theme, just because I\u2019m not really a fan of sidebars anymore. But if you want to use the sidebar, you can with this theme. And it is possible to put sidebars in FSE themes, which is really interesting.<\/p>\n\n\n\n<p>And we\u2019ll talk more about how I really did that next time when we really get into the page and post templates.<\/p>\n\n\n\n<p>Anyway, basically I just created a group like normal. I gave it right and left padding so that there\u2019s space between the edge of the main content and sidebar. And then just put in \u2013 I already created this block pattern for a sidebar widget, which we can find right here. And it\u2019s basically just the title, and you can replace the widget title with whatever title, like \u201cCalendar\u201d, \u201cLatest Posts\u201d, whatever. And then the separator block for just a straight line across. And then this sort of placeholder paragraph block where you can add in a calendar or a list of the latest posts or latest comments or whatever.<\/p>\n\n\n\n<p>So that\u2019s what\u2019s just being called here. And then the user can actually go over here and edit that sidebar in one spot. We can come over here, and you can see I\u2019ve already done a little bit of editing with it. And I\u2019ve created a couple of more widgets.<\/p>\n\n\n\n<p>And you can add in another widget like that. And let\u2019s see, what could we put here? Let\u2019s explore a little bit. Let\u2019s just do a list of pages.<\/p>\n\n\n\n<p>And then we can hit save. And then anywhere we have this sidebar template part listed, either on pages or posts, archive pages or whatever, it would update. And our sidebar is basically updated.<\/p>\n\n\n\n<p>It\u2019s a little bit of a hack because we don\u2019t really have widget areas anymore if we use FSE themes. But it does work. And it is quite interesting to see how it all plays a part.<\/p>\n\n\n\n<p>So that\u2019s basically it for how you create template parts out of block patterns.<\/p>\n\n\n\n<p>So that is template parts in a nutshell. What questions do you have about creating template parts with your FSE theme? Or what questions do you have about creating FSE themes in general? Be sure to leave them down in the comments section below.<\/p>\n\n\n\n<p>Next time we\u2019re going to move on and talk about templates, like the page template and single post template and the 404 template. To see that video, the rest of the videos in this series as well as more videos on WordPress development and website development in general, be sure to hit the subscribe button and to ring the bell for notifications.<\/p>\n\n\n\n<p>But that is it for today. Thank you so much for watching. And I will see you next time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So we are continuing on in our efforts to create a WordPress block theme. This time we\u2019re getting starting to create our template parts, including the header, footer and sidebar. Creating the template parts is super easy. It\u2019s a lot like creating a block pattern, and in many cases, you\u2019re probably going to be using block patterns to make up your template parts. And it\u2019s way easier to create something like the header with an FSE theme than it was with the traditional PHP themes. So today let\u2019s walk through how I created the template parts for this WordPress block theme.<\/p>\n","protected":false},"author":1,"featured_media":11814,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template-single-post-with-no-featured-image","format":"standard","meta":{"footnotes":""},"categories":[27,29,24],"tags":[45,79,144],"class_list":["post-11813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-full-site-editing","category-theme-development","category-wordpress-small-business","tag-block-theme","tag-full-site-editing","tag-semplice-monospazio"],"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"Jacob Martella","author_link":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/author\/jmthemedemos\/"},"_links":{"self":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/posts\/11813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/comments?post=11813"}],"version-history":[{"count":0,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/posts\/11813\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/media?parent=11813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/categories?post=11813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demo.jacobmartella.com\/semplice-monospazio\/wp-json\/wp\/v2\/tags?post=11813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}