How to Upload an HTML File to WordPress Easily

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.

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:

Up Next:

WooCommerce Redirect after Checkout: How to Set It Up

WooCommerce Redirect after Checkout: How to Set It Up