How To Fix a WordPress Plugin that Produces Invalid HTML

How To Fix a WordPress Plugin that Produces Invalid HTML

If you have a WordPress plugin that produces invalid HTML, it can harm your web site. Your site will end up lower in search results. It may fail to display on mobile devices. It could read improperly on screen readers In short, it just might not work correctly. Many WordPress plugins are not written with standards-compliant HTML as their top priority. This is a bigger problem than many people realize.

So How Do I Fix this?

I first recommend the easy answer — tell the plugin author. They wrote it, they should fix it. If you take on fixing it yourself, you are disconnecting from any future updates they might make. So the ideal answer is for the author to just make the plugin better. However, many authors are not responsive. They may be busy. Or they have moved on to new projects. Whatever the reason,  the ideal answer isn’t going to happen, and you need your site to work.

So let’s talk about a less ideal, but more pragmatic answer – fix it yourself.  Let me be upfront that I am not going to go into extreme detail here. I am going to give a high-level process of how to go about fixing a plugin. Someone with a basic idea of how to code should be able to follow this. Someone with zero experience in coding might have more questions than answers.

Step 1 – Identify what HTML is Invalid

Use the w3c validator tool to run a check on your WordPress page to get a HTML validation error coming from your site. Pick the one you want to correct, and get its line number.

Step 2 – Find where it lives in your web page

Use Chrome to view the HTML Source fo your page (Right Click –> View Page Source), and navigate to that line. Take a good look at this line, and compare it to the rest of the page. This is where the art of troubleshooting plugins comes in. We’re looking for something we can search the plugin code for — a piece of text to help us find the part of the plugin that wrote this HTML. A class name, a HTML tag, maybe a few HTML tags in a specific order. Some specific bit of HTML that is unique to this line of code, and that is NOT content that you entered. Make a note of whatever you find.

Step 3 – Download the WordPress plugin code

Using an FTP client (I use FileZilla), download your /wp-content/plugins directory to your local system. If you don’t have access to an FTP client, you may have a web-based File Manager via cPanel or some other tool given to you by your hosting company. I recommend getting an FTP client set up if possible. It works effectively when downloading and searching large groups of files.  And this is a common scenario when dealing with WordPress on shared hosting  setups, which is where most WordPress sites live..

Step 4 – Find the line of code that is producing the Invalid HTML

Using a text editor with a Find in Files Function (I recommend Sublime Text), search all files in your /wp-content/plugins directory, searching for the bit of HTML we identified in Step 2. Hopefully we selected a piece of HTML that is fairly unique so we only get a small number of results.

One we see the results, we need to read the code surrounding those results. We need to identify which result is actually the piece of code that we want, which is producing the line of HTML we want to change. I can’t give much advice on how to know that in this post, you’ll just need to read the code and see what it does.

Step 5 – Correct the Error

This is the science part of the work. We identified the line of code where the problem came form. But now we need to identify and correct the root cause of the problem. We need to work outwards from this starting point, throughout the code, to troubleshoot the problem, and update the code, and correct it.

Some times, this is easy. A img tag that is missing at alt attribute is as simple as just adding it. Other missing or deprecated attributes are similarly easy. However, other problems require reading more code. There may be logic to figure out, where there could a bug where the code works in most cases, but your content exposes a logic error in the code that made it fail to close (or open) some tags.

I can’t really provide much guidance here, because there is just too much variety in what could need changed, and in what could be wrong. This is where you need to apply your own troubleshooting and coding skills to track down and fix the problem. hopefully now that you are at the correct point in the code, that is a reasonable task.

Step 6 – Push the WordPress Plugin back to the Server

Once the correct is made, use you FTP client to push the updated file back up to your server.

 

Again, I realize that this is fairly vague advice, and not truly a step-by-step guide of how to fix your WordPress plugin. But I’m hoping it will help those of you who may be just stepping into the realm of coding to dig a bit deeper. One of the best ways to learn how things work is to dig into problems and fix them – debug a few WordPress plugins like this, and you’ll quickly develop a strong comfort level with how WordPress plugins work, and be able to writing your own.

 

 

 

Comments are closed.