Site Landing Page fronting WordPress

A client wanted a site-wide landing page with some basic images and a few navigation buttons to front-end their WordPress site and other places like their Etsy shop and Social media links.  Out of the box WordPress allows you to define a home page (see under the admin options for Settings->Reading) but that isn’t exactly what they wanted as that is still within WordPress and so has the header, menus and footer and all the other stuff related to a WordPress site unless the theme allows for all of these to be turned off.

When you connect to the URL without any path or a resource file name e.g. www.openmutual.org rather than for example www.openmutual.org/blog/example.txt then (using Apache) the file that will be presented if a file is not specified in a URL is decided by the mod_dir  DirectoryIndex directive (or in IIS the <defaultDocument> elements).

WordPress by default has an index.php file in its root and usually this is what is normally used. If your hoster has setup their DirectoryIndex similar to the above then the index.html file will override the index.php If so then you are good to go. If not then you will have to get your hoster (or it may be you) to get index.html being dished out in preference to index.php. The two options open to my client are to,

a) move the WordPress out of the site root e.g. move the files to /blogging or similar subdirectory and then add a static web page e.g. index.html
b) or add an index.html with static code in it that will be run first before index.php

The option a) is obvious but I wanted to avoid that for the moment so I picked b) to see if that would work. Please read the “quirks” at the bottom and test this on your own test beds before playing with a client site !

Step 1) On WordPress create a new page with any name and slug (we’ll called it My Home and have a slug of my-home )
Step 2) Copy the contents of the existing Home page to this new page (use control-C and control-V or similar)
Step 3) There is usually no need to change anything in Settings->Reading for the front page displays but you cannot set it to a Static page that is navigable in the menu. The reason being is that whatever you set as the WordPress Static front page is given a slug of /. If it is already set to posts of Home then you can leave it as that.
Step 4) Edit your Theme menu in Appearance -> Menus and remove the existing “Home” or whatever has a slug of your site root (/) and replace it with your new copied home page (in my example “My Home”)
Step 5) You can add the original Home page back but give it a different name e.g. “Site Root” as it will jump you back to the non-Wordpress file.
Step 6) Test that your tweaked WordPress site still works OK. You won’t notice many problems yet.
Step 7) Create an index.html file and have at least the one link to your new “My Home” WordPress slug e.g. <a href=”./my-home”>My Blog Site</a>
Step 8) Upload and check the new file gets priority. If not then check the Apache mod_dir  DirectoryIndex directive is set correctly e.g.

<Directory /> 
DirectoryIndex index.html index.php 
</Directory>

That is all is needed. Now when web visitors hit your web site they will get the index.html and they can then navigate from there. When they click any WordPress link slug from that landing page then they then go to your WordPress site and will stay there unless you have given them a menu option to escape back up to the index.html.

Quirks:

  • You MUST set Permalink Settings to something other than the default of …site/?
  • When you are in Media Manager then when you try and view an attachment then it will go to the attachment page and not the media file link.
  • When you insert an image into a post or page then do not use the attachment post ID but the media file link.
  • This may not work on other web servers – I have only done this on Apache