Wj slot19.REGISTER NOW GET FREE 888 PESOS REWARDS!

Forum Replies Created

Viewing 4 replies - 1 through 4 (of 4 total)

Forum: Developing with WordPress
In reply to: Insert a image before/after the “nav” tag

Thread Starter Oleksandr Myronchuk

(@mironchuk-alexander)

7 years, 1 month ago

Thanks a lot

Forum: Developing with WordPress
In reply to: Insert a image before/after the “nav” tag

Thread Starter Oleksandr Myronchuk

(@mironchuk-alexander)

7 years, 1 month ago

Thanks. Can I ask one more question, please ?
If I use “wp_head” hook, I can add CSS to a page, where “content” property will change dynamically
private $current_menu_item_id = null;
add_action('wp_head', array( $this, 'om_aitm_wp_head'), 10);

    public function om_aitm_wp_head()
    {
        ?>
        <style type="text/css">
            nav[aria-label="Primary Menu"]::before
            {
                display: block;
                text-align: center;
                content: url( <?php echo get_post_meta($this->current_menu_item_id, '_om_aitm_attached_image', true); ?> );
            }
        </style>
        <?php
    }

But hook works first before the filter, therefore the “$this->current_menu_item_id” variable is always empty.
add_filter( 'nav_menu_css_class', array( $this, 'om_aitm_nav_menu_css_class'), 9, 2 );

public function om_aitm_nav_menu_css_class( $classes, $item )
    {
      if( in_array( 'current-menu-item', $classes ) )
      {
        $classes[] = 'om_aitm_add_image';
        $this->current_menu_item_id = $item;
      }
      return $classes;
    }

May I get current menu item id in the om_aitm_wp_head function ?

(I want to avoid using JS)

This reply was modified 7 years, 1 month ago by Oleksandr Myronchuk.

Forum: Developing with WordPress
In reply to: Insert a image before/after the “nav” tag

Thread Starter Oleksandr Myronchuk

(@mironchuk-alexander)

7 years, 1 month ago

Thanks for the answer.
If only CSS is used, I can add only one static image to the menu
For instance:
. current-menu-item { background-image: url("images.jpg"); }
I want to attach an image to each menu item
in order to be more clearly, I create HTML version that I want to implement
https://jsfiddle.net/o43mv73s/3/
Click on menu items, please.
How can I do that ?

Forum: Developing with WordPress
In reply to: How to create custom item in menu

Thread Starter Oleksandr Myronchuk

(@mironchuk-alexander)

7 years, 2 months ago

Yes, I can
I wrote all the code below
functions.php

/**************************************************************************/

function wpse19375_nav_class( $classes, $item ){
  if( in_array( 'current-menu-item', $classes ) )
  {
    ?>
    <img src="<?=get_post_meta($item->ID, 'custom_image_data_' . $item->ID, true);?>">
    <?php
  }
  return $classes;
}

add_filter( 'nav_menu_css_class', 'wpse19375_nav_class', 10, 2 );

/******************************************************************************/
function register_admin_script() 
{
    $menuItems = wp_get_nav_menu_items($_REQUEST['menu']);
    $i = 0;
    foreach ($menuItems as $currentItem) 
        {$items_id[$i++] = $currentItem->ID;}
    wp_enqueue_script( 'wp_img_upload', CURRENT_DIR_URL . '/include/uploader.js', array('jquery', 'media-upload'), '0.0.1', true );
    wp_localize_script( 'wp_img_upload', 'customUploads', 
                        array( 
                            'imageData' => get_post_meta($items_id[0], 
                            'custom_image_data', 
                            true ) ) );
	wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'register_admin_script' );
/******************************************************************************/
require_once( CURRENT_DIR . '/include/edit_custom_walker.php' );
class rc_sweet_custom_menu {

	/*--------------------------------------------*
	 * Constructor
	 *--------------------------------------------*/

	/**
	 * Initializes the plugin by setting localization, filters, and administration functions.
	 */
	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 );
	} // end constructor

	/* All functions will be placed here */
	function rc_scm_add_custom_nav_fields( $menu_item ) 
	{
        $menu_item->subtitle = get_post_meta( $menu_item->ID, '_menu_item_subtitle', true );
        return $menu_item;
    }
    /**
     * Save menu custom fields
     *
     * @access      public
     * @since       1.0 
     * @return      void
    */
    function rc_scm_update_custom_nav_fields( $menu_id, $menu_item_db_id, $args ) {
    
        // Check if element is properly sent
        if ( is_array( $_REQUEST['menu-item-subtitle']) ) {
            $subtitle_value = $_REQUEST['menu-item-subtitle'][$menu_item_db_id];
            update_post_meta( $menu_item_db_id, '_menu_item_subtitle', $subtitle_value );
        }
    
    }
    /**
     * Define new Walker edit
     *
     * @access      public
     * @since       1.0 
     * @return      void
    */
    function rc_scm_edit_walker($walker,$menu_id) {
    
        return 'Walker_Nav_Menu_Edit_Custom';
    
    }
    

}
// instantiate plugin's class
$GLOBALS['sweet_custom_menu'] = new rc_sweet_custom_menu();

