Why upload HTML files to WordPress? If you're edifice or growing a WordPress website, importing HTML files and pages can save yous significant fourth dimension when setting upwards your website or when calculation new, customized content. Sometimes yous might want to build a custom HTML page or utilize pages from an older website and and so add them to WordPress.

In this post, we'll prove 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 embrace:

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

What is an HTML file?

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

Below is an example of what an HTML file could comprise.

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

HTML files can be loaded on any blazon of web browser. This makes them more 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 have outsourced the job to an external developer, HTML files are a great way to distribute content before publishing it on your website.

But, this isn't the only do good of using HTML files. When you're working in WordPress, HTML files are keen 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 edifice your site on WordPress.

Why Upload HTML Files to WordPress

WordPress isn't but a website builder, it'due south a content management system. Which ways, 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 cute pages with pre-designed themes, and yous can even install page builders similar Elementor to create sales pages, landing pages, and product pages.

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

Yous don't desire to rebuild pages from scratch.

You might have an existing HTML page that converts well, and rather than rebuilding it on WordPress, y'all tin can relieve fourth dimension past only uploading the page directly. This also reduces the risk of human error, because rather than manually copying and pasting code, you can but upload the content birthday via an HTML file.

You want to customize your page beyond a bottled theme.

Another benefit of uploading HTML files is that it allows y'all to customize your content exterior of what your theme may allow. For instance, let'southward say your old site used a template or page that you really liked, but information technology's non offered on WordPress. You tin copy the HTML for that content, and and then upload it to your WordPress site.

Or, you can recreate the content from scratch and write the HTML yourself. One time consummate, upload your HTML file to WordPress, and presto! You now have a new, customized page or feature at your disposal.

It's easier to verify your website with services such equally Google Search Console.

Lastly, one big benefit of uploading HTML to WordPress is that information technology helps yous verify your site on Google Search Console. To use Google Search Console, yous first 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'south search engine.

Fix to beginning uploading? Read on for a stride-by-footstep guide to uploading HTML files to WordPress.

1. Navigate to your Admin Dashboard.

You tin can use the WordPress Visual Editor to rapidly add together HTML files to your website. To access the Visual Editor, start go to your admin dashboard.

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

2. Click 'Pages' in the left sidebar.

Next, wait at the left-paw sidebar. In that location should exist an option labeled "Pages." Click it. That should load a new screen to the correct, like to the example below, where you encounter all the pages you've created.

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

three. Cull an existing page or create a new 1.

Now, you should have the option to either edit an existing page or add a new one. To add a new page, just click the button next to the "Pages" title that sasys "Add new."

upload an html file to wordpress: add pages buttonIf you would like to edit an existing postal service, click on the postal service name itself, and you'll immediately load the editor. The Visual Editor should open by default, but if yous're also using a page builder such as Elementor, you'll want to hover over the page'due south name and click "Edit," instead of "Edit with Elementor."

iv. Click 'Add Cake.'

Once you've accessed the Visual Editor, click the selection in the top left to "add block." This will trigger a dropdown bill of fare on the left-hand side of the screen.

upload an html file to wordpress: Add block WordPress

v. Add a 'File' block.

Using the search bar at the superlative of the left-manus 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, you lot can also search for "HTML." This cake will permit y'all to input HTML, merely you'll have to copy and paste it manually into a lawmaking block. This works if you're uploading short snippets of lawmaking, but it's more efficient to use the media choice 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 option to "upload." So, cull the HTML file that you wish to add to the postal service. In one case your file is selected, it should be automatically added to your post.

You can also add together the file to your media library. This will allow you to reuse the HTML file in other web log posts.

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

In some cases, you lot may encounter this mistake when trying to upload your HTML file to your weblog post or media library.

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

The easiest way to navigate this is to use an HTML block instead. With an HTML cake, you tin can copy all of the lawmaking in your HTML file and paste it directly into your WordPress folio — similar to the example below.

HTML file example WordPress

How to Add an HTML Folio to WordPress

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

Lonez Scents about page

Paradigm Source

Let's take a look at the process of migrating this page to WordPress.

i. Compress the HTML page into a Zippo folder.

Export the webpage from your electric 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's cPanel.

Excellent! At present you take the HTML file you lot'll be migrating to your WordPress website.

Next, it'south time to admission your cPanel, where your website's database is located. You get these logins from your hosting provider.

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

To navigate to the cPanel, login to your hosting provider'due south website and find out where they keep the link to your cPanel.

In Bluehost, click "Avant-garde" on the sidebar, scroll down to "Files," then click "File Manager."

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

3. Enter your public_HTML binder within your cPanel.

Your public_HTML binder volition be establish in the left sidebar. If you host several websites, you'll demand to cull the website where you want to migrate the folio to.

upload an html file to wordpress: public_html folder inside cpanel

4. Add together a new folder to your website's public_HTML folder.

Click the "+Folder" button at the top of the screen to create a new binder. At present, name your new folder and then click Create New Folder. (This folder name volition be a part of your HTML page'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 it. So, click on the Upload button at the top of the screen. There should exist an option Select File and y'all can choose the zipped HTML file y'all want to add.

6. Extract the files.

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

upload an html file to wordpress: extract files

7. Preview your folio.

You lot'll now see an option called Extraction Results. Click Shut. Then, click Reload in the middle of the screen. You'll see the unzipped HTML file in the folder. (If y'all like, delete the Nil file. It won't touch your extracted HTML page or any other folders.)

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

And you lot'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 simply exist the style to go — especially if you want to create a highly customized site that you can't build with a theme. It's also a not bad option for you lot if you lot desire to migrate your old site to the WordPress platform. The best part is that it's like shooting fish in a barrel — but make sure to bookmark this guide, then you never become 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 7:00:00 AM, updated Oct 25 2021