On today’s episode we are going to talk about how to troubleshoot WordPress. Right here on Your Website Engineer podcast, Episode No. 464.

Hello, and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler and we’re gonna talk something today about that is very near and dear to my heart. It’s troubleshooting WordPress. And we’ll get to that in just a few minutes, but the big thing about troubleshooting WordPress is it can be a fun process. It can be a challenging process. It can be a head-scratching process, and I get to it every single day with anywhere between 20 and 40 customers that come through the WooCommerce chat or live tickets or tickets area and just try to figure out what might be going on and how we can help and how we can debug what’s going on on their WordPress site. So, we will talk about that.

I do have announcements – a couple of announcements, I guess, and a plugin to share. The first announcement is all about WordPress 5.3. It is coming very soon. November 12th is the release date. We’re just about three weeks out from there. And, if you haven’t tried 5.3 out yet, now is the time. You can install the WordPress at Beta Tester plugin and that will get you – there’s a setting in there for the bleeding edge nightlies and so you can get the latest version there. Or you can download the release candidate and there’s a link in the show notes to the post on WordPress.org that you can get that, and you can install it just like you would a normal version of WordPress. But it’s, basically, the Release Candidate 2, just has a few more improvements. They’re just fixing some bugs.

All of the features have been added to WordPress 0.5.3 and they’re just trying to get through some of the things. They’re some button layouts that were fixed in IE 11. There were some – just weird issues that they are fixing and getting things all ready to go for the latest version. And, so, that is what the big news is of the week.

The other thing is that WordCamp U.S. is next weekend in St. Louis. If you are interested in getting together with about 2,000 other WordPress enthusiasts in the – pretty much the middle United States in St. Louis, Missouri, then I recommend checking out the website. And you can search on the WordCamp schedule page to find WordCamp U.S. You can find all about it, and it’s going to be an incredible event. I have been on one of the organizing teams for volunteers for the last – I think we started about eight months ago. We started volunteer – getting them, everything ready for this event, and it’s hard to believe it’s only like 10 days away or so. And it is going to be a jam-packed full event. There are tons of speakers. Matt Mullenweg will be doing the annual State of the Word address. There are going to be different networking events in the evenings.

There are going to be sponsored areas where sponsors will be giving away free swag and all that good stuff. There will be giveaways and all kinds of things that’s just a lot of things are happening in St. Louis. And, so, that will be Friday, Saturday, and Sunday of next weekend. That is November 1st, 2nd, and 3rd, I believe. So, I will be there and, if you are in the area or if you are coming to the area for WordCamp U.S., please let me know, and – I’ll be happy to say hello. I will be actually probably most of the time at the registration area, at least the first day. They’re doing on-badge demand printing and I’m helping get the volunteers all set up to do that, plus some wrangling – about 100 people. There are about 100 volunteers that it’s going to take to make this thing happen, plus the 50 organizers. So, about 150 people to put on this event and, so, it’s going to be a lot of fun, and I’m really excited to see some of you in St. Louis.

All right. On the “Is There a Plugin for That” section of the show, there’s one today that I found that’s called “Quote a Calculator Constructor.” And this is a plugin that will allow you to create a WordPress quote system or a loan calculator or a quotation or calculation systems. Basically, if you have to come up with some sort of calculation on your website, this is going to be the plugin for you. It’s a brand new plugin, but I do recommend checking it out because it does have some really cool things that you can do, setting up different text and inputs and outputs, and doing all the calculations that you need. So, check out the show notes for the link to that, or you can find it in the repository, searching “quote calculator constructor.” All right, today let’s go ahead and we’ll talk through how I troubleshoot WordPress.

And WordPress is this amazing platform. There’s 50,000 plugins out there that you can use that are free, plus the paid plugins, plus there’s dozens and dozens and dozens of premium themes and free themes. But, when you start putting all of these things together, they don’t always work. And, so, one of the things that I get to do every day is try to figure out what’s broken, which piece of the puzzle doesn’t work right. And, so, we’re going to talk through a couple different steps of how to go ahead and troubleshoot and figure out where the broken piece may be when it comes to WordPress. And, so, the first thing is you just wanna kind of figure out if the problem is – I mean, you wanna isolate the problem. That’s the big thing. We wanna try to figure out, we’re gonna try to pinpoint where the problem is coming from. And I don’t have a great example of what we could be troubleshooting right now, but we want to isolate the problem.

