How to Make HTML Pages Work Like Wordpress

June 7th, 2007 · by David Bradley

Do you have a bunch of standard html pages outside your Wordpress blog heirarchy? I’m not taking about Wordpress’ static “Pages” with a capital P, but those pages, perhaps in the root beyond the CMS facility of Wordpress. Well, there is a relatively simple way to convert a standard html page into a kind of Wordpress page, so that your header, sidebar, and footer all render as if the page were a standard Wordpress page.

1. First, make a back up of any pages you plan to change, then add this line to the head section of each page you want to re-theme within the Wordpress system on your site.

<?php define(’WP_USE_THEMES’, false); require(’./your-wordpress-folder/wp-blog-header.php’); ?>

That calls in the necessary code from the Wordpress folder (obviously change “your-wordpress-folder” to the actual directory name).

2. Next, decide which components you’re going to need for the page. You’ll probably want the header from your theme so add

<?php get_header(); ?>

Put that near the top after the body tag.

3. You’ve probably got a footer in your theme too, so add this to the bottom of the page before the close body tag

<?php get_footer(); ?>

4. Then comes a tricky bit. Where to put the sidebar? It depends. Try it just before the footer tag you added in the previous step first. We can come back later and move it if it doesn’t work properly.

<?php get_sidebar(); ?>

