Why upload HTML files to WordPress? If y'all're edifice or growing a WordPress website, importing HTML files and pages tin salvage you significant time when setting upwards your website or when adding new, customized content. Sometimes yous might want to build a custom HTML page or utilize pages from an older website and then add them to WordPress.

In this post, nosotros'll testify y'all how to add your HTML files and pages to your WordPress site.

Grow Your Business With HubSpot's Tools for WordPress Websites

We'll cover:

  • What is an HTML file?
  • Why Upload HTML Files to WordPress
  • How to Upload an HTML File to WordPress
  • How to Add an HTML Page to WordPress

What is an HTML file?

HTML stands for "hypertext markup linguistic communication," which is a linguistic communication used to create and construction webpages. HTML files are text-only documents, and they contain highly interactive content that's designed to be viewed on a web browser. HTML files can be created from scratch, or you tin can take existing files — like Google Docs — and convert them into HTML.

Below is an case of what an HTML file could contain.

See the Pen HTML File Example by HubSpot (@hubspot) on CodePen.

HTML files can exist loaded on any type of web browser. This makes them more than mobile-friendly, because they'll render properly regardless of the device or operating system being used. If you have multiple people working on your website, or if you lot have outsourced the task to an external developer, HTML files are a great style to distribute content before publishing information technology on your website.

But, this isn't the but benefit of using HTML files. When yous're working in WordPress, HTML files are cracking for creating customized content that may not be offered natively with your current WordPress theme.

Read on for some boosted reasons to upload HTML files and webpages when building your site on WordPress.

Why Upload HTML Files to WordPress

WordPress isn't just a website builder, it's a content management system. Which means, even if your site is hosted on WordPress, you don't have to create every single page within the WordPress interface.

When it comes to creating webpages, WordPress has its benefits. You can create beautiful pages with pre-designed themes, and you lot tin can even install page builders like Elementor to create sales pages, landing pages, and production pages.

Yet, you may want to store custom HTML files in your WordPress dashboard. Here are some of the reasons you'll want to.

You don't want to rebuild pages from scratch.

You might have an existing HTML page that converts well, and rather than rebuilding it on WordPress, you can relieve time past but uploading the page directly. This as well reduces the take chances of man fault, because rather than manually copying and pasting code, you can simply upload the content birthday via an HTML file.

You lot want to customize your page across a bottled theme.

Another do good of uploading HTML files is that information technology allows you to customize your content outside of what your theme may allow. For instance, let'southward say your sometime site used a template or page that you really liked, merely it'due south not offered on WordPress. You can re-create the HTML for that content, and then upload information technology to your WordPress site.

Or, y'all tin can recreate the content from scratch and write the HTML yourself. In one case consummate, upload your HTML file to WordPress, and presto! You at present have a new, customized folio or feature at your disposal.

It'south easier to verify your website with services such as Google Search Console.

Lastly, one big benefit of uploading HTML to WordPress is that it helps you verify your site on Google Search Panel. To use Google Search Panel, you outset demand to verify your website, which involves uploading a special HTML file to WordPress. This gives Google access to your data and ensures your site is indexed properly by Google's search engine.

Set to commencement uploading? Read on for a step-by-stride guide to uploading HTML files to WordPress.

1. Navigate to your Admin Dashboard.

You can utilise the WordPress Visual Editor to rapidly add HTML files to your website. To access the Visual Editor, first go to your admin dashboard.

upload an html file to wordpress: navigate to your admin dashboard

2. Click 'Pages' in the left sidebar.

Next, look at the left-hand sidebar. There should be an selection labeled "Pages." Click it. That should load a new screen to the right, like to the example below, where you see all the pages y'all've created.

upload an html file to wordpress: click pages in the left sidebar

three. Choose an existing page or create a new one.

Now, yous should accept the option to either edit an existing page or add a new 1. To add a new folio, merely click the button next to the "Pages" title that sasys "Add new."

upload an html file to wordpress: add pages buttonIf you would similar to edit an existing postal service, click on the post name itself, and y'all'll immediately load the editor. The Visual Editor should open past default, merely if you're as well using a page builder such every bit Elementor, y'all'll want to hover over the page's name and click "Edit," instead of "Edit with Elementor."

4. Click 'Add together Block.'

