Why upload HTML files to WordPress? If y'all're building or growing a WordPress website, importing HTML files and pages tin salve you pregnant time when setting up your website or when adding new, customized content. Sometimes you might want to build a custom HTML page or use pages from an older website 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 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 language," which is a language used to create and construction webpages. HTML files are text-just 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 example of what an HTML file could incorporate.

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

HTML files tin exist loaded on any type of web browser. This makes them more mobile-friendly, because they'll render properly regardless of the device or operating organization beingness used. If yous accept multiple people working on your website, or if y'all accept outsourced the chore to an external developer, HTML files are a great manner to distribute content before publishing it on your website.

But, this isn't the just benefit of using HTML files. When yous're working in WordPress, HTML files are great for creating customized content that may not be offered natively with your electric 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 organization. Which means, even if your site is hosted on WordPress, you don't have to create every single page inside the WordPress interface.

When it comes to creating webpages, WordPress has its benefits. Yous can create beautiful pages with pre-designed themes, and y'all can even install page builders like Elementor to create sales pages, landing pages, and product pages.

However, yous may want to store custom HTML files in your WordPress dashboard. Here are some of the reasons y'all'll desire 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 information technology on WordPress, you can save time by just uploading the page directly. This as well reduces the take chances of human error, because rather than manually copying and pasting code, you can simply upload the content birthday via an HTML file.

You want to customize your page beyond a bottled theme.

Another do good of uploading HTML files is that information technology allows y'all to customize your content outside of what your theme may let. For instance, let'southward say your old site used a template or page that you really liked, but it's non offered on WordPress. You lot tin can copy the HTML for that content, and then 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 accept a new, customized folio or feature at your disposal.

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

Lastly, one large benefit of uploading HTML to WordPress is that it helps you verify your site on Google Search Console. To utilize Google Search Console, yous starting time need 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'south search engine.

Ready to start uploading? Read on for a stride-by-pace 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 access the Visual Editor, commencement 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 it. That should load a new screen to the right, similar to the example below, where you lot see all the pages y'all've created.

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

3. Choose an existing folio or create a new one.

Now, you should take the option to either edit an existing folio or add a new one. To add a new page, merely click the push button adjacent to the "Pages" championship that sasys "Add together new."

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

4. Click 'Add Cake.'

In one case you've accessed the Visual Editor, click the option in the top left to "add block." This volition trigger a dropdown menu 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 top of the left-hand bill of fare, search for the term "File." And so, click on it to upload a new file.

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

Alternatively, you can besides search for "HTML." This block will allow you to input HTML, but you'll have to copy and paste it manually into a code block. This works if you lot're uploading short snippets of lawmaking, but it's more efficient to employ the media selection for larger uploads.

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

half dozen. Choose your HTML file.

In the module that appears, select the option to "upload." So, choose the HTML file that you wish to add to the mail. In one case your file is selected, it should exist automatically added to your mail.

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

How to Fix "File Blazon is Not Permitted for Security Reasons" Error

In some cases, you may encounter this error when trying to upload your HTML file to your blog mail or media library.

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

The easiest way to navigate this is to utilise an HTML cake instead. With an HTML block, you lot tin can re-create all of the code in your HTML file and paste it direct into your WordPress page — similar to the example below.

HTML file example WordPress

How to Add an HTML Page to WordPress

Let'southward 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

Epitome Source

Allow's take a await at the process of migrating this page to WordPress.

1. Shrink the HTML page into a Zilch folder.

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

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

2. Navigate to your WordPress website's cPanel.

Excellent! At present you have the HTML file you'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, some hosting providers volition drift your webpages for you for costless. Make sure to bank check with your hosting service.

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

In Bluehost, click "Avant-garde" on the sidebar, ringlet downwards to "Files," then click "File Managing director."

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

3. Enter your public_HTML folder inside your cPanel.

Your public_HTML folder will be found in the left sidebar. If you host several websites, you'll need to choose the website where yous want to drift 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 folder.

Click the "+Folder" button at the top of the screen to create a new folder. Now, proper noun your new binder and and so click Create New Folder. (This binder name will be a part of your HTML page's 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 information technology. And so, click on the Upload button at the top of the screen. At that place should be an option Select File and you tin choose the zipped HTML file you want to add together.

half-dozen. Excerpt the files.

In one case uploaded, your zipped HTML file is now in the folder. Select the file and click Extract at the top-right corner of the screen. Now, click Extract files.

upload an html file to wordpress: extract files

vii. Preview your page.

You'll now see an pick called Extraction Results. Click Close. Then, click Reload in the middle of the screen. You'll meet the unzipped HTML file in the folder. (If you like, delete the ZIP file. It won't bear upon your extracted HTML page or whatsoever other folders.)

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

And you're washed! Yous at present 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 be the way to become — especially if you want to create a highly customized site that y'all can't build with a theme. It'south too a great choice for y'all if yous want to migrate your onetime site to the WordPress platform. The best role is that it's easy — simply make sure to bookmark this guide, so yous 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