5. Now, smart readers will have noticed you’ve probably been adding a load of php tags to pages with an htm or an html and that opening these in your browser is just going to display the code without running it. So, there’s one final critical step you must take before things will work as planned. Open up your .htaccess file (you know where that is I take it, root folder, no filename just the extension htaccess (don’t forget the dot). Make a backup copy. Then add the following line:

AddHandler application/x-httpd-php .php .html .htm

and save the .htaccess file. This will then allow the browser to parse the php in pages with the htm and html extensions as well as the php extension.

Couple of things to watch out for: if you cut and paste the above code, ensure the quotes are single straight quote marks and the angle brackets are proper code not greater and less than signs.

Also, make sure you double check the resulting meta tags for these pages, it might result in losing RSS autodiscovery or changes in your carefully honed title tags. Also, you generally will not be able to enable comments on these pages as you might do with a static Page within Wordpress proper. If anyone knows how to workaround the comments disabled default for this kind of page, please leave a comment. I’d love to enable comments across the whole of the Sciencebase.com site on which I make extensive use of this format.

34 responses so far ↓

Ben // Jun 7, 2007 at 4:16 pm

Why not just convert all your legacy pages (with a little p) into static pages within the Wordpress system and then relocate the subfolder to the site’s root? Job done.
David Bradley // Jun 7, 2007 at 4:18 pm

That would be one way of doing things, Ben, but what if you have thousands of pages in standard html, that’s an awful lot of cutting and pasting. Also, there might be reasons why you want to keep the blog part in its own folder and have standalone chunks in the root.
deb // Jan 15, 2008 at 2:02 am

I’m having a problem doing the opposite of what you instructed. I want to add a bunch of html pages on the root of my directory and having a hard time.

I would like a thankyou, about, seemore, page etc, and It keeps calling my 404 page. how do I stop it?

Thanks.l
David Bradley // Jan 15, 2008 at 7:16 am

Deb, do you mean you are trying to create static pages in Wordpress called from the homepage, or are you making standalone pages but don’t want to have them use the WP template? Please clarify and someone here might be able to assist.

First thought, did you double check the links you’re using?

db
deb // Jan 17, 2008 at 6:57 am

What i want to do is create standalone pages. that don’t call the template. I want a thankyou.html page for example. And I can’t seem to get it working. it keeps calling the the template.

Also, I’ve created a folder called thankyou right at the root of the domain. added a page in it called index.html and the darn thing still calls the wp template. I am totally baffled.

Please help.
David Bradley // Jan 17, 2008 at 7:31 am

Deb, that is very odd. If you are creating the pages within Wordpress then that’s bound to happen, but if you are simply creating a standard html page and then uploading it to the root then make sure you haven’t added the includes for WP. Could you either email the source code for the troublesome pages or point me to those pages and I’ll take a look.

db
deb // Jan 18, 2008 at 3:37 am

Thanks DB,

You are right. That’s exactly what im trying to do. However, i just can’t get the darn thing to work.

I am really frustrated at this point so im gonna go and hire some help. A sista can’t be waisting three days trying to figure out this techie stuff

Thanks for all your help though.

DG
TATHAGAT // Feb 2, 2008 at 8:26 am

please send the process of making html page
David Bradley // Feb 2, 2008 at 9:29 am

Send it where Tathagat? It’s right here. On the page

db
Ariela // Mar 6, 2008 at 10:01 pm

Hey,

I think I followed your directions exactly, but nothing is showing up on the page.

Ariela
David Bradley // Mar 7, 2008 at 7:40 am

Ariela, what is the file extension for the page? If it’s not “.php” (could be .htm, .html instead), do you have those file extensions set to be read as php by your server?

to do that, you need this line in your .htaccess file:

AddHandler application/x-httpd-php .php .html .htm

db
Ariela // Mar 7, 2008 at 7:50 am

Thanks for getting back to me so fast…

The file extension was .php, but I ended up going in a different direction — I’m building a theme to apply to the blog that looks just like my webpage.

Thanks, though!
David Bradley // Mar 7, 2008 at 10:44 am

Ah, okay, wonder why it failed then…caching perhaps? Let us know how you get on.

You’ve got some lovely photos on your site by the way! You may care to check out my public flickr gallery

db
Ariela // Mar 8, 2008 at 8:17 am

Hey, so I ended up building a theme that looked like my web page and everything worked, but I came across another problem, and am hoping that you have an answer. The one thing that’s not working is that the images aren’t showing up — they’re little blue diamonds with the question marks. I checked and double checked all the image paths. They are all, by the way, in the header.php and the footer.php. Any idea what I did wrong?

Thanks! (and thanks for the compliments on the photos — I’ll let the photographer know!)
Scott // Apr 14, 2008 at 6:00 am

That is brilliant. Technical, but brilliant. I moved from HTML to WP a year ago and had a bunch of pages I just copied over cause I was too lazy to convert them.

I am definitely bookmarking this page. Thanks!

Minnesota Investment Property’s last blog post..Stupid Property Repairs #3
Luke // Apr 23, 2008 at 3:55 am

David,

When I tried this, I got the following:

Parse error: syntax error, unexpected ‘?’ in /xxxx/xxxx on line 159

I know next to nothing about php, so I copied and pasted exactly what you typed, with the proper ‘ and .

Any ideas as to what I’m doing wrong?
David Bradley // Apr 23, 2008 at 7:43 am

Luke, you checked the single quote marks, did you check the angle brackets?

db
Luke // Apr 23, 2008 at 4:57 pm

David,

I checked those as well. I included the angle brackets in my previous post, but they must have been cut out.

I just sent you an email with more specific information.

Luke
David Bradley // Apr 23, 2008 at 5:09 pm

Thanks for the follow-up. You explained in an email that you’re creating a standalone page you want to theme as if it were part of your blog, but your Wordpress blog is actually in the root of your domain, so there is actually no need to use my workaround.

Simply create a “Page” with the content you sent me, tweak the permalink and everything should be fine.

If you really must do it this way then try the code without the period before the slash, and if that doesn’t work remove the slash too.

Let us know how you get on.

db
Bob O'Haver // May 16, 2008 at 6:29 pm

I have a site that I need to add the current post to the top of a HTML page. Will this work for that?
What is the code just to bring in the current post?
Thanks
David Bradley // May 16, 2008 at 6:44 pm

Bob, that should work with this code. You’d need to add the Wordpress loop (see the main index file in your template) and set it to display just one post.

db
Kimberley // May 18, 2008 at 8:27 pm

David,

Im getting the same similar error that Luke reported.

I know that you said the following: “Couple of things to watch out for: if you cut and paste the above code, ensure the quotes are single straight quote marks and the angle brackets are proper code not greater and less than signs.”

But I dont see any quote marks or greater/less than signs to correct.

Any ideas?
David Bradley // May 19, 2008 at 8:31 am

Kimberley, they’re right there up above…

You have to add this to the source of your page:

< ?php define('WP_USE_THEMES', false); require('./your-wordpress-folder/wp-blog-header.php'); ?>

You are on an Apache system, yes?

db
Kimberley // May 20, 2008 at 1:45 am

Okay, I went back tonight to look at the code and my ‘ were slanted… So fixed that. Im not sure it did anything. Im not getting the Parse error: syntax error, unexpected ‘?’ in /xxxx/xxxx on line 159 error anymore. What’s happening is that the page sort of loads itself, but the images disappear. The link is:

http://www.dreamsofmidnight.com/DreamsWeDreampt/index-new.html

[ Yes I know "Dreampt" is spelled wrong. Just a test folder. =) ]
David Bradley // May 20, 2008 at 7:45 am

