Friday, April 25, 2014

Wordpress Notes 4 - Menus

It's taken me quite a while to figure out menus. Actually... that's a lie. I needed to do something to understand css based drop down menus. This involved mucking around with Wordpress, finding myself feeling a little frustrated and then going to pure html and css to get a feel for it. It still feels a little messy to me which is why I'm glad I've refactored  everything with a programmers perspective...

So there are 4 parts to it:
  1. Register a menu.
  2. Add the menu to your theme.
  3. Make it look like a menu.
  4. Add entries to the menu.

1. Register the menu.

In functions (for me it's in functions/header_menu.php) you need the following:

 <?php  
   add_action( 'init', 'register_navigation_menu' );  
   function register_navigation_menu() {  
     register_nav_menu(  
       array(  
         'header-menu' => __( 'Header Menu' ),  
       )  
     );  
   }  
 ?>  

If you want more than one menu, you can use the function "register_navigation_menus" like the following:
 <?php  
   add_action( 'init', 'register_navigation_menu' );  
   function register_navigation_menu() {  
     register_nav_menus(  
       array(  
         'header-menu' => __( 'Header Menu' ),  
         'footer-menu' => __('Menu in footer' )  
       )  
     );  
   }  
 ?>  

Within the array, you've got the menu's name, and how it appears in Wordpress. So in the example above I have two menus. When I'm doing anything with code, I used the names "header-menu" and "footer-menu". However, when I'm interacting with Wordpress, it shows up as "Header Menu" and "Menu in footer".

2. Add the menu to your theme.

Figure out where you want to display your menu(s). This is where things start to get a little hinkey. The names for the menu changes depending on what menu you've got associated with the widget. So, for the sake of styling, we need to put a wrapper around it.

It's probably not such a bad idea to talk about classes vs. ids. If you're referring to a specific thing, use id. It's only going to be used once. It's an object. It's a set thing. If however, you're going to be using something all over the place thing, it's a class.

Okay, so I want to put a container around my header menu... The code looks something like this:

 <div id="header_menu">  
   <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>  
 </div>  

I think you can ignore the "theme_location" bit. I didn't find any information on that bit.

3. Make it look like a menu

 #header_menu>div ul {  
   list-style: none;    /*remove bullets*/  
   padding: 0px;      /*unordered lists normally have padding*/  
 }  
 #header_menu>div>ul>li {  
   padding-right: 10px;  /*Make a space between menu entries*/  
   text-transform: uppercase;  
   float: left;      /*Make the menu horizontal*/  
 }  
 #header_menu>div>ul>li a { /*Make links in menu look not so ugly*/  
   color: black;  
   text-decoration: none;  
 }  
 #header_menu>div>ul>li>ul {  
   display: none;     /*Hide sub menus*/  
   position: absolute;   /*Without this the flow of the menu can  
                affect the page layout*/  
 }  
 #header_menu>div>ul>li:hover>ul {  
   display:block;     /*Make the submenu visible when menu item  
                has been selected*/  
 }  

This is kind of an absolute minimum.. It only supports one level of sub menu. It's very specific about where the styles are being applied. I needed to refactor it for myself from the example I was working off.

The non-visible elements are ALWAYS on the screen. Which means that styles outside of making a drop down menu visible and how it becomes visible (transitions) should be OUTSIDE of any kind of hover block.

4. Add entries to the menu

Go into your Wordpress admin pages and go to Appearance > Menus.

No comments:

Post a Comment