How do I add static pages to WordPress?

Question

How do I add my own static HTML pages to WordPress?

For example, let's say I have a page, products.html, how would I add it to WordPress (any menu, etc.) and once added, how do I visit them, because WordPress had a typical URL structure?

Jena

At least in the current wordpress version 3.8.1 and probably also much earlier, you can have custom URLs as entries for menus (Appearances/Menus). That way you can put your own static page as a menu entry but of course the layout (header, widgets, ...) will be missing. The best would be to include your own static content instead of a wordpress static page content in a wordpress page. Don't know how to do that. – Depravity

Answer 1

The static page functionality of WordPress is called, cleverly, "Pages." You can read all about them here: https://wordpress.org/support/article/pages/ .

Gynandry

@Scott: I am not talking about these pages, at your link i read this "Pages are not files. They are stored in your database just like Posts are." I am talking about custom html pages i create in dreamweaver. – Jena

I'm sorry if I misunderstood. Should they have the same layout (header, navigation, etc.) as your regular WordPress pages? – Gynandry

i can give them any layout as i will write html css for the pages. thanks – Jena

Ok, so they're not "added to WordPress" in any meaningful way, then. Right? Just upload the files to the same directory as your WordPress index page, then link to that location however you see fit. – Gynandry

But if you want the file to be a part of your theme then? – Battik

If you want to use the headers and widgets then I would advise you to try to adopt the pages way...like scott suggests. – Amblyoscope

Answer 2

If you (as the OP asked) want it to appear without having to add .html, simply create a folder at the same location where your WP site's index.php appears, and then name the file that you put inside that folder index.html.

Example, if you have a WordPress installation at doesnotexist.com and you want to add a static page, separate from your WP installation, that people can get to at doesnotexist.com/wedding - create the folder named wedding, and put the HTML in an index.html file inside the wedding folder. You also can then of course put other files in that folder or in folders within it so that the static page can reference images, styles, code, etc.

As someone said above, if the file for the URL exists, then WP won't get invoked to route the request. If you later remove the "wedding" folder or the "index.html" file from within it, anyone who tries to get to doesnotexist.com/wedding then would be routed to WP and, if no matching permalink was found, they'd see the 404 page not found error or whatever your theme or a plug-in is set up to show for broken links.

Rosenblast

+1 Great answer. (Good question too.) Exactly what I needed: upload an entire directory of html files with their own index, keep them separate from wp files... – Abstract

Does WP apply authentication to access these "static" files? – Formosa

great solution to host my single page (html/js) apps. – Phytohormone

Answer 3

You do not need to install any additional plug-in. Just follow the following procedure and you are good to go.

1. Create a page under Administration>Pages>Add new.
2. Enter the name you want for your page, the custom URL and press publish.
3. This would generate a record in your database under the wp_posts table. (wp_ is the default prefix for your wordpress tables. If you changed it during the installation procedure, replace it with your custom prefix). Find the ID that has the name of your page in the table.
4. Go to wp-content\themes\YOUR_ACTIVE_THEME in your wordpress installation directory or in the sub-folders(it depends how the theme has been structured). There would be page.php file. Create a page-{ID}.php file in the same directory.
5. It's ready. Add any static html file to page-{ID}.php file.

Now, if you go the custom URL, you can find the static content you put in page-{ID}.php file.

Spirketing

Answer 4

Do you mean Page Templates?: Page Templates « WordPress Codex. You can make a new page template and modify the php and xhtml of it (and add static html), and then use that template when you generate a new Page in the wordpress editor.

If you simply add a static html file to your wordpress directory, it may or may not work, depending on mod rewrite.

Perdue

But then you still need to add that page in admin.. That gets meaningless. Not the ideal solution in this case.. :/ – Battik

I'm searching for the solution, haven't found it yet. Thought it was okey to try find it here where people had discussed it. – Battik

@PeterWesterlund - you're fine to comment on old posts, but your comment could be stated more nicely (why say "gets meaningless" - that's an not nice - and as it happens, I disagree). – Placencia

Answer 5

To do what you describe, put the products.html page in your public_html directory. Edit your wordpress theme's header.php file to add to the menu section a link to the products.html page. You may have to use an absolute path in the URL depending on how you have things setup.

If you want to retain the wordpress navigation on the products.html so you can browse back to the wordpress parts of your site, you'll need to replicate the header html within that page.

Based on this drawback and depending on your requirements I'd recommend considering using either pages or page templates as suggested in the other answers so that the products page is part of the wordpress layout and you can take advantage of a shared navigation / look and feel etc.

