On today’s episode, we’re going to talk about how I keep my websites updated – the website workflow in 2018 right here on Your Website Engineer Podcast, Episode No. 415.

Hello, and welcome to another episode of Your Website Engineer Podcast. My name is Dustin Hartzler and today we’re going to talk all about how to keep your sites updated, how – what my workflow looks like of updating my development site into my live site and all of those good things. I was going to talk about staging sites or just kind of a generic overview because we’ve been having some issues with people updating WooCommerce and WooCommerce – different extensions and all these types of things and it was just like, okay, I’ll talk about that, and then I looked through my show notes and I’ve talked about staging sites a couple times in the last six months or so.

So, I thought I would just go ahead and talk about exactly how I do things here over at Your Website Engineer corporate headquarters, if you will, and how I keep all my websites updated whether that be the hobby sites that I’m running or the one that’s powering this show and whatnot. So, that’s what I want to talk about here in just a few minutes. I’ve got a couple of announcements and then a plugin to share, like always.

And the announcements start with: WordPress Five-Point-O Beta Four is now available. It’s still under development, it’s not recommended to run on any sites, and lots of things have been changed. Okay, moving on to new news. That’s basically what’s happening. The Beta has been changed to – or the Beta is up to level four and their – the release has changed to November 27th. So, it’s after the Black Friday/Cyber Monday extravaganza, if you will, where lots of website owners were complaining that they wouldn’t be able to update their sites because right when the software came out because of their store and the holidays and whatnot.

And so, that was one of the things as I move to the next announcement that Matt addressed in the – some of the controversy surrounding Gutenberg at WordCamp Portland Question and Answer. There’s a video link in the show notes for the “Q” and “A”. You can see the whole thing, it’s 38 minutes in length. But, basically, people were asking different questions about how long is – why are you releasing now and what’s going to happen, and all of these different things. So, he kind of debunks some of those myths and basically, the gist of it is that, if you’re not ready to update, you don’t have to update to WordPress Five-Point-O and the other thing is that WordPress Five-Point-O is essentially just Four-Point-Nine, Point-Eight, plus Gutenberg.

And so, that’s basically all that it is and it comes with the Classic Editor and so, if you do absolutely nothing the Classic Editor will continue to take over and you have – your user experience is exactly the same. Nothing will break in your store and whatnot. One of the things is that he says that one of the hosting companies has already started adding Gutenberg automatically and they have seen no uptick in customer support requests.

And so, I thought that was pretty interesting, so they – one of the other quotes in there is, “I hope that Gutenberg is really a non-issue.” It’s helping people – I guess the last time this big controversy happened was when they added the TinyMCE editor, which is what we know and love when it comes to WordPress. They added that all before everybody was – their big controversy before and then they added it and then people loved it. And so, that’s what the kind of the hope and the plan is for WordPress Five-Point-O and Gutenberg.

Speaking of Matt Mullenweg, I wanted to point out a link to – for a – a link on his blog that’s what’s in his bag, the 2018 edition. This came out just a couple of weeks ago and it shows everything that he keeps in his backpack as he travels and he goes places. So, if you are interested in seeing what Matt uses and interested in spending some money, there’s 47 different items there that you can go and purchase and you can spend quite a lot of money because some of the items, the MacBook Pro, the headphones, the – he’s got Apple watches and phones and iPads and all that kind of stuff. So, definitely check that out if you’re interested in seeing what his bag is all about.

And then, lastly, I want to tell you an episode that releases today, the day that this show comes out, over at The Get Options Podcast. It’s Podcast Episode No. 74 and I was a co-host. Usually they – the guys Kyle and Adam bring me on as a third wheel in their show, and this week Kyle was out of town, so I took over his seat, which was a lot of fun. And so, we give not-so-practical advice and then actually real answers, and it’s kind of a fun show. If you’ve never listened to The Get Options Podcast, I recommend checking it out. Head on over to getoptionspodcast.com and you’ve got 74 episodes to keep you entertained and talking about WordPress. So, that’s all I have when it comes to news.

I do – I have a plugin that I want to share with you and it’s called White Label W-P, and it’s a plugin that allows administrators to change the WordPress branding to bring clients’ websites to life. You can add a custom logo, a custom log-in, a – you can create a custom WordPress dashboard with your own widget and other features to help your WordPress client. So, if you want to just tell them that they’ve got a brand-new site up and running and you don’t want to tell them all about the ins and outs of WordPress and you don’t want them to see the labels in WordPress, then I’d recommend the White Label W-P plugin. And, you can find it in the repository by searching White Label or you can find, as always, a link in the show notes for Episode No. 415.

