6 Ways to Upload HTML File to WordPress without Errors – PDA

Upload HTML file to WordPress is not a routine task for most WordPress users. Since WordPress lets you create content without modifying code, you don’t need to upload any custom HTML files.

However, while building and growing your WordPress site, sometimes you’ll need custom content. That’s where HTML files and pages come in handy. Importing them to your site will save you a huge time creating custom elements and configuring settings from scratch.

This article will discuss the issue and how to upload HTML files to WordPress in detail. Don’t miss out!

What is an HTML File?

HTML stands for Hypertext Markup Language, which is a language used to create and structure e-documents or web pages. In fact, most web pages you browse on the internet nowadays are written using HTML code.

HTML files are text-only documents. They contain the code responsible for making sure your site content and images are formatted and displayed properly. In other words, HTML helps web browsers understand how to visualize your site structure for visitors.

HTML creates the foundation for your web pages. You can generate HTML files yourself or take existing files, like Google Docs, and convert them into HTML. It’s possible to insert a little CSS code to add some custom design elements to the foundation. In this way, your website will appear perfect for site visitors.

What is an HTML Template?

An HTML template refers to a pre-designed HTML file that you can easily upload to your site and use. It includes text, images, font styles, and JavaScript.

For those who don’t have a coding base, it’s best to upload an already-made HTML template to WordPress. Thanks to HTML templates, you can develop appealing web pages without worrying about ruining your site’s structure.

There are several differences between HTML templates and WordPress themes that you should know before using them.

HTML Templates
WordPress Themes
Format
Standalone zip files.
Standalone zip files.

Impact on
The look and feel of a single web page on your website.
The look and feel of your entire website.

Why Should You Upload HTML Files to WordPress?

As mentioned above, WordPress enables you to build web pages without coding. However, there are several reasons why sometimes you need to use HTML files.

Time-Saving Method: You’ve already written a great HTML template for your old website. It will cost you time and effort to rebuild it from scratch for your new website. Hence, it’s recommended to reuse the existing template to save time while ensuring everything looks perfect.

In addition, this also eliminates the risk of human mistakes as you can upload the content altogether via HTML files.

Custom Layout: Another advantage of uploading an HTML file to WordPress is the highly-customizable layout. It allows you to customize your content to your liking outside your theme’s support. You can use a ready-made HTML file or write it yourself and simply upload it to your site.

Site Verification: Last but not least, uploading HTML files to WordPress can help you with website verification. For instance, you must upload an HTML verification file to your site to use the Google Search Console tool. This gives Google the ability to access and index your site properly.

How to Upload HTML Files to WordPress

You’ve learned everything about HTML files. Now, let’s take a look at how to upload HTML files to WordPress.

Read on!

#1 Import HTML Files Using the WordPress Admin Dashboard

The built-in WordPress dashboard allows you to upload HTML files directly through your posts, pages, or the media library. In case you’re using the Gutenberg editor, first you need to insert a File block. Then, select Upload to add the HTML files to WordPress.

Alternatively, the Gutenberg editor also provides you with a Custom HTML block. You can copy and paste the HTML code manually into this block. However, for large file uploads, it would be easier and more effective to use the File option.

If you’re using the classic editor, press the Add Media button in your posts, pages, or the media library. After that, click Upload to upload your HTML files.

Little Notice: Sometimes you may encounter an error when uploading HTML files to WordPress using the admin dashboard. The most common problem is “Sorry, This File Type Is Not Permitted for Security Reasons”.

This issue occurs because your WordPress site currently doesn’t support the .html file type. To allow unfiltered uploads in WordPress, check out our guide for more details.

#2 Upload HTML Files with an FTP Client

Using an FTP client to upload HTML files is helpful when you desire to work locally on a test site. It assists you test any changes you make before your website goes live. Also, this prevents unnecessary downtime if something slips.

In this section, we’ll walk you through how to upload HTML files to WordPress using FileZilla. To get started, follow the instruction below:

1. Back up your site.
2. Open FileZilla and select Quickconnect after you’ve entered your credentials.

3. Navigate to your website’s root folder.

4. Find and right-click the HTML file you want to upload from your computer. Then hit Upload to add it to your website.

Once you’ve successfully uploaded the file, check whether it shows up rightly on your website. To do that, type your website’s URL with the HTML file’s name at the end into your browser. For instance, www.pdagold.com/html-file. If it works, you’ll be redirected to the new web page you’ve built with the HTML file.

#3 Connect HTML Files to WordPress via cPanel

The last method we’re going to share with you is using the cPanel. First, log into your hosting account’s cPanel and choose the File Manager tool.

Now, you have 2 options:

• Upload the HTML file directly to your root folder.

• Create a new folder and upload the HTML file to it.

