You are viewing an old revision of this post, from April 11, 2013 @ 23:58:01. See below for differences between this version and the current revision.

Easily Add Custom Classes to Your First and Last Menu Items in WordPress

https://gist.github.com/thomasgriffin/4253190 Below is the code to do this programatically, it is worth noting that you can add classes via the menus page in the wp-admin by selecting Screen Options and then CSS Classes. The below code may be better for instances where you don't want to depend on users to remember to add the classes manually. [php] add_filter( 'wp_nav_menu_objects', 'tgm_filter_menu_class' ); /** * Filters the first and last nav menu objects in your menus * to add custom classes. * * @since 1.0.0 * * @param object $objects An array of nav menu objects * @return object $objects Amended array of nav menu objects with new class */ function tgm_filter_menu_class( $objects ) { // Add "first-menu-item" class to the first menu object $objects[1]->classes[] = 'first-menu-item'; // Add "last-menu-item" class to the last menu object $objects[count( $objects )]->classes[] = 'last-menu-item'; // Return the menu objects return $objects; } [/php]

Revisions

Revision Differences

April 11, 2013 @ 23:58:01Current Revision
Content
 Added: <a href="https:/ /gist.github.com/ thomasgriffin/4253190" target="_blank" >https://gist.github.com/ thomasgriffin/4253190</a>
Deleted: <p><a href="https:/ /gist.github.com/ thomasgriffin/4253190" target="_blank" >https://gist.github.com/ thomasgriffin/4253190</a> </p><p>Below is the code to do this programatically, it is worth noting that you can add classes via the menus page in the wp-admin by selecting Screen Options and then CSS Classes. The below code may be better for instances where you don't want to depend on users to remember to add the classes manually.</p> <p>[php]&lt;/ p&gt;&lt;div id=&quot;file- gistfile1-php- LC1&quot;&gt;add_filter( 'wp_nav_menu_objects', 'tgm_filter_menu_class' );&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC2&quot;&gt; /**&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC3&quot;&gt;* Filters the first and last nav menu objects in your menus&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC4&quot;&gt;* to add custom classes.&lt;/ div&gt;&lt;div id=&quot;file- gistfile1-php- LC5&quot;&gt; *&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC6&quot;&gt;* @since 1.0.0&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC7&quot;&gt; *&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC8&quot;&gt;* @param object $objects An array of nav menu objects&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC9&quot;&gt;* @return object $objects Amended array of nav menu objects with new class&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC10&quot;&gt; */&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC11&quot;&gt;function tgm_filter_menu_class( $objects ) {&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC12&quot;&gt;  &lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC13&quot;&gt;// Add &quot;first-menu-item&quot; class to the first menu object&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC14&quot;&gt; $objects[1]-&amp; gt;classes[] = 'first-menu-item'; &lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC15&quot;&gt;  &lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC16&quot;&gt;// Add &quot;last-menu-item&quot; class to the last menu object&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC17&quot;&gt; $objects[count( $objects )]-&amp;gt;classes[] = 'last-menu-item'; &lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC18&quot;&gt;  &lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC19&quot;&gt;// Return the menu objects&lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC20&quot;&gt;return $objects;&lt; /div&gt;&lt;div id=&quot;file- gistfile1-php- LC21&quot;&gt;  &lt;/div&gt;&lt;div id=&quot;file- gistfile1-php- LC22&quot;&gt; }&lt;/div&gt; &lt;p&gt;[/php]<br /><br /></p>Added: Below is the code to do this programatically, it is worth noting that you can add classes via the menus page in the wp-admin by selecting Screen Options and then CSS Classes. The below code may be better for instances where you don't want to depend on users to remember to add the classes manually.
 Added: [php]
 Added: add_filter( 'wp_nav_menu_objects', 'tgm_filter_menu_class' );
 Added: /**
 Added: * Filters the first and last nav menu objects in your menus
 Added: * to add custom classes.
 Added: *
 Added: * @since 1.0.0
 Added: *
 Added: * @param object $objects An array of nav menu objects
 Added: * @return object $objects Amended array of nav menu objects with new class
 Added: */
 Added: function tgm_filter_menu_class( $objects ) {
 Added: // Add &quot;first-menu-item&quot; class to the first menu object
 Added: $objects[1]-&gt;classes[] = 'first-menu-item';
 Added: // Add &quot;last-menu-item&quot; class to the last menu object
 Added: $objects[count( $objects )]-&gt;classes[] = 'last-menu-item';
 Added: // Return the menu objects
 Added: return $objects;
 Added: }
 Added: [/php]

Note: Spaces may be added to comparison text to allow better line wrapping.

No comments yet.

Leave a Reply