There are many reasons WordPress is popular; it is easy to use and it comes with a wide variety of plugins, like wpDataTables, that offer advanced functionality with a very simple setup. Yet, there are some situations when you need to know how to edit HTML in WordPress.
However, from time to time, you have to access the source code of your website. For example, when your site gets attacked by a malware, it might crash your entire website and there is no other way to fix things except for playing around with the code a little bit.
On the other hand, there might be situations where you simply want to make some advanced customized changes and you need to know how to edit HTML in WordPress.
Know What You Wish to Change
Before you get started on editing HTML code for a website, you should know what it is exactly that you wish to change. Decide on what results you want, know how to customize a WordPress theme, how to upload the HTML file to WordPress, how to comment out CSS etc.
Maybe you just want to experiment to learn more or maybe you simply want to change some text or edit a site layout. However, no matter what your goal here is, know exactly what it is that you want to do before you start editing the code.
Also, don’t forget to ask yourself if this is really worth your time. If you don’t feel like spending a lot of your valuable time to edit HTML, consider hiring a professional to do the heavy lifting for you.
Gather Your Tools
The good news is that there aren’t many tools that you need to be able to edit HTML WordPress. You can find all of them below, and to make thing even better, they are all free of charge.
- An FTP client like Filezilla or WinSCP to get direct access to your files on your web server; to download and upload them easily.
- An editor to make changes to the downloaded file such as Notepad++ which is free of charge and it has a syntax highlighter for the most common programming languages.
Make Your Backups
Before you start meddling with your HTML source code, make sure you know where your backups are and how to restore them immediately if necessary. You can create the backup files via the hosting provider’s cPanel if you don’t like making your own backups.
Changing a Regular WordPress Post or Page
If you want to change HTML source code on a regular WordPress page, all you have to do is use the WordPress HTML editor. Changing a WordPress code this way is actually rather easy. Simply edit the page and you will notice that clicking the Text tab will show you the HTML code behind what appears in this Visual tab.
Editing HTML in WordPress
To explain how to edit HTML in WordPress, we first need to know how to access it.
You will have to access the website source code to before getting to the WordPress HTML editor.
But how do you edit WordPress HTML on your homepage?
If you don’t know how to edit WordPress homepage, don’t fret. You can usually do this under Appearance > Widgets where you can simply adjust the content in the individual widget areas.
However, in some cases, you will notice the homepage acting as an individual page and you won’t be able to edit it in the Widgets area. If that happens, you can find the homepage content under Pages or you can click on the Edit Page option in the top admin bar from the homepage.
If those two options don’t work for you, there is a chance you are using a page builder or theme with a built-in homepage editor. If that is the case, you can edit HTML code in specific ways described in the documentation provided with the page builder or the theme in question.
How to Edit WordPress Themes
Now, we are going to explain how to customize WP theme. Simply go to Appearance → Editor in your WordPress dashboard and find the theme in question.
Don’t be confused if you only see one or two files; usually style.css and functions.php. There is nothing unusual about that, don’t worry.
Unfortunately, changing a template file is not something you can do from the dashboard editor. You will need to copy the file to your child theme by using an FTP application.
For example, if you want to edit HTML file in the Twenty Eighteen theme, let’s say the footer, you will first have to copy the footer.php file over to our child theme using an FTP app.
Simply copy it to your computer and then copy it again to the theme folder. Once that’s been done, go to Appearance → Editor in your WordPress dashboard, select your child theme, and the footer.php file name in the right sidebar.
Update your code and then Click the big blue Update File button beneath the editor.
In some cases, you will not see the Update File button right away. If that is the case, you probably have to change the permissions on the file using your FTP application. Simply, right-click the file name in the FTP app and pick the changing permissions option.
Test
Now that you know how to edit WordPress, you can test the changes you made in your browser by reloading the website (Press F5). If everything runs smoothly, you did a great job in editing your HTML codes.
If things aren’t exactly what you expected them to be, don’t worry. You can always undo the changes or simply reinstall your backup and try again.
Ending thoughts on how to edit HTML in WordPress
Learning how to code HTML isn’t easy, but learning how to edit HTML in WordPress isn’t so bad, is it?
In this tutorial, we went over some of the most basic changes that are a great start if you are just learning how to use HTML. Knowing how to code your own website can be very handy, but you don’t have to be a coding expert to make a few simple changes all by yourself.
Keep in mind that if things don’t go as planned, you can always undo the changes or reinstall the backup.
If you enjoyed reading this article on how to edit HTML in WordPress, you should check out this one about how to reset WordPress.
We also wrote about a few related subjects like how to embed video in WordPress, how to change WordPress URL, how to add JavaScript to WordPress, how to duplicate a page in WordPress, how to edit WordPress user roles and how to add WordPress featured image.