And the best way to do this is with a clean installation. And how we do this, especially since it’s really hard to have multiple installations when I’m chatting in live chat, or talking to other customers or whatnot and, so, what I normally do is I normally test whatever they’re saying on my test site. Because I know my test site is different than their site, and, so, that’s almost like doing it on a clean install. But, if you don’t wanna go out and reach out for support as the very first No. 1 thing, the first thing that I’d recommend is just trying to isolate the problem. Maybe if you install WordPress as a stand – have a clean version of WordPress, install a plugin, configure the plugin or configure the setting, whatever it may be, and then see what happens. That’s kinda the first thing. And a lot of times, customers will say, “Well, this is broken.”

And then I go and look at my test site and I say, “Oh, well, it’s working fine for me. There must be an issue with your specific site. Let’s go ahead and dive in and take a look at what might be going on.” Now, the first thing that we do is we normally – and this doesn’t all have to happen on a live site. That’s one of the things that doesn’t – it’s really hard for a live ecommerce website to go down, for you to take down and turn off all the plugins, but a lot of times, what I recommend is use the host, either has a staging environment, or you can use a plugin like WP Clone. And that’s one that will take your website and clone it, and make an exact copy of it, an exact replica. So, then, we can do the testing on there, and then it’s not affecting your live site. But the first rule/step is to deactivate all plugins except for the ones that are needed to recreate the issue, for example.

So, for an example, if we’re having a problem with Stripe – Stripe’s a free plugin for a checkout for a payment gateway on WooCommerce. So, if that happens to be a problem, then I’ll say, “Deactivate all plugins except for WooCommerce and Stripe,” because you need WooCommerce active so that you can see the settings in Stripe. It’s one of those things. So, most of the time, when we’re troubleshooting things on our end, it’s always leave WooCommerce enabled plus the plugin that may be causing the problem. And then, if you deactivate all of those and the problem is gone away, then we know that it’s one of the plugins. If it’s one of the plugins, then you have to turn them on one at a time. As you turn them on one at a time, then you keep checking. You turn one on. You go check. Is it fixed? Does it stay fixed, or is it broken again? And then you do one at a time, one at a time, one at a time.

And then eventually you’ll figure out, oh, it’s this particular plugin. And then if it’s a plugin maybe created by a third party or – then we go down the rabbit hole of ok, is it the plugin’s fault or is it WooCommerce’s fault? Like, what’s the deal? But most of the time, if things work well with the plugin turned off, then it’s the plugin itself that you just turned off that is causing the problem. And then I recommend reaching out to the plugin developer, and they can help. And they can set up and figure out what might be going on with your installation in your exact setup. And, so, but if you deactivate all plugins except for WooCommerce, except for Stripe, and it’s still broken, then we know that it’s not a conflicting plugin.

We’ll just keep all the plugins off, just for the sake of simplicity, and then we will go and we will deactivate the theme. And you can’t really just deactivate one theme. You have to switch to another theme. And we always recommend a 2019, a 2017. If you’ve got one of those already installed, you can go ahead and use that. You can use the Storefront theme as the basic WordPress theme. It’s basically trying to figure out if it’s a theme issue or not. Usually it’s real easy to install 2019. That’s an easy theme to install. Your website is going to look terrible. Things are gonna be out of order. They’re not gonna – the menus aren’t gonna work right. It’s gonna be a very – let’s see, the word I want to say is it’s not going to look good at all. So, this is probably not a good thing to do on your live site.

And, so, there is a – so that’s one of the recommendations. If you turn to 2019, the problem’s gone away, then we know that it’s in your theme. Then you can reach out to your theme developer and figure out ok, what kind of issue is there? And then they’re the ones that can help you resolve what might be going on. There is another plugin. There’s a couple ones out there that is called – there’s one called Health Check, and there is one called MEX. I’ll put a link in the show notes for both of these. But they will give you the ability to turn things off on a live site, and it only affects the admin logged in user. And, so, sometimes those are good. The Health Check one is pretty good at that. And, so, you can go in and you can toggle all of them off, and it will only affect the people that are logged into the site as an admin.

