How to display a raw HTML page (bypassing WordPress theme, scripts, etc)

by

I’m a software engineer with a WordPress site with hundreds of pages, and it’s working very well.

There are certain cases, however, where I’d love to be able to code my own page with no interaction with / interference from the WordPress system (no themes, no styles, no javascript, etc) yet still have it located on that same subdomain.

How can I set https://example.com/special-page to display an HTML file uploaded somewhere within /wp-content/?

And as a bonus, I’d love if it would also work with a PHP file (which would generate the HTML).

I’d like to do this without manually editing the .htaccess file.

Here is an example that comes close:

The LeadPages WordPress plugin seems to do a variation of what I’m hoping for. It allows a user to specify a “slug” (relative path, such as special-page) and what content to display there. But the content needs to be hosted on LeadPages.net to use this plugin, obviously.

LeadPages plugin

What I’m hoping to do is host my own HTML file somewhere on my server (e.g. in a publicly-accessible folder such as /wp-content/) and then have a certain relative path point to it.

Look at this .htaccess file that I manually edited (and which works how I want):

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
Options +FollowSymLinks
DirectoryIndex /wp-content/raw/book-sale.html [L]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteRule ^thanks$ /wp-content/raw/book-opt-in-thank-you.html [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

I would have loved to have been able to specify from within the WordPress admin that the site root (/) should show the contents of /wp-content/raw/book-sale.html, and /thanks should show /wp-content/raw/book-opt-in-thank-you.html (so that I wouldn’t need to go in an edit the .htaccess file directly.

3 Answers
3

If you’re willing to create a child theme and put your PHP files in there, this approach is relatively clean. For each file, create a rewrite rule where you specify the path you want to use and the filename that should load. In the example below, /custom-path/ loads custom-file.php from the root of your child theme directory and /custom-path-2/ loads custom-file-2.php. Don’t forget to flush permalinks after adding rewrites.

/*
 * Set up a rewrite for each path which should load a file.
 */
function my_standalone_rewrites() {
    add_rewrite_rule( '^custom-path/?', 'index.php?standalone=custom-file', 'top' );
    add_rewrite_rule( '^custom-path-2/?', 'index.php?standalone=custom-file-2', 'top' );
}
add_action( 'init', 'my_standalone_rewrites' );

/*
 * Make `standalone` available as a query var.
 */
function my_query_vars( $vars ) {
  $vars[] = 'standalone';
  return $vars;
}
add_filter( 'query_vars', 'my_query_vars' );

/*
 * If `standalone` is set when parsing the main query, load the standalone file.
 */
function my_standalone_path( &$wp_query ) {
    if ( $wp_query->is_main_query() && get_query_var( 'standalone', false ) ) {
        // Load filename.php from your child theme root.
        get_template_part( get_query_var( 'standalone' ) );
        exit;
    }
}
add_action( 'parse_query', 'my_standalone_path' );

Leave a Comment