how to insert shortcode into wordpress menu - wordpress

I have made a menu item with this code.
The menu item shows up but the shortcode output is not there.
Is there something I can add or a different method that will do this.
I have added also in hopes this might help.
add_filter('wp_nav_items', 'do_shortcode', 7);
Or maybe someone knows this is not possible and can tell me.
/* Nav Menu */
function add_profile_link_to_nav(){
if ( is_user_logged_in() ) { ?>
<ul>
<li class="menu-item"id="one"> All Members
<ul class="sub-menu">
<li class="menu-item"><?php echo custom_execute_shortcode(); ?> </li>
</ul>
</li>
</ul> <!--end menu--->
<?php }
}
add_action( "wp_nav_items","add_profile_link_to_nav" );
function custom_execute_shortcode() {
$myfunction= '[my shortcode"]';
$myfunction_parsed = do_shortcode($myfunction);
return $myfunction_parsed;
}
Thanks

#Tim
This code will work
put it in functions.php file
add_filter('wp_nav_menu_items', 'do_shortcode');

You can't use shortcodes directly in the menu URL on the menu page, because the brackets get stripped out. But you can use placeholders like this: #profile_link#.
With the following code in functions.php, you can create a custom menu item with the URL #profile_link#, and it will replace that with your shortcode.
/**
* Filters all menu item URLs for a #placeholder#.
*
* #param WP_Post[] $menu_items All of the nave menu items, sorted for display.
*
* #return WP_Post[] The menu items with any placeholders properly filled in.
*/
function my_dynamic_menu_items( $menu_items ) {
// A list of placeholders to replace.
// You can add more placeholders to the list as needed.
$placeholders = array(
'#profile_link#' => array(
'shortcode' => 'my_shortcode',
'atts' => array(), // Shortcode attributes.
'content' => '', // Content for the shortcode.
),
);
foreach ( $menu_items as $menu_item ) {
if ( isset( $placeholders[ $menu_item->url ] ) ) {
global $shortcode_tags;
$placeholder = $placeholders[ $menu_item->url ];
if ( isset( $shortcode_tags[ $placeholder['shortcode'] ] ) ) {
$menu_item->url = call_user_func(
$shortcode_tags[ $placeholder['shortcode'] ]
, $placeholder['atts']
, $placeholder['content']
, $placeholder['shortcode']
);
}
}
}
return $menu_items;
}
add_filter( 'wp_nav_menu_objects', 'my_dynamic_menu_items' );
You just need to set 'shortcode' in the $placeholders array, and optionally 'atts' and 'content'.
For example, if your shortcode is like this:
[example id="5" other="test"]Shortcode content[/example]
You would update:
'#placeholder#' => array(
'shortcode' => 'example';
'atts' => array( 'id' => '5', 'other' => 'test' );
'content' => 'Shortcode content';
),
Note that I don't use do_shortcode() because it is a resource intensive function and isn't the right tool for the job in this case.

Enable description on the menu page, paste to the description textarea of the link your shortcode, in functions.php add next code:
add_filter('walker_nav_menu_start_el', function($item_output, $item) {
if (!is_object($item) || !isset($item->object)) {
return $item_output;
}
if ($item->ID === 829) {
$item_output = do_shortcode($item->description);
}
return $item_output;
}, 20, 2);

Related

Product page details tabs to lightbox

