August 27, 2010

Combating IE6: Drop Down Menu Plugin for WordPress “twentyten” Them

twentyten

I'm in love with the newly crafted WordPress theme "twentyten." The code is clean and the included functions are spot-on. So, I've decided to start making Child Themes based on twentyten. The one problem I would run into is in Internet Explorer 6. Now, I know that everyone hates it and that we all need to move on into the future.. but.. I have clients that I really need to continue support of that legacy browser. The problem that I encountered was with the drop down menu system. The code is so beautiful and perfect, but it just uses CSS... which IE6 can't recognize. So I decided to write a plug in (with a bit of helpful advice from some awesome geniuses) that I can install whenever I make a child of twentyten and need it to support drop downs in IE6.

WordPress Plugin Page: http://wordpress.org/extend/plugins/twentyten-ie6-menus/
DOWNLOAD from WordPress: Twentyten IE6 Menus

Here is the plugin php file: (if you don't want to use it as a plugin.. just steal the jQuery)

[code]
<?php
/**
* Plugin Name: Twentyten IE6 Menus
* Author: Sara Cannon
* Author URI: http://sara-cannon.com
* Description: Make the menu drop down in IE6 (if you care about that sort of thing)
* Version: 1.0
* License: GPL2
*/
function sara_twentyten_ie6_menus_enqueue() {
wp_enqueue_script( 'jquery' );
}
add_action( 'after_setup_theme', 'sara_twentyten_ie6_menus_enqueue' );

function sara_twentyten_ie6_menus_script() {
?>
<!--[if lte IE 6]>
<script type="text/javascript">
jQuery(document).ready( function($) {
$('#access li').mouseover( function() {
$(this).find('ul').show();
});
$('#access li').mouseleave( function() {
$(this).find('ul').hide();
});
$('#access li ul').mouseleave( function() {
$(this).hide();
});
});
</script>
<![endif]-->
<?php
}
add_action( 'wp_footer', 'sara_twentyten_ie6_menus_script' );
[/code]

Feel free to download and use and let me know if you encounter any bugs.
-sara cannon

This probably won't mean anything to you, but I wanted to document this for my reference. Here are some of the sites I visited when initially researching how to make this plug in. There are probably many more that I hit up in my research later on but I just thought I'd throw this in here considering it is on the same subject lines.

http://www.jdmweb.com/resources/jquery_to_wordpress_plugin
http://www.devlounge.net/articles/using-javascript-and-css-with-your-wordpress-plugin
http://www.lost-in-code.com/platforms/wordpress/wordpress-plugins/wordpress-build-a-thickbox-plugin/
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

July 6, 2010

WordPress Tip: Centering the Main Menu in the Twentyten Theme

twentyten

Hello WordPress users! All of y'all know about the stunning new default theme "twentyten" that comes with the new WordPress 3.0 release. I've been working with that theme a lot through child themeing.

If you ever run into a problem/question with customizing your theme or CSS, you can always search the WordPress Codex or Forums - most likely there will have been someone else who has encountered the same or similar problem. Don't be afraid to chime in whenever you think you can help out. Most likely there are people on the forums that know less than you do that you can help out.

Centering the Main Menu in the Twentyten Theme:

By default, the twentyten menu normally floats left. if you want a centered menu, you can change your css style sheet.

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
float:left;
}

[/code]

The above is a segment from the default css in twentyten. You need to take out the "float: left;" and add in "position:absolute; text-align:center;" then add a new line of "#access ul {display:inline-block;}" This will change it to the following:

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
position:absolute;
text-align:center;
}

#access ul{display:inline-block;}

[/code]

Hope you enjoyed this tip. And remember always: WordPress is for lovers.
-sara

Edit: forgot to add: Make sure you include an IE fix!

put this in its own little ie.css file and conditional comment it into your header. :)

[code]
#access ul{
display:inline;
zoom:1;
}
[/code]

Sara Cannon is a Design and Digital Strategy Consultant, UX/UI Designer, Creative Director, & Artist.
Have a project I could help you with? Contact me at sara@saracannon.com.

Skip to content