how to upload an html file to wordpress

With the introduction of the Block Editor and Site Editor, WordPress design has become increasingly simplified. However, there are still some special circumstances that may require you to know how to upload an HTML file to WordPress.

For example, you might need to transfer custom designs to your site. The good news is that this is pretty straightforward. In fact, there are multiple ways you can do it.

In this post, we’ll explain why you may want to ⏩ upload an HTML file to WordPress. Then, we’ll show you ⏩ two ways you can do this. Let’s dive right in!

Why you may want to upload an HTML file to WordPress

WordPress is highly accessible and user-friendly. As the content management system (CMS) evolves, developers are constantly looking for ways to honor their mission to democratize publishing.

In fact, the WordPress community has been moving away from complex coding solutions toward more intuitive systems like page builders. It’s clear that drag-and-drop editing and block-based design principles are here to stay.

So, you might be wondering – why would you want to upload an HTML file to WordPress?

The truth is, in most cases, this probably isn’t the best idea. It may be easier to redo whatever element or content is in that HTML file, using the WordPress Block Editor or a page builder like Elementor.

Still, there are some circumstances in which you might need to know how to upload an HTML file in WordPress. Here are a few of them:

  • Importing preexisting designs. 📥 On occasion, it might be easier to import a preexisting design using an HTML file. This is especially true if you are transferring your website from a different CMS or website builder.
  • Creating custom layouts outside your theme. 🎨 All WordPress themes are highly customizable. They usually give you the flexibility you need to create custom layouts that are unique to your brand and vision. Still, you might need to create some designs outside your theme’s framework, and then import them to your site.
  • Verifying your website with Google Search Console. 🔎 If you want to set up your website with Google Search Console, you’ll need to verify that you’re its owner. One way you can do this is by uploading an HTML file to your site.

To sum it up, uploading HTML files isn’t something that you’ll need to do frequently in WordPress. However, it’s good that you learn how to do it, just in case you find yourself in any of the above scenarios.

How to upload an HTML file to WordPress

Now that you know why you may want to upload an HTML file to WordPress, we’re going to show you two ways you can do this:

  1. The native WordPress Block Editor.
  2. SFTP to upload the file directly to your server.

Let’s get started!

1. Using the Block Editor

The first way you can upload an HTML file to WordPress is by using the Block Editor. This method can be particularly useful if you want to import a specific design element or custom layout.

There are two ways that you can upload an HTML file to the Block Editor:

  1. You can upload the actual file itself. This would let other users download the HTML file.
  2. You can add the HTML from the file to the editor to show that design. This is helpful if you want to display the actual HTML design on the page, rather than just a link to the file.

To begin, navigate to your WordPress dashboard and open the page or post where you’d like to add the file:

The WordPress Block Editor

Click on the plus symbol (+) in the upper left-hand corner of your screen to open your blocks menu:

WordPress Blocks

Next, type “file” into the search field to find the File block and click on it to insert it in your page or post:

The WordPress File Block

Then, upload your HTML file to the block. After that, you can make any additional modifications to your page or post and hit Publish to make these changes live.

Alternatively, you can use the Custom HTML block.

Return to your blocks menu and type in “html” in the search field to look for this element:

WordPress Custom HTML Block

If you choose this option, you’ll need to copy the HTML directly from your file, then paste it into the box that says Write HTML.

However, you may run into some issues when using this approach. Therefore, we’re going to show you another method for how to upload an HTML file.

2. With an FTP client

Using the Block Editor is the easiest way to upload an HTML file to WordPress. However, in case this method isn’t working for you, you can also upload the file manually. That said, this method is likely only useful if you want to add an entire page to your website.

You’ll need to use a file manager like cPanel or a File Transfer Protocol (FTP) client. In this walkthrough, we’ll be using the latter.

If you’re not familiar with the process, accessing and modifying your site files can be a little tricky, and a small mistake could damage your site. Therefore, before you get started, you’ll want to back up your site.

If you want more detailed instructions, we also have a full guide on using FTP to connect to WordPress.

To start, 🏁 you’ll need to download an FTP client such as FileZilla.

Once the download is complete, you can open the program and connect to your website:

FileZilla Quickconnect

This will require some basic information, including your server and user details. You’ll need to fill in fields for Host, Username, Password, and Port. Then, click on Quickconnect.

We also recommend that you change the protocol from FTP to SFTP before proceeding. To do this, click on the Site Manager icon in the far left corner of the horizontal menu:

FileZilla Site Manager icon

This will open the General settings where you can make this modification:

Change FTP to SFTP in FileZilla

Using the SFTP option will make the process more secure.

Now, you should be able to see two panels on the screen: the left one contains the files and folders on your local device and the right one contains your site’s files.

In the right-hand panel, you’ll need to find your root directory, which is typically a folder labeled public:

Access the WordPress root directory in FileZilla and upload your desired html file to WordPress.

Now, locate the HTML file that you want to upload in your left-hand panel (i.e., your computer). Then, add the file to your site’s root folder and you’re done!

Conclusion 🧐

As WordPress design moves toward full site editing and block-based themes, WordPress sites will rely less and less on direct knowledge of HTML and CSS.

Even if you’re a novice in web design, you can easily replicate custom layouts with the Block Editor or the page builder of your choice. Still, there are a few circumstances in which you may need to know how to upload an HTML file.

👉 To recap:

  1. Use the File or Custom HTML block within the Block Editor. #️⃣
  2. Add the file to your site’s root folder by using an FTP client like FileZilla. 📡

Do you have any questions about how to upload an HTML file to WordPress? Let us know in the comments section below!

Yay! 🎉 You made it to the end of the article!

Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!