All right, today I wanted to talk a little bit about how I keep things updated. In the past, we’ve talked about how to track changes in our website, we talked about different ways to keep our websites updated. Just a few months ago, I talked about the different local development tools that are out there. And so, today I wanted to really dive in and share exactly how I update websites and keep them updated and how my workflow works and just how I – it’s been the same for the last few years. I haven’t been nearly as active in the development. I haven’t been as active with making updates to Your Website Engineer as I wanted to and it’s mainly just because of crazy life and building a house and having kids and having a full-time job and all of those things kind of take precedence over me tinkering around.

But I want to just kind of explain how it works and then if you have any questions, feel free to reach out to me. I’m planning on doing a short little video, too, that would be really great to kind of highlight and show, okay, this is how I update a plugin on a staging site, this is how I do this and then it appears on the live dashboard or whatnot. So, let’s go ahead and talk about it. First, we’ll talk about the tools that I use and then we’ll talk about the different steps behind each thing. So, the tools that I use – the – I mainly use one WordPress plugin to do this and this is only to sync my content between my live site and my demo site or my dev sites running locally on my computer. But I use a plugin called W-P Migrate D-B Pro and I used to – in the past, I’d always recommend a plugin like Gravity Forms.

Gravity Forms was one there was like, I don’t even care how much it costs, like, it’s so useful to me, I’ll just renew that automatically. And now, with some different options that are out there, I like trying different contact forms to see how the industry’s changed, so I don’t always go with Gravity Forms. Right now, I’m on Ninja Forms, but you never know like in the next, you know, next year I might change to something else. But W-P Migrate D-B Pro is the plugin I’d highly recommend everybody use and everybody purchase. It’s not too expensive of a plugin. If you just have one site, it’s $99.00 per year, four sites is $139.00, and a developer account is $199.00 for the year. And they give discounts off of renewals every year. And so, this is one that I highly recommend because what it does is it’ll allow you to take your live site and basically pull down all the contents of your database into your local development environment. I’ll talk more about this tool in just a second.

The next tool I guess, if you will, is – or software that I use is called Git. It’s a version control and that allows me to track changes with what’s going on with my website. We’ll talk about that in just a second. I use Hyper, which is a terminal replacement on a Mac. There’s a couple that are out there, iTerm2 I think is one and there’s the terminal that you can use and this one is called Hyper and it’s really cool because it’s kind of based on H-T-M-L and you can style your terminal very much similarly to styling in C-S-S, which is pretty cool. So, I have that.

I have a script that’s installed on my computer called Dandelion Deploy and we’ll talk about that in a second. And then I’m using Valet Plus for local development. If you head back to Episode No. 397, that’s going to share all of the different local tools that you can use for having a local environment or local WordPress site on your computer. And so, if you’re interested in finding some sort of set up there, I recommend doing that. Valet Plus is not the easiest. It took me a little while to configure and set up, but now it’s – a lot of the things that I can do is all via the terminal. There’s no real actual dashboard, like, if you use Local by Flywheel, you can go in and you can create a new site and you can turn things on and turn things off. With Valet Plus, that’s all terminal-based stuff. So, those are my tools: W-P Migrate D-B Pro, Git Hyper, Dandelion Deploy, and Valet Plus for local development.

So, to clone my live site, so say for example I’m like, oh, I’m just getting started, I want to make sure that I have an exact copy of my WordPress site. My – yourwebsiteengineer.com, I want to have a local copy of that on my computer. I want to make sure that I’ve got that set up. So, what I’d do is I’d go into whatever internal tools that you’re using, I’m using Valet Plus, and I’m going to create a brand-new WordPress website. It doesn’t matter what’s on it, you can call it whatever. Usually, I name my website’s folders and I name them the first letter of each word in the U-R-L. So, for yourwebsiteengineer.com, it’s Y-W-E, and that’s the name of the folder inside Valet. So, I call it Y-W-E, I create a WordPress site right there, and then I’m good.