And, so, if you wanted to do some troubleshooting on your live site, you can do that. I do recommend like a – as a general good practice, a best practice within WordPress is to have two different versions. Have one locally or running on a different server, and then having your live site. So, you can do all the edits, all the changes, all the testing, everything that you need can be done on that secondary site without affecting the live site. And that just makes your life easy. That means if you break things and then you have to leave your computer for a while, you’re not frantic, trying to get things back in order and whatnot. It just saves a lot of time and headache. And I did this back when I was – as a developer and building websites for clients, there was a few times that I did things on the live site and then I broke it.

And then it’s like, oh, well, it’s time for me to go home for the day or stop working, and then – but it was still broken. And, so, I had to spend extra time, and I was in a real panic. And I wasn’t doing things right. I wasn’t thinking clearly, mainly because I was trying to get a site restored when, in reality, I should have had a duplicate of the site. Then I wouldn’t have had to worry about that at all. So, those are some of the steps to go through, and that’s usually what I do every day when I’m troubleshooting something with a customer. It’s like, ok, what is – let’s try to narrow down where the problem is. And, so, that happens sometimes. One other thing that sometimes happens, depending on if you are trying to pull in data from another API service, like WooCommerce has like USPS and FedEx, and those pull in data rates.

There’s other ones that maybe like Square, syncs with your Square store, like some of those could get wonky and out of whack. So if you turn those off, turn those back on, and then disconnect and then reconnect from the service, like, basically, you can log out of the Square service or log out of USPS and then log back in, that helps and alleviates a lot of issues as well. And, so, those are the key things that happen. And most of the time, that solves a lot of the issues. But sometimes we get questions that are like oh, I’d like to change these visuals. How do I go ahead and remove this? How do I hide this? How do I change this from bold to a green color?

We get those questions a lot too. And how to troubleshoot where those codes are coming from or how to write the code that’s necessary to make the changes is – Well, first, open up the page in a web browser, and then we’ll view source of that element. And what you can do in Chrome or Firefox, you can right-click on an element. So, you can just highlight a word, you can right-click, and then in Chrome it says “inspect.” And it pulls up a little inspector window at the bottom. And then it’s going to give you the html. In this bottom panel on the left is gonna be the html that’s making up the page. And then on the right-hand side, it’s going to give you all of the elements. So, if I right-click on something in the WordPress repository – I’m still looking at this quote calculator constructor that we talked about earlier.

And if I right-click on the word “quote calculator,” it’s going to show me that I’ve got some CSS that’s happening. It’s got a font weight of 400, a font size of 1.5625 rems, and I can see that this is the CSS that’s used to make this element big and bold like it is. And, so, then I can take this information and I can take these classes that are being used and then I can put it into the customizer under “appearance.” Or you go to customizer and then additional CSS, and then that can paste in the classes that are used, and then the new elements. If I want to make the color of the header orange, I could say, ok, I can look at the class, and then I can take that class and, once it’s inside the customizing, then I can say, color, colon, orange, and then a semicolon. And that will add that CSS code. It will find me the CSS code that I need to turn to orange.

We get a lot of times the customers, like, can I make this font size just a little bit bigger, or can I hide it? Can I underline it? Can I – anything that’s a visual element, a visual CSS thing that you can do, you can right-click. You can inspect. You can find the CSS, and then you can add that CSS into the customizer. And that’s an easy way to make some changes like that. So, that’s some troubleshooting that you can do. And you don’t have to know whether it’s coming from the plugin or a theme or just core WordPress. It’s something that you can do. You can look at those visuals and then you can see, make the changes in the customizer, and then you can make those changes. But sometimes we get questions like, oh, can I make this text different? Or how can I remove this text? Or how can I – some sort of very – it’s a structural type question, I guess.

