# Custom Menu vg-origon (ok)

```
// Bước 1:
class rc_sweet_custom_menu {
	function __construct() {
		// add custom menu fields to menu
		add_filter('wp_setup_nav_menu_item', array($this, 'rc_scm_add_custom_nav_fields'));
		// save menu custom fields
		add_action('wp_update_nav_menu_item', array($this, 'rc_scm_update_custom_nav_fields'), 10, 3);
		// edit menu walker
		add_filter('wp_edit_nav_menu_walker', array($this, 'rc_scm_edit_walker'), 10, 2);
	}
	function rc_scm_add_custom_nav_fields($menu_item) {
	    $menu_item->background_url = get_post_meta($menu_item->ID, '_menu_item_background_url', true);
	    return $menu_item;
	}
	function rc_scm_update_custom_nav_fields($menu_id, $menu_item_db_id, $args) {
	    if(!empty($_REQUEST['menu-item-background_url'])) {
	        $background_url_value = $_REQUEST['menu-item-background_url'][$menu_item_db_id];
	        update_post_meta($menu_item_db_id, '_menu_item_background_url', $background_url_value);
	    }
	}
	function rc_scm_edit_walker($walker,$menu_id) {
	    return 'Walker_Nav_Menu_Edit_Custom';
	    
	}
}
$GLOBALS['sweet_custom_menu'] = new rc_sweet_custom_menu();
// Bước 2:
class Walker_Nav_Menu_Edit_Custom extends Walker_Nav_Menu  {
	function start_lvl(&$output, $depth = 0, $args = array()) {	
	}
	function end_lvl(&$output, $depth = 0, $args = array()) {
	}
	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;
	
	    $indent = ($depth) ? str_repeat("\t", $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 = $original_object->post_title;
	    }
	
	    $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)', 'vg-oregon'), $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)', 'vg-oregon'), $item->title);
	    }
	
	    $title = empty($item->label) ? $title : $item->label;
	
	    ?>
	    <li id="menu-item-<?php echo esc_attr($item_id); ?>" class="<?php echo implode(' ', $classes); ?>">
	        <dl class="menu-item-bar">
	            <dt class="menu-item-handle">
	                <span class="item-title"><?php echo esc_html($title); ?></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', 'vg-oregon'); ?>">&#8593;</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', 'vg-oregon'); ?>">&#8595;</abbr></a>
	                    </span>
	                    <a class="item-edit" id="edit-<?php echo esc_attr($item_id); ?>" title="<?php esc_attr_e('Edit Menu Item', 'vg-oregon'); ?>" 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 esc_html_e('Edit Menu Item', 'vg-oregon'); ?></a>
	                </span>
	            </dt>
	        </dl>
	
	        <div class="menu-item-settings" id="menu-item-settings-<?php echo esc_attr($item_id); ?>">
	            <?php if('custom' == $item->type) : ?>
	                <p class="field-url description description-wide">
	                    <label for="edit-menu-item-url-<?php echo esc_attr($item_id); ?>">
	                        <?php esc_html_e('URL', 'vg-oregon'); ?><br />
	                        <input type="text" id="edit-menu-item-url-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo esc_attr($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 esc_attr($item_id); ?>">
	                    <?php esc_html_e('Navigation Label', 'vg-oregon'); ?><br />
	                    <input type="text" id="edit-menu-item-title-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-title" name="menu-item-title[<?php echo esc_attr($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 esc_attr($item_id); ?>">
	                    <?php esc_html_e('Title Attribute', 'vg-oregon'); ?><br />
	                    <input type="text" id="edit-menu-item-attr-title-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-attr-title" name="menu-item-attr-title[<?php echo esc_attr($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 esc_attr($item_id); ?>">
	                    <input type="checkbox" id="edit-menu-item-target-<?php echo esc_attr($item_id); ?>" value="_blank" name="menu-item-target[<?php echo esc_attr($item_id); ?>]"<?php checked($item->target, '_blank'); ?> />
	                    <?php esc_html_e('Open link in a new window/tab', 'vg-oregon'); ?>
	                </label>
	            </p>
	            <p class="field-css-classes description description-thin">
	                <label for="edit-menu-item-classes-<?php echo esc_attr($item_id); ?>">
	                    <?php esc_html_e('CSS Classes(optional)', 'vg-oregon'); ?><br />
	                    <input type="text" id="edit-menu-item-classes-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo esc_attr($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 esc_attr($item_id); ?>">
	                    <?php esc_html_e('Link Relationship(XFN)', 'vg-oregon'); ?><br />
	                    <input type="text" id="edit-menu-item-xfn-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($item->xfn); ?>" />
	                </label>
	            </p>
	            <p class="field-description description description-wide">
	                <label for="edit-menu-item-description-<?php echo esc_attr($item_id); ?>">
	                    <?php esc_html_e('Description', 'vg-oregon'); ?><br />
	                    <textarea id="edit-menu-item-description-<?php echo esc_attr($item_id); ?>" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[<?php echo esc_attr($item_id); ?>]"><?php echo esc_html($item->description); // textarea_escaped ?></textarea>
	                    <span class="description"><?php esc_html_e('The description will be displayed in the menu if the current theme supports it.', 'vg-oregon'); ?></span>
	                </label>
	            </p>        
	            <?php
	            /* New fields insertion starts here */
	            ?>      
	            <p class="field-background-url description description-wide">
	                <label for="edit-menu-item-background_url-<?php echo esc_attr($item_id); ?>">
	                    <?php esc_html_e('Background URL', 'vg-oregon'); ?><br />
	                    <input type="text" id="edit-menu-item-background_url-<?php echo esc_attr($item_id); ?>" class="widefat code edit-menu-item-custom" name="menu-item-background_url[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($item->background_url); ?>" />
	                </label>
	            </p>
	            <?php
	            /* New fields insertion ends here */
	            ?>
	            <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', 'vg-oregon'), '<a href="' . esc_attr($item->url) . '">' . esc_html($original_title) . '</a>'); ?>
	                    </p>
	                <?php endif; ?>
	                <a class="item-delete submitdelete deletion" id="delete-<?php echo esc_attr($item_id); ?>" href="<?php
	                echo wp_nonce_url(
	                    add_query_arg(
	                        array(
	                            'action' => 'delete-menu-item',
	                            'menu-item' => $item_id,
	                     ),
	                        remove_query_arg($removed_args, admin_url('nav-menus.php'))
	                 ),
	                    'delete-menu_item_' . $item_id
	             ); ?>"><?php esc_html_e('Remove', 'vg-oregon'); ?></a> <span class="meta-sep"> | </span> <a class="item-cancel submitcancel" id="cancel-<?php echo esc_attr($item_id); ?>" href="<?php echo esc_url(add_query_arg(array('edit-menu-item' => $item_id, 'cancel' => time()), remove_query_arg($removed_args, admin_url('nav-menus.php'))));
	                    ?>#menu-item-settings-<?php echo esc_attr($item_id); ?>"><?php esc_html_e('Cancel', 'vg-oregon'); ?></a>
	            </div>
				<div style="clear: both;"></div>
				
	            <input class="menu-item-data-db-id" type="hidden" name="menu-item-db-id[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($item_id); ?>" />
	            <input class="menu-item-data-object-id" type="hidden" name="menu-item-object-id[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($item->object_id); ?>" />
	            <input class="menu-item-data-object" type="hidden" name="menu-item-object[<?php echo esc_attr($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 esc_attr($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 esc_attr($item_id); ?>]" value="<?php echo esc_attr($item->menu_order); ?>" />
	            <input class="menu-item-data-type" type="hidden" name="menu-item-type[<?php echo esc_attr($item_id); ?>]" value="<?php echo esc_attr($item->type); ?>" />
	        </div><!-- .menu-item-settings-->
	        <ul class="menu-item-transport"></ul>
	    <?php
	    
	    $output .= ob_get_clean();

	    }
}
// Bước 3:
class rc_scm_walker extends Walker_Nav_Menu
{
	function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
	{		   
	   global $wp_query;
	   
	   $indent = ($depth) ? str_repeat("\t", $depth) : '';
	
	   $class_names = $value = '';
	
	   $classes = empty($item->classes) ? array() :(array) $item->classes;
	
	   $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item));
	   $class_names = ' class="'. esc_attr($class_names) . '"';
	   if($args->background_url != "") {
			$img = $args->background_url;
		} else {
			$img = "";
		}	
	   $output .= $indent . '<li id="vg-oregon-menu-item-'. $item->ID . '"' . $value . $class_names.'>';
	
	   $attributes  = ! empty($item->attr_title) ? ' title="'  . esc_attr($item->attr_title) .'"' : '';
	   $attributes .= ! empty($item->target)     ? ' target="' . esc_attr($item->target  ) .'"' : '';
	   $attributes .= ! empty($item->xfn)        ? ' rel="'    . esc_attr($item->xfn     ) .'"' : '';
	   $attributes .= ! empty($item->url)        ? ' href="'   . esc_attr($item->url     ) .'"' : '';
	
	   $prepend = '';
	   $append = '';
	   
	   if($depth != 0)
	   {
		   $description = $append = $prepend = "";
	   }
	
		$item_output = $args->before;
		if($img !="") {
			$output .= '<img class ="'.$class_names.'" src="'.$img.'" alt="Lionel Phạm">';
		}
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before .$prepend.apply_filters('the_title', $item->title, $item->ID).$append;		
		$item_output .= '</a>';
		$item_output .= $args->after;
	
		$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
		
		apply_filters('walker_nav_menu_start_lvl', $item_output, $depth, $args->background_url = $item->background_url);
	 }
}
```

