The Menus Panel

Most themes (WF College One Pro included) will automatically create a main menu for you, using the titles for each page in your site, and organize them according to the Order attribute you’ve set on each page. However, there are times when you either want to include something in your menu that isn’t a page on your site, or don’t really want to list every page in your site in the menu (even if it’s a top-level page). In comes Custom Menus!

Make your own custom menu

To create your own custom menu:

  1. Click (or hover over) the Appearance menu and choose Menus
  2. Create a name for your menu and put it in the Menu Name field
  3. Click Create Menu to create the menu
  4. Choose some items to go into your menu, from the list of pages, posts, and News Items (if you’re using WF College One Pro), then click the Add to Menu button. Notice that you can even include a category in your menu.
  5. If you’d like a link to something that’s not a normal item in your site (like another website or even a direct link to a PDF on your site), type the address into the Custom Links section at the top left, and add this to your menu.
  6. Drag the menu items up and down to get them into the desired order. Notice that if you drag a menu item slightly to the right below another menu item, it will become a sub-menu under that item.
  7. Don’t forget to click Save Menu to save your menu!
The menu panel in WF College One Pro
The Menu panel

Insert your custom menu using a widget

Next we’ll put this menu into one one of the widget-ready areas, using the Navigation Menu widget.

  1. Click on Widgets in the menu to the left
  2. If it’s not already expanded, click on Primary to open up this widget area. (If you click on it and the space between the word “Primary” and the word “Secondary” gets smaller, the area was already expanded; just click it again)
  3. Click and hold on the widget Navigation Menus, and drag it over to the Primary widget area
  4. When you see a dotted line appear, drop the widget and it is instantly added to that widget area
  5. You can now check your site to see the new menu

But wait! Why does the menu look so weird?

Settings for the Navigation Menu widget to make it a DDSmoothmenu.

Make your custom menu a “DD Smooth Menu” like the default menu

To get your menu to look and act like the default menu (with the same colors, slide out menus, shadow behind the menus, etc.), you need to add a few details to the Navigation Menu widget. WF College One Pro uses a javascript library called DDSmooth Menu from to make the menus a little nicer. To get these special touches to your menu, go back to the Widgets panel, click on your Navigation Menu widget already in your Primary widget area (if it doesn’t expand, click the drop-down arrow at the right edge of the title bar for the widget) and add these values:

container_id = vertnav

container_class = ddsmoothmenu-v

What about Header and Background?

While these are important to your site (your site probably looks a little weird if you haven’t inserted a header image yet), these aren’t topics that usually give people much pause, and they’re usually not something that’s going to change much over time. To set a header image, go to the Header menu, and either choose a header that’s already installed, or upload your own, making it the size specified in the text on the Header page. Backgrounds are similarly straightforward for the most part, so we’re going to sail over those and get to another area that makes WordPress so special: PLUGINS!