I’m all set up there and then I’ll open up usually an F-T-P Editor, I guess I should’ve said that. I need an F-T-P Editor. I use Transmit. That’s what I’m using here in 2018. And, with Transmit what I do is I’ll take the – I’ll go in and I’ll grab all of the plugin files. So, I’ll navigate to my site and then go into W-P dash content into the plugins area, grab all of the plugins, and then drag them into my local installation that I just set up. The site’s not going to function any different, it’s going to look very standard, it’s going to have the 2017 theme, it’s going to have very generic things, and so that’s what I do. I go ahead and just bring those in to my local environment.

Next, I’ll go in and I’ll turn on or activate a W-P Migrate D-B Pro. It’s not a commercial for them, but if you’re interested in W-P Migrate D-B Pro, I recommend checking out yourwebsiteengineer.com/migrate and that’s going to be an affiliate link to head on over to get a purchase. But, again, this is software that’s very, very useful and it saves a ton of time and a ton of headaches. So, we’ve activated that W-P Migrate D-B Pro on our local site and we want to make sure that it’s activated on our live site. You need the plugin installed in both places before they can talk to each other and then, once they’re talking to each other, then what you do is you hit the import on your local site and it’s going to pull down your whole database from your live site. The only thing that you have to do is you have to tell W-P Migrate D-B Pro which – or what the U-R-L change is going to be.

So, I’m going to say anytime you find “yourwebsiteengineer.com,” replace that with “Y-W-E dot test” and that’s the domain name that I use on my local environment. And so, it’s going to pull everything, it’s going to pull in posts and pages, it’s going to pull in which plugins are activated, it’s going to plugin – you know, everything that’s going on in your live site is going to be pulled down to your local environment, and that should get you pretty close. Now, it depends on how you have your images set up and whatnot is – depending on how things will appear on your development site. So, if you upload lots of images to your WordPress site on your live server, you know, you update a lot of things, then what happens is, you’ll have to drag all of those files, you’ll have to download them via F-T-P and then add them to your uploads folder inside of WordPress on your local environment.

How we do it here on yourwebsiteengineer.com actually brings in another tool, I’m kind of thinking this as I go. But, so what I do is I’ll create the image, so that image that you see either in your podcast player or the featured image that comes up with the post, I create that and I save it to my desktop, and then my desktop uses a Hazel Role, which knows to go into Y-W-E, slash W-P, dash content, slash images, slash – or uploads, slash and then the month and the year, and so it automatically files that for me. So, I have a copy of my local – I have a copy locally of the image that I just created and assigned to the post and then once a month or so I have to go in and I have to use the broken – or I have to use the Regenerate Images plugin to generate all the little thumbnails for images that appear across my site. So, that’s – in a nutshell, that’s how I get my site set up so it’s – locally, it’s 100% the same as my live site.

Okay, so that is – that’s kind of the whole set up. I’ll recap that real quick. We – I create a WordPress site on my Mac, I manually add all the plugins, I activate W-P Migrate D-B Pro, I’ll then sync and pull down my live information and then I’ll – if I have any images that I’m missing, I download those via F-T-P as well, and then I’ll do a Regenerate Images and that is – that’ll get my site set up exactly like my live site.

All right, now for the geeky part, and I kind of set this up and this has been, like I said, a couple years that I’ve been doing this. It’s mainly because I didn’t like updating my plugins on my local sites and then having to do the exact same action over on my live site. And so, I felt like it was a duplication of effort and I didn’t want to – you know, I updated five plugins and now I got to do it on my live site. I just didn’t like doing it in multiple places, so I kind of created this workflow. So, what happens if I want to update a plugin? And the same is true if I want to change some code in my theme or add a template file or whatnot, it – I can do the same thing.

So, what I’d do is I’d open up – I open up my terminal. I do a lot of things via the terminal. You can do this via the dashboard. Say we’ll do it via the dashboard here. We’ll go to plugins on our local environment and we’ll look and we see, oh, the Yoast plugin needs updating, all right? We will – on the local site, we click update to the button and it goes through its process. Okay, yes, it’s fully updated. Now – now what I do is I save this as a revision in Git and, this is a little bit technical, but I’m just basically saying, like, I’m saving this new copy of a – of my website as a snapshot. It takes all of the differences, all of the things that have just changed, and that’s considered a snapshot within my Git repository located on my computer.

