WordPress fixes part 3 – Customising the wp_list_pages navigation menu drop-downs to insert elements between each menu heading dynamically

This is the last bit I’ll be writing on some customised features I’ve added to my theme – again, because the community (especially in this instance) has been so good to me, the least I can do is return the favour by publicly posting the code/solution to my problem.

When I built my template, I designed it so that between each menu item sits a div to create a space between menu items. While this is easy enough to do in static HTML, I needed a solution that would allow me to do this for my menu system in WordPress through using the wp_list_pages function. Now, it wouldn’t be too hard to programmatically add the div in if the menu was operating as a single unordered (<ul>) list, but I was also leveraging some jQuery to render the drop-down menu system for my sub-menu items two more levels deep; thus, simply adding divs as wrappers with list item tags with the wp_list_pages function wouldn’t work, as the divs would also get added to each of the sub-menu list items.

Ideally, what I needed was a script to treat the menu as two objects – the first would be the top-level navigation, the second would be the two-levels of sub-menu navigation that fly out as drop-downs. Once the output from the database has been extracted into two objects for manipulation within the code, the first object will require an extra div to be added in front of the text block. We add it to the front of each text block so that there isn’t a div left over and placed after the final top-level list item, because that looks messy.

For the second object, all the list items cascade out into sub-lists within the primary menu item. These list items have no additional HTML inserted between elements, and styling them is handled by all the CSS coded up when the template was initially rendered as static HTML.

This of course creates issues with adding in a link back to ‘Home’ via the WordPress widgets – to get around it, I simply added a static link back to home in the header.php file. Crude, but effective.

Not being too cluey with PHP (I’m still on my training wheels!), I took my situation to the WordPress forums and received some fantastic assistance by one of the members on there, vtxyzzy. The following is the eventual code that resulted from our discussion, with vtxyzzy creating the solution whilst I made a couple of tweaks to fix some of the bugs:


	$insert = '';
	$newmenu = '';
	$level = 0;
	foreach ($parts as $part) {
		if ('' == $part) {--$level;}
		if ('

In the code you’ll notice the $insert function which adds the dividers between each entry in the top-level menu, and leaves the remainder without touching them. Very clever, and certainly isn’t anything I could have achieved without outside help!

So, incorporating this function into my header.php along with the static link back to the homepage looks like this:


Feel free to use the code if you feel it might prove useful to your site. There’s no need to link back/credit, but I wouldn’t mind if you left the comment in the code, posted a comment on the blog or send me a message to let me know if you’ve used it as I’d love to see other people’s use of this great little function!

… and that’s the end of the technical/Wordpress stuff! Expect normal programming to resume form next week, finally! 🙂


Giving the blog a facelift

I’ve been toying with the idea for a little while now about giving the blog a facelift and incorporate a few new tricks I’ve picked up over the last couple of months toying with a bit of ASP, implementing some jQuery scripts and picking up a few advanced-ish CSS tricks at work…

And yes, I know that WordPress uses PHP as its main scripting language, but some of the principles behind scripting within ASP (though to be honest, I actually cut my teeth on XSLT, and everything’s been a bit easier to understand since then!) can still be applied to PHP – a scripting language is a scripting language, you learn some of the principles and apply it to the situation, and sometimes your code works, sometimes (more often since I’m still learning!) it kinda breaks everything 😉 Or is that just me? I guess that’s the problem when you’re a bit of a self-taught backyarder when it comes to coding 🙂

Anywho, I’ll probably start toying with some ideas for design changes and some new functions/features soon-ish. If anyone knows of any really progressive and stylish blogs or blog designs (self-promotion is fine ;)), let me know in the comments. I don’t know when I’ll put time aside to start fleshing out some new ideas and compile some new toys for the blog, but I figured if I actually post about it, it might encourage me to actually do something about it instead of just thinking about it 😉 Plus I haven’t built a local testbed since re-installing my O/S a while back, so I’ll have to get off my behind and get onto that too!


Companion blogs


April 2024