Instantly share code, notes, and snippets.
Created
July 31, 2014 13:57
-
Save gregrickaby/0ad09428d63bfe173328 to your computer and use it in GitHub Desktop.
Add HTML Markup to WordPress Nav Menu Editor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Create HTML list of nav menu items. | |
| * | |
| * @since 3.0.0 | |
| * @uses Walker | |
| */ | |
| class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { | |
| /** | |
| * Start the element output. | |
| * | |
| * @see Walker::start_el() | |
| * | |
| * @since 3.0.0 | |
| * | |
| * @param string $output Passed by reference. Used to append additional content. | |
| * @param object $item Menu item data object. | |
| * @param int $depth Depth of menu item. Used for padding. | |
| * @param array $args An array of arguments. @see wp_nav_menu() | |
| * @param int $id Current item ID. | |
| */ | |
| function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { | |
| $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; | |
| $class_names = ''; | |
| $classes = empty( $item->classes ) ? array() : (array) $item->classes; | |
| $classes[] = 'menu-item-' . $item->ID; | |
| /** | |
| * Filter the CSS class(es) applied to a menu item's <li>. | |
| * | |
| * @since 3.0.0 | |
| * | |
| * @see wp_nav_menu() | |
| * | |
| * @param array $classes The CSS classes that are applied to the menu item's <li>. | |
| * @param object $item The current menu item. | |
| * @param array $args An array of wp_nav_menu() arguments. | |
| */ | |
| $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); | |
| $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; | |
| /** | |
| * Filter the ID applied to a menu item's <li>. | |
| * | |
| * @since 3.0.1 | |
| * | |
| * @see wp_nav_menu() | |
| * | |
| * @param string $menu_id The ID that is applied to the menu item's <li>. | |
| * @param object $item The current menu item. | |
| * @param array $args An array of wp_nav_menu() arguments. | |
| */ | |
| $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); | |
| $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; | |
| $output .= $indent . '<li' . $id . $class_names .'>'; | |
| $atts = array(); | |
| $atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : ''; | |
| $atts['target'] = ! empty( $item->target ) ? $item->target : ''; | |
| $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : ''; | |
| $atts['href'] = ! empty( $item->url ) ? $item->url : ''; | |
| /** | |
| * Filter the HTML attributes applied to a menu item's <a>. | |
| * | |
| * @since 3.6.0 | |
| * | |
| * @see wp_nav_menu() | |
| * | |
| * @param array $atts { | |
| * The HTML attributes applied to the menu item's <a>, empty strings are ignored. | |
| * | |
| * @type string $title Title attribute. | |
| * @type string $target Target attribute. | |
| * @type string $rel The rel attribute. | |
| * @type string $href The href attribute. | |
| * } | |
| * @param object $item The current menu item. | |
| * @param array $args An array of wp_nav_menu() arguments. | |
| */ | |
| $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args ); | |
| $attributes = ''; | |
| foreach ( $atts as $attr => $value ) { | |
| if ( ! empty( $value ) ) { | |
| $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); | |
| $attributes .= ' ' . $attr . '="' . $value . '"'; | |
| } | |
| } | |
| $position = get_post_meta( $item->ID, '_custom_menu_item_position', true ); | |
| $markup = get_post_meta( $item->ID, '_custom_menu_item_markup', true ); | |
| $item_output = $args->before; | |
| $item_output .= '<a'. $attributes .'>'; | |
| if ( 'before' == $position ) { | |
| $item_output .= $markup; | |
| } | |
| /** This filter is documented in wp-includes/post-template.php */ | |
| $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; | |
| if ( 'after' == $position ) { | |
| $item_output .= $markup; | |
| } | |
| $item_output .= '</a>'; | |
| $item_output .= $args->after; | |
| /** | |
| * Filter a menu item's starting output. | |
| * | |
| * The menu item's starting output only includes $args->before, the opening <a>, | |
| * the menu item's title, the closing </a>, and $args->after. Currently, there is | |
| * no filter for modifying the opening and closing <li> for a menu item. | |
| * | |
| * @since 3.0.0 | |
| * | |
| * @see wp_nav_menu() | |
| * | |
| * @param string $item_output The menu item's starting HTML output. | |
| * @param object $item Menu item data object. | |
| * @param int $depth Depth of menu item. Used for padding. | |
| * @param array $args An array of wp_nav_menu() arguments. | |
| */ | |
| $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); | |
| } | |
| } // Walker_Nav_Menu |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| class Custom_Walker_Nav_Menu_Edit extends Walker_Nav_Menu_Edit { | |
| /** | |
| * Start the element output. | |
| * | |
| * @see Walker_Nav_Menu::start_el() | |
| * @since 3.0.0 | |
| * | |
| * @param string $output Passed by reference. Used to append additional content. | |
| * @param object $item Menu item data object. | |
| * @param int $depth Depth of menu item. Used for padding. | |
| * @param array $args Not used. | |
| * @param int $id Not used. | |
| */ | |
| function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { | |
| global $_wp_nav_menu_max_depth; | |
| $_wp_nav_menu_max_depth = $depth > $_wp_nav_menu_max_depth ? $depth : $_wp_nav_menu_max_depth; | |
| ob_start(); | |
| $item_id = esc_attr( $item->ID ); | |
| $removed_args = array( | |
| 'action', | |
| 'customlink-tab', | |
| 'edit-menu-item', | |
| 'menu-item', | |
| 'page-tab', | |
| '_wpnonce', | |
| ); | |
| $original_title = ''; | |
| if ( 'taxonomy' == $item->type ) { | |
| $original_title = get_term_field( 'name', $item->object_id, $item->object, 'raw' ); | |
| if ( is_wp_error( $original_title ) ) | |
| $original_title = false; | |
| } elseif ( 'post_type' == $item->type ) { | |
| $original_object = get_post( $item->object_id ); | |
| $original_title = get_the_title( $original_object->ID ); | |
| } | |
| $classes = array( | |
| 'menu-item menu-item-depth-' . $depth, | |
| 'menu-item-' . esc_attr( $item->object ), | |
| 'menu-item-edit-' . ( ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? 'active' : 'inactive'), | |
| ); | |
| $title = $item->title; | |
| if ( ! empty( $item->_invalid ) ) { | |
| $classes[] = 'menu-item-invalid'; | |
| /* translators: %s: title of menu item which is invalid */ | |
| $title = sprintf( __( '%s (Invalid)' ), $item->title ); | |
| } elseif ( isset( $item->post_status ) && 'draft' == $item->post_status ) { | |
| $classes[] = 'pending'; | |
| /* translators: %s: title of menu item in draft status */ | |
| $title = sprintf( __('%s (Pending)'), $item->title ); | |
| } | |
| $title = ( ! isset( $item->label ) || '' == $item->label ) ? $title : $item->label; | |
| $submenu_text = ''; | |
| if ( 0 == $depth ) | |
| $submenu_text = 'style="display: none;"'; | |
| ?> | |
| <li id="menu-item-<?php echo $item_id; ?>" class="<?php echo implode(' ', $classes ); ?>" data-id="foobar"> | |
| <dl class="menu-item-bar"> | |
| <dt class="menu-item-handle"> | |
| <span class="item-title"><span class="menu-item-title"><?php echo esc_html( $title ); ?></span> <span class="is-submenu" <?php echo $submenu_text; ?>><?php _e( 'sub item' ); ?></span></span> | |
| <span class="item-controls"> | |
| <span class="item-type"><?php echo esc_html( $item->type_label ); ?></span> | |
| <span class="item-order hide-if-js"> | |
| <a href="<?php | |
| echo wp_nonce_url( | |
| add_query_arg( | |
| array( | |
| 'action' => 'move-up-menu-item', | |
| 'menu-item' => $item_id, | |
| ), | |
| remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) ) | |
| ), | |
| 'move-menu_item' | |
| ); | |
| ?>" class="item-move-up"><abbr title="<?php esc_attr_e('Move up'); ?>">↑</abbr></a> | |
| | | |
| <a href="<?php | |
| echo wp_nonce_url( | |
| add_query_arg( | |
| array( | |
| 'action' => 'move-down-menu-item', | |
| 'menu-item' => $item_id, | |
| ), | |
| remove_query_arg($removed_args, admin_url( 'nav-menus.php' ) ) | |
| ), | |
| 'move-menu_item' | |
| ); | |
| ?>" class="item-move-down"><abbr title="<?php esc_attr_e('Move down'); ?>">↓</abbr></a> | |
| </span> | |
| <a class="item-edit" id="edit-<?php echo $item_id; ?>" title="<?php esc_attr_e('Edit Menu Item'); ?>" href="<?php | |
| echo ( isset( $_GET['edit-menu-item'] ) && $item_id == $_GET['edit-menu-item'] ) ? admin_url( 'nav-menus.php' ) : add_query_arg( 'edit-menu-item', $item_id, remove_query_arg( $removed_args, admin_url( 'nav-menus.php#menu-item-settings-' . $item_id ) ) ); | |
| ?>"><?php _e( 'Edit Menu Item' ); ?></a> | |
| </span> | |
| </dt> | |
| </dl> | |
| <div class="menu-item-settings" id="menu-item-settings-<?php echo $item_id; ?>"> | |
| <?php if( 'custom' == $item->type ) : ?> | |
| <p class="field-url description description-wide"> | |
| <label for="edit-menu-item-url-<?php echo $item_id; ?>"> | |
| <?php _e( 'URL' ); ?><br /> | |
| <input type="text" id="edit-menu-item-url-<?php echo $item_id; ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->url ); ?>" /> | |
| </label> | |
| </p> | |
| <?php endif; ?> | |
| <p class="description description-thin"> | |
| <label for="edit-menu-item-title-<?php echo $item_id; ?>"> | |
| <?php _e( 'Navigation Label' ); ?><br /> | |
| <input type="text" id="edit-menu-item-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-title" name="menu-item-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->title ); ?>" /> | |
| </label> | |
| </p> | |
| <p class="description description-thin"> | |
| <label for="edit-menu-item-attr-title-<?php echo $item_id; ?>"> | |
| <?php _e( 'Title Attribute' ); ?><br /> | |
| <input type="text" id="edit-menu-item-attr-title-<?php echo $item_id; ?>" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->post_excerpt ); ?>" /> | |
| </label> | |
| </p> | |
| <p class="field-link-target description"> | |
| <label for="edit-menu-item-target-<?php echo $item_id; ?>"> | |
| <input type="checkbox" id="edit-menu-item-target-<?php echo $item_id; ?>" value="_blank" name="menu-item-target[<?php echo $item_id; ?>]"<?php checked( $item->target, '_blank' ); ?> /> | |
| <?php _e( 'Open link in a new window/tab' ); ?> | |
| </label> | |
| </p> | |
| <p class="field-css-classes description description-thin"> | |
| <label for="edit-menu-item-classes-<?php echo $item_id; ?>"> | |
| <?php _e( 'CSS Classes (optional)' ); ?><br /> | |
| <input type="text" id="edit-menu-item-classes-<?php echo $item_id; ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo $item_id; ?>]" value="<?php echo esc_attr( implode(' ', $item->classes ) ); ?>" /> | |
| </label> | |
| </p> | |
| <p class="field-xfn description description-thin"> | |
| <label for="edit-menu-item-xfn-<?php echo $item_id; ?>"> | |
| <?php _e( 'Link Relationship (XFN)' ); ?><br /> | |
| <input type="text" id="edit-menu-item-xfn-<?php echo $item_id; ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->xfn ); ?>" /> | |
| </label> | |
| </p> | |
| <p class="field-custom-markup description description-thin"> | |
| <label for="edit-menu-item-custom-heading-<?php echo $item_id; ?>"> | |
| <?php _e( 'Additional HTML Markup' ); ?><br /> | |
| <input type="text" id="edit-menu-item-custom-heading-<?php echo $item_id; ?>" class="widefat code edit-menu-item-custom-heading" name="menu-item-custom-markup[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->markup ); ?>" /> | |
| </label> | |
| </p> | |
| <p class="field-custom-markup-position description description-thin"> | |
| <label for="edit-menu-item-xfn-<?php echo $item_id; ?>"> | |
| <?php _e( 'Markup Position' ); ?><br /> | |
| <select id="edit-menu-item-custom-position-<?php echo $item-id; ?>" class="widefat code edit-menu-item-custom-position" name="menu-item-custom-position[<?php echo $item_id; ?>]"> | |
| <option value="before" <?php selected( 'before', $item->position ); ?>>Before</option> | |
| <option value="after" <?php selected( 'after', $item->position ); ?>>After</option> | |
| </select> | |
| </label> | |
| </p> | |
| <p class="field-move hide-if-no-js description description-wide"> | |
| <label> | |
| <span><?php _e( 'Move' ); ?></span> | |
| <a href="#" class="menus-move-up"><?php _e( 'Up one' ); ?></a> | |
| <a href="#" class="menus-move-down"><?php _e( 'Down one' ); ?></a> | |
| <a href="#" class="menus-move-left"></a> | |
| <a href="#" class="menus-move-right"></a> | |
| <a href="#" class="menus-move-top"><?php _e( 'To the top' ); ?></a> | |
| </label> | |
| </p> | |
| <div class="menu-item-actions description-wide submitbox"> | |
| <?php if( 'custom' != $item->type && $original_title !== false ) : ?> | |
| <p class="link-to-original"> | |
| <?php printf( __('Original: %s'), '<a href="' . esc_attr( $item->url ) . '">' . esc_html( $original_title ) . '</a>' ); ?> | |
| </p> | |
| <?php endif; ?> | |
| <a class="item-delete submitdelete deletion" id="delete-<?php echo $item_id; ?>" href="<?php | |
| echo wp_nonce_url( | |
| add_query_arg( | |
| array( | |
| 'action' => 'delete-menu-item', | |
| 'menu-item' => $item_id, | |
| ), | |
| admin_url( 'nav-menus.php' ) | |
| ), | |
| 'delete-menu_item_' . $item_id | |
| ); ?>"><?php _e( 'Remove' ); ?></a> <span class="meta-sep hide-if-no-js"> | </span> <a class="item-cancel submitcancel hide-if-no-js" id="cancel-<?php echo $item_id; ?>" href="<?php echo esc_url( add_query_arg( array( 'edit-menu-item' => $item_id, 'cancel' => time() ), admin_url( 'nav-menus.php' ) ) ); | |
| ?>#menu-item-settings-<?php echo $item_id; ?>"><?php _e('Cancel'); ?></a> | |
| </div> | |
| <input class="menu-item-data-db-id" type="hidden" name="menu-item-db-id[<?php echo $item_id; ?>]" value="<?php echo $item_id; ?>" /> | |
| <input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object_id ); ?>" /> | |
| <input class="menu-item-data-object" type="hidden" name="menu-item-object[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->object ); ?>" /> | |
| <input class="menu-item-data-parent-id" type="hidden" name="menu-item-parent-id[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_item_parent ); ?>" /> | |
| <input class="menu-item-data-position" type="hidden" name="menu-item-position[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->menu_order ); ?>" /> | |
| <input class="menu-item-data-type" type="hidden" name="menu-item-type[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $item->type ); ?>" /> | |
| </div><!-- .menu-item-settings--> | |
| <ul class="menu-item-transport"></ul> | |
| <?php | |
| $output .= ob_get_clean(); | |
| } | |
| } // Walker_Nav_Menu_Edit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Add custom fields to $item nav object in order to be used in custom Walker | |
| * | |
| * @param $menu_item | |
| * | |
| * @return mixed | |
| */ | |
| function custom_add_custom_nav_fields( $menu_item ) { | |
| $menu_item->markup = get_post_meta( $menu_item->ID, '_custom_menu_item_markup', true ); | |
| $menu_item->position = get_post_meta( $menu_item->ID, '_custom_menu_item_position', true ); | |
| return $menu_item; | |
| } | |
| add_filter( 'wp_setup_nav_menu_item', 'custom_add_custom_nav_fields' ); | |
| /** | |
| * Save menu custom fields | |
| * | |
| * @param $menu_id | |
| * @param $menu_item_db_id | |
| * @param $args | |
| */ | |
| function custom_update_custom_nav_fields( $menu_id, $menu_item_db_id, $args ) { | |
| if ( is_array( $_REQUEST[ 'menu-item-custom-markup' ] ) ) { | |
| $value = $_REQUEST[ 'menu-item-custom-markup' ][ $menu_item_db_id ]; | |
| update_post_meta( $menu_item_db_id, '_custom_menu_item_markup', $value ); | |
| } | |
| if ( is_array( $_REQUEST[ 'menu-item-custom-position' ] ) ) { | |
| $value = $_REQUEST[ 'menu-item-custom-position' ][ $menu_item_db_id ]; | |
| update_post_meta( $menu_item_db_id, '_custom_menu_item_position', $value ); | |
| } | |
| } | |
| add_action( 'wp_update_nav_menu_item', 'custom_update_custom_nav_fields', 10, 3 ); | |
| function custom_edit_nav_menu_walker( $walker ) { | |
| include_once 'Newark_Walker_Nav_Menu_Edit.php'; | |
| return 'Newark_Walker_Nav_Menu_Edit'; | |
| } | |
| add_filter( 'wp_edit_nav_menu_walker', 'custom_edit_nav_menu_walker' ); | |
| function custom_nav_menu_walker() { | |
| include_once 'Newark_Walker_Nav_Menu.php'; | |
| } | |
| add_action( 'init', 'custom_nav_menu_walker' ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment