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.

In fact, sometimes you might want to build a custom HTML page or use pages from an older website and then add them to WordPress — and, that's perfectly okay. If you're building or growing a WordPress website, importing HTML files and pages can save you significant time when setting up your website or when adding new, customized content. 

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

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 be viewed on a web browser. HTML files can be created from scratch, or you can take existing files — like Google docs — and convert them into HTML. 

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

Example HTML File

Image Source

HTML files can be loaded on any type of web browser. This typically 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 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 building your site on WordPress.

Why Upload HTML Files to WordPress

When it comes to creating webpages, WordPress has its benefits. You can create beautiful pages with pre-designed themes and you can even 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. Or, you might have an existing HTML page that converts well, and rather than rebuilding it on WordPress, you can save time by just uploading the page directly. This also reduces the risk of human error, because rather than manually copying and pasting code, you can simply upload the content altogether via an HTML file.

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

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

Ready to start uploading? Read on for a step-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 HTML files to your website. To access the Visual Editor, first go to your admin dashboard.

2. Click 'Posts' in the left sidebar.

Next, look at the lefthand sidebar. There should be an option labeled "site." Click it, and select the option "Posts" in the submenu. That should load a new screen to the right, similar to the example below.

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

Now, you should have the option to either edit an existing post or add a new one. To add a new post, simply choose the option in red, "Add a new post."

If you would like to edit an existing post, click the three vertical dots next to the post label, then select "edit" from the dropdown menu (example below).

Wordpress edit post interfaceOnce you choose where your file will be uploaded, the Visual Editor will open by default.

4. Click 'Add Block.'

Once you've accessed the Visual Editor, click the option in the top left to "add block." This will trigger a dropdown menu on the lefthand side of the screen.

Add block WordPress

5. Add a 'File' block.

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

Alternatively, you can also 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're uploading short snippets of code, but it's more efficient to use the media option for larger uploads.

Adding an HMTL Block Wordpress

6. Choose your HTML file.

In the module that appears, select the option to "upload." 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 post.

Upload HTML file in Classic Editor

Image Source

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

How to Fix "File Type 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 post or media library.

File type not permitted - Wordpress

Image Source

The easiest way to navigate this is to use an HTML block 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 below.

HTML file example WordPress

How to Add an HTML Page to WordPress

Let's say we were the proud designers of the site, Lonez Scents, and we wanted to migrate this page to WordPress.  

Lonez-Scents-about-page

Image Source

First, we would need access to our 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 will migrate your webpages for you for free. Make sure to check with your hosting service.

The next step is to add your HTML page, CSS, and other folders in a ZIP file. (Right-click the HTML folder and click Compress). Then, log into your cPanel and go to File Manager in the Files section.

upload HTML file to WordPress in file manager

Image Source

Select the option: public_HTML. Click the New Folder button at the top of the screen to create a new folder. Now, name your new folder and then click Create New Folder. (This folder name will be a part of your HTML page's URL.)

upload HTML file to WordPress by creating a new folder

Image Source

Once the folder is created, click on it. Then, click on the Upload button at the top of the screen. There should be an option Select File and you can choose the zipped HTML file you want to add. Once added, 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 HTML file to WordPress by clicking extract file button

Image Source

You'll now see an option called Extraction Results. Click Close. Then, click Reload in the middle of the screen. You'll see the unzipped HTML file in the folder. (If you like, delete the ZIP file. It won't affect 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. For more helpful tips on how to use WordPress, check out our Ultimate Guide to Building a WordPress Website.

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 Mar 8, 2021 7:00:00 AM, updated March 08 2021

Topics:

WordPress Website