Why upload HTML files to WordPress? If you're building or growing a WordPress website, importing HTML files and pages can save you lot significant time when setting up your website or when adding new, customized content. Sometimes you 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 together 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 together an HTML Page to WordPress

What is an HTML file?

HTML stands for "hypertext markup linguistic communication," which is a language used to create and structure webpages. HTML files are text-simply 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 y'all can take existing files — like Google Docs — and convert them into HTML.

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

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

HTML files tin be 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 beingness used. If y'all take multiple people working on your website, or if you accept outsourced the job to an external developer, HTML files are a great way to distribute content before publishing information technology on your website.

Merely, this isn't the simply benefit of using HTML files. When you're working in WordPress, HTML files are great 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 simply a website architect, it'southward a content direction system. Which means, even if your site is hosted on WordPress, yous don't have to create every single page within the WordPress interface.

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

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

You lot don't desire to rebuild pages from scratch.

You might take an existing HTML page that converts well, and rather than rebuilding information technology on WordPress, you can salve time by just uploading the page straight. This also reduces the chance of homo error, because rather than manually copying and pasting code, you tin can simply upload the content altogether via an HTML file.

You lot desire to customize your page beyond a bottled theme.

Another benefit of uploading HTML files is that it allows yous to customize your content outside of what your theme may allow. For instance, let'south say your old site used a template or folio that you really liked, but it'southward not offered on WordPress. You tin 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 folio or feature at your disposal.

It's easier to verify your website with services such as Google Search Panel.

Lastly, 1 big benefit of uploading HTML to WordPress is that it helps you verify your site on Google Search Console. To use Google Search Console, yous starting time demand to verify your website, which involves uploading a special HTML file to WordPress. This gives Google access to your information and ensures your site is indexed properly by Google'south search engine.

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

ane. Navigate to your Admin Dashboard.

You can use the WordPress Visual Editor to quickly add HTML files to your website. To access the Visual Editor, first 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-hand sidebar. There should be an option labeled "Pages." Click it. That should load a new screen to the right, like to the example beneath, where you see all the pages y'all've created.

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

3. Choose an existing page or create a new 1.

Now, you lot should take the selection to either edit an existing page or add together a new i. To add a new page, simply 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 post name itself, and you'll immediately load the editor. The Visual Editor should open up by default, merely if you're likewise using a folio builder such as Elementor, you'll want to hover over the page'due south name and click "Edit," instead of "Edit with Elementor."

4. Click 'Add Block.'

Once y'all've accessed the Visual Editor, click the pick in the top left to "add block." This volition trigger a dropdown card on the left-paw 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 carte, search for the term "File." Then, click on information technology to upload a new file.

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

Alternatively, you tin can also search for "HTML." This block will let yous to input HTML, but you'll have to copy and paste it manually into a code cake. This works if you're uploading short snippets of code, merely it's more efficient to use the media option for larger uploads.

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

half dozen. Cull your HTML file.

In the module that appears, select the choice to "upload." And so, cull the HTML file that you wish to add together to the post. Once your file is selected, it should be automatically added to your post.

Y'all can also add the file to your media library. This will let yous to reuse the HTML file in other blog posts.

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

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

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

The easiest fashion to navigate this is to use an HTML block instead. With an HTML block, you tin can copy all of the code 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 Page to WordPress

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

Lonez Scents about page

Image Source

Allow'southward take a look at the procedure of migrating this page to WordPress.

i. Compress the HTML page into a Zero folder.

Consign the webpage from your electric 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 Nix folder.

2. Navigate to your WordPress website's cPanel.

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

Adjacent, it's time to access your cPanel, where your website'southward 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 y'all for free. Brand sure to 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 "Advanced" 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 folder inside your cPanel.

Your public_HTML binder will exist found in the left sidebar. If yous host several websites, you'll demand to cull the website where you lot 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 folder.

Click the "+Folder" button at the peak of the screen to create a new folder. Now, name your new folder so click Create New Folder. (This folder name volition be a role of your HTML page's URL.)

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

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

In one case the folder is created, click on it. Then, click on the Upload button at the acme of the screen. There should exist an selection Select File and you can cull the zipped HTML file you lot want to add together.

6. Excerpt the files.

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

upload an html file to wordpress: extract files

7. Preview your page.

You lot'll at present see an selection called Extraction Results. Click Close. Then, click Reload in the middle of the screen. You'll come across the unzipped HTML file in the folder. (If you like, delete the ZIP file. It won't affect your extracted HTML folio or any other folders.)

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

And you're done! Y'all 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 style to become — peculiarly if yous want to create a highly customized site that you can't build with a theme. It's as well a great option for you if yous want to drift your sometime site to the WordPress platform. The best part is that it's piece of cake — but make certain to bookmark this guide, and so yous never get lost during the process.

Editor's annotation: This mail 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