Do you want to customize your site? If you’re looking for ways to personalize your website and its design, you’ve come to the right place. In this guide, we’ll show you different beginner-friendly methods to edit HTML files in WordPress without hiring a freelancer.

Why Edit HTML Code in WordPress?

Even though WordPress is a ready-to-use CMS that requires no coding experience and offers thousands of themes and plugins to customize your site, learning to edit the HTML will give you a lot of flexibility.

By customizing HTML code, you will gain more control over your site and you will be able to perform advanced design customizations, add custom functionalities or effects to your theme. Additionally, you’ll be able to troubleshoot issues when you don’t have access to your admin dashboard.

Some of the main things you can do by customizing the HTML code are:

• Include text, images, and videos
• Add functionalities or features
• Have more control over your WordPress site
• Troubleshoot issues when you don’t have access to your WordPress admin dashboard

All in all, if you learn how to edit the HTML code in WordPress, you’ll have more options to customize your site and you’ll be able to take it to the next level.

When Shouldn’t you Edit HTML?

As you probably know, WordPress uses four main languages: HTML, CSS, PHP, and JavaScript. This means that to make some changes you’ll need to know more than just HTML. That’s why there are some cases in which customizing the HTML code isn’t a good idea.

HTML is used for structuring web pages, so if you need to change the design of your site and edit things like colors, fonts, line-heights, and similar, you can simply customize the CSS code. Additionally, you shouldn’t edit HTML when you’re trying to control the layout of multiple pages at the same time.

On top of that, we don’t recommend customizing code in a live environment. A single comma or apostrophe in the wrong place can cause significant issues to your site so it’s a much better idea to test everything in a staging environment.

How to Edit HTML in WordPress

In this guide, we’ll show you different ways to customize the HTML code in WordPress:

1. WordPress Classic Editor
2. WordPress Block Editor
3. Edit the HTML source code
4. With plugins
5. Widgets

Let’s have a look at each of them so you can choose the one that’s best for you.

Before You Start…

Before moving forward, we highly recommend you create a child theme. If you don’t know how to do it, check out this step-by-step guide or use any of these plugins. This is important because if you modify the parent theme files, you’ll lose all your customizations every time you update your theme.

Additionally, make sure you create a full backup of your site and store it in a secure location. This way you can always go back to it and restore your site if something goes wrong.

1) WordPress Classic Editor

Classic Editor is the popular content editor for WordPress. This plugin allows you to easily edit the HTML files on your site.

First, install and activate the Classic Editor plugin on your site. Then, open any post or page and you will see two modes: Visual and Text.

Visual shows what you see in the frontend. You’ll see the different heading sizes, images, bold text, and so on.

When you use the Text editor, on the other hand, you see the HTML version of the post, so you can edit the HTML code from here.

The good thing is that you can switch to the Visual mode to see how your changes will look on the frontend without having to publish anything.

Once you add or customize the HTML code, simply update or publish the post and that’s it!

2) WordPress Block Editor

The latest WordPress version comes with a new editor called Gutenberg. It’s an advanced content editor that comes with more features. If you are using Gutenberg, you can also edit the HTML code just like we did before.

To add a custom HTML section inside your posts or pages, use the HTML block and add the HTML code to it. Then update the post and you’re good to go.

Sometimes, you need to edit your existing paragraphs or images and add extra styling. To edit existing HTML code in WordPress using Gutenberg, select the element you want to customize, and press More Options.

After that, select the Edit As HTML option.

You’ll see the HTML mode of the element and you can customize it.

Once you’re happy with the changes, you can easily switch back to the visual editor by hitting Edit visually.

As you can see, adding or editing existing HTML code using Gutenberg is quick and easy. Before publishing, always check the preview to make sure that everything looks good.

3) Edit the HTML Source Code in WordPress

Another alternative is to edit the HTML source code in WordPress. This process is riskier than the previous ones because you can break your site if you don’t know what you’re doing. Let’s see how you can customize the HTML source code using four different methods.

1. Dashboard File Editor
2. FTP

3.1) Dashboard File Editor

This is the most straightforward method for editing source code without visiting any other website or relying on any additional tools.

In your WordPress dashboard, go to Appearance > Theme Editor.

On the right-hand side, you will see all the theme files.

On the top right corner, you also have the option to change your theme directory.

In our case, we’re using the Twenty Twenty theme. After selecting the right theme, choose the appropriate folder and file you want to edit.

Some of the most common files that you may want to edit are:

• index.php
• header.php
• footer.php
• functions.php
• style.css

Let’s say you want to edit your theme’s header, so choose the header.php file from the list.

Usually, .php files contain PHP but also other languages such as HTML, JavaScript (sometimes), and CSS (in some cases). So you can edit the HTML files from there. As mentioned above, a single comma or apostrophe can break your website so proceed with caution.

3.2) FTP

