Will Chatham's Blog

I had many issues trying to get a good old-fashioned HTML image map to work in a WordPress page or post. It seemed that WordPress kept trying to add extra <map> tags around all my <area> tags. I couldn’t get it to stop!

After being led astray by such issues as wpautop() and the need to use various plugins, I finally figured out how to embed HTML image maps on my pages.

The trick is that you can’t use pretty, nicely formatted HTML because WordPress tries to automatically close tags and do various other things to your code when it detects new lines.

So instead of something nice like this:

You actually need to remove all the extra spacing and use something messy like this:

I used to have a function which I would include in my WordPress functions.php file that would add a unique CSS class to the first and last menu items. This would be so you could assign them unique styles, such as padding or borders, for better looking menus in your themes.

With the advent of WordPress’s Menu system in version 3, I found it necessary to add some more functions for given situations: calling wp_list_pages(), wp_list_categories(), or wp_nav_menu().  So here they are:

First and Last Class for wp_list_pages();

// adds a unique class to the first and last items in the listfunction add_markup_pages($output) {$output= preg_replace('/page-item/', ' first-page-item page-item', $output, 1);$output=substr_replace($output, " last-page-item page-item", strripos($output, "page-item"), strlen("page-item"));return $output;}add_filter('wp_list_pages', 'add_markup_pages');

First and Last Class for wp_list_categories();

// adds a unique class to the first and last items in the listfunction add_markup_categories($output) {    $output= preg_replace('/cat-item/', ' first-cat-item cat-item', $output, 1);    $output=substr_replace($output, " last-cat-item cat-item", strripos($output, "cat-item"), strlen("cat-item"));    return $output;}add_filter('wp_list_categories', 'add_markup_categories');

First and Last Class for wp_nav_menu();

// adds a unique class to the first and last items in the listfunction add_first_and_last($output) {  $output = preg_replace('/class="menu-item/', 'class="first-menu-item menu-item', $output, 1);  $output = substr_replace($output, 'class="last-menu-item menu-item', strripos($output, 'class="menu-item'), strlen('class="menu-item'));  return $output;}add_filter('wp_nav_menu', 'add_first_and_last');

Disclaimer: I don’t remember where I picked up these functions from along the way, so I apologize if there is credit due to someone, somewhere.