Why upload HTML files to WordPress? If you're building or growing a WordPress website, importing HTML files and pages tin save you significant time when setting up your website or when adding new, customized content. Sometimes you lot might want to build a custom HTML page or employ pages from an older website and and so add them to WordPress.

In this post, we'll show you how to add your HTML files and pages to your WordPress site.

Grow Your Business With HubSpot's Tools for WordPress Websites

We'll comprehend:

  • 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 language," which is a linguistic communication 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 can be created from scratch, or y'all can take existing files — like Google Docs — and convert them into HTML.

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

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

HTML files can be loaded on any type of web browser. This makes them more mobile-friendly, considering they'll render properly regardless of the device or operating system beingness 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 mode to distribute content earlier publishing it on your website.

Merely, this isn't the only benefit 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 additional reasons to upload HTML files and webpages when edifice your site on WordPress.

Why Upload HTML Files to WordPress

WordPress isn't just a website architect, it's a content direction system. Which means, fifty-fifty if your site is hosted on WordPress, yous don't have to create every unmarried page within the WordPress interface.

When information technology comes to creating webpages, WordPress has its benefits. You can create beautiful pages with pre-designed themes, and y'all tin can fifty-fifty install folio builders like Elementor to create sales pages, landing pages, and production pages.

However, y'all 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 lot might have an existing HTML page that converts well, and rather than rebuilding it on WordPress, you can save time by simply uploading the page directly. This also reduces the take chances of human being error, because rather than manually copying and pasting code, you can simply upload the content altogether via an HTML file.

Y'all desire to customize your page beyond a bottled theme.

Another benefit of uploading HTML files is that it allows you to customize your content exterior of what your theme may allow. For instance, permit's say your sometime site used a template or page that you really liked, only it's not offered on WordPress. You lot can copy the HTML for that content, and so upload it to your WordPress site.

Or, you can recreate the content from scratch and write the HTML yourself. Once complete, 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 as Google Search Console.

Lastly, one big benefit of uploading HTML to WordPress is that it helps you lot verify your site on Google Search Console. To use Google Search Panel, you 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 past Google's search engine.

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

1. Navigate to your Admin Dashboard.

You can use the WordPress Visual Editor to quickly add together HTML files to your website. To admission the Visual Editor, showtime get 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-manus sidebar. There should exist an selection labeled "Pages." Click information technology. That should load a new screen to the correct, similar to the example beneath, where you see all the pages yous've created.

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

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

At present, you should accept the pick to either edit an existing page or add a new 1. To add a new folio, but 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 post, click on the mail service proper noun itself, and you'll immediately load the editor. The Visual Editor should open up past default, but if you're likewise using a page builder such as Elementor, you'll desire to hover over the page'south proper name and click "Edit," instead of "Edit with Elementor."

4. Click 'Add Cake.'

One time you've accessed the Visual Editor, click the option in the top left to "add together block." This volition trigger a dropdown carte on the left-hand side of the screen.

upload an html file to wordpress: Add block WordPress

5. Add together a 'File' block.

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

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

Alternatively, you can likewise search for "HTML." This block volition let you to input HTML, but yous'll accept to copy and paste it manually into a lawmaking block. This works if you're uploading curt snippets of code, but it'south more than efficient to employ the media pick for larger uploads.

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

6. Cull your HTML file.

In the module that appears, select the selection to "upload." And then, choose the HTML file that you wish to add to the post. Once your file is selected, it should be automatically added to your postal service.

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

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

In some cases, yous may run into this error when trying to upload your HTML file to your blog postal service 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 cake instead. With an HTML block, you can copy all of the code in your HTML file and paste it directly into your WordPress page — similar to the example beneath.

HTML file example WordPress

How to Add an HTML Folio to WordPress

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

Lonez Scents about page

Prototype Source

Permit's take a look at the process of migrating this folio to WordPress.

1. Compress the HTML folio into a ZIP folder.

Consign the webpage from your electric current CMS. You don't demand to bear upon any of these files, unless you want to customize them before uploading them to WordPress.

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

ii. Navigate to your WordPress website's cPanel.

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

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

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

To navigate to the cPanel, login to your hosting provider's website and observe out where they continue 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 inside your cPanel.

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

upload an html file to wordpress: public_html folder inside cpanel

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

Click the "+Binder" button at the tiptop of the screen to create a new folder. At present, name your new folder and then click Create New Folder. (This folder name will be a part of your HTML page'southward URL.)

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

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

Once the folder is created, click on it. And so, click on the Upload button at the superlative of the screen. There should be an option Select File and yous tin choose the zipped HTML file you want to add.

6. Excerpt the files.

One time uploaded, your zipped HTML file is now in the folder. Select the file and click Extract at the acme-correct corner of the screen. At present, click Extract files.

upload an html file to wordpress: extract files

7. Preview your page.

You'll at present see an option called Extraction Results. Click Close. Then, click Reload in the heart of the screen. You lot'll see the unzipped HTML file in the folder. (If you lot like, delete the Goose egg file. It won't touch your extracted HTML page or any other folders.)

Finally, you can preview the folio 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 become — especially if you desire to create a highly customized site that you tin't build with a theme. It'due south also a great option for you lot if you want to drift your old site to the WordPress platform. The best part is that it's piece of cake — but brand certain to bookmark this guide, and so you never become lost during the procedure.

Editor's annotation: 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 October 25 2021