How to Upload an HTML File to WordPress Easily

Building a website can be tedious, especially when adding multiple pages and editing content for every new page. You can avoid this problem by adding pages from an older website or by uploading an HTML file.

Uploading HTML files to WordPress is simple and there are three ways to do it. First, you can upload an HTML file to your WordPress dashboard. The second method is to use an FTP client for transferring large files. The third method is to add HTML pages through cPanel.

This article created by our team at wpDataTables will outline three methods for uploading an HTML file to WordPress.

Why Upload HTML Files to WordPress?

WordPress comes with built-in content types and pre-set themes each with page templates. It also offers landing page plugins. These enable users to create page templates through a drag-and-drop page builder. With these customization tools available, why upload HTML files to WordPress?

Web designers upload HTML files to WordPress in order to store custom files on the dashboard, such as a particular page layout or a page template. Using these files saves time for the designer and negates the need to manually input the code.

Uploading an HTML File to WordPress through the WordPress Dashboard

This is the easiest method for adding HTML files to WordPress. You can do this through a blog post, a page, or through the Media Library.

To begin, go to ‘Posts’ on the left sidebar of your WordPress dashboard. Choose any published post or create a new post. The WordPress Visual Editor will open by default. Click ‘Add Media’, and a pop-up window will be displayed. To upload files from your hard drive, cloud drive, or external storage device select the ‘Upload Files’ tab. To add existing files from your Media Library click on the ‘Media Library’ tab.

On the ‘Upload Files’ tab, click ‘Select Files’ and select the HTML file you want to upload. You may also drag and drop the selected HTML file from your local folder to the ‘Add Media’ pop-up window.

If you are using the Gutenberg Editor plugin, you may insert a ‘File’ block, then click the ‘Upload’ button. Select the desired HTML file, then click the ‘Insert into post’ button to embed the link of the HTML file into the post. The link is automatically saved to the Media Library.

It’s also possible to upload a file directly to the Media Library. To do this, go to Media Library in the admin dashboard. Click the ‘Add New’ button and select the HTML file from your computer to upload it.

Uploading an HTML File to WordPress using an FTP Client

File and folder permission errors can occur when adding multiple HTML files or plugins to WordPress. A proven way to avoid this is to transfer files through a File Transfer Protocol client.

FTP allows users to transfer files from their local computer to a website host account.

An FTP client is software that uses the FTP protocol to transfer files manually. There are many free FTP clients available. For example, FileZilla, WinSCP, and Cyberduck are all compatible with Windows, Mac, and Linux.

Before beginning an upload, it is important to ensure that you have created a backup of your website. This will avoid any data loss in the event of a system failure.

Once downloaded, open the FTP client and connect your web host account with WordPress. To do this, enter your FTP login credentials into the Site Manager.

FTP login credentials are supplied after signing up for a WordPress hosting account. They are usually sent by email but are also located in the web host’s cPanel dashboard. If you experience difficulty locating the credentials, contact the hosting provider.

Next, enter your website information and choose “SFTP”. After the FTP account information is entered, click the ‘Quick Connect’ button. This connects you to your WordPress website, and you may now upload the HTML file.

Start by browsing through your computer files in the ‘Local Site’ folder. Right-click on the required HTML file and select the ‘Upload’ option. The FTP client will transfer the file to your WordPress website, indicating when the upload is successful.

To see if the website shows the file, go to your browser. Enter your website’s URL followed by the name of the HTML file: www.mywebsite.com/html-file. You will be directed to the new website page created with the HTML file.

Uploading an HTML File to WordPress via cPanel

cPanel is a control dashboard that displays the database of your website. For this final method, you will use the cPanel and File Manager.

Compress your HTML page, CSS, and all necessary files and folders into one zipped archive. Windows users can do this by right-clicking the HTML folder, then selecting the ’Compress’ option. For Mac users, right-click the parent folder, then select the ‘Compress folder’ option.

After logging into the cPanel, go to the ’Files’ section and open the ‘File Manager’ app. Inside the ‘File Manager’, navigate to the root folder of the website. This is usually named ‘public_html’ by default.

Create a new folder by clicking the ‘New Folder’ button at the upper left side of the screen. This will generate a pop-up window. Enter the name of the new folder. The folder name will become part of the URL of your HTML page, so take this into consideration. Click the ‘Create New Folder’ button.

