Happy Coders

Learn how to integrate HTML files with your WordPress site seamlessly. This guide covers uploading standalone HTML files, embedding HTML into pages, creating custom templates, and setting up redirects. Whether you’re adding a landing page or custom code, follow these steps for a smooth connection. Ideal for enhancing WordPress flexibility. No plugin required!

1. Add an HTML File to WordPress

You can upload and access an HTML file from your WordPress root or subdirectory.

Steps:

1. Access WordPress root directory via:

   • cPanel → File Manager, or
   • FTP client like FileZilla

2. Upload your file.html to:

   • Root directory: /public_html/
   • OR a subfolder like /public_html/custom/

3. Access it via browser:

   • https://yourdomain.com/file.html
   • OR https://yourdomain.com/custom/file.html

 

2. Embed HTML in a WordPress Page or Post

If you want to include HTML content inside a WordPress page:

Steps:

1. Go to Pages → Add New or edit an existing page.

2. Switch to the Code editor (in block editor, use a Custom HTML block).

3. Paste your HTML code.

4. Update/Publish the page.

 

3. Create a Custom WordPress Template with HTML

You can make your HTML file part of a WordPress theme.

Steps:

1. Convert your HTML file into a PHP file:
   Rename your-file.html to page-yourfile.php.

2. At the top of the file, add:

   
   <?php
   /*
   Template Name: Custom HTML Page
   */
   get_header(); 
   ?>
   <!-- Your HTML content here -->
   <?php get_footer(); ?>
   
   

3. Place this file in your theme directory:
   wp-content/themes/your-theme/

4. In the WordPress admin:

   • Create a new page
   • In the Template dropdown, select “Custom HTML Page”
   • Publish the page

 

4. Redirect WordPress Page to HTML File

If you want a WordPress page URL to show content from an HTML file:

Add a redirect in .htaccess:

Redirect 301 /html-page https://yourdomain.com/custom/file.html

Summary