WordPress | Will Chatham

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 list
function 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 list
function 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 list
function 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.

First, I don’t remember where I found this along the way, but this is a smart and efficient way to include jQuery in your WordPress themes. Just add this to your theme’s functions.php file:

// ADDING JQUERY
add_action( ‘init’, ‘jquery_register’ );
add_filter( ‘script_loader_src’, ‘jquery_unversion’ );

function jquery_register() {

if ( !is_admin() ) {
wp_deregister_script( ‘jquery’ );
wp_register_script( ‘jquery’, ( ‘http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js’ ), false, ‘1.x’, false );
wp_enqueue_script( ‘jquery’ );
}
}

// remove version tag to improve cache compatibility
function jquery_unversion( $src ) {

if( strpos( $src, ‘ajax.googleapis.com’ ) )
$src = remove_query_arg( ‘ver’, $src );

return $src;
}

Now, the issue I have been having is that when I try to add your own jQuery scripts or functions in your theme’s header.php file, I always get this error:

“$ is not a function”

What? Yes it is, dammit!

Turns out WordPress has reserved the $ character, so you have to rename all occurence of $ to ‘jQuery’. Example:

Before

<script type=”text/javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘fade’,
timeout: 4000,
speed: 2000
});
});
</script>

After

<script type=”text/javascript”>
jQuery(document).ready(function() {
jQuery(‘.slideshow’).cycle({
fx: ‘fade’,
timeout: 4000,
speed: 2000
});
});
</script>

Hope that saves someone the hours of frustration I have had with this.

Category: WordPress

WordPress First & Last Navigation Items

First and Last Class for wp_list_pages();

First and Last Class for wp_list_categories();

First and Last Class for wp_nav_menu();

WordPress and jQuery issues