DE{CODE}: Blueprints and Other Local Features for Agencies
WP Engine is elevating a little-known, yet highly loved feature in Local: Blueprints!
Join WP Engine Product Marketing Manager Britt Dreisbach and Senior Product Manager Austin Wendt as they dive into the new Blueprints workflow and ways you can make it work for your business. Bonus: Get a sneak preview of the new Headless WordPress Blueprints available in Local!
The session also includes a look at other Local features built to help agencies and developers streamline their WordPress workflow while easily managing multiple sites.
Session Slides
Full Text Transcript
AUSTIN WENDT: Welcome, everyone, and thank you for joining today. We are excited to talk to you about Local, and specifically Blueprints and other Local features for agencies. My name is Austin Wendt. I am the Senior Product Manager on the Local product here at WP Engine. And Britt Dreisbach, who is our Local Product Marketing Manager, will be joining me a little bit later today to cover this topic with you.
To give you a quick little rundown before we get started, I want to take us through our agenda. So if you’re not familiar with Local, I want to introduce what Local is and why you would want to use it, and then we’ll take a deep dive into some new and improved features that we’ve been working on as it relates to Blueprints. I’ll hand it off to Britt, where she’ll cover some other features and add ons that work great in our agency workflows and show you how to get started using Local.
Local, if you’re not familiar, is the number one local WordPress development tool. So Local started in early 2016 as a company known as Pressmatic, if you’ve heard that name before, as a Mac OS- only application that was intended for making building WordPress sites easier. At that time, it was way too hard to get a new WordPress site spun up or if you wanted to test changes to your site, you had to do it on production. There’s a lot of risk involved with potentially breaking client sites if you try something on production and it breaks.
Late in 2016, Flywheel acquired Pressmatic and the name changed to Local By Flywheel, if you’ve heard of that. And the goal there was for us to expand that reach of Local, to bring it to more operating systems and to more users, as well as make it easier to develop and deploy your sites to companies like Flywheel. And then in 2019, Flywheel was acquired by WP Engine, which is where we’re at today.
So we dropped the By Flywheel from the name and now it is the Local that we all know and love. For a while, Local was a paid offering. So it used to be something you had to pay for. And in June of 2021, we decided to make Local free for everyone. Something we believe very strongly in at WP Engine and is part of our mission, our mission is to power the freedom to create.
We wanted to get Local in as many hands as possible to benefit, really, as many developers as we could to make building WordPress a super seamless process for the WordPress community. So now that it’s a free tool, we’ve got over 100,000 monthly active users every month who are using Local across Windows, Mac OS, and Linux to build their sites and to test changes before taking them live for themselves or for their clients.
Something that we want to talk about today is investments we’ve been making in the Blueprints feature. Blueprints are a long standing feature within Local. They’ve been around since the very beginning, but we’d like to see more people taking advantage of the real power that they provide in powering agency workflows.
So something that we’ve been working on is Blueprints. In terms of– Blueprints are user defined WordPress site templates that helps skip repetitive, time consuming setup. Local is great at creating new sites very quickly in what I’ll call a very basic hello world state. So it creates a new site for you. If you know the Hello World post, it gets created. It’s a very basic WordPress theme, no data or media attached, no plugins activated, just ready for you to make what you like of it.
Now if you’ve been working in Local for a while or just building WordPress for a while, we know that there’s typically some setup steps that you tend to have when you build a new site, whether that’s plugins that you’ve got created that you like to use on your sites, it’s certain themes that you like installed. It allows developers to very quickly create sites from a known defined state. So when you create a Blueprint, you’re basically taking a site that you’ve built, including those themes, plugins, any pages and media, the site settings, and bundling those up so that the next time you create a site you can create from that known location very easily.
The very nice thing about this is that when we talk to agency users, Blueprints have a lot of value for our agency customers. That’s because they allow agencies to establish some best practices and patterns that work really well for them. What is best practice in those patterns, they vary by agency, but what we found as we’ve talked to agency developers is this. Each agency seems to have a common set of plugins or themes or software versions that they like to use and share across all of, if not most– most of, if not all, of their sites.
So what Blueprints allows you to do is establish those best practices and patterns at your agency and ultimately, reduce the time it takes for you to onboard new clients or test changes to your site. So say, for example, if I’m an agency here, that I create jewelry websites, as you can see on the screen in front of you. As I’m trying to onboard a new client, maybe I’ve got a template that I can use to go from zero to launch very quickly and ultimately help me on board more clients, more rapidly to my agency.
Second, I think something we hear a lot from our users that it’s great for sharing amongst the development team so in the same way that you’ve codified those best practices and standards, you can share those among your development team and they can use those as starting blocks when they’re creating new sites, both for existing developers, but also for new engineers that you’re onboarding at your agency. It’s great to be able to share Blueprints with them that communicate, this is how– our best practice is just the patterns that we like to follow and when you build new sites at our agency, this is the way that they should look and feel.
Now as I mentioned before, Blueprints traditionally have always been user defined, meaning a user created them within Local. One of the things that we’re very excited to announce and launch here at the DE{CODE} conference in our Local release this week is that we are launching what we’re calling WP Engine-provided Blueprints as a way to reduce the time it takes to launch, but also allow developers to experiment with new technology more easily.
So you’ll see, and we’ll discuss here, this concept of Headless WordPress Blueprints within Local. And Headless WordPress is WP Engine’s headless WordPress offering. Headless WordPress, if you’re not familiar, is the direction that we see the market going in terms of WordPress technology, and that is a scalable solution with a WordPress backend partnered with a Node.js frontend. This offers a lot of flexibility and scalability for you and your teams.
It also gives developers the ability to work in some newer frontend technologies that are faster and improve SEO and page load speeds, while still leveraging that very powerful and easy to use WordPress backend that we all know and love. Now when we’ve talked to developers at these agencies, what we found is that they’d love to dig in to headless WordPress technology, but time is usually a limiting factor, or they have clients asking for it but they’re not comfortable yet offering it as a paid offering for the agency.
So what we’ve gone ahead and done is we’ve created three Blueprints each, each with their own custom themes and mock data, our FaustWP plugin, which is our Node.js framework, as well as Headless WordPress Content Modeler and WPGraphQL that facilitate that transfer of data between your WordPress backend and your Node.js frontend. The idea here is that hopefully this is a great way for you and your development– you and your team to see the potential of headless WordPress and Headless WordPress together and hopefully get to a point where you feel comfortable offering these as offerings to your customers.
Now I want to walk you through a demo of what the latest release to Local looks like as it pertains to introducing Blueprints into the Local UI. So I’ll get my Local environment configured here. I’ve got Chrome and Local open. And so we’ll take a site, for example, Garrett’s Grocery. So I’ll go ahead and start that site. Let’s imagine that I’m in an agency and most of the sites that I build are for grocery websites.
So go ahead and launch this site, and this is what I typically– like a template that I have set up of what a typical grocery site looks like for me. I’ve got my big header image, Garrett’s Grocery there, I’ve got some fake data and some posts down there below that I can edit when I come back. And I’ve also configured the WordPress admin dashboard the way that I would like it to be, including plugins and any other tools that I want to add.
So if I open that dashboard here, what you’ll see– just like you would expect on any other WordPress admin dashboard. But if I go to plugins– I just chose four random ones for the sake of example. But say that when I make a new site, I always know that I need Elementor, Gutenberg, WooCommerce, and Yost SEO. So I’ve installed those here and if I were to save this as a Blueprint in Local, those will be packaged up and included anytime I create a new site within Local.
So to create a new Blueprint in Local, there’s a couple different options. You can click this three dot menu next to the site’s title and there will be a Save As Blueprint option, or I can right click on the site’s name in the site list and click Save As Blueprint. So we’ll go back to the three dot menu here and choose Save As Blueprint. And what’s going to happen is it’s going to ask me to name the Blueprint, so we’ll call this My Grocery Starter Site.
And then there’s going to be a file exclusion filter, which allows me to remove any file extensions that I don’t want included in that Blueprint, and I’ll leave that as is. So I hit Save Blueprint and what’s going to happen here is Local is essentially going to export all of that content, the media, the posts, the plugins, the themes, anything that I’ve configured on that website, all of the settings, and put it into a reusable format so the next time I go to create a site, I can manage that and create from there super easily.
So you see I got a Blueprint Created confirmation banner here with a prompt to go to Blueprints. So we’ll click that, and what we’ve done is we’ve brought Blueprints front and center in the UI navigation on that left hand navigation bar in Local. So you can see all the Blueprints that I have ever created in Local now live here, and there’s that grocery starter site that we just created together.
And I can go to this three dot menu on the right and right now there’s some management options that we’ll be adding to in the future, but renaming and deleting. So for example, we’ll go ahead and rename this site, and I can rename the Blueprint to a Grocery Starter Site 2 and hit Rename. And you’ll see that this updates in the UI and then the name has been changed in Local going forward. I could also press Show Details here that would tell me more about the Blueprint itself and the different versions and software installed on it.
Now one of the things that we’re excited about, as I mentioned, is the idea of WP Engine-sponsored or provided Blueprints, and these right now are going to be controlled by our Add Ons. So I’ll go to the Add On library and install WP Engine Headless WordPress, so I’ll enable and relaunch. If you haven’t yet installed this, it would be installed and relaunched.
So what this will do is Local will get that installed for me and restart, and Local is going to look the exact same when it relaunches. Garrett’s Grocery is still here. I can make changes to the site if I wanted to. But if I go back to that Blueprints in the navigation and I scroll down, you’ll see that the Headless WordPress Blueprint section has been added here. And this is a great way for, as I mentioned, you to get an idea of what we’re offering, but also a link to some curriculum to start learning how to best use this. We’ve got three options for you.
There’s a Basic Blueprint, a Blog Blueprint, which is kind of a standard what you would think of in terms of WordPress, and then Portfolio Blueprint, which is a mix of that blog along with some other components to help sample projects and display your work. The best part about these, if I wanted to see what a Portfolio Blueprint looks like, is we’ve hosted all of these on our own infrastructure so you can launch the Portfolio Blueprint and see that I’ve got some images here, I’ve got some fake data, I’ve got some posts already created for me that I can edit and add my own media to.
There’s some CTAs spread throughout the page and a customer testimonial section where I could drop my own quotes and very quickly, if this is a grocery store, drop some things in here for that. And then links to popular social media that I can either edit in the bottom or delete if I don’t want. Even better, if I’m not familiar with headless WordPress or I just want to know how this works, developers can open this code in GitHub and all of this has been open sourced by WP Engine.
So you can take a look at all of the code behind the scenes, understand how we built it, understand some tips and tricks and maybe best practices for building in headless WordPress, and we’ll continue to develop curriculum as well for teaching developers the best ways to get headless WordPress spun up and running on your machine and on the web. So this is the first time that we’ve, like I said, provided Headless WordPress Blueprints or any Blueprints to the community from WP Engine, something we’re very excited about and there’s a lot of potential for.
For now, I think this is all headless focused. In the future we could see adding different technologies, or even a community focused portion where users can create and share their own Blueprints. Today what makes this also great is that if I wanted to now create from these Headless WordPress Blueprints or any of my Blueprints, it’s super easy. So if I go to the plus icon in the bottom left hand corner to create a new site, what’s going to happen is we’ve moved Blueprint creation right to the very front and center so users aren’t going to be able to miss it.
So to be able to create your new site from a Blueprint right here– it used to be hidden in an Advanced Options menu that I’m not sure if many users knew how to find it. So choose Create From Blueprint and hit Continue, and you’ll see a similar screen to what we were just looking at. So I’ll see the list of Blueprints that I had just created, along with any details that I want to view so that I know what I’m going to get before I create my site.
So if we scroll down, what you’ll see is we’ve got these Headless WordPress Blueprints now as well, which allow you to very quickly create from those Headless WordPress Blueprints that we were just talking about. You can preview that site, open the code on GitHub, and make, ultimately, the choice that works best for you. So for example, if I wanted to create from a Portfolio Blueprint, I could choose Portfolio and hit Continue and Local would take care of the rest for me in the same way that it does today.
So it would spin up that Node.js frontend for me, it would spin up the WordPress backend, and make sure that those two could talk to each other. It would import all of the data and plugins and pre configured settings that WP Engine has provided for you, and you should have a headless WordPress site configured on your machine in no time. We’re really excited about the potential of this and bringing this to more technologies and more types of sites. We’re really excited to see your feedback here today as well, as well as joining in our community forums at community.localwp.com.
If you have any feedback on how we could improve this or make your lives better as a WordPress developer or as an agency developer, I would love to hear it. But with that, I would like to pass it off to Britt Dreisbach, as I mentioned before, who’s our product marketing manager, to give you a chance to talk more about other Local features that agencies love. Britt, I’ll hand it off to you.
BRITT DREISBACH: Hi, everyone. Like Austin said, my name is Britt Dreisbach, and I am the product marketing manager for Local. I came to WP Engine from Flywheel and so I have been working very closely with agencies for quite some time now, and I love our Local product because I think it’s such a great tool and It has that really great blend of being so developer focused, keeping you moving quickly, while also incorporating such a beautiful design and additional features that we know that agencies love as well. So today we are going to talk about some features built into Local that our agencies and just the developers love.
So starting with those built in features, the first one I want to touch on is One Click Admin. So as you can see on the screen here, I turned my site on and then I can log in to my client’s site, and it shows her login right there. So this is a really great feature because it allows you to focus on getting set up faster. You don’t have to track down client credentials all the time, you don’t have to manage some list and spreadsheet of all of your client credentials either. You can see what the WP Admin looks like from various admin levels.
And so WP Admin, while something so simple, is a really simple and easy tool that is built into Local to keep you all working smarter and working faster and more securely as well. So that’s our first one. The second feature I want to talk about today that is built into Local is Live Links, and this is a pretty popular one. So as you can see here, I have the ability to show my clients or whoever– maybe someone on my team, another developer, a designer– what my site looks like on my Local machine without having to take it live or push it to staging or production, for example.
So as we can see here on the site, we’ve got my Erin’s Excellent Eats site, and let’s say I’m ready to show it to the client. I can go in and I can change my login credentials, the username or password, to really customize it to my client or my agency and keep that really branded, wonderful experience.
And this also allows you to get faster feedback, collaborate with your clients or your internal teams, and also test your site quickly without, again, needing to take it live, pushing to staging, production, and more. So Live Links is a very popular tool in Local. To get started with Live Links, you can create a free Local account, which allows you to create that site tunnel securely and quickly right from Local.
And then finally the last built in feature that I want to talk about today is Local Connect. So as you can see on the right here, I am connected to my Flywheel account. All of these sites you’re seeing are also on my Flywheel platform.
So I’m going to pull in this site from Flywheel to Local with just a few clicks, and it is being pulled into my Local instance right away so I know I have the latest version of the site and I’m ready to work quickly and make those changes that maybe my clients or my team has requested. You can also then push a site live to WP Engine or Flywheel in no time, so that is also a really great tool that we have. It allows you to push to staging or production environments on Flywheel or you can also push to a development environment on WP Engine.
So in addition to Local Connect, we have our Magic Sync Viewer, which is a pretty cool tool. Magic Sync is our differential deployment technology. So you’ll see here in a bit, it pulls up all of the files on my site and intelligently recommends which files to take live to Flywheel, in this example.
So it’ll intelligently recommend updated, added, deleted files, and let’s say I just want to deploy a certain section. I have control over which files specifically I want to deploy, which actually allows users to deploy up to five times faster when you’re using Local-connected Magic Sync. So it’s a pretty darn powerful tool compared to a lot of other standard deployment options out there.
And then another really powerful stat that I like with Local Connect is that we know Flywheel customers using Local Connect deploy twice as often as customers that are not using Local Connect, and I think that really speaks to the ease and the simplicity of being able to deploy and work and iterate quickly, which is so important for an agency when you’re trying to stay agile.
But you don’t have to take our word for it. This is Chris Coyier. He is with CSS-Tricks, CodePen, and Shop Talk Show, and he loves Local and Local Connect. This quote is from him. He says, “The best option is Local. My life is that same list of sites in two places: it is in Local and it is in Flywheel.”
So the ability to pull down your latest version or maybe pull down your staging environment, make some changes and push live to production, having that integration between the two platforms that you know and you love and you rely on day in and day out is a really, really wonderful workflow tool and advantage for our Local Connect users. That is what I’ve got for built in features in Local, but as we’ve talked about a little bit already, let’s dive into a few Add Ons. So again, you can get Add Ons from our Add Ons library in Local, which is the little puzzle piece tool.
And I want to also talk about Image Optimizer, specifically for agencies, because a lot of our agency developers are managing lots of site content, and if you want to save space on your Local environment, on your WordPress site, on your machine desktop, you can do that with Image Optimizer. So, you don’t have to install additional plugins in your WordPress site if you don’t want to.
You don’t have to install additional tools on your Local machine or find web solutions, you can optimize all of your images right from Local with just a few clicks. And it’s really great, it downsizes, and saves you a lot of time, which allows you to save space on your own machines, on your own technology, but also on your live site. And then that also helps keep your client’s site performing at a better rate and that’s what we’re all looking for, right?
So that is Image Optimizer. And then our last Add On I’ll touch on briefly is Link Checker, another really simple but important tool. So with the click of a button you can scan your entire site and it’ll populate a list of any broken links on your site. So this allows you to run QA checks much faster, but it also ensures that you’re providing the best client experience, right?
You don’t want to be able to send your client a live link and then they go and find all of these broken links from your site. It ensures that you’re always providing the best client experience. So those are just a few of our Add Ons. I highly recommend going and checking out all of our additional Add Ons in the Local library. There’s some really cool and powerful tools there. But today we covered just a few features that our agencies love, in addition to our new Blueprints and Headless WordPress Blueprints.
So to wrap it all up, Local is obviously such a wonderful choice for WordPress developers, but we have so many features and tools focused around helping the agency workflow, and we can’t wait to continue to build out more features in the future. To get started and check it all out, you can head over to localwp.com and click that big Download button right there. Local and all of our features are free, as Austin mentioned earlier.
And then if you would again like to continue to give us ideas, feedback, or have a new feature that maybe you’ve been thinking about, you can join the conversation at community.localwp.com. And that is what we have for you all today. Thank you so much for your time. Again, I’m Britt. On behalf of myself and Austin, thank you for joining us today.