In one case yous've accessed the Visual Editor, click the option in the top left to "add block." This will trigger a dropdown menu on the left-hand side of the screen.

upload an html file to wordpress: Add block WordPress

5. Add a 'File' block.

Using the search bar at the top of the left-hand menu, search for the term "File." Then, click on it to upload a new file.

upload an html file to wordpress: add file block in visual editor

Alternatively, yous can also search for "HTML." This block will allow you to input HTML, but y'all'll have to copy and paste information technology manually into a code cake. This works if you're uploading brusk snippets of code, but it'due south more than efficient to employ the media pick for larger uploads.

upload an html file to wordpress: Adding an HMTL Block Wordpress

6. Choose your HTML file.

In the module that appears, select the choice to "upload." Then, choose the HTML file that you wish to add together to the postal service. In one case your file is selected, it should exist automatically added to your post.

You can also add the file to your media library. This volition allow you to reuse the HTML file in other blog posts.

How to Ready "File Type is Not Permitted for Security Reasons" Error

In some cases, yous may encounter this error when trying to upload your HTML file to your weblog postal service or media library.

upload an html file to wordpress: file type not permitted error

The easiest manner to navigate this is to use an HTML block instead. With an HTML block, you tin can re-create all of the code in your HTML file and paste it direct into your WordPress page — similar to the instance beneath.

HTML file example WordPress

How to Add together an HTML Page to WordPress

Permit's say we were the proud designers of the site, Lonéz Scents, and we wanted to migrate this page to WordPress.

Lonez Scents about page

Image Source

Let's take a expect at the process of migrating this folio to WordPress.

1. Compress the HTML folio into a ZIP binder.

Export the webpage from your current CMS. You lot don't need to touch any of these files, unless yous want to customize them before uploading them to WordPress.

Brand certain this HTML file is compressed into a ZIP folder.

2. Navigate to your WordPress website'southward cPanel.

Excellent! Now you lot have the HTML file you lot'll be migrating to your WordPress website.

Next, it's fourth dimension to access your cPanel, where your website'south database is located. You lot get these logins from your hosting provider.

Pro Tip: If y'all'd rather someone else do the heavy lifting for you lot, some hosting providers will drift your webpages for you for free. Make sure to check with your hosting service.

To navigate to the cPanel, login to your hosting provider's website and observe out where they keep the link to your cPanel.

In Bluehost, click "Advanced" on the sidebar, roll down to "Files," then click "File Managing director."

upload an html file to wordpress: file manager inside the hosting website

iii. Enter your public_HTML folder inside your cPanel.

Your public_HTML folder volition exist found in the left sidebar. If you host several websites, you'll need to choose the website where you lot want to migrate the page to.

upload an html file to wordpress: public_html folder inside cpanel

four. Add a new binder to your website's public_HTML folder.

Click the "+Folder" button at the top of the screen to create a new folder. Now, proper noun your new folder and so click Create New Folder. (This folder name will be a part of your HTML folio's URL.)

upload an html file to wordpress: create new folder inside cpanel

v. Upload the zipped HTML file to the new folder.

One time the folder is created, click on information technology. Then, click on the Upload button at the peak of the screen. There should be an option Select File and you lot can choose the zipped HTML file yous want to add together.

half-dozen. Extract the files.

Once uploaded, your zipped HTML file is now in the folder. Select the file and click Extract at the summit-correct corner of the screen. Now, click Excerpt files.

upload an html file to wordpress: extract files

7. Preview your page.

Y'all'll at present see an selection called Extraction Results. Click Close. Then, click Reload in the eye of the screen. Yous'll see the unzipped HTML file in the folder. (If you lot like, delete the Null file. Information technology won't touch your extracted HTML page or any other folders.)

Finally, you can preview the page by visiting yourdomain.com/FolderName/HTMLFileName.html.

And you're done! You now know how to upload HTML files to your WordPress website.

Upload HTML Files to WordPress to Build Your Site

Uploading HTML files to WordPress may just exist the way to go — especially if you lot desire to create a highly customized site that you can't build with a theme. It's too a great option for you if yous want to migrate your old site to the WordPress platform. The best role is that it's piece of cake — merely make sure to bookmark this guide, so you never get lost during the process.

Editor's note: This post was originally published in July 2019 and has been updated for comprehensiveness.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Oct 25, 2021 seven:00:00 AM, updated Oct 25 2021