Open source training & tutorials from experienced, passionate people
By A Web Design
When crafting a website often Parent and Child pages have to be created. Parent and Child pages are special pages which carry content are specifically related to each other but make a lot of sense if read from the Parent page downwards to the child page(s). When using Wordpress as a Content Management System (CMS) creating such related (i.e. Parent / Child) pages is pretty simple.
The problem here is that both a Parent page and its associated Child pages are created as pages in the Wordpress page creation system. Wordpress displays all page titles as Top Menu items in the Top menu bar of the Wordpress template. This makes for a horribly cluttered Top Menu.
What website developers normally want is that only:
NOTE: This actually give rise to another problem. Since the Child pages are excluded from the Top Menu section by modifying the PHP codespec that creates the Top Menu, they cannot be invoked at all.
Additionally, when the Browser cursor, hovers over a parent page, Top menu item, a set of associated menu items should drop down displaying menu links that point to associated Child pages as shown in Diagram 2.
|
|
|
|
|
In example Categories is the Parent page, Top menu item which is displayed in the WP top menu section as shown in Diagram 1. When the mouse cursor is hovered over the Top menu item Categories a drop down list of menu items is displayed as shown in Diagram 2. Each such child menu item has an appropriate link to a specific child page created in WP. Only on click of that link the specific child page is displayed. This approach guarantees that the Top Menu area will be not be cluttered, look tidy, with only those Top menu items appearing that are associated with Parent Page titles. |
Download the Pixopoint Drop Down Menu plugin from:
Wordpress Plugin Download URL: http://wordpress.org/extend/plugins/pixopoint-menu/
Website URL: http://pixopoint.com/products/pixopoint-menu/
Install this plugin in the usual way in Wordpress.
After the PixoPoint has been installed and activated, it must be called with the Wordpress template appropriately. To invoke the Pixopoint Drop Down Menus, do the following step by step:
Invoking Pixopoint Menus instead of the default Wordpress Top Menu in your template:
Locate the PHP syntax that invokes the Wordpress default Top Menu. Delete this code and in its place add the code spec below:
<?php if (function_exists('pixopoint_menu')) {pixopoint_menu();}; ?>
This codespec, checks for the existence of the Pixopoint menu system and then invokes the Pixopoint Drop Down Menu system to appear in the DIV in which this code snippet is placed.
Now it’s time to configure the Pixopoint Drop Down menu via the Wordpress Admin section.
Login as Administrator and access the WP dashboard. In the left hand side column locate the menu item Settings as shown in Diagram 3.
Diagram 3
On click of Settings a drop down menu opens up. Locate the PixoPoint Menu within the drop down list of menu items as shown in Diagram 4 and click it.
Diagram 4
The PixoPoint configuration UI will appear as shown in Diagram 5.
Diagram 5
Locate the Main menu items section in this page. The drag / drop the 
and 
tabs and place these among the Inactive menu items as shown in Diagram 6.
Diagram 6
This is to prevent:
NOTE: If you desire a Search Box to appear in the Top Menu section do not move the Search tab to the Inactive menu items area.
NOTE: Only the Pages tab will be visible in the Main menu items.
Finally when this is set up as indicated click the 
button to save the changes made.
Since only the Pages tab has been left in the Main Menu items, all of the Master Page Titles will appear as Top Menu items in the WP page. The related Child page titles will appear as a drop down menu list beneath the associate Master page, Top Menu item as shown in Diagram 2.
Please wait...