How to Edit HTML in WordPress Code Editor

One of the main attractions of WordPress is the ability to build a website with no knowledge of coding or HTML. As a result, it’s great for a novice designer despite its limitations in customization unless you use payment plans and add-ons.

But what if you’d like to make some direct changes that require HTML editing? Fortunately, WordPress makes this easy if you have some knowledge of how HTML works. This article will discuss several ways on how to edit HTML in WordPress code editor.

Back Up Your WordPress Website First

It’s strongly recommended that you back up the site before making any modifications to your WordPress website. Manipulating HTML code can cause significant issues with the functionality of your site. Making errors while doing so could be incredibly difficult to fix, so having a backup is essential.

Even adding an extra character by accident can be hard to find.

Fortunately, there are many WordPress backup plugins that you can use to easily save a backup of your site. For means of illustration, we will explain how to do so using the UpdraftPlus app, which is available directly from the WordPress app.

Here’s how you can back up your site before editing any HTML code using this app:

1. Log Into Your WordPress Dashboard
2. Click the “Plugins” tab and hit the “Add New” button.
3. Type in “UpdraftPlus” using the search window and click the “Install Now” button.
4. Once installed, select the “Activate” button. From the pop-up button, click “Press here to start.”
5. Press the “Backup Now” button.
6. Select your remote storage provider and authenticate your account.
7. Choose which files you want to backup and click the “Save Changes” button.
8. In the pop-up box, click the link to verify your remote storage provider.
9. Tap “Complete Setup.”

You can also create a manual backup of your site, although using a plugin is much easier. You’ll need to back up your files and database separately using cPanel from your web host’s dashboard. The cPanel feature is available from most web hosts. Here’s how to do it:

1. Log into your host’s dashboard and access your cPanel
2. Open the “File Manager” and right-click on “public_html”.
3. Select “Zip Archive.” Wait until all the files are compressed and saved.

To back up your database manually, follow these steps:

1. First, access your site’s cPanel from your host’s dashboard.
2. In the database section, select “phpMyAdmin.” Depending on your web host, its location may vary, but it’s usually located within the “Access Details” tab.
3. Click on the “Database” tab and select the database you need to back up.
4. Select all the files and tap “Export.”

Once both sets of files are backed up, it’s safe to proceed with editing the HTML code in WordPress. If you accidentally make too many errors while making modifications and edits, you’ll now have the option of restoring your website with the backup you’ve saved.

How to Edit HTML in WordPress

Editing HTML code will give you more control over your website’s appearance and function. This will give you an advantage over other designers with no coding knowledge, allowing your website to stand out.

You’ll have the freedom to create with much more flexibility and design a unique website with the flair and functionality you want. By directly editing the HTML code, you’re no longer bound to using only the WordPress plugins. The stronger your HTML knowledge is, the more you can do.

Editing HTML With the Block Editor

Instead of editing the entire source code for a post, you can use the dedicated Custom HTML Block tool. Using this tool, you can easily paste in copied code or write the HTML code you want. This will keep things easy and prevent possible mistakes in a large chunk of code.

For beginners, it’s better to only change or add code to small blocks. To learn how to do this, follow these instructions:

1. Log in to the WordPress dashboard.
2. Choose the block you want to add the HTML code.
3. Click the “+” icon located below it.
4. In the pop-up window, pick “Custom HTML”
5. Locate the HTML code you’d like to add, select it, and add the code into the text window.

You’ll have the option to save it as a draft or publish it.

You can also convert an existing block by using the Edit as HTML. Follow the steps below to use this method:

1. Go to the WordPress dashboard.
2. Navigate to the post you’d like to modify.
3. Select the block you’d like to edit. A menu will appear above it.
4. Click on the three dots icon (also known as the kebab menu).
5. From the dropdown menu, tap “Edit as HTML”
6. Enter the HTML you’d like to add.
7. When you hit enter, you may see the “This block contains unexpected or invalid content.”
8. Tap the “Resolve” button. Your changes will be implemented in the block editor.

If your goal is to edit your entire post, you can use this method:

1. Open the WordPress dashboard.
2. Go to the post you’d like to modify.
3. In the top-right corner, select the three dots icon.
4. Using the dropdown menu, choose “Code Editor”

The entire post is now fully converted to HTML. You can now add, change, or modify the HTML code for the entire post. After making your modifications, don’t forget to save the file.

Editing HTML With the Classic Editor

Using the Block Editor isn’t the only way to edit HTML code. Another way to edit HTML in WordPress is to use the Classic Editor. This popular plugin makes it much easier to modify HTML code. To use this method, do the following:

1. Download and install the Classic Editor plugin.
2. Open your WordPress dashboard.
3. Navigate to the post or page you’d like to modify.
4. You’ll see two tabs in the upper-right corner, “Visual” and “Text”. Select “Text”

The entire page will convert to HTML. Here you can change, add, or modify the HTML code. Once you’ve made your changes, always remember to save the file.

Editing HTML Source Code

You can also modify WordPress HTML by editing the source code. This method is best used by those with a good grasp of HTML and shouldn’t be attempted by beginners. For a novice, it’s too easy to add unneeded characters, which would invalidate all existing code.

There are a few different methods to edit source code easily and safely. Continue reading to see which way is best for you.

To edit the source code using the Dashboard File Editor, follow these steps:

1. Go to your WordPress Dashboard; select “Appearance,” and then “Theme Editor.”
2. On the right side of your screen, you’ll see all the theme files.
3. In the top right corner, you can change the theme directory. But, first, select the theme you’d like.
4. Choose the file and folder you’d like to edit.

The most common files to edit are:

• index.php
• header.php
• footer.php

There are many files you can edit. For example, if you’d like to edit your theme’s header, choose “Header” from the right-side list. You’ll then see the HTML code for the header information in the large window. Here you can edit the HTML code to your liking. When completed, hit the “Update File” button in the bottom left corner.

Another method of editing the HTML source code is utilizing an FPT client. You’ll need to download and install the FileZilla app to use this method. To learn how to do this, do the following:

1. Download, install, and create a FileZilla account.
2. After you’ve generated your hostname, username, and password, connect to your server.
3. Using the FileZilla app, you’ll have numerous options to edit the HTML code on your WordPress website. For example, if you’d like to edit your theme files, follow these instructions:
4. In the “Remote Site” window, select “wp-content” and below that, tap “themes.”
5. Pick a theme you’d like to edit and tap it to open.
6. In the window below “Remote Site,” right-click the file you’d like to edit.
7. From the dropdown menu, click “View/Edit”
8. FileZilla will open a text editor window containing all the code for the file you’ve opened.
9. Make the changes you’d like to the code and select “File” and “Save”

Upgrade Your WordPress Website by Editing the Code

If you’re a designer looking to do more with your website than working with WordPress plugins, you can do so by editing the HTML code. You can do so using its built-in block editor or classic editor. Users with a stronger coding knowledge can dive in on a more technical level using the FileZilla app. By working directly with the source code, you’ll have greater control over the look and functionality of your site.