Making Edits to WordPress Page’s HTML Code: Problems and Solutions
No doubt, it’s easy to work with the WordPress admin panel, you can even make minor edits to your website content easily, by performing some basic steps. But making edits to your theme’s HTML code can be a lot challenging (especially when you’re just a beginner). In fact, you may come across a situation when you’ll find an empty editor when you want to make changes to a page’s HTML code.
In this post, we will discuss the solution to making edits in the HTML code of a specific page. But, before that let’s first talk about the most common problems you’ll most likely encounter when editing a page HTML code in the WordPress editor.
Understanding the Problem: Inability To Edit Page’s HTML Code
There are two problems that might unable you from editing your page’s HTML code. Let us talk about them one by one:
Problem 1:Â You might not be able to get the HTML code you want to edit the page, when you want to make some changes to any specific page in your WordPress website hosted on a remote server. As a matter of fact, you may find a blank screen in the editor when you open a page to edit, just like the below screenshot:
Problem 2: The WordPress (page or post) editor features two tabs “Visual” and “HTML” that appears at the top right side of the editor, as shown in the following screenshot:
The âHTMLâ tab is where your HTML code is entered for a page or post. When you’re saving or publishing the page/post, the HTML code that you entered gets preserved.
On the other hand, the âVisualâ tab comes with plenty of fancy writing-style tools, using which you can add some graphical elements to your page.
However, when you save your page after making edits to the Visual tab or publish it, the content converts to HTML code. Since WordPress can’t remember the page tab option, it opens up any page in Visual or HTML mode, according to the tab you last used. And so, your previous written HTML code will not work anymore and will be removed.
Solutions to the Problems
In this section, we will be talking about the recommended solutions to the above-discussed problems you’ll face when making edits to the HTML code of a page in the editor.
Solution 1: Here we will explore what you can do when you find the HTML editor screen empty while making edits to the page.
In order to make edits to the HTML code, you will need to make edits to the template file named âpage.phpâ. You can access the file, from the theme folder from the path: /wp-content/themes/themename/.
NOTE: Remember not to make any changes to the page.php file directly, as one little mistake can break your website. So, it is recommended that you should first create a duplicate copy of your page.php file, let’s say, custompage.php. Save the new file in the theme folder. You can now edit the custompage.php file and include anything within the file as per your requirement. Once you’re satisfied with the changes you’ve made and tested them, you can now make the same changes in your original page.php file.
Solution 2: To make sure that your HTML code isn’t lost or removed when working in the âVisualâ tab, you can use the âAlways Edit in HTMLâ plugin. This plugin removes the Visual tab from the page editing screen, and open your page in the HTML code, and thereby preserve your HTML code.
Another great plugin, you can use to preserve your HTML markup is Preserved HTML Editor Markup Plus. This plugin helps in preserving the HTML markup that has been generated by a user in the TinyMCE editor. What makes this plugin different from others is that, it lets developers work in the HTML tab and allows end-users to make use of the âWYSIWYGâ Visual tab simultaneously? And so, your HTML code won’t be completely munged into a form that is hard to recognize when you switch from the Visual tab to the HTML tab.
So, after going through this post hope that you’ll find making edits to the page HTML code a hassle-free task. We have discussed the most common issues that many beginners face when wanting to make edits to the page in the WordPress page editor. Although, the post presents some very basic things, but it will definitely serve as a good starting point or a useful resource you can refer to when editing the HTML code. However, if you are still facing any issues, you can either visit WordPress Codex to get answers regarding your issues. Or else you can hire a professional for making the desired edits in your page HTML code.
Â Author Bio:
Jack Calder is highly experienced web developer in Markupcloud Ltd, A leading PSD to HTML service company. Instead of this he also a part time writer spreading his words across the web online.