Ammoniate

Answer 6

Just upload it in your wordpress root (where you have index.php of WP), suppose if you put your products.html is put in a directory myproduct/, then it will be accessible via the url: http://www.yoursite.com/myproduct/products.html. Hope it answers your request.

Punak

Answer 7

Add a page with format page-{slug}.php for example page-products.php to your theme. You also need to add an empty page on wordpress under pages with that name i.e. if your for example your file is page-products.php, the id for the page you create on wordpress should be products . This should work. For more information, you can check this link https://developer.wordpress.org/themes/template-files-section/page-template-files/#creating-a-custom-page-template-for-one-specific-page.

Offence

Answer 8

As others have noted uploading a folder the main directory is the best way to do this.

www.yoursite.com/products/index.html

The important thing you need to realize is that Wordpress will not know about this page, and it will not be included automatically in your sitemap.xml and submitted to Google.

So you will need to fix that using Google Webmaster Tools if you want the page to be indexed correctly.

Pericline

Answer 9

You can use my plugin. Download from WP repository . After installation you will have HTML Pages option under Pages. It will output your custom HTML under custom URI of your choosing so you don't have to mess around with folders.

Update - exact steps to accomplish what you want:

1) Install and activate a Wordpress plugin called WP Custom HTML Pages

2) Use the new submenu item (Pages->HTML Pages) to create a new HTML page

3) In "Page Permalink" field enter the custom URI you wish to assign to your page, for example /my-html-page (at the time of writing this answer, it is required that the value you enter starts with "/" character) and in "HTML Page Code" field enter all the HTML and CSS of the page document that you wish to display

4) Click "Publish" then go to yourwebsite.com/my-html-page and you should see your static HTML page, providing its status is set to "published"

Marquand

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Maturation

Answer 10

You can also use a free WP plugin, just upload the archive with the plugin. It's very easy to add a static HTML to WordPress using the Static Pages https://designmodo.com/static-pages/

You can customize your first page also.

Isometropia

Answer 11

We just release a simple plugin to this https://wordpress.org/plugins/drophtml/. As the name suggests drop a zip file in the admin panel and it will basically host your static resources.

You can also edit your HTML files and manage your zip files inside the admin panel.

Hope this helps!

Homeomorphism

Answer 12

If you have access to the theme folder you can use get_template_directory_uri() which will return the directory where your theme resides.
So, for example, if you have welcome.html inside your theme directory, you can reference it inside your theme like this:

For example:
<a src="<?php echo get_template_directory_uri()?>/welcome.html"> Welcome</a>

will open welcome.html, assuming it resides inside your theme directory.

Chatman

Answer 13

It may not be the best of solutions, but the way I got round this was adding multiple page templates. For example, I call one 'contact-page', then I create a contact page in the pages tab and apply that template. I then use the page template to display the static html.

Not a perfect but gets the job done. :)

Epencephalon

Answer 14

I mainly propose an alternative approach for theme developers. This approach can include static or dynamic pages that are neither WordPress Page nor Post. It is useful when certain functional pages need to be embedded into a WordPress theme.

Specifically, it features:

• No need to create any Post or Page.
• Follows the rendering process of WordPress itself: almost all built-in functions, hooks can be used (and of course can be used only as a static page).

---

In short we need to add a custom routing path for WordPress and then map it to a custom template file. It looks just like adding a new file to the Template Hierarchy.

Assuming we need to load book-finder.php when accessing www.mysite.com/bookfinder

1. In functions.php in the theme folder, Create a new page route using add_rewrite_rule. We need to add a query string key as a page access flag to the rule.

function bookfinder_rewrite()
{
    add_rewrite_rule('^bookfinder/?$', 'index.php?kbp_book_finder=1', 'top');
}
add_action('init', 'bookfinder_rewrite');

function bookfinder_query_vars($vars)
{
    $vars[] = 'kbp_book_finder';
    return $vars;
}
add_filter('query_vars', 'bookfinder_query_vars');

2. load the file we want when the access flag is detected in the query string

function bookfinder_template($template)
{
    if (!is_404() && get_query_var('kbp_book_finder'))
        return locate_template('/path/to/your/file/book-finder.php');

    return $template;
}
add_filter('template_include', 'bookfinder_template');

Now, when accessing www.mysite.com/bookfinder the book-finder.php file is loaded. You can copy the contents of the static html file into it or use it as a dynamic page.

Cayla