HTTP/1.1 301 Moved Permanently Server: Tengine/2.1.0 X-ts: ---- X-Archive-Orig-date: Wed, 23 Jan 2013 10:01:00 GMT Memento-Datetime: Wed, 23 Jan 2013 10:01:01 GMT X-Archive-Orig-content-length: 0 X-Archive-Orig-server: Apache Date: Sun, 13 Aug 2017 17:18:00 GMT X-Archive-Orig-cache-control: no-cache, must-revalidate, max-age=0 X-Page-Cache: MISS X-Archive-Orig-pragma: no-cache Cache-Control: max-age=1800 Link: ; rel="original", ; rel="timemap"; type="application/link-format", ; rel="timegate", ; rel="first memento"; datetime="Mon, 30 Jul 2012 08:02:41 GMT", ; rel="prev memento"; datetime="Thu, 20 Dec 2012 04:14:08 GMT", ; rel="memento"; datetime="Wed, 23 Jan 2013 10:01:01 GMT", ; rel="last memento"; datetime="Wed, 23 Jan 2013 10:01:01 GMT" X-Archive-Orig-x-pingback: http://customwordpressdezigns.com/xmlrpc.php X-Archive-Orig-expires: Wed, 11 Jan 1984 05:00:00 GMT X-Archive-Playback: 0 X-Archive-Orig-connection: close location: http://web.archive.org/web/20130123100101id_/http://customwordpressdezigns.com/2012/05/adding-span-tags-to-wordpress-menu-navigation-bar/ X-Archive-Orig-x-powered-by: PHP/5.3.15 Content-Type: text/html; charset=UTF-8 X-location: All X-App-Server: wwwb-app41 X-Archive-Orig-vary: Accept-Encoding,User-Agent HTTP/1.1 200 OK X-Archive-Orig-cache-control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Date: Sun, 13 Aug 2017 17:18:01 GMT Server: Tengine/2.1.0 Content-Type: text/html; charset=UTF-8 Link: ; rel="original", ; rel="timemap"; type="application/link-format", ; rel="timegate", ; rel="first memento"; datetime="Fri, 08 Jun 2012 06:28:33 GMT", ; rel="prev memento"; datetime="Sun, 20 Jan 2013 11:11:18 GMT", ; rel="memento"; datetime="Wed, 23 Jan 2013 10:01:01 GMT", ; rel="next memento"; datetime="Sat, 26 Jan 2013 21:46:51 GMT", ; rel="last memento"; datetime="Sat, 18 Apr 2015 01:25:00 GMT" X-Archive-Orig-pragma: no-cache Cache-Control: max-age=1800 X-App-Server: wwwb-app18 X-location: All X-Archive-Orig-expires: Thu, 19 Nov 1981 08:52:00 GMT X-Archive-Orig-vary: Accept-Encoding,User-Agent X-Archive-Orig-last-modified: Wed, 23 Jan 2013 10:01:00 GMT X-Archive-Orig-server: Apache X-Archive-Orig-date: Wed, 23 Jan 2013 10:01:00 GMT X-Archive-Playback: 0 X-Page-Cache: MISS X-Archive-Orig-x-powered-by: PHP/5.3.15 X-Archive-Orig-x-pingback: http://customwordpressdezigns.com/xmlrpc.php Memento-Datetime: Wed, 23 Jan 2013 10:01:01 GMT X-Archive-Orig-link: ; rel=shortlink X-ts: ---- X-Archive-Orig-connection: close Wordpress Menu Navigation | Adding Span Tags To A Page Or Posts |

WordPress Web Design 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.

Twenty Ten Header.php Nav Code After Adding Span Tags To WordPress Menu Navigation Bar

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.

Twenty Ten Custom Css After Adding Span Tags To WordPress Menu Navigation Bar

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.

WP Menus Main Menu After Adding Span Tags To WordPress Menu Navigation Bar

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.

Twenty Ten Navigation Bar After Adding Span Tags To WordPress Menu Navigation Bar

Click here 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!

About The Author

Rick Cano

is a Web Designer, SEO Specialist and Teacher/Coach with over ten years of professional experience in the design industry. As the owner of Cano Consulting he specializes in creating custom web sites for small businesses, analyze SEO and Teach/Coach business owners how to increase traffic to their website....

2 Responses to Adding Span Tags To WordPress Menu Navigation Bar

  1. Rick Cano says:

    Testing a comment posting to see how it looks both on the front end and on the back end. Thanks again

  2. Rick Cano says:

    Thank you….what subject would you like me to cover in reference to Adding Span Tags. Let me know, RC