On today’s episode, we are going to talk about how to test the new and shiny updates, all the things that come with WordPress and plugin updates. We’re gonna talk about how to test them on our live site, right here on Your Website Engineer podcast, Episode No. 394.

Hello and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. I’m excited to be here with you this week because we’re gonna be talking about updates and plugin updates, and how we can make sure that our sites are ready for these new changes, like Gutenberg and the new version of WooCommerce and the new version of this, that, and the other new plugin that’s out there. We’re gonna talk all about that in just a couple minutes.

I’ve got one announcement about WordCamp Europe, and we’ll talk about that, and then we talk about a plugin of the week. So, the first piece of news comes from TorqueMag.io, and this is a brief recap on Matt Mullenweg and his deliverance of the WordCamp keynote in 2018. This was just last weekend, and it was more of a town hall, or that’s what he normally does in WordCamp Europe. He goes and just answers people’s questions. But this year, in 2018, decided to present what had been happening since WordCamp US in December and what’s gonna happen in the coming months. He also revealed that, 2019 and 2020, the WordCamp US location is being moved to St. Louis.

If you remember, it used to be the national one. It used to be WordCamp San Francisco, and then a few years back, they changed it to WordCamp US, and then it’s going to rotate around the country. So, the first two years were in Philadelphia, the next two years were in Nashville, and then the two years after that, 2019 and 2020, will be in St. Louis. So, it’s still kinda staying in the Midwest and making it a nice, easy drive for me. It’s only, I believe, it’s eight hours maybe of driving, or six hours, from Ohio, and so I’ll probably be planning on going to St. Louis in 2019.

I’m also looking to submit a topic. That ends on June 30th. If you’re interested in submitting a topic for WordCamp US, the pool is open, I guess, for the next few days, and so you can find out more on the WordCamp US website.

So, Matt talked about, in his updates post, if you will, or his update at WordCamp Europe, he talked about there were six core releases since WordCamp US. Customization was improved in turning widgets into blocks. There’s been a WP-CLI. Saw a couple new releases. There’s a Version 2.0 that’s in the works, coming in July, and it will show better packaging for dependencies. The REST API was a huge focus this year because Gutenberg’s built on it. The core team has improved Gutenberg groundwork, autosave, search, all the stuff behind it.

The mobile apps have had a few huge months. They’ve improved right-to-left languages. I guess the mobile apps are one of the most accessible ways that people interact with WordPress today and in the future. In the last month, so in the last 30 days, there have been 1.3 million posts, and 3.7 million photos have been posted via the mobile app. I used to use the mobile app a lot as part of my – I used to use it instead of Instagram or instead of Facebook. I used to post everything on my own website, and I did that with the mobile app. And so, that was an update with just the core functionality of WordPress.

Then, he talked about Gutenberg, how the biggest section of his talk there was on Gutenberg. There’s been 30 releases since its inception in 12 since December. There has been 1,700 issues have been opened, 1,100 have been closed, and 14,000 websites are using Gutenberg right now. Then, he talked about the block feature, and how copy and paste is so much better now. You can copy and paste from Microsoft Word, Office 365, Evernote, random web pages, Google docs, and more with Gutenberg. So, that’s exciting.

They talked about there’ll be new features in Gutenberg the core team’s working on, and the next phase of Gutenberg will happen in July with the next release. With that, there’ll be a strong invitation to either install Gutenberg or opt-in for the classic editor. Instead of an opt-in option for WordPress.com, there will be an opt-out. So, the team will pay attention to who opts out and why, and there’ll be a heavy triage in the bug gardening that will try to get the blockers down to zero. July will also see the exploration of expanding Gutenberg just beyond posts into site customization.

August is the hopeful release date for 5.0. Matt couldn’t guarantee the date, which seems most likely. At this time, all critical issues have been resolved. There’s been integration with Calypso. That’s the WordPress.com interface. And Matt is hoping to get 100,000 sites and 250,000 posts using Gutenberg by that time. So, that’s all within the August time period.

So, the presentation then ended with some Q&A, and they talked about the GDPR and how that makes a lot of sense. That was a regulation we talked about a few weeks ago in Europe, and WordCamp was in Europe, and so they talked about his concern, and they just had a whole bunch of questions about that. The full version is up and available, and you can go ahead and watch it, and you can see the recap if you like. But that is just the two-minute version of what happened at WordCamp Europe if you weren’t able to attend, like I wasn’t able to attend this year.