So, in the command line, I can go “Git” space “add” space “period” and hit “enter,” and that will add everything that has just updated to be in my working directory. And then I do Git commit and then dash capital “m” and then in quotes I say “updated jetpack plugin,” “updated Yoast plugin,” “updated whatever plugin,” and then I hit “enter” and then that saves that as a kind of a snapshot and then I do Git push, which will push it out to my GitHub repository, and then I’ll use the tool that I talked about earlier called Dandelion Deploy. It’s a script that I’ve – it’s – I’m not exactly sure exactly what kind of script it is, but I installed it and now I can do Dandelion Deploy, and what that does is it looks at my Git repository and it looks to see where the differences are and it’ll only push the differences of the change.

So, it’s not like I’m taking a snapshot of my entire site and then trying to push all of my entire site every time I do an update. It’s only updating and changing the files that have changed locally on my computer. And, again, I’ll show this in a video, so it makes a lot more sense. But that’s how I do it. I refresh then the live site and then the dev site and then the plugin update has gone away from both sites because now they’re both updated.

So, what does this get me? What does this workflow allow me to do? So, it allows me to not have to manually update things twice. That’s a good thing. It means that I don’t have to manually upload files via F-T-P. You know, sometimes you might change a file here or you find it locally, oh, okay that works locally, let’s drag that in via an F-T-P Editor and then drag it onto my server. I don’t have to do that anymore because I’ve got this process set up. It means that, when my staging site gets updated first so I can test and then that’s really good, so I don’t ever have to worry about my dev site being out of date. That’s another thing to remember.

And I never have to think, oh, it’s going to take me so long to get my dev site in order. I’ll just code this right on my server and then I don’t have to worry about it. Well, the more that you do that, so that’s called cowboy coding, the more that we cowboy code, the farther things get out of sync and then the harder it is to get back in sync. So, I always have the – this is my – always my workflow. Anything that wants to get – that needs to be changed on the server at yourwebsiteengineer.com, it goes on locally first. With local – and when I’m using local, I’ve got the debug mode turned on so I can see error messages. There was a couple of things a few weeks ago that I was fixing and there was an error on local, but there wasn’t an error on my live site and I was like, what’s the deal? And so, I ended up – I figured out what the problem was, I fixed it on local and then I pushed it to live, and it didn’t break on live because it was two different server things and it didn’t really matter. So, once it was working on local, I pushed it to live and it all worked.

I have the ability, too, to roll back if there are any problems. I see this so many times when customers come to support and they say, “Oh, just updated to this latest version of the plugin and it broke everything. Now I want to roll back, but I don’t have the code.” And so, you have to get in contact with support to roll back and get the code. With Git, they have the – something called a revert. You can revert your code to the previous version. So, I could go in and I could revert and it could roll back that code specifically, so then I don’t have to like figure out where – what version was I on and all that jazz. So, that’s the whole process of what I do.

I’m going to do a video for sure because that’s going to make it much easier to understand and see the workflow, how I update plugins and how those plugins – that information gets pushed to my live server without having to really use my dashboard. Like, I can go in where – via the – it’s called W-P-C-L-I, via the command line and I can say – I can look at which plugins need updating in there, I can update plugins right from the command line, and then I can push all of them via the command line. I never even have to log in, Again, another thing I could do is I could just turn on auto updates and never have to log in, but I like the control, I like the ability to work through – just have that extra ease.

The other good part about having this local environment that’s exactly the same as your live environment is you can think of it as another backup. I used to keep this file in Dropbox and so I’d have the local copy which is in Dropbox. I’d have the Dropbox version, so I could get it online at dropbox.com if I needed to. I had a Backblaze backing up my Dropbox folder and my entire computer. So, that’s three instances on my site, plus my live site, plus a backup that I was doing with VaultPress. Like, I had my website in five or six different places and that really gives you a lot of peace of mind and a lot of ease to know that if two or three different areas melt down, my website is still safe and secure and it’s still online.

So, that’s what I wanted to share with you today, talking about the geeky, the techie, and this may be something that you just skim right over and it’s like of no use. But I wanted to share what I do and how I keep my websites updated. I’ve got a lot of work to do on my wife’s website and a few other projects and so I’ve got to – since I’ve got it all refined now, I’m going to continue to keep working and keep finding different ways to be more efficient and more effective in keeping my websites updated and all that jazz. So, that’s what I want to share with you this week. Take care and we’ll talk again soon. Bye-bye.