Setup Your Main Menu

Category: BioSphere for WordPress
Published on: Monday, 13 February 2012
Author:

The unique concept of the BioSphere WordPress theme is that it has a floating menu that goes behind the page content and will move down the page as you scroll long pages with your browser. It's different from typical menus that stretch across the top of the page horizontally whereas this one is vertical. The main menu does offer the user to have two levels of submenus, three if you count the parent items. The screenshot below shows how the default menu looks:

main-menu

This menu sits in a container that floats behind the page content and depending on your menu background, this one has a transparent image that tiles, giving it a seamless background. You can see how to customize the background with the Setup Your Menu bar Background tutorial.

Create Your Menu

Setting up your menus in WordPress should be something everyone knows by now since it's been part of WordPress for a while now. The Biosphere theme comes with two predefined menu areas:

  • Main menu area - the primary menu that goes on the top of your web pages
  • Footer menu area - this is a secondary menu area for the bottom right position of your web pages

For this tutorial, I will focus on the main menu (the primary menu) because this is the most important navigation for your website. The footer menu will be saved for the next tutorial. If this is a new website and new install, you will probably find that your menu admin area is going to be empty and each of the meta boxes are greyed out. Plus, you may notice on the front of your site, you will see a link there "Sample Page". This is a default setup but this will automatically disappear once you make your first menu.

So I will start with this assumption it's a new install.

Part 1 - Disable the Portfolio Categories Meta Box

Because this theme contains a custom post type and custom taxonomy, this will add a new palette meta box to your menu admin window called "Portfolio Categories". It's important we disable this:

  1. Navigate to Appearance >> Menus >> Screen Options
    screen-options
  2. Uncheck the Portfolio Categories option
    screen-options-portfolio
  3. Click the Screen Options tab to close it

Part 2 - Create a New Menu

  1. Navigate to Dashboard >> Appearance >> Menus
  2. In the "Menu Name" field, type a name for your primary menu, for example: Main Menu
    main-menu-create
  3. Click "Create Menu"

Part 3 - Set the Menu Location

  1. In the "Theme Locations" panel to the left, select from the dropdown field, your new menu you just created
    main-menu-theme-locations
  2. Click "Save"

Part 4 - Make Menu Items

  1. First, create a "Home" menu link using the "Custom Links' palette
    wordpress-menu-custom-links
  2. Click Add to Menu
  3. Click Save on your main menu
  4. For any additional menu items you wish to add to your main menu, click Add to Menu

What About Sub Menus?

The Biosphere theme has 3 menu levels...the parent level plus 2 sub levels. Like everything else that has customizable colours, your submenus can also be customized as well. The screenshot below shows the default styling:

biosphere-submenus

Creating submenus is part of the WordPress menu functionality by drag and dropping menu items. If you are unsure how this is done, you can check out the WordPress website for the Appearance Menus Screen.

Last Updated on Monday, 13 February 2012