Adding Span Tags To WordPress Menu Navigation Bar

Span Tags are code snippets for styling WordPress menu

I recently completed a custom WordPress design in which the client required a very distinct feature within his WordPress Menu.  Essentially he wanted a second line of text “underneath” the main navigation bar page link/text.  Sounds easy enough right?  Yes and No.

I had a pretty good idea to accomplish this I would have to be adding span tags to the WordPress menu, however I was curious to see if maybe there were any newer techniques out there, and so I did a little research and I found a little over a million articles on the subject.  I got through the first two pages in a Google search and threw my hands up.  I read one article that had over two thousand words and by the time I finished reading the article I was totally confused.  This sort of stuff is not complicated but after reading these articles even I was confused.  There’s always a way to explain a complicated technique in a more simpler way so that the average person can understand.

Here’s my very simple guide with instructions that you’ll be able to follow very easily along with supporting images on how to accomplish adding span tags in order for you to be able to further customize your WordPress menu navigation bar.  To make things even simpler we’re using the Twenty Ten theme but you can use pretty much any WordPress theme.

Step 1 – Header.php

We need to add a code snippet to the header.php file of your theme within the wp_nav_menu php code.  This will establish a span tag after the wp_nav_menu code.  In the image below you’ll see where we’ve added the code snippet (this is the “After” image).  Clicking the image you’ll get a pop up image of the header.php file “Before” the code snippet modification.

Look half way down this header.php file and you’ll see the php code that calls the features for the wp_nav_menu, and if you track it to the second line after the word ‘primary’, you’ll see beginning after the comma the code snippet we added (‘link_after’ => ”, ‘link_after’ => ” ).  Notice in the “clicked” pop up image the “before” image shows the same wp_nav_menu code “before” any span tag code snippet modification.  Why do we use the link_after call?  Because we want the text to display after the main page link in the navigation menu bar…not before.

Step 2 – Style Sheet

Now that we’ve established a span tag after the wp_nav_menu code.  We now need to add some style sheet custom code to tell the theme how you want the menu styled and displayed for the second line in relation to the first line or main page link.  In the image below you’ll see where we’ve added the custom style sheet code (this is the “After” image).  Clicking the image you’ll get a pop up image of the original Style Sheet file “Before” the custom code modification.

Look in image where it says /* Adding a second span line */ and you’ll see the custom css I used to style the second line.  When you click the pop up image (this is the “Before” images) you’ll see the basic Twenty Ten style.css file without any span.  The Twenty Ten theme does not come with any span anywhere.  If I wasn’t using a custom.css then I would add this same style sheet code on the last line underneath the heading Menu within the style.css you saw in the pop up image.   (Note:  As a matter of practice I always use a Custom.css for all  Custom WordPress Designs so that none of the customizations disappear when a client upgrades their website template to a newer version).

Step 3 – Menu Dashboard

Now we’ve established a span tag after the wp_nav_menu code.  We’ve added the custom code to style sheet.   Take a look at the image below which will show the Modified Menu area (this is the “After” image).  Clicking the image (this is the “Before” image), you’ll get a pop up image of the original Menu area without the span text.

As you can see we simply added then the text that we want after the main page link then we closed it with .  Access your actual WordPress Menu’s area within your dashboard.  Appearance >> Menu>>>.  You’ll see the  main page headings like Home, Blog etc. 

Completed WordPress Menu

Now take a look at the final WordPress Menu with Added Span Tags and text on the second line in the image below (“After” image).   Click the image to see the  “before” image.

Click on this link to visit the website we recently completed and it will showcase the two line ” WordPress Menu navigation bar.”  The only difference is we used a repeating image in that site whereas in our example above we used the typical black background color that comes with the Twenty Ten navigation bar.
Adding Span Tags To WordPress Menu Navigation Bar
Leave a comment, we “really” would like to know what you think!