There are times when you want to add “secret” pages that can’t be found in the WordPress admin or your site navigation: add HTML page to WordPress is the answer.
Sometimes you need a beautiful custom page that loads rocket fast no matter how slowly your WordPress site loads: HTML pages are the answer to that too.
Maybe you want to create some pages on your site that radically different than your theme: HTML pages are the answer to that too. Although there are ways to run multiple WordPress themes at the same time, but that’s for another tutorial.
If you want do any of the things listed above then you’re in the right place and it’s not as hard as you might think.
Just follow the step-by-step instructions below and you’ll be adding custom HTML pages to WordPress in no time.
You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.
Access Your Site’s Root Folder Through cPanel
You can do this via FTP if you are more comfortable that way.
First, log into your cPanel account.
Then, open the file manager and navigate to your website’s root which is usually in the public_html folder.
This is the place where you will upload your HTML files. However, if you like, you can create a separate folder for your HTML files. The biggest difference is you’ll keep your site more organized if you put the HTML files in a subfolder.
And the URL to access the pages will change if you use a separate folder.
If the files are in the root then you’ll access them like this:
http://yourdomain.com/the-html-page.html
If you put the files in a subfolder you’ll access them like this:
http://yourdomain.com/subfolder/the-html-page.html
Pick the one that works better for you. Or you can do it both ways, that’s allowed too.
Now let’s create a basic HTML page.
Create Your HTML Page
In your File Manager click on +File and name your HTML page. After that, click on ‘Create New File’ and move on to the next step.
Access And Edit Your HTML Page
Find your created HTML page and click it to highlight it and then click on Code Editor.
When the Code Editor opens you can type in anything you want. Don’t worry about proper HTML Structure (YouTube tutorial) at this point. In this example I wrote Hello World in the file and Saved it.
Test Your HTML Page
In any internet-connected browser type in your http://yourdomain.com/the-HTML-page.html. Similar to what you see in the screenshot below.
Your browser should open your HTML page and you should see the text you typed inside the code editor.
This HTML page is now located completely outside of Your WordPress installation.
You do have the option to link it these HTML pages by adding Custom Links to your navigation menus. Here’s a YouTube tutorial to help you do that.
Now that you know how to add HTML pages to your WordPress site, let’s take a shortcut to creating awesome-looking pages.
Visit Leadpages Blog For Free HTML Templates
On the Leadpages blog, many of their posts have free HTML templates available for download. You just have to give them your name and email address.
A few minutes later the HTML templates will be in your inbox. It’s as easy as one, two, three.
1
2
3
Download And Unzip The HTML Templates
Unzip the templates file so you can see what you’re working with. There are often other documents in the zip file that you probably don’t need to upload to your server.
Once unzipped, you can right click on the .html file and choose to open it in a browser.
The browser should load the page as you’ll see it when you upload it to your site. Many templates have a few subfolders that go along with the html files. The folders can contain images, stylesheets and javascript files. All of them need to be upload for the page to work properly.
It is best to change the name of the html file from index.html to anythingyoulike.html.
If you keep it as index.html and upload it to your root folder it will overwrite your homepage. In this article, I’m changing it to event-page.html.
If you are using FTP you can go ahead and upload the template files to your server. Make sure you keep the same folder structure for the template files because they reference each other.
If you are uploading the files using the File Manager, you’ll need to zip up the folder of the template page you’re uploading.
Uploading The HTML Page To Your Site
You’ll be upload it to either the root or the subfolder you created in an earlier step.
What you need to do next is to upload the zip file to root or the folder you created earlier..
To do that, go to back to the File manager, find the place you want the template to ‘live’ and upload the file you zip file.
In this example uploading it to a folder called events.
Then click on the Upload button.
On the upload page browser for your zip file or drag and drop it into the dashed box.
Once uploaded you can close the upload page. Then click on Reload in the file manager.
You’ll now see your zip file.
Click on the zip file to highlight it and then click Extract.
Reload the page again to see the extracted files.
Now you will see all the template files and folders you uploaded. It is now safe to delete the zip file.
In my example I had to move the template files up one level to make them appear in the events folder.
To do that I selected all the template files and click on Move. Then selected the place to move them and click on Move.
Navigate to the HTML page in a browser to see how it looks.
That was pretty easy considering how quick it was and how beautiful some of these HTML templates are.
If you’re familiar with HTML, you can now go to the code editor and edit the page yourself.
Pro Tip – Make it Look Like an Actual WP Page
If the html page is not in the root of your website you can change the landing page name to index.html.
Then you can open the HTML page you created just be going to http://yourdomain.com/events which looks like a regular WordPress slug.
In Conclusion
If you do a quick google search for HTML page templates there are many available online and many of them are free.
This is a very useful and easy-to-do trick if you want to have free landing HTML pages on your WordPress site.
For more WordPress tips and tricks, go to WordPress Tutorials – WPLearningLab and click on subscribe and then on the bell icon to make sure you don’t miss anything. ‘Till next time, cheers to all of you in the WPLL community.