All right, the plugin of the week that I wanna share with you is called WP Last Modified Info, and this is a plugin that allows you to update your posts or pages with new additional information, but you don’t have to change the publish date on your website. So, it’s a plugin, and then it gives you a shortcode that you can add, that you can wrap in your text. So, for example, maybe you wrote a podcast or you have your podcast show notes for Episode No. 1 that was published way back in December of 2010, like on my website, and then if I wanted to change something, or if I wanted to bring in additional information on that post, I could put in these short codes, and then I could say, “Hey, this was updated,” or, “I no longer recommend this,” or, “I changed this,” or whatever, and then it still keeps the December 2010 as the publish date, but then I can say, “Oh, well, in August of 2017, here’s my new recommendation.”

So, that’s one way that you could use WP Last Modified Info. It is a brand-new plugin that’s out there. Not a lot of active installs yet, but it looks like it’s a good one. The screenshots and whatnot look like it would be a plugin if you’re looking for that specific functionality. I would recommend checking this out. You can search for it in the plugin repository on WordPress.org, or you can find a link in the Show Notes for Episode No. 394.

All right, today, let’s talk about the new and shiny, and I’ve been thinking about this topic for a while because I’ve been reluctant, and it’s not just reluctance in the fact that I don’t wanna do it – I really do – but I just haven’t updated, and I haven’t taken the time to take my development server of YourWebsiteEngineer.com, I just haven’t found the time or taken the initiative to add Gutenberg to this website so I can test it, and see what’s going on, and make sure all my plugins work with it, and see even what my own personal plugin looks like and what it works for. And I haven’t done it because of kind of the overwhelm and all of the things that, in my head, I think I need to do before I can do that.

So, what I wanna talk today is the step-by-step process to properly test your WordPress website before updating, before you update your live site, and just kind of the steps that I go through, the steps that you want to think through when you know you’re gonna do a big update like this. Gutenberg is a huge one to add, but if you’re running an ecommerce store, if WooCommerce comes out with a brand-new version 3.4, and you’re running 3.3, and it’s like, “Oh, how am I gonna install this? How is the best way to update my plugins without ever worrying about affecting my live site and maybe breaking my site so I can’t make sales, or breaking my website so that people can’t check out, or completely wiping out my website with some sort of update?”

So, I wanted to talk through how to do this, and how the “best” way or the best practices is to work through this. You learn by experience, right, and so I know that this has happened back in the day when I was building websites for clients. This was one of those things like I was working on a website, and I did something wrong, and I was doing it all live on a production site. It was their main site. I was getting ready for dinner, or I wanted to do something, and all of a sudden, I broke it, and I didn’t know what I did to break it, and I couldn’t really undo what I did because I didn’t know what it was, and then I spent the next hour trying to undo everything, all the progress that I’ve done, trying to figure out where that switch was because I was making changes and updating plugins and doing all kinds of things, but I never looked at my live site to see if it was broken or not, and it was a big real pain.

So, I’ve learned from that time point to never really do those types of updates or changes on a live site because if it breaks, then you’re at your mercy, and you have to drop everything, and it’s a stressful situation because your website’s down. If you’re doing this more in a staging environment or an area where folks can’t see, or if you’ve taken your website down, or whatever that looks like for you and your development process, then you don’t have to worry about that. You can say, “Oh, well, I need to take a break. Maybe I’ll walk away.” A lot of times, I find that you walk away, your brain’s still processing in the background, and it’s like, “Oh, this is what I did. This is what I need to undo,” and then you can come back, and you can fix it, instead of frantically trying to figure out what it was because you’re on the clock because your client’s gonna start losing money because their ecommerce store can’t check out.

So, that’s what, I guess, comes to mind when I say that I have experience with this. This was many years ago. It was probably back in 2011 or 2012, when I was running my own freelance agency. So, I learned from this, and now I kind of follow this process and these steps on every single site of mine.

Okay, if you have a website that is a mission-critical website, it always needs to be up, it always needs to be running, here are some things, and let’s talk about the tools that we need to test and make sure things are working, and then we’ll talk about the process.

So, the tools, I wanna talk about a staging site. You’ll need a staging site, which is basically a clone or an exact replica of your website. If you are using like WP Engine or Local by Flywheel, SiteGround, a lot of hosts are starting to do this now, where they have the option for clicking a button and automatically creating a staging site, so then you have a mirror image of your website at a staging URL, and then you can start testing, and you can do the updates and the changes on the staging site first to see what’s happening and what’s going on.

