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!

Related posts:

1. Wordpress fixes part 2 – Page elements appearing in front of pop-up images in the NextGen Gallery / lightbox plugins
2. Wordpress fixes part 1 – Warning: Cannot modify header information – headers already sent by…

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!

Related posts:

1. Wordpress fixes part 3 – Customising the wp_list_pages navigation menu drop-downs to insert elements between each menu heading dynamically
2. Wordpress fixes part 1 – Warning: Cannot modify header information – headers already sent by…

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!

Related posts:

1. Wordpress fixes part 2 – Page elements appearing in front of pop-up images in the NextGen Gallery / lightbox plugins
2. Wordpress fixes part 3 – Customising the wp_list_pages navigation menu drop-downs to insert elements between each menu heading dynamically

The good news is that I can start getting back into writing, rather than coding/designing Though the next two posts will be Wordpress related as I’d like to share some fixes/tips I’ve picked up from the new themes I’ve put together, so indulge me a little longer

Related posts:

1. Archive: Blog 1-2. Player 1 Start
2. March is off to a good start
3. Giving the blog a facelift

I tells ya, IE6 is the bane of the internet. Such old, filthy code. I wish MS made the update to a newer browser mandatory with the onset of WinXP SP2. Would have saved the world a much better, gradually more standards-compliant place online

Anywho, if any bugs crop up, let me know. And again, apologies in advance to the IE6 users – once I’ve got my new template finished for Retro Otaku, I’ll go back and give you a nice little stylesheet to suit your archaic browser

Related posts:

1. Oops, its broken in IE6 :P
2. IE6 problems now fixed
3. Apologies for lack of updates – bear with me!

Related posts:

1. w00t, new template is now live :)
2. … yes, I’m still here :)
3. Apologies for lack of updates – bear with me!

Thanks in advance!!!!

Related posts:

1. Almost there!!
2. w00t, new template is now live :)
3. … I think I’m done :P

It’s been nearly 12 months since I first started up this site, and I also want to say a huge thank you to my readers, as well as the blogging and martial arts communities who continue to support, give advice and lend their encouragement to my little corner of the blogosphere. I think Wifey deserves a mention as well, since she’s the one who has to exercise patience owing to the time/energies I spend maintaining the site

I’m looking forward to a few changes in the next 12 months – there will be more image galleries as these seem to be popular with visitors, possibly a couple of videos and a new visual overhaul of the site to make it look a bit more interesting

Here’s to another exciting year!

Related posts:

1. Happy Days’ Arnold teaches Richie judo
2. Stupid fun happy photo time

For those unaware of what Hakutsuru looks like performed as a kata, Matt posted a couple of vids that I’m going to pinch and post up here as well:

First up is Seikichi Odo, who moves around with amazing skill despite his age: http://www.youtube.com/watch?v=iD78dP428ec (I can’t embed that one by request of the author, but please check it out, some amazing stuff in there).

The second one is of Matayoshi Shinpo:

Being the super champ he is, Matt even fired across a link to the Okinawa Hakutsuru Kenpo White Crane Association’s website, and in particular the articles written on the topic China and the Origins of Okinawan White Crane Kenpo (Part 1 and Part 2). I haven’t had a chance to do more than quickly skim through their site, but by plonking the links up here, I’m hoping it’ll remind to go through it in much more detail when I get a chance.

Since I’m curious about what I might be able to learn and apply from their style to me as an amputee, I’m going to drop them an e-mail to see if they can recommend any particular part of their literature or offer any advice on this one. I’ll post back with an update on how I go!

Related posts:

1. Archive: Taekwondo, 1991-style
2. Archive: Learning new techniques
3. Learning to walk again through karate

In 2008 I experimented with learning some stick fighting principles as an adjunct to my usual karate training. While the style wasn’t a strict or traditional one (despite some traditional aspects from the various systems present thrown into the mix), it was focused on some basic stick fighting principles, incorporating eskrima/kali elements with the rattan, bojutsu, defensive techniques with the hanbo and jo, a little bit of yawara training and a walking stick style that had its roots within a French system. The aim of the training was to give the practitioner the tools and principles to defend oneself by using any varietal of stick or pole as a weapon. I feel that, despite only spending a small period of time training in it, that it succeeded in teaching me some basic tenets for defending myself with varying weapons. While the eskrima stuff was probably the most fun (and made cool noises when training ), the most relevant was arguably the walking stick techniques I learned.

The basic training showed how to use a hooked walking stick in a variety of ways. It demonstrated basic blocking and striking using various aspects of the walking stick, even down to utilising the different ends of the stick to achieve different ends. For example, if performing a thrusting strike, using the bottom of the stick concentrates the kinetic energy to a smaller surface of impact, giving rise to a variety of fast, poking strikes; however, depending on the walking stick, I found that this technique put excess stress on the shaft of the walking stick and required greater accuracy to achieve a worthwhile result. Going the other way, you can thrust using the hooked end of the stick, which is useful for creating more of a clubbing motion even when thrust. I found this to be quite effective given I found it quite intuitive to do a re-enforced two-handed thrusting strike with this technique from a utilitarian perspective, since I’ll normally have my hand on the hook and can easily use my other hand to grab the other end of the staff and use both arms for the strike. While the greater surface area means you get a different kind of impact than with the butt-end of the stick, it also requires less accuracy, which means it potentially has a greater degree of utility in a self defense scenario where the adrenalin or panic may hinder your usual level of accuracy.

What I found quite interesting is that it wasn’t too difficult to translate some of the broad striking motions and diagonal patterns of attack from eskrima to the walking stick. The difference of course is that a walking stick is generally longer than your average rattan… but that being said, if you’re familiar with short staff techniques (like jo or hanbo) and you have a longer walking stick, then you can also truncate your walking stick skillset with some of these other techniques (some of my favourite techniques from jo and hanbo were the trapping and joint-manipulation techniques, which I think would prove useful with a walking stick).

I guess it shows the level of inter-connectivity with different styles and the relationship between them. I have a feeling my Sensei would be pleased to know I joined the dots in my head and found the commonality in the tools he gave us

It also demonstrates a strong focus on utility (something that’s a core focus on the posts at The Martial Explorer) and that, as a martial artist, you should be able to not only demonstrate the finer aspects of the forms you learn in class, but be able to take away those core principles and utilise them as essential tools in any instances of self defense, or if we’re getting a bit more philosophical, utilise those precepts as an approach to everyday life.

Related posts:

1. Training round-up
2. Taking a (forced) break over x-mas
3. Mangling my leg (again :P)