How to Edit HTML in WordPress Code Editor

How to Edit HTML in WordPress Code Editor

Do you want to know how to edit HTML on your WordPress website?

HTML which means HyperText Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

So we’ll show you how to edit HTML in the WordPress code editor using different methods.

Why You need to Edit HTML in WordPress?


WordPress comes with thousands of themes and plugins to change the appearance or looks of your website and customize different elements without touching a single line of code.

However, plugins and themes have their limitations and might not offer the exact features you’re looking for. As a result, you might be unable to style your website the way you want it to look.

This is where editing HTML is really useful. You can easily perform advanced customization using HTML code. It provides a lot of flexibility and control over how your site will look and function.

Different Ways to Edit HTML in a WordPress website.

There are different ways to edit HTML on WordPress, if you follow our guide you will be able edit HTML without the help of an expert.

How to Edit HTML in WordPress Classic Editor

If you’re using WordPress editor especially the WordPress classic editor, then you can easily edit the HTML in the Text view.

To access the Text view, simply edit a blog post or add a new one. When you’re in the classic editor, click the ‘Text’ tab to see the HTML of your article.

How to Edit HTML in WordPress Classic Editor

After that, you can edit the HTML of your content.

How to Edit HTML in WordPress Block Editor

In the WordPress block editor which is also known as Gutenberg block editor, there are multiple ways to edit the HTML of your post or page.

First, you can add or change HTML code in the WordPress block editor is by editing the HTML of a particular block.

To do that, simply select an existing block in your content and then click the three-dot menu. Next, go ahead and click the ‘Edit as HTML’ option.

wordpress block editor

You’ll now see the HTML of an individual block. Go ahead and edit the HTML of your content.

If you want to edit the HTML of your entire post, then you can use the ‘Code Editor’ in the WordPress block editor.

You can access the code editor by clicking the three-dots option in the top right corner. Then select ‘Code Editor’ from the drop-down options.

full block editor 1
How to Edit HTML in WordPress Theme Editor

Another way to edit the HTML of your website is through the WordPress Theme Editor (Code Editor).

However, we don’t recommend that you directly edit the code in the Theme Editor. The slightest mistake when entering code can break your website and block you from accessing the WordPress dashboard.

Also, if you update your theme, then all your changes would be lost.

Go to Appearance » Theme Editor from your WordPress dashboard. You’ll now see a warning message about directly editing theme files.

theme editor 1
theme editor 2

Once you click the ‘I Understand’ button, you’ll see your theme files and code. From here, you can choose which file you’d like to edit and make your changes.

theme editor 3
How to Edit HTML in WordPress Widgets

In WordPress, using a Custom HTML widget can help you customize your sidebar, footer, and other widget areas.

You can start by heading over to your WordPress admin panel and then go to Appearance » Widgets. After that, go ahead and add a Custom HTML widget by clicking the ‘Add’ button.

How to Edit HTML in WordPress Widgets

Once you’ve selected the widget area and position, go ahead and click the ‘Save Widget’ button.

After that, you can click on your Custom HTML widget, enter the HTML code, and then click the ‘Save’ button.
You can now visit your website to see the Custom HTML widget in action.

How to Edit HTML in WordPress Using FTP

This is a standard feature that comes with all WordPress hosting accounts.

The benefit of using FTP instead of the code editor is that you can easily fix issues using the FTP client. This way, you won’t be locked out of your WordPress dashboard if something breaks when editing HTML.

To start, you’ll first need to select an FTP software. We’ll be using FileZilla in this tutorial, as it’s a free and user-friendly FTP client for Windows, Mac, and Linux.

After selecting your FTP client, you’ll now need to log in to your site’s FTP server. You can find the login details in your hosting provider’s control panel dashboard.

Once you’re logged in, you will see different folders and files of your website under the ‘Remote site’ column. Go ahead and navigate to your theme files by going to wp-content » theme.

You’ll now see different themes on your website. Go ahead and select the theme that you want to edit.

Next, you can right-click on a theme file to edit the HTML. For example, if you want to make changes in the footer, then right-click the footer.php file.

Many FTP clients allow you to view and edit the file and automatically upload them once you’ve made the changes. In FileZilla, you can do this by clicking the ‘View/Edit’ option.

download and edit your theme file

We suggest that you download the file that you want to edit to your desktop before making any changes. After editing the HTML, you can replace the original file.

We hope that this article helped you learn how to edit HTML in the WordPress code editor. If you have any issue on this, you can use our comment session or join our delegate on facebook to solve any issues related to WordPress and subscribe to our YouTube Channel for WordPress video tutorials.

Share this Post

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
Scroll to Top