I want to append something to a wordpress navigation menu. My code here works, however, right now it puts my content inside the "a" tag of each item. I want it OUTSIDE of the "a" tag - right before the closing "li" tag of each item.
I have searched high and low but the wordpress documentation is limited regarding this...
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects( $items, $args ) {
if( $args->theme_location == 'main-menu' ) {
// loop
foreach( $items as &$item ) {
// vars
$mytext = "content";
// append
if( $mytext ) {
$item->title .= $mytext;
}
}
}
// return
return $items;
}
Related
I'm using this function to add an item to my primary nav when on mobile, but its adding the item to all my navs instead of only the primary nav. How or where can I add a parameter to specify which nav is getting the add_last_nav_item()
if ( wp_is_mobile() ) {
function add_last_nav_item($items) {
return $items .= '<li class="text-center">TEST</li>';
}
add_filter('wp_nav_menu_items','add_last_nav_item');
}
You can check the args that are passed to the wp_nav_menu_items filter:
if ( wp_is_mobile() ) {
function add_last_nav_item($items, $args) {
// Check the menu
if ( $args->theme_location == 'your-menu-here' ) {
return $items .= '<li class="text-center">TEST</li>';
}
// Returns the nav items if the condition isn't met.
return $items;
}
add_filter('wp_nav_menu_items','add_last_nav_item', 10, 2);
}
Here is the documentation on wp_nav_menu_items and here's the link to the documentation for the $args that are passed to the filter: wp_nav_menu
As an aside, wp_is_mobile() isn't the best check if a user is on a mobile device. You might consider adding the menu item to the menu you want in the WP Admin area, and then just adding a class that hides it on desktop.
I have used the wp_nav_menu_objects fillter hook in wordpress to add an element outside of tag.enter image description here
// menu items
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects( $items, $args ) {
// loop
foreach( $items as &$item ) {
// vars
$language = get_field('chinese_name', $item);
// append icon
if( $language ) {
$item->title .= ' <span class="menu_link_back ch">'.$language.'</span>';
}
}
// return
return $items;
}
That's the code. But this shows the element inside of the tag but I want it to be on the outside.
enter image description here
im trying to put icons in front of every menu item with ACF. I used this tutorial here https://www.advancedcustomfields.com/resources/adding-fields-menu-items/
It works perfectly but it always add icon AFTER the menu item but I need it to put it IN FRONT of it. I believe it is just some minor code edit I cant see.
Here is my code:
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects( $items, $args ) {
// loop
foreach( $items as &$item ) {
// vars
$icon = get_field('icon', $item);
// append icon
if( $icon ) {
$item->title .= ''.$icon.'';
}
}
// return
return $items;
}
Thank you for any help.
ms
what you do there is that you add it after the title,
so insted of: $item->title .'' . $icon . '';
It should look like this: $item->title = $icon . $item->title;
I have a wordpress website where customers make an image with text and icons, once processed thru woocommerce and payed for that image name 12345.png is saved as Customer_product_image
function add_order_item_meta($item_id, $values) {
$key = 'customer_product_image'; // Define your key here
$value = $values['user_img']; // Get your value here
woocommerce_add_order_item_meta($item_id, $key, $value);
}
And i works great, but now i'm banning my head against the wall! When the purchased image is displayed on the Order admin detail page, it shows up as CUSTOMER_PRODUCT_IMAGE: 1234.png how on earth would i go about wrapping that within an image tag so the image is displayed there?
I've searched high and low on google but haven't been able to find anything, its probably that i dont know what do actually search for....
This did the trick for me!
First i added this snippet for removing the custom meta item on order detail render:
add_filter( 'woocommerce_hidden_order_itemmeta', 'hide_order_item_meta_fields' );
function hide_order_item_meta_fields( $fields ) {
$fields[] = 'current_view';
$fields[] = 'custom_image';//Add all meta keys to this array,so that it will not be displayed in order meta box
return $fields;
}
second i added it back with this, and with the desired text and image tag:
add_action( 'woocommerce_after_order_itemmeta', 'order_meta_customized_display',10, 3 );
function order_meta_customized_display( $item_id, $item, $product ){
$all_meta_data=get_metadata( 'order_item', $item_id, "", "");
$useless = array(
"_qty","_tax_class","_variation_id","_product_id","_line_subtotal","_line_total","_line_subtotal_tax","_line_tax","_line_tax_data"
);// Add key values that you want to ignore
$customized_array= array();
foreach($all_meta_data as $data_meta_key => $value) {
if(!in_array($data_meta_key,$useless)){
$newKey = ucwords(str_replace('_'," ",$data_meta_key ));//To remove underscrore and capitalize
$customized_array[$newKey]=ucwords(str_replace('_'," ",$value[0])); // Pushing each value to the new array
}
}
if (!empty($customized_array)) {
foreach($customized_array as $data_meta_key => $value){
echo "<div class='product_container'><span>Produkt Billede: </span><img src='".wp_upload_dir()['baseurl'].'/flapper/'. $value ."' /> </div>";
}
}
}
i found the answer to this question on this page
You can use the filter woocommerce_order_item_display_meta_value to output the image. Place this code in your functions.php file, you'll need to modify the src attribute of the img tag to include the appropriate URL before the filename value. You can also modify the display label with the filter woocommerce_order_item_display_meta_key
add_filter( 'woocommerce_order_item_display_meta_value', 'modify_order_item_display_value' , 10, 3 );
function modify_order_item_display_value( $display_value, $meta, $wc_order_item ) {
$meta_data = $meta->get_data();
if( $meta_data['key'] === 'customer_product_image' ) {
return '<img src="' . $meta_data['value'] . '">';
}
return $display_value;
}
add_filter('woocommerce_order_item_display_meta_key', 'modify_order_item_display_key', 10, 3);
function modify_order_item_display_key( $display_key, $meta, $wc_order_item ) {
$meta_data = $meta->get_data();
if( $meta_data['key'] === 'customer_product_image' ) {
return 'Customer Image';
}
return $display_key;
}
I just updated a menu on a site of mine to utilize wp_nav_menu. Setting this up with WP was fairly straight forward however I've run into one small snag with the the way wordpress is outputting its parent/ancestor classes for use in highlighting the current page that the content belongs to, particularly with single post pages...
Highlighting the current page with .current_page_item a and .current_page_parent a works perfect as long as its just on a normal page with children, however as soon as you visit a post from events or media, the blog link in the menu is highlighted instead which is incorrect obviously.
*One thing noticeably wrong when looking at Wordpress' output is that the current page classes are not even being generated on the correct li tag that the post belongs to which seems to be the root of the problem.
For future reference, the Events, Media, & Blog pages all use a special query I've written to only grab the respective category for that page, ie.
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("category_name=media&paged=$paged");
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
</div>
<?php
endwhile;
else:
endif;
Hope thats enough info, if not let me know.
Best,
SB
EDIT - August 3, 2011
Below is a screen shot of what Im referring to when I say that wp_nav_menu is generating the current classes on the wrong li tag. Highlighted in Blue is the menu item that the post actually belongs to. Hightlighted in Grey is the incorrect li tag that wordpress has decided to add the current classes to instead.
http://img688.imageshack.us/img688/4180/picture2zo.png
EDIT - August 4, 2011
Maybe this will help demonstrate how I have the menu setup thus far a little better w/ Hadvig's assistance?
In my functions.php template I have -
<?php
// Add Custom Menu Support
if ( function_exists( 'register_nav_menu' ) ) {
register_nav_menu( 'epr_menu', 'EPR Main Menu' );
}
function my_menu_items_hook($items, $menu, $args) {
if ( 'epr_menu' == $menu->slug ) { // check if it is process your top menu
if ( is_single() ) { // check if single post loaded
if ( in_category('events') || in_category('media') ) {
foreach ( $items as $key => $value ) {
if ( 'blog' == $value->ID ) {
$items[$key]->classes[] = array(); //unset classes for blog item
}
// add class if post from event category
if ( in_category('events') && 'events' == $value->ID ) {
$items[$key]->classes[] = 'current-menu-item';
}
// add class if post from media category
if ( in_category('media') && 'media' == $value->ID ) {
$items[$key]->classes[] = 'current-menu-item';
}
}
}
}
}
return $items;
}
add_action('wp_get_nav_menu_items', 'my_menu_items_hook', 10, 3);
?>
In my header.php template I'm calling the menu like so -
<div id="nav_wrapper">
<ul id="nav">
<?php wp_nav_menu( array( 'container' => '', 'items_wrap' => '%3$s' ) ); ?>
</ul>
</div>
I suppose problem because you set post page as Blog and wordpress set it as parent(in your menu) for all post. You can try to change this behaviour with wp_get_nav_menu_items hook. Example:
function my_menu_items_hook($items, $menu, $args) {
if ( 'my-menu-slug' == $menu->slug ) { // check if it is process your top menu
if ( is_single() ) { // check if single post loaded
if ( in_category(EVENT_CATEGORY_ID) || in_category(MEDIA_CATEGORY_ID) ) {
foreach ( $items as $key => $value ) {
if ( BLOG_PAGE_ID == $value->object_id ) {
$items[$key]->classes[] = array(); //unset classes for blog item
}
// add class if post from event category
if ( in_category(EVENT_CATEGORY_ID) && EVENT_PAGE_ID == $value->object_id ) {
$items[$key]->classes[] = 'current-menu-item';
}
// add class if post from media category
if ( in_category(MEDIA_CATEGORY_ID) && MEDIA_PAGE_ID == $value->object_id ) {
$items[$key]->classes[] = 'current-menu-item';
}
}
}
}
}
return $items;
}
add_action('wp_get_nav_menu_items', 'my_menu_items_hook', 10, 3);
You should replace EVENT_CATEGORY_ID and MEDIA_CATEGORY_ID with your category ids(or names). Also replace EVENT_PAGE_ID and MEDIA_PAGE_ID with your page ids. Replace 'my-menu-slug' with your menu slug.
Of course this would work only if you attach post to only one category from Events, Media or Blog.
Updated.