And you’re gonna do the same thing. You’re going to open up the page in the web browser. I guess I do this sometimes when I’m looking for how to fix a bug. Where is this code used? How can I fix this bug, type of a thing. So, I want to go in. I want to right-click on the element. And then inside the element, I’m going to see, ok, it’s inside a span class. Ok, maybe the URL’s got a specific class there. Let’s see what else we’ve got. We’ve got different classes. Maybe there’s an ID. Maybe there’s something that may be a very distinct thing that you can search for. So, for example, I am still looking at the WordPress repository for the quote calculator constructor. And if I right-click on the byline, it’s gonna say span class and bylines, which shows me who the plugin is by, and then it’s got a class for author and a vCard.

So, maybe I wanna figure out where that’s coming from. So, I could search inside the code for the plugin or the theme. I can search for author vCard and see what comes up. Then I can see where that’s coming from, and see if it’s possible to make modifications to it. I can just kinda go through those things and mainly just try to find where that code is. Now, a lot of times in WordPress themes, even sometimes WordPress plugins, you’ll find the class, and then you go to that class section. But then it’s calling a function from somewhere else. And, so, then you’ve got to go and you’ve gotta find where that function is, so then you’re copying and pasting that function and searching for that. And then you go back to where the stuff is actually called. And it’s like this continual puzzle until you get all the way back, until you see the text that you’re trying to change or make a modification to.

And this happens a lot. It’s not a difficult process, but it’s something that you just kind of learn as you go. This is not something that I learned when I first started using WordPress. When I first started using WordPress, it was just like, oh, how do I figure this out? And I guess you kind of go in and you search, and you have to – especially if you’re trying to make a theme modification, like, ok, where is this? And then you’re searching, page by page, and where you’re trying to figure that out. And one other neat plugin, and I believe it’s called What the File, and I’ll put a link in the show notes for that as well, but that is a plugin that, when you’re logged into your WordPress site, it shows across the top of your WordPress site, the admin bar, in the upper right-hand corner. It’s going to show you which file is being used and which file is being called.

So, if you’re on a post page, it’s gonna say that it’s single.php. If it’s on a page, it’s gonna be page.php. But, if your theme is kind of complex, and it’s got a lot of pieces going, then it’s going to pull in the right template file at the very top, so you can see what that template is. And then you can go and you can find that in the theme, and then you can make the edits and the changes and the adjustments. And, so, those are a couple tools, like I said, that you can find the links in those in Episode No. 464 in the show notes. And those are some good tools. We don’t use that one very often because we don’t really work with theme modifications. And we know that we can figure out that if it’s not in core Storefront or core 2019, then it’s a theme modification, and then that’s up to the person counting on us to figure out that and iron that out.

But occasionally, you’ll say, “Oh, I wanna change the way that this page is laid out. Where is that template file?” And then, with the What the File plugin, you can go ahead and you can see which one that is, and then make those adjustments. So, those are some of the things that kind of every day, in the 30 to 40 times a day as I’m going through support, I’m just trying to figure out where issues are coming from and where things are working or not working. And, I guess, if you do run into issues, if you do find out it is a particular plugin that’s causing the issue, maybe you’re working with Stripe, maybe you’re working with some sort of page builder, or maybe, whatever that is.

And you can replicate that – oh, if I have only WordPress and only this page builder, or only this thing active, and it’s still broken, then that’s when you detail out exactly what’s going on, and then let the developers of the plugin or the theme or whatever know that hey, I’m running into this. I have a very basic WordPress installation. There’s nothing else going on here, and this is what I’m seeing. And then they’ll be able to help you fix out, and they can iron out the bugs that might be caused by just that plugin itself.

So, that’s what I want to share with you today. I’m sure that you’ll run into, in the next week or maybe the next month or sometime, for sure, in the next year, some sort of conflict. And this is kind of the best way to go about doing it. Isolate the problem. Deactivate as many things as you can. See if the problem’s still there, and then start troubleshooting and figuring out where the issue’s coming from. And, then, once we figure that out, then we know which avenue to take. Do we contact the theme developer? Do we contact the plugin developer? Do we know that there’s something wrong in our custom code? And those are kind of the pathways, the flow chart, if you will, to get you going on the right path. So, that’s what I want to share with you today. Take care, and we’ll talk again next week. Bye-bye.