How to use custom Html file instead of wordpress homepage

I have wordpress installed in root folder of domain.com

I want to load index.html when domain.com is visited and domain.com/my-posts/ should load normal wordpress posts.

I am doing this to increase speed of my wordpress homepage.I dont want any php to be involved.

Will renaming index.php to index.html and putting my html content will work ?

Topic homepage Wordpress

Category Web


Another method if you're using Apache is to name your index file something special and prepend that name to your DirectoryIndexes. For example:

  1. Save your static index file as index-static.html

  2. Open httpd.conf and edit the DirectoryIndex list

    <IfModule dir_module>
      DirectoryIndex index-static.html index.php index.html
    </IfModule>
    
  3. Save httpd.conf and run sudo service httpd restart

Compared to Method 1 in the previous answer, this method has the benefit of not modifying your homepage URL — that is, visitors won't see static-index.html appended to the domain when they visit your site because no redirect occurs. This is probably better for SEO purposes in addition to being transparent to visitors.


I strongly advise you to heed the advice already given. If your PHP is well structured and you take advantage of caching methods, it won't have a significant increase on your page load time. We've got pages with extremely complex queries that are hardly optimized, but using some clever caching methods, we're able to get those pages served in 500-900ms, or 2-3s for some of the much more complex pages.

It's a much better long term solution than using a static HTML page as your homepage.

That said - if you still wish to proceed with a static HTML homepage instead (again, please don't, especially if the only reason is "page speed", since there are so many other ways to decrease your page load time)

... Still reading?

Method 1: .htaccess

The… … "generally accepted" way to do this is with a .htaccess rule that targets your homepage only, such as RewriteRule ^$ http://example.com/path-to-html.html [L,R=301]

Method 2: Page Template

Alternatively, to maintain some semblance to the WordPress ecosystem would be to set up a Page Template

  • Add a home.php (yes, PHP file) to your active theme directory: /wp-content/themes/CURRENT-THEME/home.php.
  • Place the following "Page Template Header" code in that file (leave a note to your future self/fellow devs that say where the file is so it's less confusing):

    <?php
        /*
         * Template Name: My HTML Homepage
         */
    ?>
    <!-- This page is generated outside of WP by: /wp-content/themes/CURRENT-THEME/home.php -->
    <!-- Your HTML Code Here -->
    
  • Add a new Page with Pages > Add New with a recognizable name, such as "My HTML Homepage"

  • On the right hand side, in the Template selector, choose "My HTML Homepage" as the template.
  • In Settings > Reading change "Your Homepage Displays:" to "A Static Page", and pick the "My HTML Homepage" page you just added.

Method 3: Move your WordPress Install

You can also just install WordPress on a subdirectory, have index.html in the root directory, and use .htaccess to remove the /wp from your URLs.

Method 4: Don't.

Again, I strongly urge you to consider other methods:

  • Taking advantaged of PHP 7.x and memcache/d
  • Caching plugins like WP Super Cache/W3 Total Cache
  • Optimizing your images (manually or with WP Smush)
    • Serve images from a CDN
  • Optimizing Script/Style delivery (WP Hummingbird can help with this):
    • Combine files where appropriate/able
    • Minify those files
    • Serve those files from a CDN
  • Remove unnecessary plugins from WP, optimize JS functions, remove unused CSS selectors, etc.

If your concern is that PHP or MySQL is causing the page load speed to decrease, I recommend installing a Caching plugin and configuring Page Caching. A free plugin that I've used for this purpose is W3 Total Cache

Page caching essentially does what you are looking for, which is to serve a static HTML file with CSS and Javascript assets, instead of running PHP and MySQL queries whenever a page is loaded.

It does this by pre-generating each page as a static HTML file, and then serves those static files in place of the dynamic PHP / MySQL Wordpress engine.

It's much easier to set up than having to manage a separate static HTML file for your landing page.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.