How to Make a PHP System Look Like Your Corporate Website

This tutorial explains how to get sites like WordPress, PHPBB, and Kayako's eSupport's help desk area to use your website's look-and-feel so that when you change your corporate website template then the help desk area will automatically reflect those changes.

Be aware: This tutorial was written without actually testing it on the different systems, so if there are any bugs, please let me know.

The Problem

• When using  if you change your corporate website's look and feel or change menus in your main navigation and you want the helpdesk to look the same, then you have the annoyance of having to copy those html changes to the help desk public help desk area as well -- which could get annoying if you make changes a lot.

The Solution

• Don't "copy/paste" the html code from your corporate website template.


• Do "include" the final rendered html from your corporate website. This doesn't mean to use the PHP include() function -- but you will use another PHP function.

Start Here

Warning, Disclaimer & Negative Side-Effects

A side effect of this will result in your php system having a static, non-changing <title> and blank <meta> keywords and <meta> description on every page of your public help desk. This could cause negative effects on your website's search engine rankings. Perhaps a solution is that you can try sending certain variables across to your template through the URL and output their values on the side of your corporate website.

Disclaimer: I shall not be held responsible for any data loss or negative effects due to following this tutorial. Make sure you backup any files or code that is going to be modified so that in case anything goes wrong you can restore them. Use this tutorial at your own risk.

Step 1. Ensure That Your Corporate Website Uses a Template

1. Structure your PHP website according to the strucuture explained in one of the following types of template structures
   a. The header and footer concept, or
   b. The one-file template concept


2. Important: If your helpdesk is installed on a subdomain of your corporate website (for example: http://helpdesk.xyzcompany.com/) then you need to make sure that any links in your template use absolute links as shown below:
   (Ex: <a href="http://www.yourwebsite.com/">Home</a> instead of <a href="/">Home</a>)

Step 2. Make Sure You Can Access Individual Sections of Your Template Remotely

1. Navigate to just the top part of your website and send it a page title using the variable that your site uses for it's page title.Examples:
   a. http://www.yourwebsite.com/header.php?PageTitle=Help%20Desk
   b. http://www.yourwebsite.com/template.php?TemplateSection=header&PageTitle=Help%20Desk
   
   Make sure that just the top section of your template comes up. Also make sure that the page title you specified in the URL shows up.
   
   (Don't worry if it looks stretched. That might just be due to a TD or DIV that hasn't been ended because of only showing the first part of the template.)


2. Navigate to just the bottom part of your website. Make sure that just the bottom section of your template comes up. (Again, don't worry if it looks stretched.)Examples:
   a. http://www.yourwebsite.com/footer.php
   b. http://www.yourwebsite.com/template.php?TemplateSection=footer
   

Step 3. Modify the Header

1. Open the header template file in the system (WordPress, PHPBB, or eSupport).


2. Save a backup of the header template contents somewhere on your hard drive.


3. Type the following at the top of the Header template:
   [php]
   // Bring in the corporate
   // website template header
   <?php echo file_get_contents("http://www.yourwebsite.com/header.php?PageTitle=Help%20Desk"); ?>
   [/php]


4. Save the file. (You are not done with the header yet. This is just to see if it works.)


5. In a new tab, open system in question to see if the top part of your corporate website got included.


6. If it got included, now you need to get rid of the top part built into system's template.


7. Open the header template and delete anything from the top down to the beginning <body> tag except for the following: 1) The new php code you added. 2) Any <link> tags. 3) Any <style> tags and their content. 4) Any <script> tags and their content. 5) Any other code you may need to keep on there -- such as tracking scripts.


8. Save the file.


9. Refresh your system in question in another tab to see if it is coming along okay.


10. It might look funny until you get the footer in place.

Step 4. Modify the Footer

1. Open the footer template of the system in question.


2. Save a backup of the footer template contents somewhere on your hard drive.


3. Type the following at the very bottom of the Footer template:
   [php]
   <?php
   // Bring in the corporate
   // website template footer
   echo file_get_contents("http://www.yourwebsite.com/footer.php");?>
   [/php]


4. Save the file. (You are not done with the footer yet. This is just to see if it works.)


5. In a new tab, open the system in question to see if the bottom part of your corporate website got included.


6. If it got included, now you need to get rid of the bottom part built into helpdesk's template.


7. In the footer template, scroll to the bottom to where the </body> tag is found. Delete it and anything below it except for the following: 1) The new php code you added. 2) Any <script> tags and their content. 3) Any other code you may need to keep on there -- such as tracking scripts.

Step 5. Fine Tune the Header and Footer

1. Now you should have your corporate website being shown in your system in question. But you still might need to get rid of any extra html that you may not want to always show.


2. Edit the header and footer templates to delete any extra html code that you may not want to appear on each page of the system in question.