Hi Kimberley and thanks for your 3 attempts and an email. All got through. Your comments did “stick” it’s just it was night here so I wasn’t at my computer to approve them. You should’ve seen a message, however, to say that comments require approval so apologies if that wasn’t apparent.

db
David Bradley // May 20, 2008 at 7:47 am

Kimberley (again) - I mentioned in the post that readers should check that quotes are straight and angle brackets working as html rather than being converted. But, I did take a look at your code and the javascript for rendering your images is pointing to “http://127.0.0.1:1025/js.cgi?pa&r=2401″ that’s a local (i.e. your machine) rather than the server, so that’s why they’re not showing up because the script needs to be in your root on the site server.

That said, what benefits are there to serving images via a script, why not make them absolute and then there’s last chance of things breaking, especially for users running NoScript in their browser!

db
Kimberley // May 21, 2008 at 4:09 am

I apologize for all the emails. I must look like a complete moron. However, there was no message showing up on the site, that’s why I thought they weren’t getting through. Sorry about that.

I’ll check what you mentioned. And get back to you.
David Bradley // May 21, 2008 at 7:50 am

I just did a test comment post Kimberley and once a message has been submitted you should’ve seen a little notice saying it would appear once moderated and now offering you the option to subscribe to the newsfeed.

db
Sarah // Jun 18, 2008 at 4:12 pm

Hi David,

We have a problem when trying to add the .html extension to WP Pages (with a cap P). Do you know if this is possible and how to go about this?

Thanks
Sarah
David Bradley // Jun 18, 2008 at 5:47 pm

Sarah, I am pretty sure there is a workaround, but I’ve not yet implemented it and have been persuaded that there is little point as most users are blind to file extensions in URLs these days. There may, just may, be SEO benefits to having the .html, but I’m not sure what those would be.

Have you searched the wordpress forums for an answer?
Sarah // Jun 18, 2008 at 6:35 pm

Yes, but it seems to be nigh on impossible and not recommended as it involves fiddling with the source code and course there’s future updates to consider. Nonetheless, if there was a workable solution I would consider it, if only for the benefit of SEO considerations - but again as you say, what are the benefits there?
David Bradley // Jun 18, 2008 at 7:15 pm

Actually, there may be hidden SEO benefits to having a few Pages on a site that look to all intents and purposes as if they are actually folder structures rather than individual files, I’m thinking Google Site Links
Data // Jun 27, 2008 at 9:15 pm

I’m finding way to make these structure, if possible :-
Eg ->
Page structure like this :-
domaincom/page1.html
domaincom/page2.html

and Blog Post like this ( as choosing the /%postname%/ for permanent link structure ) :-
domaincom/myblogpost/
domaincom/myblogpost2/
…and so on.

Would these be possible ?

Thanks for your kind help if there is solution.

Datas last blog post..Computer System
David Bradley // Jun 29, 2008 at 8:19 pm

Data, check out the Wordpress FAQ and forums for assistance on permalinks.