The next thing is a screenshot creation tool. You’ll want one of these, and we’ll talk about how we’re gonna use this in the process section. In the Show Notes, I’ve got a couple different tools listed there. So, there’s BrowserStack.com. There’s TestingBot.com. There’s CrossBrowserTesting.com. There are a few different ones that are out there. URL2PNG, this is one as well that you can use, and it is a tool to allow you to create screenshots. And we’ll talk about how you can use that.

There’s also another tool that’s somewhat recommended, and it is an automated screenshot tool comparison. So, if you wanna compare your screenshots, there’s a couple ones that are out there. There’s CrossBrowsingTesting.com/AutomatedScreenshots, and there is one called BBC-News.GitHub.io/Wraith, and I’ll have a link in that for the Show Notes as well. But those are a couple tools, and we’ll talk about why we can use or how we can use an automated screenshot tool comparison in just a second.

And then, the other thing that we need as a way of tool is we could use some automated script testing. Now, this is going to be a little bit more for high-end websites. I mean, it could be used for any of them, but if you wanted to invest a little bit of time and effort and money if you’re not a programmer, then you can use some automated script testing, and we’ll talk about that, too, in a second.

So, those are the tools: a staging site, screenshot creation tool, screenshot comparison tool, and automated script testing.

So, before the updating happens, let’s walk through what that looks like. So, before you update, you want to make a list of all of your premium themes and plugins. So, these are the things that will not get updated automatically through WordPress. So, this, I guess, goes against – except for WooCommerce. WooCommerce premium extensions, those, as long as you’ve got your sites connected to WooCommerce.com, that they will automatically update, and they’ll serve you and say that this is the latest version of the plugin. But other than those, any of those premium themes or plugins, make a note and list out all the ones that you have installed on your website.

So, then, once you have all those listed out, and you can do this in an Excel document. This is probably the best place for it, in an Excel document. Then, you wanna go back to the website and check for the latest version number and capture those URLs. Make a list of those URLs in that Excel spreadsheet so that we can make sure that we have easy access to those in the future. So, we’re gonna go, we’re gonna see, “Oh, well, this plugin is at Version 1.4.2, and on my regular site, I’m 1.3. That needs an update.” So, we’re gonna just make a note of all the ones that need to be updated.

Next, we wanna make a list, and you can do this in the same Excel spreadsheet, maybe on a different tab, but you wanna create a list of URLs on your own website that you’re gonna test after the updates. So, this should include WordPress templates, maybe a post, maybe a page, maybe a podcast episode page, maybe something that you’ve created with custom post types, maybe your home page, contact page, category page, a product page, a checkout page, a cart page. Make a list of all the pages that are critical for somebody to check out or buy something on your website or whatever you’re using your website for. Make a list of all those in that Excel file because we’re gonna start checking, and we’re gonna go to all of those links in just a few minutes.

Next, you wanna make a list of test scenarios to be checked after the upgrade. So, a test scenario is like a vistor’s – what their journey is throughout your website. So, maybe a test scenario could be like, “Open the Home page. Scroll down to the Call to Action button. Put in your email address in the Contact form, and then press Submit and see what happens,” or maybe, “You’re on the Home page, and then you click on Categories inside the menu, and then go to a specific category, add a product to cart, add your shipping address into the Cart page, and then go to the Checkout page and see if you can check out.” Come up with a handful of strategies or a handful of case studies or test scenarios of what people could do on your website, and then write those down so we can work through those once the updates have been created.

And then, the last one is, if you are wanting to go down the automated test scripts route, you wanna create a set of automated test scripts. I would say this is more of an advanced topic, and I’d say that most people shouldn’t have to worry about that right now. So, that’s there if you want to, if you wanna automate some of this, but for the most case, let’s just go ahead and forget about that for right now.

All right, on to the staging site. If you don’t already have a staging site or a copy of your website, you’re gonna want to create that. You wanna make sure that the PHP and the MySQL versions are exactly the same to your live environment. You can do this locally with a tool like get Local by Flywheel or DesktopServer, and you can do this with SiteGround or WP Engine or get Flywheel. Any of those hosting providers can do that. So, you wanna go ahead and create the staging site. Check to make sure the staging site’s okay, just a routine check to make sure that the clone’s perfect, would make the cut here. That’d be good enough, but navigate to a few pages. Maybe do a contact form just to see what happens. It should do the exact same things as your live site does.

Now, before doing any of the updates, go ahead and create a set of screenshots for all the URLs that you made in that URL list on staging. So, these are our baseline files. We wanna make sure that if anything breaks, we wanna compare what it looked like before and what it looks now. So, take screenshots on Chrome, Safari, Firefox, Edge on Windows, iPhone, Android. There’s a ton of them that you can do, and that’s what some of the screenshot tools that we talked about a little bit earlier can do multiple all in one fell swoop.

