In a previous tutorial, we created an "About Us" EZ-Page in ZenCart admin control panel. Now we want to add the link to this page which is

http://www.example.com/index.php?main_page=page&id=1

to the main navigation menu of the ZenCart site.

1. We have all of ZenCart's application files and folder on our local disk and have setup a Dreamweaver site as shown.

The goal is to find out which of the thousand plus ZenCart files contains the HTML code for the main navigation. If you have worked with ZenCart before or read the documentation, you might know where it is. But our goal here is to demonstrate a debugging technique that will enable you to find this out.

2. We want to use Dreamweaver's "Search all file in Site" feature to find where this code is. But first we have to know what to search for. Navigate to the home page of the current site and do a "view source" in the browser.

3. Copy that code and paste code into a the "code view" of a new file called debug.html to the root of the Dreamweaver's local site.

4. In Dreamweaver, switch to the design view of debug.html and highlight the main navigation.

5. Now when you switch back to the code view in Dreamweaver, you will see that the code for the main navigation is highlighted for you.

Note that the menu is constructed using ul and li tags (unordered list).

6. Note also that the menu is contained within a div of id "navMain". We perform a search of that div code throughout all of ZenCart's files by ...

7. After searching through all of ZenCart files, Dreamweaver found two in the results pane. The first is just our debug.html. But the second file tpl_header.php looks promising. Double-click on it to open it up in Dreamweaver.

8. The file is located in ...

includes/templates/template_default/common/tpl_header.php

If you are not planning on using the ZenCart template override system, you can add the new "About Us" menu item directly to this file.

However, if you are following best practices and using the ZenCart template override system, then you would copy the tpl_header.php file to ...

includes/templates/example/common/tpl_header.php

where "example" is the name of you custom template or site. Then you would make changes to ...

includes/templates/example/common/tpl_header.php

without altering files in "template_default". In order for ZenCart to look for files in the "example" folders, you have to set ZenCart to that template in the admin control panel.

9. For the sake of brevity, we'll just change directly

includes/templates/template_default/common/tpl_header.php

without using the template override system. We added this highlighted code to the file...

11. If you upload the tpl_header.php to the web server, you will find that you now have a new menu item in your site...

In the next tutorial, we will learn how to change a menu item.