How do I add static pages to WordPress?

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?

Answers


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


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.


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.


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.


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.


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.


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

for example <a src="<?php echo get_template_directory_uri()?>/welcom.html"> Welcome</a> will open welcom.html assuming it resides inside your them directory.


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"


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. :)


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.


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.


Need Your Help

Passing HTML into my component

html angular angular-components

Consider the following component sidebar.component.html:

Webkit backface visibility not working

css css3 webkit

I'm building a simple example to flip a card using the -webkit-transform: rotateY property.