Open the new folder and click the ‘Upload’ button from the top menu. Click the ‘Select File’ button and select the zipped archive of the HTML file that you want to upload. Extract the compressed files by clicking the ‘Extract’ button at the upper right part of the screen, then select the ‘Extract files’ button. Once this has completed click the ‘Close’ button.

Click the ‘Reload’ button to show all the extracted HTML files. The zipped HTML file can now be deleted. This will not cause any changes to the HTML page.

Preview the new page in the browser by entering your website’s URL followed by the folder name. For example yourdomain.com/FolderName/HTMLFileName.html.

A 404 error might occur if your server does not support redirection, or if the ‘index.php’ file is not redirected on loading the URL in the browser.

To fix this within the ‘File Manager’ app, edit the ‘.htaccess’ file by double-clicking it. This can be found in your website’s root folder ‘public_html’. Add the following code and save any changes:

RewriteRule ^(.*)index\.(php|html?)$ /$1 [R=301,NC,L]

This code will redirect and load your ‘index.php’ file in the browser. It will also redirect files or folders with case-sensitive names to view the content.

FAQs about uploading an HTML file to WordPress

1. Can I upload an HTML file directly to WordPress?

A file in HTML format can be uploaded straight to WordPress. Therefore, it is not advised to manually upload HTML files to WordPress. It is preferable to start a fresh WordPress page or post and paste the HTML code there instead.

2. How do I upload an HTML file to WordPress?

Then, use a plugin or manually copy and paste the code to convert an HTML file into a WordPress page or post before uploading it. Then, go to the WordPress dashboard, click “Add New,” then either “Pages” or “Posts.” The HTML code can then be pasted into the editor from there.

3. What is the easiest way to upload an HTML file to WordPress?

Using a plugin that can transform HTML code into a WordPress page or post automatically is the most straightforward approach to uploading an HTML file to WordPress. “HTML Import 2” and “HTML to WordPress” are two common plugins for this purpose.

4. Is it necessary to convert HTML to WordPress before uploading?

Absolutely, converting HTML to WordPress is required before uploading. WordPress does not permit direct HTML file uploads. You can make sure that your website is optimized for SEO and responsive design by converting HTML to WordPress.

5. How do I add an HTML page to my WordPress website?

You must first create a new WordPress page or post before pasting the HTML code into the editor to add an HTML page to your WordPress website. As an alternative, you can transform the HTML code into a WordPress page or post using a plugin.

6. What is the difference between uploading an HTML file and creating a WordPress page?

Uploading an HTML file is not advised and may have a detrimental impact on the performance, security, and search engine rankings of your website, which makes it different from establishing a WordPress page. On the other side, building a WordPress page enables you to optimize your website for SEO and responsive design.

7. What are the steps to upload an HTML file to the WordPress media library?

HTML files cannot be uploaded to the WordPress media library. Instead, you must manually copy and paste the code into the WordPress editor or use a plugin to convert the HTML file to a WordPress page or post.

8. Can I edit the HTML code after uploading the file to WordPress?

Sure, after uploading the file to WordPress, you can update the HTML code. To achieve this, go to the page or post that contains the HTML code and select the “Text” tab in the WordPress editor. The HTML code can then be modified as necessary from there.

9. Do I need to add any additional code to my HTML file before uploading it to WordPress?

No, before uploading your HTML file to WordPress, you do not need to include any extra code. You might want to check that your HTML code is SEO- and responsive-design optimized, though.

10. How can I ensure that my HTML file looks the same on my WordPress site as it did before uploading?

You must make sure that your website’s CSS and JavaScript files are compatible with the HTML code in order to guarantee that your HTML file displays exactly as it did on your WordPress site before to uploading. This can be accomplished by checking your website’s responsiveness using tools like Google’s Mobile-Friendly Test and testing it across a variety of platforms and browsers.

Ending thoughts on how to upload an HTML file to WordPress

WordPress allows users to be creative when building and customizing their websites. For the times when this is not enough, knowing how to upload an HTML file to WordPress will prove to be very useful.

If you enjoyed reading this article on how to upload an HTML file to WordPress, you should read these as well: