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:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php // Custom menu, author: vtxyzzy; source:  http://wordpress.org/support/topic/360306; minor corrective alts by GisokuBudo, see thread for details
	$my_pages = wp_list_pages('echo=0&depth=3&title_li=&exclude=313');
	$parts = preg_split('/(<ul|<li|<\/ul>)/',$my_pages,null,PREG_SPLIT_DELIM_CAPTURE);
	$insert = '<li class="nav-menu-divider"></li>';
	$newmenu = '';
	$level = 0;
	foreach ($parts as $part) {
		if ('<ul' == $part) {++$level;}
		if ('</ul>' == $part) {--$level;}
		if ('<li' == $part && $level == 0) {$newmenu .= $insert;}
		$newmenu .= $part;
	}
	echo $newmenu;
?>

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:

header.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul id="nav-menu">
	<li><a href="/">Home</a></li>
	<?php // Custom menu, author: vtxyzzy; source:  http://wordpress.org/support/topic/360306; minor corrective alts by GisokuBuo, see thread for details
		$my_pages = wp_list_pages('echo=0&depth=3&title_li=&exclude=313');
		$parts = preg_split('/(<ul|<li|<\/ul>)/',$my_pages,null,PREG_SPLIT_DELIM_CAPTURE);
		$insert = '<li class="nav-menu-divider"></li>';
		$newmenu = '';
		$level = 0;
		foreach ($parts as $part) {
			if ('<ul' == $part) {++$level;}
			if ('</ul>' == $part) {--$level;}
			if ('<li' == $part && $level == 0) {$newmenu .= $insert;}
			$newmenu .= $part;
		}
		echo $newmenu;
	?>
</ul>

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! 🙂

Share

WordPress fixes part 2 – Page elements appearing in front of pop-up images in the NextGen Gallery / lightbox plugins

This one’s actually a bit impromptu as I only just figured it out and wanted to share it with the community in case anyone else comes across the same problem.

Since installing the new themes here and on my other blog, I found that all my image galleries that were put together using the NextGen Gallery plugin (which also uses the lightbox plugin) had all the elements from the navigation bar appearing above the pop-up image. I posted up a question on the WordPress support forums to see if anyone could help, and didn’t get a solution (though someone else posted up that they had the same problem, so I felt happy that it wasn’t just me which was a relief!)… but because I’m prone to lightbulb moments, I thought of something that may be causing the error, and thanks to some poking around with Firebug I found a solution, and it’s all to do with the z-index properties in the CSS files loaded into both of my blogs.

First up, some code:

Previous code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#nav-menu, #nav-menu ul {
 margin: 0px;
 padding: 5px 35px 10px 35px;
 list-style-type: none;
 list-style-position: outside;
 position: relative;
 z-index: 300;
 width: 100%;
 height: 100%;
 background: none;
 text-align: left;
 font: 18pt/24pt Tahoma,Arial,sans-serif;
 font-weight: bold;
 color: #ffffff
}

This is the CSS that governs how my navigation bar behaves itself – it seems a little convoluted, but it’s setup like this (and uses the rules that follow) to get the nice jQuery-driven drop-downs that can cascade out to multiple levels (there’ll be more on some PHP tricks I’ve used to customise my nav bar in the concluding post on WP fixes I’ll be posting up later). The property that is causing all the grief is actually the z-index property, which is currently set to 300 as per the tute I used as a reference to put the menu together. If we click on one of the images and wand our cursor over the pop-up version via Firebug to get the properties of the containing divs though, we reveal another z-index property that’s clashing. The #stimuli_overlay div that acts as the parent div for the goodies that follow has a z-index of 90, as referenced via the lightbox.css that is installed as part of the default Lightbox plugin:

lightbox.css

1
2
3
4
5
6
7
8
9
#stimuli_overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
}

The solution to this is now simple – either change the lightbox.css file or change your style.css attached to your theme. I chose the latter since I didn’t want to touch the plugin defaults, as it would cause issues later on if the plugin were ever upgraded.

New code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#nav-menu, #nav-menu ul {
 margin: 0px;
 padding: 5px 35px 10px 35px;
 list-style-type: none;
 list-style-position: outside;
 position: relative;
 z-index: 50; /* Causes bugs for NGG, has to be smaller than #stimuli_overlay z-index, which is 90 by default, so move value of #nav-menu to 50 instead of 300 */
 width: 100%;
 height: 100%;
 background: none;
 text-align: left;
 font: 18pt/24pt Tahoma,Arial,sans-serif;
 font-weight: bold;
 color: #ffffff
}

There, problem solved – 50 is still ample to ensure the dropdowns sit on top of other elements, and small enough to ensure it doesn’t interfere with the lightbox CSS.

And because I’m big on commenting in my code to avoid getting confused when maintaining it, I’ve also added that great big string of text to my CSS to remember why it’s changed from the standard 300 recommended by the tute I used as a reference.

In theory, you can make the z-index property anything you like, just as long as it doesn’t go above the z-index value of the divs that sit above your page when you call the lightbox plugin via NextGen Gallery.

I was originally planning on writing two WordPress pieces, but I only worked this one out a couple of hours ago and thought I should share 🙂 Next one will be the last, then I’ll get back to the usual program I promise!

Share

WordPress fixes part 1 – Warning: Cannot modify header information – headers already sent by…

Just wanted to share this fix – I had this error come up when working on my other blog when I installed my latest theme and could not work out why it was happening. The error message mentioned the functions.php file and pluggable.php file in the error message.

From what I’ve read online, this error is caused by whitespace somewhere in the PHP files noted in the error message. As a precaution I went in and checked every php file in my theme and cleaned any inconsistencies, then checked pluggable.php and got rid of the blank space at the end of the file. Reloaded, still no luck.

I then took another look at my functions.php file, and something occurred to me – I added a php comment field at the top of the file before programming in some stuff in the file, and there was a blank line between the comment php tag and the functions – I removed the comment so it was purely the functions on the first line, and problem fixed!

Previous code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
/*  
Theme Name: RetroOtakuV2
Theme URI: http://www.retro-otaku.com/
Description: Custom theme for my blog.
Version: 2.0
Author: Sean Boden
Author URI: http://www.retro-otaku.com/
*/
?>
 
<?php  
if ( function_exists('register_sidebar') )  
    register_sidebar(array(  
        'before_widget' => '<div class="sidemenu-container" id="%1$s"><div class="sidemenu-top"></div><div class="sidemenu-repeater"><div class="sidemenu-main"><div class="sidemenu-content">',  
        'after_widget' => '</div></div></div><div class="sidemenu-base"></div></div>',  
        'before_title' => '<h2>',  
        'after_title' => '</h2>',  
    ));
?>

New code:

1
2
3
4
5
6
7
8
9
<?php  
if ( function_exists('register_sidebar') )  
    register_sidebar(array(  
        'before_widget' => '<div class="sidemenu-container" id="%1$s"><div class="sidemenu-top"></div><div class="sidemenu-repeater"><div class="sidemenu-main"><div class="sidemenu-content">',  
        'after_widget' => '</div></div></div><div class="sidemenu-base"></div></div>',  
        'before_title' => '<h2>',  
        'after_title' => '</h2>',  
    ));
?>

Incedently, you can also see how I set up the sidenav boxes on my other blog this way too in case you’re interested or want to criticise 😛

While everyone might have different issues, hopefully this’ll help someone else who gets this message – check the files indicated in the error message, and if you’ve added a comment to the top of your file for example (like my functions.php file, where I put the theme details in as a php comment and then had a blank space/line underneath), chop it out, re-upload via FTP, and hopefully your issue will be resolved!

I have another WordPress fix to post in the next couple of days on the blog detailing how I setup the drop-down system in my navigation bar in the page header to style the top nav separately from the drop-down boxes to dynamically insert the dividers to the right of each menu item. Stay tuned!

Share

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!

Share

Companion blogs

Calendar

June 2017
M T W T F S S
« Nov    
 1234
567891011
12131415161718
19202122232425
2627282930