Webedit Professional is great for allowing your end-users to update changes on a page by page basis. In most cases you want and need to use common elements that should not need to change per page, and should be reuseable across the whole site using the latest include technologies such as PHP includes. It is very possible to do this and we’ve made it so easy to allow you to save time and still allow your clients or users to update the content themselves.

I will outline how you can make use of PHP includes in your website and still keep your website ‘WebEdit Professional compatible’. I will also show you how you can build your pages to enable the editor to edit the main pages as well as the include files in the same site.

This tutorial will show you how you can insert reusable page elements allow sitewide user changes by creating php includes in your site...


First we need a page layout to get started. Look below at my design layout that I will use for this exercise.



My development method to build most websites, is to layout the page as a static html page and then break it up into dynamic elements later(this helps with quick client previewing as well). This way, you know how everything will look when it is output dynamically and you can cut and paste it into your dynamic sections from this first ‘template’ file.
 
You must analyse your website layout and choose the portions that will be ‘includes’, and which parts will remain editable in each ‘main file’.


Notice the top section, the side section and the base section that I wish to create common elements from in this layout.

In this particular layout, I wish to have a common header, a common side table and a common footer. This makes 3 includes in my website that need to be editable by the end-user, and at the same time I would like my end users to be able to edit the ‘main file’ (the file that includes the other 3 files).


Ok so you have a static template layout of your website, now the next step is to create a dynamic template file with php includes included in it.

Open your html layout file and make a copy.
  Tip : You can also copy it in your folder structure and change the extension.
 
 
Rename this copy to index.php or something to that effect. This will become your main dynamic template that ‘includes’ the three external include files.
  Now ‘cut’ the portion of the code for the header from the original layout and create a new blank document.
 
 
 
  Selecting the content for the header file.
  Paste the portion of the code into this new document and save as top.htm.
 
 
  This is the top.htm file by itself.
 
 
Do the same for any other common elements, in this case I did the same for the side and footer content. Save as sidetable.htm and footer.htm           

	The side content file on it’s own – sidetables.htm
The footer content file on it’s own – footer.htm

Quick Tip : When using tables for content, do not try to insert parts of tables or half a row in the main file and closing the row in the include file. Although the browser won’t mind if you simply include this content – it will render it correctly when it is loaded. The editor, on the other hand, will not work efficiently when your end user needs to update this include on it’s own if you have part html elements in the page.
Eg 1. <table><tr><td>your content here </td></tr></table>
This will render properly when you open it in the editor on it’s own.
 
Eg 2. <td>your content here</td></tr></table>
This will not render properly because the editor does not have enough information about the table to render it to your editor.

Next, Open your index.php (main file) and insert the php include links to the external files – top.htm, sidetable.htm and footer.htm
Here is the code for the include files
< ?php include(‘top.htm’); ?>
< ?php include(‘sidetable.htm’); ?>
< ?php include( ‘footer.htm’); ?>

You must place these php include tags in the place where you would like the code from these files to be inserted. This should be exactly the same place where you cut the code from originally.
 
  <table width="755" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td height="147" colspan="2" background="images/pixi_navbgred.gif">
<img src="images/top.gif" width="755" height="116"><br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="58"><img src="images/btn_home.gif" name="btn_home" width="58" height="31" id="btn_home"></td>
<td width="69"><img src="images/btn_about.gif" name="btn_about" width="69" height="31" id="btn_about"></td>
<td width="81"><img src="images/btn_contact.gif" name="btn_contact" width="81" height="31" id="btn_contact"></td>
<td width="75"><img src="images/btn_location.gif" name="btn_location" width="75" height="31" id="btn_location"></td>
<td width="52"><img src="images/btn_help.gif" width="52" height="31"></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
<tr>


 
  <table width="755" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td height="147" colspan="2" background="images/pixi_navbgred.gif">
<?php include('top.htm'); ?>
</td>
</tr>
<tr>

The final PHP main file with the include code for the header document in blue. At this point, I should have my dynamic page template finished. Upload and test it to make sure that it is working and that your server supports php includes.


Now that you have your PHP includes working you are almost ready to allow your end-users to edit their website with the editor.
Most of you may have heard that editable regions will maintain your dynamic code in the editor. I've even written a whitepaper about it (Restricted Editing Part 2).

There are two types of editable region tags you may use that are compatible with either Dreamweaver 4 or MX versions.

1. <!-- #BeginEditable "comment here">Your editable content is inserted here. <!-- #EndEditable -->

2. <!-- InstanceBeginEditable name="comment here" -->Your editable content is inserted here. <!-- InstanceEndEditable -->

Please view the tutorial on editable regions if you would like more specific information about using editable regions.
You must not use any dynamic code in the editable regions or it will be saved back into the file as outputted html, and you cannot place editable regions inside your include files.

In my layout I am going to make the header, subheader, main picture and the main content to be editable by the end-user. This makes four editable regions in the main file.


If you would like your include files (top.htm, sidetables.htm, footer.htm) to be editable in the editor – you must configure the editor in the config file to treat the .htm extension as an include file.
An include file does not have a <html><head> or a <body> tag. It is only html code. To edit these files, the editor will need to temporarily add these tags in and then strip them out when the file is saved.
  Open your config file in a text editor.
Go to the line that has the following code
$FileTypeInclude = "inc";
Add your .htm extension to the field as follows.
$FileTypeInclude = "htm";

Save the config.php file.

Please note : If you configure the .htm extension to be a file type include then ALL .htm files will be treated this way for your whole website. When you open .htm files in the editor the <html><head> & <body> tags will be inserted and then stripped. If you would like to use a html file but you do not wish for it to be editable in this way, then you will need to use another extension. Eg. .html
 
 
  Now your end users can make quick sitewide changes using Webedit Professional by updating their includes as well as their main content files without having to ask for your help. What a great timesaver.
If you require the use of ASP includes or SSI includes, you can simply incorporate the same principle and change the include code for the relevant type of include you are using. The editable regions will protect any type of include.