Next, it’s time to do the updates, and I like to do them one at a time just to make sure that nothing actually happens. It’s a big pain, but if you update ten plugins at one time and one of them breaks, then you have to try and figure out which of the ten it actually was. So, first, I’d recommend updating WordPress core, if WordPress needs updating. Do that brief look over your website. Compare a few pages on the staging server to the screenshots that you’ve taken. See if everything looks okay. Then, go do your theme files, then do your plugin files, and then go, lastly, and update any of those that have manual updates. So, those premium plugins that you’ve bought from a third-party site, go ahead and take a look at those now.

Now, after we’ve done all that, we’ve done all the updates, now that little icon that says “You have updates” is completely gone. There are no more updates to do. Now, you’ll repeat the previous step of going through and creating screenshots of the updated website from your updated website. You’ll go to all those pages again, you’ll take the same screenshots with the same URLs, and then you’ll save those. And you can compare those. Whether you use some sort of tool like I talked about earlier, or you go ahead and just open the two of them up side by side and take a look at them, that’s a choice up to you, and then you can see and make sure that all of those pages work exactly as you think.

And then, you’ll wanna run those test scripts, or you’ll go through those test scenarios that you did, and make sure that all of those different test scenarios work out perfectly as well. And if that all works well, then you know that the staging site is working. There are no conflicts between plugins. Everything on your staging site is now updated. Now, it’s time to do all of the things on your live site. Please don’t do this on a Friday afternoon. That’s not probably the best plan. But we wanna go ahead, and we wanna start making these changes on our live site.

So, the first thing there is do a backup. Just make sure that you always have a backup. You can do the screenshot thing again if you want. You’re basically repeating what you did on the staging site. And then, update your live sites. Do WordPress, then themes and plugins, then premium themes, and then check to see if there’s anything else that’s outdated on the backend. If not, you can clear your cache on your live website.

Make one more set of screenshots if you want to, or you can just compare and make sure that things are looking okay. You can compare those screenshots, if you made them, to make sure that they’re still looking the same as those original screenshots that we took before any updates. You can run those test scripts if you want, or you can do those test scenarios, and then do one more last visual routine check of your website and make sure that everything looks okay, and then you can grab a beverage of choice and set back and enjoy it because you deserve it. There was a lot of work there to keep things updated or make updates and big changes, and you’re done. That’s the steps, and that’s the process.

Now, it is a lot of steps, and it’s hard. No one said that keeping updated websites are easy. I know that, a lot of times, you can update plugins and nothing is actually ever gonna happen. And so, if you wanted to do an abbreviated – an abbreviated way to do this is to create your staging environment, you do all the updates, and then you compare what the staging site looks like and the live site, and just do a visual check on all of those things instead of taking all the screenshots. You can compare a live site and a staging site, and make sure everything looks okay, and then you can call that good as well.

So, there’s a lot of ways that you can do this. This is kind of my preferred method, and I don’t do the screenshots that often, mainly because it’s not a mission-critical thing. Like if my fonts are a little bit different or the layout’s a little bit wonky, then it’s usually something that I’ll fix within the theme or see if there’s a conflict somewhere else within the plugins or the themes that I’ve got installed.

In a nutshell, that’s what I wanted to share today. And you can make it even more complex if you want, like you can run all of your plugin updates through a GitHub or a Git repository. And so, you can update them on the staging site, and then once everything on your staging site looks good, you can push those onto your live site. I do have a webinar replay from a few years back, and I still use the same process today.

And there’s a link in the Show Notes that you can go ahead and take a look at it, but it’s basically, I do a lot of these things, or I take some of the steps, instead of updating the staging site and then doing the exact same thing on the live site, I actually just update my staging site, make sure everything looks good, and then I push all of the changes. All of those plugin updates and whatnot, I save as versions in my Git repository, and then I can push all of those to the live server right away so I don’t have to go and update all of the plugins one at a time. So, I’ll link to that in the Show Notes, so you can take a look at that if more an automated way is something that you’re interested in, and those are the steps that I still – even though the webinar is a couple years old, that’s exactly the same way that I still do it.

So, that’s what I wanted to share with you today, and I hope that you find it encouraging and valuable. And spend some time going through this process and updating and getting ready for Gutenberg. It’s June now. August is the tentative timeline, and it looks like all the major critical things have been fixed. And so, doing some of this testing now will make it much easier to upgrade in August when that new version, that WordPress 5.0, comes out.