in my woocomere product page there is tabs of a product to display different information (description, etc). But i wish to be able to in a specific tab turn in a ligthbox popup that shows text or a image. Is there any plugin available in wordpress for it?
Please try below code in function.php to show tab content in light box. Might be you will have to customize more but basic structure i am sharing with you.
add_action( 'woocommerce_product_write_panel_tabs','outputTabTitle');
add_action( 'woocommerce_product_write_panels','outputTabEditContent');
add_filter( 'woocommerce_product_tabs','productTab');
function outputTabTitle ()
{
?>
<li class="custom_tab">
Additional Information
</li>
<?php
}
function outputTabEditContent ()
{
global $woocommerce, $post;
echo '<div id="custom-tab" class="panel woocommerce_options_panel">';
/************Please put you lightbox text and image here.
echo '</div>';
}
function productTab ( $tabs )
{
$tabs['custom-tab'] = array(
'title' => __( 'Additional Information', 'woocommerce' ),
'priority' => 50,
'callback' => 'outputTabEditContent'
);
return $tabs;
}

How to display a particular menu items as second position in menu item order using wp_nav_menu_args?

I have used the code below to add menu items in the nav menu
'add_filter( 'wp_nav_menu_items', 'add_users_link', 10, 2 );
function add_users_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li>Cadastro</li>';
}
elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li>Log In</li>';
}
return $items;
}
I need to display the above items to the second position in the above code.
I have used sort_column and menu_order, but it not working
Anyone helps. THanks in advance
I see three ways to do it:
With PHP
You can split your menu in two distinct menu then:
<?php
$args1 = array( 'menu' => 'header_menu_1' );
$args2 = array( 'menu' => 'header_menu_2' );
wp_nav_menu($args1);
?>
Your custom content here
<?php
wp_nav_menu($args2);
?>
With jQuery
$(document).ready(function() {
$('ul li').eq(2).after('Your html content here');
});
With Css
You can change order of items with css and display: flex property
See Flex order documentation here

Add featured image to wp_nav_menu items

This is a self Q&A.
How do you modify the text/html that appears in the output of a wp_nav_menu? For example, I wanted to add the featured image for pages and categories.
You see examples of doing this with a custom walker, but the code is very complex to do for small changes. Surely there is a way to do it with a filter?
This is the code I came up with thanks to some help from a Wordpress StackOverflow answer that I can't find anymore (please comment with a link if you find it).
First you need to add the filter to the specific menu (you could add it to all menus if you want - just use the add_filter line by itself).
// Add filter to specific menus
add_filter('wp_nav_menu_args', 'add_filter_to_menus');
function add_filter_to_menus($args) {
// You can test agasint things like $args['menu'], $args['menu_id'] or $args['theme_location']
if( $args['theme_location'] == 'header_menu') {
add_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
}
return $args;
}
Then you need to build out the code to get the post or category ID from the $item object passed to the filter. It's not as easy as you'd expect, as $item doesn't contain the underlying post/category ID, just the menu item ID. So I use the URL's to do a reverse lookup of the IDs.
This won't work for tags used in a menu, or custom taxonomys. I only needed it for categories, so this is all I built.
// Filter menu
function filter_menu_items($item) {
if( $item->type == 'taxonomy') {
// For category menu items
$cat_base = get_option('category_base');
if( empty($cat_base) ) {
$cat_base = 'category';
}
// Get the path to the category (excluding the home and category base parts of the URL)
$cat_path = str_replace(home_url().'/'.$cat_base, '', $item->url);
// Get category and image ID
$cat = get_category_by_path($cat_path, true);
$thumb_id = get_term_meta($cat->term_id, '_term_image_id', true); // I'm using the 'Simple Term Meta' plugin to store an attachment ID as the featured image
} else {
// Get post and image ID
$post_id = url_to_postid( $item->url );
$thumb_id = get_post_thumbnail_id( $post_id );
}
if( !empty($thumb_id) ) {
// Make the title just be the featured image.
$item->title = wp_get_attachment_image( $thumb_id, 'poster');
}
return $item;
}
And then you want to remove the filter that you applied at the beginning, so that the next menu processed doesn't use the same HTML as defined above in filter_menu_items().
// Remove filters
add_filter('wp_nav_menu_items','remove_filter_from_menus', 10, 2);
function remove_filter_from_menus( $nav, $args ) {
remove_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
return $nav;
}
Modified Drew Baker answer. It works without plugins, also if there is no category with current slug it checks for woocommerce product category ('product_cat').
functions.php
// Add filter to specific menus
add_filter('wp_nav_menu_args', 'add_filter_to_menus');
function add_filter_to_menus($args) {
// You can test agasint things like $args['menu'], $args['menu_id'] or $args['theme_location']
if( $args['theme_location'] == 'menu-header') {
add_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
}
return $args;
}
// Filter menu
function filter_menu_items($item) {
if( $item->type == 'taxonomy') {
// Get category and image ID
$slug = pathinfo( $item->url, PATHINFO_BASENAME );
$cat = get_term_by( 'slug', $slug, 'category' );
// If there is no standard category try getting product category
if( !$cat ) {
$cat = get_term_by( 'slug', $slug, 'product_cat' );
}
$thumb_id = get_term_meta($cat->term_id, 'thumbnail_id', true);
} else {
// Get post and image ID
$post_id = url_to_postid( $item->url );
$thumb_id = get_post_thumbnail_id( $post_id );
}
if( !empty($thumb_id) ) {
// Make the title just be the featured image.
$item->title = wp_get_attachment_image( $thumb_id, 'poster');
// Display image + title example
// $item->title = wp_get_attachment_image( $thumb_id, 'poster').$item->title;
}
return $item;
}
// Remove filters
add_filter('wp_nav_menu_items','remove_filter_from_menus', 10, 2);
function remove_filter_from_menus( $nav, $args ) {
remove_filter( 'wp_setup_nav_menu_item', 'filter_menu_items' );
return $nav;
}

How to get a slug name for a page without creating an admin page menu

I now use the add_submenu_page() function, but I don't want the edit page to appear in the admin menu.
I want to access the edit page from a list (another page) directly. But I need the slug as a hook_suffix.
I have in my-edit.php
/* Set up the administration functionality. */
add_action( 'admin_menu', 'my_edit_setup' );
function my_edit_setup() {
...
/* Add Edit Actionlist page. */
$myplugin->my_edit = add_submenu_page( 'myplugin', esc_attr__( 'Edit', 'myplugin' ), esc_attr__( 'Edit', 'myplugin' ), 7, 'my-edit', 'my_edit' );
...
In admin.php I have:
function my_admin_enqueue_style( $hook_suffix ) {
$pages = array(
'admin_page_projects',
'...my-edit'
);
if ( in_array( $hook_suffix, $pages ) ) {
wp_enqueue_style( 'myplugin-admin', trailingslashit( MYPLUGIN_URI ) . 'css/admin.css', false, '20110525', 'screen' );
You see I need the $hook_suffix, but I can't find out how to get this, without creating the admin menu item.
Example of how to create an invisible sub menu (it gets attached to the Dashboard, index.php) and the correspondent $hook_suffix.
The page can be accessed through http://example.com/wp-admin/index.php?page=sample_page_hidden.
add_action( 'admin_menu', 'admin_menu_so_11593510' );
add_action( 'admin_enqueue_scripts', 'admin_enqueue_scripts_so_11593510' );
function admin_menu_so_11593510()
{
add_submenu_page(
null, // doesn't shows up in the menu, submenu is attached to "index.php"
'Test',
'Test',
'edit_pages',
'sample_page_hidden',
'menu_options_so_11593510'
);
}
function menu_options_so_11593510() { echo 'Hello!'; }
function admin_enqueue_scripts_so_11593510( $hook_suffix )
{
if ( 'dashboard_page_sample_page_hidden' == $hook_suffix ) {
wp_enqueue_script( 'swfobject' );
}
}

WordPress wp_nav_menu specific sub menu only

I want to create a menu that pulls only the sub-menu options for a particular page.
For example, if the menu option DASHBOARD has the sub-menus MESSAGE BOARD and CALENDAR, I want to be able to create a separate menu with just MESSAGE BOARD and CALENDAR.
I'd like to do this without the wp_list_pages function so that the menu options can be managed using the Appearances > Menus tab in WordPress.
Thanks!
If I understood you correctly, you want additional menu items for sub pages?
I.E. You have a menu that looks like this
HOME ABOUT DASHBOARD FAQ CONTACT
DASHBOARD has 2 sub-pages -> BOARD CALENDAR
When you are on the DASHBOARD page you want the BOARD and CALENDAR pagees to show like this:
HOME ABOUT DASHBOAR FAQ CONTACT
BOARD CALENDAR
You can add an aditional menu in functions.php like this
<?php if (function_exists('register_nav_menus'))
{
register_nav_menus
(
array
(
'main_nav'=>'main menu', // your main menu
'dash_nav'=>'dashboard menu', //your dashboard menu
)
);
}?>
And then create a page template for dashboard which will have this:
<?php wp_nav_menu(array('menu'=>'dashboard menu'));?>
EDIT:
Well you could edit the header.php and add something like this
<?php if (is_page_template('dashboard.php') :?>
<link href="csspath" rel="stylesheet" type="text/css" />
<?php endif;?>
That way you add another css file that overrides the submenu.
I think I had a similar desire as you to select and only show a sub menu being just the children menu items from an existing wordpress menu. This can be done by editing the functions.php and adding a shortcode that has it's own walker class to target and display a submenu.
PHP code for "menu" shortcode and customized menu walker class (all goes in functions.php):
//register menu shortcode
add_shortcode('menu', 'shortcode_menu');
function shortcode_menu($args ) {
//don't echo the ouput so we can return it
$args['echo']=false;
//in case menu isn't found display a message
$args['fallback_cb']='shortcode_menu_fallback';
//check if showing a submenu, if so make sure everything is setup to do so
if (isset($args['show_submenu']) && !empty($args['show_submenu'])) {
if (!isset($args['depth'])) {
$args['depth']=1;
}
$args['walker']=new Sub_Menu_Walker_Nav_Menu();
}
$menu=wp_nav_menu( $args );
return $menu;
}
//message to display if menu isn't found
function shortcode_menu_fallback($args ) {return 'No menu selected.';}
//special walker_nav_menu class to only display submenu
//depth must be greater than 0
//show_submenu specifies submenu to display
class Sub_Menu_Walker_Nav_Menu extends Walker_Nav_Menu {
function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
if ( !$element )
return;
$id_field = $this->db_fields['id'];
$displaythiselement=$depth!=0;
if ($displaythiselement) {
//display this element
if ( is_array( $args[0] ) )
$args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'start_el'), $cb_args);
}
$id = $element->$id_field;
if ( is_array( $args[0] ) ){
$show_submenu=$args[0]['show_submenu'];
}else
$show_submenu=$args[0]->show_submenu;
// descend only when the depth is right and there are childrens for this element
if ( ($max_depth == 0 || $max_depth >= $depth+1 ) && isset( $children_elements[$id]) && $element->title==$show_submenu) {
foreach( $children_elements[ $id ] as $child ){
if ( !isset($newlevel) ) {
$newlevel = true;
//start the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
}
$this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
}
unset( $children_elements[ $id ] );
}
if ( isset($newlevel) && $newlevel ){
//end the child delimiter
$cb_args = array_merge( array(&$output, $depth), $args);
call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
}
if ($displaythiselement) {
//end this element
$cb_args = array_merge( array(&$output, $element, $depth), $args);
call_user_func_array(array(&$this, 'end_el'), $cb_args);
}
}
}
Display a submenu titled "About" from the "Main" menu (capitalization matters):
[menu menu='Main' show_submenu='About']
Display the full "Main" menu:
[menu menu='Main']
For further reading/reference see this wordpress question.
I am surprised that Wordpress doesn't have this option built into the wp_nav_menu function. It has always been a struggle to implement secondary or split menus in Wordpress. After trying a number of different solutions to accomplish this goal I finally decided to make my own plugin that lets you choose the start depth for your menu. So you can just set the start depth to '1' for a secondary menu.
you use the plugin like this:
wp_nav_plus(array('theme_location' => 'primary_navigation', 'start_depth' => 1));
The plugin is available on my site here for anyone interested: https://mattkeys.me/products/wp-nav-plus/

Resources