Tech Breakout Summit/2021: How To Work Faster and More Profitably With Client Site Starter Templates
When you’re building websites for clients, you’re always looking for ways to make your life and your clients’ lives easier. In the video below, you’ll learn how to create your own library of client site starter templates and how having your own library of conversion-ready, tested websites makes getting started a LOT easier and faster—especially for clients who don’t have niche needs or have smaller budgets.
In this video session, Freelance Coach and Web Developer Carrie Dils discusses:
- The block-based approach to building pages with WordPress and the innovations coming with Full Site Editing.
- How you can use blocks to create starter templates and speed up your development process.
The idea is reduce, reuse, recycle. You’re reducing your timeline, you’re reusing components across projects, and you’re recycling templates. All of that is made so much easier with the addition of the Block Editor to WordPress Core
Carrie Dills, Freelance Coach and Web Developer
Full text transcript
CARRIE DILS: Hey, everybody. Welcome to this session on Client Site Starter Templates. Today we’re going to talk about working faster and more profitably. And who doesn’t think that sounds good. Right? So if you’re a freelancer or an agency and you’re building sites for clients, you know that with every project, there’s going to be some repetitive tasks.
And any time you can reuse or recycle, be it code, be it automations to take care of any of those tasks, we cover ground more quickly, we shorten the project lifecycle, and that’s a good thing. So that’s what we’re going to be talking about today.
Now, I’m not necessarily going to be talking about how you start your development workflow. Maybe that is boilerplate themes or core functionality plug-ins or if you’re using local as your development environment, maybe you’re using clones or blueprints. All of those things are great, but that’s not necessarily what I’m covering today. What I’m going to talk about is how we can use blocks to create starter templates that help us speed up that process.
So again, you’re building sites for clients and hopefully you haven’t experienced what’s on the bad end of things. But if you’re like most of us, you probably have. When something goes wrong on a project, you end up going over the timeline, which means you’re probably going over the budget that you allotted. Your clients are frustrated, you’re frustrated. And in the end, that’s not really a sustainable way to do business.
Now, on the complete other end of the spectrum, when things go right– you’re delivering projects when you say you’re going to deliver them, you’re delivering them within budget, possibly even a little bit under budget, so that you’re able to surprise and delight clients with maybe a feature or an addition they weren’t expecting, and you make more money. Shorter life project life cycles, more efficient workflows equals you’re making greater margin on projects.
So the idea is again reduce, reuse, recycle. You’re reducing your timeline, you’re reusing components across projects, and you’re recycling templates. All of that is made so much easier with the addition of the Block Editor to WordPress Core.
And just to make sure we’re all on the same page, let’s go ahead and talk about the language of Blocks. First, a little bit of block lingo. Blocks are really at the heart of full site editing. I was visiting a friend last week and she asked me, Carrie, what is full site editing? And I’ll explain it. Super easy to think of.
So you’ve got your website. It’s comprised pretty much of a header, a footer, content area, and maybe a sidebar. And today, whether you’re using the Classic Editor or you’re already using the Block Editor, you’re limited to that content area. The theme is what controls the header, the footer, and the sidebar.
So full site editing introduces a whole new suite of blocks that you can use to build out those other site elements– the header, the footer, and the sidebar. So things like a site title or a site icon block or navigation block. Those things are all coming to WordPress Core. So blocks are just the individual units of markup. Like I mentioned, it could be a navigation block, it could be as simple as a paragraph block.
And then there’s this concept of reusable blocks. So let’s say that maybe you create this really beautiful call-to-action. It’s got a nice background of some maybe a heading, a little bit of intro copy, and a button. And you get that styled out for a particular project or a particular theme and you’d like to be able to reuse that across multiple pages. Well, you can save that block or configuration of blocks as a reusable block, and then drop it in and use it all across the site.
Then there’s a block pattern. So these are pre-styled, pre-configured groups of blocks that you can drop in and use as starter content. So in other words, if you’ve got maybe a button pattern, you can drop that in. And every time, you can change out the text or change the colors, do what you need to do. Whereas reusable blocks, you can change it in one place and it would update all instances of that reusable block across the site.
Patterns on the other hand are sort of a one-and-done. They’re unique in each use. So that’s the language of blocks. And there are a variety of blocks that come as part of WordPress Core. You can create your custom blocks. Or there are also third-party block libraries that introduce their own additional blocks. And there’s one I want to talk to you about today, and that is Genesis Blocks.
Now, this is a free plug-in WordPress.org. There’s also a paid upgrade available. But today, everything I’m showing you, you only need the free version to do. It’s really powerful on its own. So let’s go over some lingo that happens within the context of the Genesis Blocks plug-in.
First, we’ve got sections. So think if you find like a really cool theme template, a beautiful home page template and you wanted to chop up and slice that template into multiple parts. That’s what a section is. It’s a professionally designed block pattern. And a lot of those come with the Genesis Blocks plug-in. Next is layouts. So if sections are chopping up the layouts, then layouts are taking all those sections and mixing and matching them to make full-page layouts.
And then finally, you’ve got collections. And I’m going to show you this in a second. But just to get the foundation down. Collections are, what it sounds like, a collection of these layouts and the sections that are all thematically styled. Now, I want to show you a little demo where I build out a simple three-page layout using an existing collection within the Genesis Blocks plugin. If you’re ready, go ahead, put your demo hat on.
OK. So here I’ve just got a plain fresh Vanilla install of WordPress. And I happened to be running the Astra theme. But you can use whatever theme you’re comfortable with. I’ve also got one plug-in installed and that is the Genesis Blocks plugin. Excuse me, activated.
OK. So let’s create a new page. And from here, I’m going to go to the Block Inserter. That’s where you can insert Core WordPress blocks. And then there’s this layout that’s coming from Genesis Blocks plug-in, and it houses sections, which you can kind of browse by category. And then we’ve got layouts. Again, those are kind of mix and match versions or variations from all those sections. And then finally, collections.
So here is the slate collection. It comes free in the free version of the plug-in. If you want to learn more about collections, I’m just showing you a little bit of documentation here. I won’t linger on that. But if we open up the collection, here we can see some individual sections. And even going through this really quickly, you can see that there is some visual continuity in terms of the colors, the backgrounds, the fonts, etc.
So I just dropped in a home page layout. And this is a complete page. One-click, drop it in. OK. So let’s go ahead and publish that. And we’ll see what it looks like on the front-end. And that looks nothing like what I actually wanted to happen. So we need to make a couple changes.
First, we’re going to go into the Customizer. Now for the Astra theme in particular, I just want to make sure that I’ve got full-width content enabled. And also I’d like to get rid of that sidebar. So OK, let’s find that. And I’m going to turn off the sidebar. Perfect. Go ahead and publish it.
And the only thing I’m not really liking here is the fact that this title home is showing up. So the Astra theme gives us a way to get rid of that. If you happen to be using the Genesis framework or any Genesis child theme, there’s also a way to disable that page title, which is pretty cool. So now if we go back and take a look at that, there you can see the title is gone. And I’ve got a really nice professionally designed homepage.
Let’s go ahead and create another page for our demo three-page site. And this is going to be the contact page. I’m going to go back to that slate collection, scroll down, and let’s find, there we go. We’ve got a full-page template for contact. Same as before, one-click, I’m going to drop in that complete grouping and collection of blocks. I’ll go ahead and disable the title for this. Let’s publish it. And we’ll take a look. And just like that, we’ve got a cool accordion block and a nice-looking page.
Let’s create one more. I know we’re rushing. But we don’t have all day now. OK. So this is going to be our about page. I’m going to go through the same process I already showed you. Open up layouts, go to Collections. And this time in that slate collection, I’m going to pick a template for an about page. Boom. So that is in there.
Now, of course, if you were doing this for an actual client, you would need to swap out maybe the colors, obviously the text, and the photos. So even though these are pre-existing sections and layouts, you can still go in and modify any of these just like you would with any other block, which is really cool. So let’s go ahead and disable the page title for that. Go back and look. OK.
OK. So if we look at the site as we have it, there’s not really too much exciting. So let’s do a couple of things. The first is let’s get a menu with those pages we created. So again, I’m just going at this from the customizer. I’m going to create a menu for that primary menu, which appears in the header. And let’s go ahead and add those pages that I created, publish that.
And there in the upper right corner, you can see that menu. Now, the other thing I want to do is to go to the home page settings and have it display that home page I created versus the latest posts. OK. And in just about no time, I’ve created a three-page site.
Now obviously again, if this was a real project, you would have extra additional work to do. But just as an example, you could see how a collection could really rapidly help you prototype a site or just get a site out the door. This is so great for maybe niche projects or clients that don’t have huge budgets for bespoke themes.
So moving on, as we saw with that slate collection, think of that as sort of the modern analog to Genesis child theme. And the really cool thing is that you can build your own. So in addition to what you’re provided out of a plug-in, you can create your own collections and templates to reuse as you see fit.
So we’re going to go ahead and pop into a second demo here. And I’m going to show you how you can build your own collection. Are you ready? We’re going to move fast. But I think you can keep up. OK, let’s roll. So here we go. Just looking at, I’m going to create this collection called the Brew collection, and I’m going to kind of start in the front and work backwards for you.
Oops, let’s make sure we’ve got our video playing. OK, here we go. OK. So again in slate, we’ve got all these individual sections. And then all those sections have been mixed up and put back together to form these page layouts. So if we go back and look at this brew collection I’ve created, it’s much, much simpler. But I’ve got these five-page sections. And then I’ve combined those to create a full-page layout.
Now, this is a tutorial I’m following for this. It’s Rob Stinson’s and I’ll share the link later with you. So again I’m running the Astra theme. Theme independent. Use whatever theme you feel comfortable with. And let’s go ahead and look at creating a new page. So this is the Block Inserter. And I’m just showing you this to show that these are the Core WordPress Blocks. And then down towards the bottom, you’ll find the Genesis Blocks.
And when we’re talking about creating these custom collections, you can use a combination of Core Blocks and Genesis Blocks or even Custom Blocks if you’ve created those. So here’s what I did, I went into the Block Editor and just created this layout. So forget about collections for a second. This is just, I designed this in the editor. I am not a designer, so don’t blame me if things don’t look beautiful because that’s not [LAUGHING] I’m not trying to show you how to do beautiful designs here.
So I created this in the editor and I just wanted to show you how you can use this to then go back and create your plugin. So I chopped that page up into all of these individual page sections and components. OK. So going back to Rob’s tutorial, here he’s showing the sections that he built out for his demo plug-in.
And the first thing after that he shows us that we need to scaffold the plug-in. So let’s kind of build up our structure, if you will, for our plug-in. And I’m going to go ahead and pop over to my Code Editor. Let’s go side-by-side with Rob’s tutorial.
On the left I’ve got just the install for my WordPress site. I’ve got the Genesis Brew, that is the plug-in I created. And I’ve got each of these folders and then this main Genesis Brew, that’s the main plug-in file. And going back to the following along with the tutorial, I’ve got the header. That’s just a standard WordPress plugin header.
And let’s see. If we go to step three here in Rob’s tutorial, we’re going to register the collection and add our home page layout. Let’s swap back to full screen. Now, I’m not going to dig into the details of the code because Rob does a really great job of that in his tutorial. But I just want to show you this function, kind of how it works, this Genesis Blocks register layout component.
And I’m feeding the content to that’s in this home.php file. Let’s take a look at that. And it’s just an opening PHP tag, return, and a bunch of block markup. Let me show you how this work, markup works because I think this is pretty cool.
OK. So going back here we’ve got the entire page layout. If I open this ellipsis and go to the Code Editor, there’s two ways to do it. I could manually select all this, add it to my keyboard, or there’s an option just to copy all content and that puts it on my clipboard. So I’m going to do that.
Go back to my code editor and I’m going to go ahead and delete all this just to kind of start it from scratch and show you how basic it is. My opening PHP tag, a return tag if I can type, and then I just literally dump in what was on my clipboard, and that’s all the block markup.
The only thing that’s kind of a catch here is that if you have any apostrophes in your copy, you’ll need to escape that. So go ahead do that. Save it. OK. And if we pop back over to our site, let’s get out of here. I’m going to add a new page. Oops, get rid of that. Let’s go to our layouts. Oops, OK.
Collections, the Brew Collection, and all the way down to the bottom. Now when I click this page layout, what that’s doing is dumping all that block markup from home.php into this page. I think it’s super cool because you don’t have to code all this by hand. You’re literally creating in the Block Editor and then copying and pasting that block markup into your plug-in.
So let’s take a look at a section. Same thing. It’s just block markup dumped in with this. And let me show you the hero. So that is the hero section. It’s all within a cover block. It’s a cover block with an image inside of that. And I don’t know how practical this is to use. But it’s what I’ve got for my demo.
So I’m going to open up my Code Editor again. And this time, instead of copying all the content, I just want to copy the code that I need for that particular section. So let’s go ahead, get that on our clipboard. And I would just come in here and paste that directly into this hero.php. And I’ve done that already in advance of this demo for each of those other sections.
Now this Assets folder, that holds screenshots of sort of the finished product, if you will, for each of these sections as well as the layout. So if I go back. OK. Let’s open up Layouts, Collections. OK. So that screenshot we’re looking at there, in each of these screenshots, those are the images that are living in that Assets folder, just so you know where those are coming from.
OK. So as Rob’s tutorial was showing us, basically, we can scaffold out our own collection build it in the editor, drop the block markup into the code, and there you go. And you can see that I do indeed have to have that plug-in activated that I just created in order for that collection to be available. And one more note here, I’m just showing you a plug-in that has one collection. But it would also be possible to create a plug-in that has a bunch of collections in it.
OK. I know that went really fast. But you’ll be able to re-watch this later if you want to. OK. So moving on, every time you build a new starter template or a collection like I just did, your library grows. So if you happen to work with a specific industry or a specific niche of clients, then you could possibly build out these collections and reuse them any time you wanted.
Of course, you can change up the colors or the typography or those sorts of things. But just imagine with each project that you’re sort of amassing this library. So as you move forward, you can go back and quickly build out new projects, which is just pretty cool, because again it’s going back to that idea of reducing, reusing, recycling, shortening that project lifecycle, and working basically harder, not smarter.
Wait. No. That was [LAUGHING] that was the absolute wrong thing. No. You want to work smarter, not harder. So yeah. All right. Good. I was just seeing if you were paying attention. So thank you for being awake. OK. So as we wrap up here, I just want to share a couple of resources that you can use to further explore what we’ve talked about today.
OK. So this first bullet point that I have here is the official tutorial on how to create sections, layouts, and collections using Genesis Blocks. That’s the official documentation. The next bullet there is that tutorial I showed you earlier in this session from Rob Stinson. And I know I’ve talked a lot about him. Rob is a Product Marketing Manager over at WP Engine who does a ton of work with Genesis Blocks and Genesis Custom Blocks. So thanks to him for that excellent resource.
And then lastly, I have the code over on GitHub that I used for my demo plug-in in that second demo that I showed you. And just note that that is for demo and educational purposes only. I wouldn’t say that it’s production-ready. So use with caution. With that, I’ll go ahead and say thank you guys so much for joining me in this session. I appreciate you. Cheers.