With the first technique, you have to unzip the HTML file where you have it saved. Then change the index.html folder to something new. Finally, rezip the file to continue uploading it to WordPress. The HTML template will override your site’s homepage if you don’t follow these steps strictly.

We highly recommend the second technique to make sure you don’t ruin your website:

1. Head over to your site’s public_html folder.

2. Select New Folder.

3. Give your new folder a name and click Create New Folder.

4. Double-click on the folder you’ve just created and select Upload to choose your HTML file.

5. Your zipped HTML file will appear in the folder. Simply unzip the HTML file by right-clicking and choosing Extract.

6. Select Extract Files to complete the file unzipping process.

7. Check if the file has been successfully uploaded as guided in method #2.

If you run into a 404 error, chances are that your server doesn’t support the index.php redirection. In this case, go back to the File Manager and access your .htaccess file. Then, insert the following code and save your changes:

RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

This code helps redirect your index.php file and load it in the browser. As a result, the 404 error will disappear.

#4 Apply an HTML to WordPress Converter Plugin

This method is suitable for beginners as it doesn’t require any coding skills. Your job is to activate the chosen plugin, and it will handle the rest for you.

Numerous plugins available let you upload and convert HTML to WordPress content without touching a piece of code. No more worry about coding. For your convenience, we’ve narrowed down the list to the 7 best plugins.

Let’s take a look at them!

Plugin Recommendations

Insert HTML Snippet: Convert HTML, CSS, and JavaScript codes to shortcodes and integrate your snippets into WordPress pages and widgets.

Simple Sitemap: Create a responsive HTML sitemap and preview it directly inside the editor without complicated shortcodes.

Raw HTML: Enable raw HTML or any other code in your posts and disable smart quotes and automatic formatting.

WP Code: Insert PHP code snippets, header and footer scripts, and ad pixel codes into WordPress with conditional logic.

WP Coder: Add custom CSS, HTML, and JavaScript to your web pages.

Allow HTML in Category Descriptions: Enable you to apply unfiltered HTML in your category descriptions by disabling selected WordPress filters.

Code Embed: Provide a simple, efficient way to embed code such as JavaScript and HTML in your posts and pages.

Plugin Instructions

In this tutorial, we’ll guide you on how to insert custom HTML codes and files using the WP Coder plugin.

Here’s how it works:

1. Install and activate the plugin.
2. In your WordPress admin dashboard, navigate to Wow Plugins → WP Coder.
3. To add a new HTML code, copy & paste it to the HTML Code section under the Add new tab.

Or, you can head over to the Include files menu. Copy & paste the URL of the HTML file you’ve uploaded to the media library into the URL to file box. Then, click Add New to finish.

4. Hit the Save button and copy the shortcode generated in the Publish section.

5. Paste the shortcode anywhere you want on your page and enjoy the results.

#5 Use Online Free Tool to Convert HTML to WordPress

To convert your HTML to WordPress using an online tool:

1. Go to the htmltowordpress website.
2. Upload your website’s HTML zip file to the box.

3. You’ll be able to preview your WordPress website. Press the Customize button on top of the page.

4. Modify the website to your liking.

5. Hit on Save & Publish to finish.

#6 Upload HTML File to WordPress for Google Verification

We’ll show you how to upload an HTML verification file to WordPress. Here’s the route:

1. Head over to Google Search Console and click Start now.
2. Enter the username and password for your Gmail account.
3. Verify your website using its Domain name or URL prefix. The Domain option only supports DNS verification. For HTML file uploads, please opt for the URL prefix. Enter your website’s URL and hit on Continue.

4. In the HTML file section, select the button that asks you to Download the file.

5. Once you’ve downloaded the HTML file to your local computer, upload the file to your WordPress website.

Protect HTML Files & Pages

There comes a time when protecting your HTML files is essential. For example, when you want only admins or specific user roles to access the files. In such a situation, PDA Gold will satisfy your needs.

The plugin enables you to protect the HTML files uploaded in a folder under your WordPress root directory. Once protected, unauthorized visitors will be redirected to an error page when attempting to access the files.

The coolest thing is that it lets you insert the protected HTML files into content using the iFrame tag. In this way, your visitors can view the HTML via iFrame but at the same time can’t access the files directly.

For detailed steps, check out our guide on how to protect WordPress HTML files displaying inside iFrame.

Make Full Use of Your HTML Files Now!

That’s all the things you should know about uploading HTML files to WordPress. To wrap up, HTML files come in handy when you need a custom page layout. It’s also a great option in case of migrating your old site to the new one.

The best part is that uploading and using HTML files in WordPress are not difficult tasks. With just a few simple steps, you can create beautiful web pages. So, don’t wait. Get started with your HTML files now!

For HTML editing in WordPress, you can refer to our article for more information.

Lastly, don’t forget to subscribe to our website to get more useful instructions!