The code in this mini-tutorial came from a Friday evening spent fiddling with a client project. I find that by Friday night I’m more apt to mess around with code for the sake of seeing what I can do, whereas the rest of the week that’s balanced a lot more with the need to get things done. Plus my husband works Friday nights and it gets pretty quiet once the kids are in bed.
Last Friday, I was working on a custom theme for Brené Brown, a lovely client of mine (via Braid Creative who I can’t adequately describe without sounding like I’m bragging by association. We just moved her site from Squarespace to WordPress after doing the same with the site for her certification program, and I was working on putting the social media icons in the top navigation:
Nothing too crazy about that construct, I’ve done similar before.
The Strategy Decisions
There are a number of ways to handle it on both the content management side and the code side. Off the top of my head:
Content Management Options
- Hard code the links and icons (bad news if the client ever changes an account)
- Hard code most of it, but use custom fields/ theme options for the account URLs (I do this a lot)
- Use a WordPress menu with classes on the links
I ended up going with third one, mainly because everything else in that area uses menus so that seemed like the most intuitive place to put it. Also, I’m not using theme settings or options for anything else, and didn’t want to add them just for this.
Just in case anyone is wondering, you can add classes (and link targets) to your menu items in WordPress by using the Screen Options tab on the top right of the admin area to enable the fields. You’ll then see them on your individual menu items:
I went ahead and registered my new nav menu for the social media icons so that I could have them separate from the regular menus for styling purposes (and organization), and populated it, then put the regular navigation menu template tag into the theme
If this were a sitcom, you’d hear the squealing tires from slamming on the brakes right about here.
So, this theoretically works just fine. This is approximately the style of output that gets you:
<div class="menu-upper-menu-container"> <ul id="menu-upper-menu" class="menu"> <li id="menu-item-1" class="twitter menu-item current-menu-item"> <a href="http://twitter.com/username" target="_blank">Blog</a> </li> <li><a><!-- you get the idea ---></a></li> <li><a><!-- ... ---></a></li> </ul> </div>
Workable – you’d have to kind of beat the outer
div and possibly the
ul into submission since you likely want them to behave differently than the browser defaults and your other code dicatates, but it’s possible to do it that way, certainly.
For some reason, though, this didn’t appeal to me on Friday night – I wanted to get rid of the extra stuff, not have to override a bunch of stuff using specificity in my CSS, and just generally see if I could clean this up to work more in my favor and look more like how I’d hard-code it, in terms of HTML structure.
I had it in my head that would be great to get a list of links inside a single outer container as my final output.
Per the Codex, there are existing parameters of
wp_nav_menu(); that allow you to remove the outer container and swap out or remove the
items_wrap, respectively). The problem is, you’re still left with list items for each menu item. Not awesome.
My friend Google lead me to a snippet on CSS Tricks for removing the li elements using
strip_tags, which kind of works but just gets rid of the list items entirely, including all the useful information on them like custom classes (and classes indicating the current page).
That concept made me think of the ever useful
str_replace function, though, which ended up being just right for what I was looking to do. In case you aren’t familiar with it, the string replace PHP function does a find and replace in a string:
str_replace( $find, $replace, $searchstring);
Version 1: Semi-Clean
Here’s how I used this along with
And here’s the general output structure:
<nav id="menu-upper-menu" class="menu"> <span id="menu-item-1" class="twitter menu-item current-menu-item"> <a href="http://twitter.com/username" target="_blank">Blog</a> </span> <span><a><!-- you get the idea ---></a></span> <span><a><!-- ... ---></a></v> </nav>
It’s ok, I guess. The thing is, those
span elements are totally extraneous, which was kind of grating on me.
Version 2: Really Clean
Then it occurred to me that you can use arrays to find and replace multiple strings at once within one
str_replace function, where the first array is all “finds” and the second is all “replace withs” and they’re read in order (first find, first replace, then second find, second replace).
That lead to this modification:
And this output:
<nav id="menu-upper-menu" class="menu"> <a id="menu-item-1" class="twitter menu-item current-menu-item" href="http://twitter.com/username" target="_blank">Blog</a> <a><!-- you get the idea ---></a> <a><!-- ... ---></a> </nav>
Winning! We’ve maintained all our ids and classes, plus our link target, but gotten rid of all the excess for nice clean (HTML5!) menu code.