By A Web Design

Suppressing All Page Titles From Appearing As Top Menu Items

There are times when a website developer will require that none of the Page titles, created in Wordpress appear as Top Menu Items.They would like to fully customize the Top Menu items themselves.

PixoPoint empowers developers to do exactly this if required.Here is how it’s done.

Diagram 1

Login to the site as wp-admin.Get to the Dashboard. Click on Settings.Then click PixoPoint Menus.Drag / Drop the tab into the Inactive Menu Items as shown in diagram 1.

This will ensure that none of the Page titles appear as Top Menu Items in the WP page.

Now Drag / Drop the tab into the Main menu items section as shown in diagram 2.

Diagram 2

Click the arrow on the right hand side of the tab. An editing box will appear into which customized code snippets can be written as shown in diagram 3.

Diagram 3

A sample of such a code snippet is given below:

 
<li class="page_item page-item-96"><a href="#">Home</a></li>
<li class="page_item page-item-97"><a href="#">Services</a></li>
<li class="page_item page-item-98"><a href="#">About Us</a></li>
<li class="page_item page-item-99"><a href="#">Contact Us</a></li>

NOTE: There are no <ul> </ul> tags used.

This is because what is being created right now are equivalent of Parent Top Menu items.This code will automatically get wrapped in <ul> </ul> tags on being displayed in the Top Menu DIV.

To create custom Child Menu Items for Each Parent Top menu item, which will slide to downwards do the following?

 
<li class="page_item page-item-96 haschildren">
  <a href="/home">Home</a>
  <ul>
    <li class="page_item page-item-102">
      <a href="/home-1">Home Child 1</a>
    </li>
    <li class="page_item page-item-103">
      <a href="/ home-2">Home Child 2</a>
    </li>
  </ul>
</li>
<li class="page_item page-item-97 haschildren">
  <a href="/services">Services</a>
  <ul>
    <li class="page_item page-item-104">
      <a href="/services-1">Service Child 1</a>
    </li>
    <li class="page_item page-item-105">
      <a href="/services-2">Service Child 2</a>
    </li>
    <li class="page_item page-item-106">
      <a href="/services-3">Service Child 3</a>
    </li>
  </ul>
</li>
<li class="page_item page-item-98">
  <a href="/about">About Us</a>
</li>
<li class="page_item page-item-99">
  <a href="/contact-us">Contact Us</a>
</li>

Creating the Third Level Child Menu items

Often website developers need a third level of child menu items. These menu items traditionally slide out to the right of a Menu Item.

PixoPoint permits the creation of the third level of child menu items. Here’s how you do it:

Use the following code snippet to create the third level of child menu items

 
<li class="page_item page-item-96 haschildren">
  <a href="/home">Home</a>
  <ul>
    <li class="page_item page-item-102 haschildren">
      <a href="/home-1">Home Child 1</a>
      <ul>
        <li class="page_item page-item-102">
          <a href="/home-1-a">Home Child 1A</a>
        </li>
      </ul>
    </li>
    <li class="page_item page-item-103">
      <a href="/home-2">Home Child 2</a>
    </li>
  </ul>
</li>
<li class="page_item page-item-97 haschildren">
  <a href="/services">Services</a>
  <ul>
    <li class="page_item page-item-104">
      <a href="/services-1">Service Child 1</a>
    </li>
    <li class="page_item page-item-105">
      <a href="/services-2"> Service Child 2</a>
    </li>
    <li class="page_item page-item-106">
      <a href="/services-3"> Service Child 3</a>
    </li>
  </ul>
</li>
<li class="page_item page-item-98">
  <a href="/about">About Us</a>
</li>
<li class="page_item page-item-99">
  <a href="/contact-us">Contact Us</a>
</li>

In the above code snippet, the Home Parent Menu Item, has Home Child 1 as a child menu item and Home Child 1 has a child menu item named Home Child 1A.

Home Child 1A will be the third level of menu items.

Obtaining Page ID numbers

From the above code snippets, the page-item-105 (i.e. page number) is required. Here how to get the page item number.

Log into the WP Admin section.

In the left most column, click on Pages as shown in diagram 4.

Diagram 4

Choose the page whose Page ID number is required as shown in diagram 5. Simply double click the page link so that it opens in the Wordpress Editor as shown in diagram 6.

Diagram 5