4 thoughts on “Theme’s header: Example – step by step – of languages nav menu…”

1. Was wondering if you could give me a quick tip. I think your plugin is fantastic. I’ve employed the theme header details above but have a slight snag. My theme’s header calls to a primary nav with this code:

   ‘primary-menu’, ‘container’ => ”, ‘fallback_cb’ => ”, ‘menu_class’ => $menuClass, ‘echo’ => false ) );
   }
   if ($primaryNav == ”) { ?>
   <ul class="”>

   <li ><a href="”>

   How would I edit this code for my Italian menu (alternative language menu)? Any help would be greatly appreciated.

   Thanks,
   Marco

2. before to send you a deeper answer, don’t forgot to read the code of twentyeleven-xili child theme.

3. Thanks for this article! It is one of the few that are formed as step-by-step instructions, and I was actually able to follow along 🙂

   There are however a few problems with the article. I have tried to clean up the article a bit, however I only have very basic knowledge of PHP and WordPress, and English is not my mother language either, so there may be mistakes here also.

   On the top right, a language menu (1) is added to the default nav menu (2) in a div here named xili_language. The menu is not “added to” another menu. This should possibly have been a language menu (1) is created in addition to the default nav menu (2) …

   Functions file

   Add the following code to your functions file (functions.php). It creates an additional language navigation menu to place the language choices in.

   register_nav_menus( array(
      'primary' => __( 'Primary Menu', 'twentyeleven' ),
      'language_nav' => 'Language Navigation'
   ));
   

   If you want to, you can localize the “Language Navigation” menu title. (It shows up in the configuration dashboard.) This will however require the creation of a localization file. For more information, see http://codex.wordpress.org/Translating_WordPress.

   Note that for sake of logic, it’s best to start with modifying the functions file since all further actions depend on this modification. I removed the “primaire” menu from the example, since it seems to me it is not relevant to the instructions. I also removed the “s” from “languages”, I think that is the proper English writing. I have no clue what the remark 3 with if in the comment refers to. Also including the localization code from the “ipseite” project is a needless complication.

   Menu creation

   Log into the administration area and open the Menus page (under Appearance). If the previous edit of the functions file was successful, an additional menu location should now be available. Create a new menu, for example “Languages”. Leave the menu empty!

   Note: “Dashboard” is only the name of first screen in the administration area, not of the whole. (See http://codex.wordpress.org/Glossary#Dashboard.) And again, for the sake of logic, this should be the second part.

   Filling the menu

   Under Settings, open the Languages page, followed by the “Settings for experts” subpage. Under “Nav menu: Home links in each language”, put a checkmark in front of “language_nav”. (This is the menu name you defined in the functions file.)

   If you want to put links to additional pages in the menu, then select the “language_nav” menu from the dropdown menu under “Nav menu: Automatic sub-selection of pages according current language”. Put a checkmark in front of “Add selection of pages in nav menu” and write the code include= plus the page IDs for the pages that you want added. Add the IDs of the pages in all languages, only the ones in the current language will be shown in the menu.

   Note: This one was difficult to find. There was no information where to find the page, and the screenshot is significantly different from the page I get to see. (Not just a different language.) The possibility to add links to pages to the language menu is confusing; the language switches themselves are always visible, while the visible page links depend on the choosen language. Also, this system seems to make it impossible to add pages to more than one language menu.

   Header file

   The header file is not included in the downloadable Twenty Eleven-xili theme. It first has to be copied over from the full Twenty Eleven skin.

   Add the following code to the header file (header.php), placed after the opening header tag and before the opening hgroup tag. Please note that the 'language_nav' value corresponds to the name defined in the functions file.

      ...
      
         
             'language_nav' ) ); ?>
         
         
            ...
   

   Note that the code in the original example does not follow the code from the Twenty Eleven theme. I also removed several parts again. The nested div tag had no added value to the one named “xili_language”. The wp_nav_menu function automatically adds an ul tag, so hard-coding that here created a nested ul. The container_class parameter is also unneeded, since the “xili_language” ID is specific enough.

   Stylesheet file

   Add the following code to the stylesheet file (style.css).

   #xili_language ul {
      float: right;
      list-style: none;
   }
   #xili_language li {
      display: inline;
      float: left;
      margin: 2px;
   }
   

   This will put the menu in the top right corner of the page.

   Note: I removed the .xl class since that element was redundant and removed, and replaced the padding with a margin for better support of the background images. (Backgrounds continue under the padding, not under the margin.)

   To replace the textual language links with flag images, add the following code.

   #xili_language {
      line-height: 11px;
   }
   #xili_language a {
      display: block;
   }
   #xili_language .menu-item-type-custom {
      text-indent: -9999px;
      width: 16px;
   }
   #xili_language li.lang-en_us a {
      background-image: url('images/flags/en_us.png');
   }
   

   The values for line-height and width should correspond to the width and height of the images used (11×16 for the included default images).

   Repeat the following block for every language used in your blog, replacing xx_yy with the appropriate language code.

   #xili_language li.lang-xx_yy a {
      background-image: url('images/flags/xx_yy.png');
   }
   

   Lots of code optimizations here, I removed several lines that contained default values, combined groups where possible, and replaced repetitions of li.lang-xx_yy with the general .menu-item-type-custom.

   Finally, some styling can be applied:

   #xili_language {
      color: #666;
      font-size: 10px;
      padding-bottom: 20px;
   }
   #xili_language a {
      color: #666;
      letter-spacing: 1px;
      text-decoration: none;
      text-transform: uppercase;
   }
   

4. The code for the header file did not come out right. (Why is there no preview or edit possibility?) It should have been:

      ...
      <header id="branding" role="banner">
         <div id="xili_language">
            <?php wp_nav_menu( array( 'theme_location' => 'language_nav' ) ); ?>
         </div>
         <hgroup>
            ...
   

Comments are closed.