Small triumph today…

I had an issue with the navigation I’m building into another demo site, this one for a city government office. (BTW, I have finished 2 other WordPress demo sites… see previous post.) I am using CSS to style the nav menu and create button-like rollover effects. They work much faster than the JavaScript kind, and besides I don’t like JS so it was important to me to get this working on this site.

To build the nav I used a method called Suckerfish Dropdowns, as described on A List Apart.

I have had this method running on another live client site for some time. The issue with the current development site is that the nav UL is nested within another UL. The top-level UL had no id or class name, and since it was generated dynamically by WordPress, it seemed there wasn’t an easy way to get an id attached to it. A cursory search of the template files didn’t reveal to me where the UL was being generated. So my issue was, how do I style a list that has no name??

The obvious choice, to me, was to write some JS to add the id after the fact. In short, I am not good with JS. This method did not get me far at all, and after about 4 hours of effort, I gave up and briefly reconsidered my position as a freelance web developer.

After sleeping that off, I tried again today from a new angle. I knew that, obviously, the UL tag was being generated somewhere in the WordPress PHP — it wasn’t just appearing out of thin air!! So, I downloaded all the WordPress files, and searched them for every instance of the ‘UL’ string. Fortunately I found my answer in the second file that came up — a template file called widgets.php. I had overlooked this file earlier, having forgotten that on this site I am using the dynamic sidebar rather than the standard WordPress one (sidebar.php).

Within the widgets file, there were several spots where a UL tag was generated. My next task was to find the one that appears in the sidebar list I was after. Lo and behold, I found it in line 355 of widgets.php. I changed the code from:

ul

to:

ul id=”subnav”

and now my list had a name and could easily be styled with CSS!

I do wish I could have figured out the JavaScript method I was working on, because of the ubiquitous nature of that language on the web, and the inevitability of needing it. However, since the client hasn’t actually signed off on this site, I had to weigh my effort vs. payoff. After spending so much time trying to figure out the JavaScript, it was becoming a huge waste of time, unfortunately.