If you prefer a more technical method, you can customize the HTML code with an FTP client. For this, you can use FileZilla, one of the best, secure, and user-friendly FTP clients out there.

First, download FileZilla and create an account. Most WordPress hosting companies will give you free FTP account access through the cPanel. Once you have generated your hostname, username, and password, connect to your server.

If you want to edit your theme files, go to wp-content > themes folder.

As you can see in the screenshot above, we have four themes on our site: GeneratePress, Twenty Nineteen, Twenty Twenty, and Twenty Twenty One.

Let’s say we want to edit the GeneratePress files, so we open the theme folder. 

To edit a file, right-click on it and select the View/Edit option. For example, to edit the footer, you need to edit the footer.php file.

FileZilla will open the file on a text editor as shown below.

After that, you can make changes, save the file and upload it back to the server. 

3.3) cPanel

Most hosting companies offer cPanel (Control Panel) access to their clients so it’s another excellent way to edit your HTML code in WordPress. 

To do this, log in to your web hosting account and access the cPanel. Then, open the file manager.

After that, go to wp-content > themes.

Open the theme you want to customize and then right-click on the file you want to change and press Edit.

This will open the file in a text editor where you can customize it. After making the changes, don’t forget to save the file. 

4) Plugins

Another way to edit HTML code in WordPress is by using plugins. WP File Manager is an excellent free tool that brings the FTP feature to your dashboard. Let’s see how to use it.

First, log in to your WordPress site and go to Plugins > Add new. Search for File Manager, install it, and activate it.

After that, select the WP File Manager option from the sidebar.

Now, open the wp-content directory.

Then, open the themes folder and select the folder you want to modify. In our case, we will edit the Astra theme files.

After opening the folder, you will see all the available files. Once you find the one you want to edit, right-click on it and select the Code Editor option.

Like most FTP programs, this plugin doesn’t require you to have text editor software installed on your laptop. If that’s your case, the plugin will open the file on a web-based text editor from where you can edit the code.

Once you are done modifying the file, save it, and that’s it.

5) Widgets

Now let’s see how to add HTML code to the widget area. 

First, go to Appearance > Widgets.

There, you will see all the widget areas.

Now add an HTML widget to any widget area. For this tutorial, we’ll choose the sidebar.

You can add a title to the code and include your custom HTML code there.

Once you have added the code, save the widget and you’re good to go.

Bonus: Editing CSS and PHP In WordPress

WordPress uses four main languages:

• PHP
• HTML
• CSS
• JavaScript

So far, you have learned how to edit the HTML code in WordPress. In this section, we will show you how you can customize your site’s CSS and PHP code and add custom scripts.

Editing and Adding CSS Code

Apart from the methods we mentioned above, you can use the WordPress customizer to add custom CSS code to your site. For that, in your WordPress dashboard, go Appearance > Customize.

Once you’re in the customizer, go to Additional CSS.

There you can simply enter your CSS code.

The best part is that you can see all the changes in the live-preview mode.

Once you are happy with the changes, update/publish the post or page.

This is one of the easiest ways to add CSS code to your website. Keep in mind that this code will be layered on top of our theme’s style.css file.

NOTE: Some WordPress themes such as Divi, or Avada come with an in-built feature to add CSS code, so you can use the theme panel to include your CSS code instead of using the customizer.

Editing/Adding PHP Code

PHP is the core language in WordPress. Similar to editing HTML, customizing existing PHP code is easy. You can do that using the theme editor or any method described above. In this section, we’ll show you how to add PHP snippets using a plugin called Code Snippets.

First, install and activate Code Snippets on your site.

After that, go to the plugins’ settings and click Add New to include a new snippet to your site.

Give your snippet a name to remember what you’re adding, paste your PHP code, and save the snippet.

For this tutorial, we’ve taken a simple snippet to add custom image sizes to our site. After that hit Save and you’re done!

This way, you can add unlimited PHP code to your WordPress site and customize it as much as you want.

Conclusion

All in all, customizing the HTML code can help you have more control over your site as well as adding functionalities and troubleshooting issues. The best part is that in WordPress, you can easily edit HTML code and personalize your site.

In this guide, we’ve seen different ways to do it:

1. With the WordPress Classic Editor
2. Using the Block Editor
3. Edit the HTML source code
4. Using plugins
5. Add HTML to widgets

The simplest way to customize HTML code is through the WordPress theme editor. If you’re looking for a more advanced solution, you may want to edit the HTML source code using an FTP client like FileZilla. If you don’t want to install any software on your computer you can use the cPanel method.

On the other hand, if you prefer plugins, you can use WP File Manager to include or edit HTML code without relying on any other FTP software or text editors.

Finally, you can also include and edit CSS or PHP using both the WordPress Customizer or the Code Snippets plugin.

We hope this article was helpful and helped you customize your site. Do you know of any other ways to edit HTML files in WordPress? Which one do you use? Let us know in the comments section below!