Looking for an easy way to edit HTML on your WordPress site?
HyperText Markup Language or HTML is a code that tells a web browser how the content should appear on your web pages. Editing HTML is handy for advanced customization and troubleshooting issues.
In this article, we will show you how to edit HTML in WordPress code editor using various methods.
Why edit HTML in WordPress?
WordPress offers thousands of themes and plugins to change the look of your site and customize different elements without touching a single line of code.
However, plugins and themes have their limitations and may not offer the exact features you are looking for. As a result, you may not be able to style your site the way you want it to look.
This is where HTML editing really comes in handy. You can easily perform advanced customization using HTML code. It gives a lot of flexibility and control over how your site will look and work.
In addition, learning to edit HTML can also help you identify and correct errors on your WordPress site when you do not have access to the dashboard.
Note: If you do not want to edit HTML, but still want full customization options, we recommend that you use a drag and drop WordPress page builder like SeedProd.
That said, let’s look at different ways to edit HTML on a WordPress site.
We cover how to edit HTML using the block editor and the classic editor, and we also show you an easy way to add code to your site. You can click on the links below to jump to your favorite section.
How to edit HTML in WordPress Block Editor
In the WordPress block editor, there are several ways to edit HTML on your post or page.
First, you can use a custom HTML block in your content to add HTML code.
To get started, go to your WordPress dashboard and then add a new post / page or edit an existing article. Then click the plus sign (+) in the upper left corner and add a ‘Custom HTML’ block.
Then go ahead and enter your custom HTML code in the block. You can also click ‘Preview’ to check if the HTML code is working properly and what your content will look like on your live site.
Another way to add or change HTML code in the WordPress block editor is by editing the HTML for a particular block.
To do so, simply select an existing block in your content and then click on the three-point menu. Then go ahead and click on the ‘Edit as HTML’ option.
You will now see the HTML for an individual block. Go ahead and edit the HTML for your content. For example, you can add a nofollow link, change the style of your text, or add another code.
If you want to edit HTML for your entire post, you can use ‘Code Editor’ in the WordPress block editor.
You can access the code editor by clicking on the three-dot option in the upper right corner. Then select ‘Code Editor’ from the drop-down menus.
How to edit HTML in WordPress Classic Editor
If you use WordPress classic editor, you can easily edit HTML in the text view.
To access the text view, simply edit a blog post or add a new one. Once in the classic editor, click on the ‘Text’ tab to see the HTML code for your article.
Then you can edit HTML for your content. For example, you can bold other words to make them stand out, use the italic style in the text, create lists, add a table of contents and more.
How to edit HTML in WordPress widgets
Did you know that you can add and edit HTML code in your site’s widget area?
In WordPress, using a custom HTML widget can help you customize your sidebar, footer, and other widget areas. For example, you can integrate contact forms, Google Maps, Call to Action (CTA) buttons, and other content.
You can start by going over to your WordPress admin panel and then go to Appearance »Widgets. Then go ahead and add a custom HTML widget by clicking the ‘Add’ button.
Next, select where you want to add the custom HTML widget and select a location. The widget area depends on the WordPress theme you are using. For example, you might be able to add it to your footer, header, or other areas.
Once you have selected the widget area and location, go ahead and click the ‘Save Widget’ button.
Then you can click on your custom HTML widget, enter the HTML code and then click on the ‘Save’ button.
You can now visit your site to see the custom HTML widget in action.
How to Edit HTML in WordPress Theme Editor
Another way to edit HTML on your site is through the WordPress Theme Editor (Code Editor).
However, we do not recommend that you edit the code directly in the Theme Editor. The slightest mistake when entering code can corrupt your site and block you from accessing the WordPress dashboard.
Also, if you update your theme, all your changes would be lost.
That said, if you are considering editing HTML using the theme editor, it’s a good idea to back up your site before making any changes.
Then go to Appearance »Theme Editor from your WordPress dashboard. You will now see a warning message about direct editing of theme files.
After clicking the ‘I understand’ button, you can see your theme files and code. From here you can choose which file you want to edit and make your changes.
How to edit HTML in WordPress using FTP
Another alternative method of editing HTML in WordPress theme files is using FTP, also known as file transfer protocol service.
This is a standard feature that comes with all WordPress hosting accounts.
The advantage of using FTP instead of the code editor is that you can easily solve problems using the FTP client. This way, you will not be locked out of your WordPress dashboard if something breaks when you edit HTML.
To get started, first select an FTP software. We use FileZilla in this guide as it is a free and easy to use FTP client for Windows, Mac and Linux.
Once you have selected your FTP client, you must now log in to your site’s FTP server. You can find the login information in your hosting provider’s control panel dashboard.
Once logged in, you will see various directories and files on your site under the ‘Remote Site’ column. Go ahead and navigate to your theme files by going to wp-content ‘theme.
You can now see different themes on your site. Go ahead and select the theme you want to edit.
Next, you can right-click on a theme file to edit HTML. For example, if you To make changes to the footer, right-click the footer.php file.
Many FTP clients allow you to view and edit the file and upload them automatically once you make the changes. In FileZilla you can do this by clicking on the ‘View / Edit’ option.
However, we suggest that you download the file you want to edit to your desktop before making any changes.
After editing the HTML, you can replace the original file. For more details, we recommend following our instructions on how to use FTP to upload files in WordPress.
Easy way to add code on WordPress
The easiest way to add code to your WordPress is using the Insert Headers and Footers WordPress plugin.
The team at WPBeginner designed this plugin so you can easily add code to your site in minutes, and we’ve made it 100% free to use.
It also helps in organizing your code as it is stored in one place. Plus, it prevents errors that can be caused by manually editing code.
Another benefit is that you do not have to worry about your code being deleted if you decide to update or change your theme.
The first thing you need to do is install and activate the Insert Headers and Footers plugin on your site. For more details, follow our detailed instructions on how to install a WordPress plugin.
Once the plugin is active, you can go to Settings »Insert Headers and Footers from your admin panel.
Next, you can add the HTML code to your site in the box header, body text, and footer.
For example, let’s say you want to display a warning line on your site. You can simply enter the HTML code in the ‘Scripts in Body’ field and click the Save button.
Additionally, you can add a Google Analytics tracking code and Facebook pixel to the headline, or add a Pinterest button to the footer of your site using the plugin.
For more details, see our guide on how to add header and footer code in WordPress.
We hope this article helped you learn how to edit HTML in the WordPress Code Editor. You may also want to look at our guide to how much it really costs to build a WordPress site, or see the main reasons why you should use WordPress for your site.
If you liked this article, subscribe to our YouTube channel for WordPress video tutorials. You can also find us at Twitter and Facebook.