edit_custom_walker.php

<?php
class Walker_Nav_Menu_Edit_Custom extends Walker_Nav_Menu {

	public 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 ); ?>">
			<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 wp-clearfix" 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>

				<?php
				// This is the added section
				do_action( 'wp_nav_menu_item_custom_fields', $item_id, $item, $depth, $args );
				// end added section
				?>

				<p class="field-description description description-wide">
					<label for="edit-menu-item-description-<?php echo $item_id; ?>">
						<?php _e( 'Description' ); ?><br />
						<textarea id="edit-menu-item-description-<?php echo $item_id; ?>" class="widefat edit-menu-item-description" rows="3" cols="20" name="menu-item-description[<?php echo $item_id; ?>]"><?php echo esc_html( $item->description ); // textarea_escaped ?></textarea>
						<span class="description"><?php _e('The description will be displayed in the menu if the current theme supports it.'); ?></span>
					</label>
				</p>
				<?php
	            /* New fields insertion ends here */
	            //$locations = get_nav_menu_locations();
	            ?>
	            <div id="metabox_wrapper">
					<img id="image-tag">
					<input type="hidden" id="img-hidden-field" name="custom_image_data_<?=$item_id?>">
					<input type="button" id="image-upload-button" class="button" value="Add Image">
					<input type="button" id="image-delete-button" class="button" value="Delete Image">
				</div>
	            <?php
	            /* End New fields insertion ends here */
	            /*Save field*/
	            update_post_meta($item_id, 'custom_image_data_' . $item_id, $_POST['custom_image_data_'.$item_id]);
	            ?>
				<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();
	}
}

uploader.js

var addButton = document.getElementById( 'image-upload-button' );
var deleteButton = document.getElementById( 'image-delete-button' );
var img = document.getElementById( 'image-tag' );
var hidden = document.getElementById( 'img-hidden-field' );
var customUploader = wp.media({
    title: 'Select an Image',
    button: {
        text: 'Use this Image'
    },
    multiple: false
});

addButton.addEventListener( 'click', function() {
    if ( customUploader ) {
        customUploader.open();
    }
} );

customUploader.on( 'select', function() {
    var attachment = customUploader.state().get('selection').first().toJSON();
    img.setAttribute( 'src', attachment.url );
    hidden.setAttribute( 'value', attachment.url );
    toggleVisibility( 'ADD' );
} );

deleteButton.addEventListener( 'click', function() {
    img.removeAttribute( 'src' );
    hidden.removeAttribute( 'value' );
    toggleVisibility( 'DELETE' );
} );

var toggleVisibility = function( action ) {
    if ( 'ADD' === action ) {
        addButton.style.display = 'none';
        deleteButton.style.display = '';
        img.setAttribute( 'style', 'width: 100%;' );
    }

    if ( 'DELETE' === action ) {
        addButton.style.display = '';
        deleteButton.style.display = 'none';
        img.removeAttribute('style');
    }
};

window.addEventListener( 'DOMContentLoaded', function() {
    if ( "" === customUploads.imageData || 0 === customUploads.imageData.length ) {
        toggleVisibility( 'DELETE' );
    } else {
        img.setAttribute( 'src', customUploads.imageData.src );
        hidden.setAttribute( 'value', JSON.stringify([ customUploads.imageData ]) );
        toggleVisibility( 'ADD' );
    }
} );

When I come to “Menus” (nav-menus.php), I see one error
https://i.piccy.info/i9/47dd7ba8f6c69155d4dc3f9684ca69ce/1505318921/45990/1131628/Untitled.png
When I select menu and click it, then the error disappears.
When I open the first menu item, my code works correctly and I see the “Add Image” button.
https://i.piccy.info/i9/b5891bc79f1da79f5d4baf3576aae4bc/1505319343/38394/1131628/Untitled1.png
I click to “Add Image” button and then I see “Select an Image” panel
https://i.piccy.info/i9/be21604be27bad69fd40f6b5cfc35506/1505319483/31987/1131628/Untitled3.png
I can select image from my PC
When I uploaded image, the “Add Image” button disappears and the “Delete Image” button appears. (That okay. The script works as I have conceived)
https://i.piccy.info/i9/a5e4482bac24439680445f0e143279c8/1505319979/192472/1131628/Untitled4.png
If I click on the “Save” button, the image will be saved.
https://i.piccy.info/i9/95a876afa9ab4917f6019568f6e8a574/1505320170/57637/1131628/Untitled5.jpg

I want to attach the images to the menu items, but I have two problems:
1)The error – https://i.piccy.info/i9/47dd7ba8f6c69155d4dc3f9684ca69ce/1505318921/45990/1131628/Untitled.png
2)I cannot attach images to second item or any other item (I do not know how I can do it. I tried but it ended in failure)
https://i.piccy.info/i9/ffe492ec1ef10329fd8820e52201ec69/1505321382/25821/1131628/Untitled6.png

I would like to apologize if my idea is not understood. I tried to tell as much as possible.
May you help me ?

This reply was modified 7 years, 2 months ago by Oleksandr Myronchuk.

Viewing 4 replies - 1 through 4 (of 4 total)