Integrating an Accordion Menu into WordPress with a cformsII plugin
These challenges arose while I was building a site for Caliber Hospitality. This article is more of a series of notes about how certain challenges were overcome and is geared toward other web designers working with WordPress.
WordPress and the JavaScript Accordion Menu
[singlepic id=162 w=200 h=200 float=left] Integrating WordPress with the JavaScript Accordion Menu was first a matter of finding the correct menu coding that would not break WordPress. My first try failed, but then after some perseverance, I came across this JavaScript Accordion Menu (http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/) and it worked.
When creating WordPress sites and/or custom templates, I like to begin with the WordPress Default Template and then strip it down and customize it from there. Because there were to be several of these accordion menu’s in the site, that meant creating a separate template for each page with an accordion as they were all to be different. The accordion menu images were all placed via CSS as background images.
WordPress + Accordion Menu + cFormsII Plugin
Another roadblock came with the contact forms living inside the sliders. The contact forms (http://www.deliciousdays.com/cforms-plugin/) were detecting their size on load which was not relevant to their actual size once the page was loaded. When the page did load the contact forms where an illegibly squished pile of text. I had hoped just adding a fixed width to a div tag would solve the problem, but it wasn’t going to be that easy. I overcame this by placing an iframe in the page and that seemed to do the trick. I created separate pages in WordPress for the iframe content, and then used an exclude to keep those pages from displaying in the navigation.
I was no longer able to use WordPress’ Visual Page Editor with the iframe coding as it would strip the iframe code when switched to Visual mode. This was a drag for the client, but I didn’t see another way around it. I think hard-coding the iframe tags into the page template would be a good solution to keep the Visual Editor as an option. Of course, the contact form would have to be in one of the first or last sliders to make this work.
