Custom shortcode in Wordpress Nav Bar

Question

I just want to add a shortcode button to my wordpress theme menu bar for handle the bootstrap modal view function.

I tried 'Shortcodes in Menus' plugin, but it doesn't work. I couldn't find alternative plugin for shortcodes in menu so I installed 'Bootstrap 3 Shortcodes' plugin, it created button and modal view content as i want. But I couldn't add shortcode to my menubar.

I did hard try to find some answer about my problem. But unfortunately could not.

Thats my modal shortcode generated by Bootstrap 3 Shortcodes plugin;

[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]
<p style="text-align: center;"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/08/vetmapp-logo-withtext.png" alt="Logo" width="200" height="300" /></p>

<h4 style="text-align: center;">VetMapp'i cihazınıza göre aşağıdaki platformlardan cep telefonunuza ücretsiz olarak indirebilir ve hemen kullanmaya başlayabilirsiniz.</h4>
<p style="text-align: center;">
  <a href="https://itunes.apple.com/tr/app/vetmapp-acil-veteriner-klinikleri/id969463902?mt=8" target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xapple-store.png.pagespeed.ic.z0I7tHw8h6.png" alt="App Store'dan indir!" width="135" height="40" /></a>
  <a href="https://play.google.com/store/apps/details?id=com.esmobileinc.vetmapp&amp;hl=tr"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xgoogle_play.png.pagespeed.ic.31v8JAmtbI.png" alt="Google Play'den indir!" width="135" height="40" /></a>
  <a href="https://www.microsoft.com/tr-tr/store/p/vetmapp/9nblggh4s3qm"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xwindows_phone.png.pagespeed.ic.xvoiaCiuDP.png" alt="Windows Store'dan indir!" width="135" height="40" /></a>
</p>
[modal-footer] [button type="primary" style="border: solid 1px #18bda3; background-color: #fff; color: #18bda3;" link="#" data="dismiss,modal"]Kapat[/button] [/modal-footer] [/modal]

I just want to use [modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"] into WP Navigation Bar.

How can I do this ? I can write a function in functions.php for this, or try some another approach ?

Thank you...

Answer 1

If you share your shortcode generate markup or what markup you want to wrap with your shortcode that would be best to others understand clearly.

anyway try this it will work smoothly (Tested)

add_filter( 'wp_nav_menu_items', 'wpse3967385_custom_menu_link', 10, 2 );

function wpse3967385_custom_menu_link( $items, $args ) {
   if ($args->theme_location == 'primary_nav') {
      $items .= '<li class="your-custom-item">' . do_shortcode( '[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]' ) . '</li>';
   }
   return $items;
}

Feel free to change your Menu theme location.

Hope it make sense.

Answer 2

function my_function_name($item_output) {
    if( YOUR LOGIC FOR WHEN YOU WANT IT )
       $item_output .= do_shortcode('[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]');

    return $item_output;
}
add_filter('wp_nav_menu', 'my_function_name', 10, 1);

Answer 3

I am not to sure what is result provide this shortcode. In my idea you can see a button when you click then show model window and you want to implement button on nav menu. I didn't tested these code but you can try if this helpful for you.

First create a new php file and put all shortcode content there. Ex. my-modal.php

//my-modal.php
[modal text="Download Now" title="Veteriner Hekimlere Ulaşmanın En Kolay Yolu" xclass="btn btn-primary btn-lg"]
<p style="text-align: center;"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/08/vetmapp-logo-withtext.png" alt="Logo" width="200" height="300" /></p>

<h4 style="text-align: center;">VetMapp'i cihazınıza göre aşağıdaki platformlardan cep telefonunuza ücretsiz olarak indirebilir ve hemen kullanmaya başlayabilirsiniz.</h4>
<p style="text-align: center;">
  <a href="https://itunes.apple.com/tr/app/vetmapp-acil-veteriner-klinikleri/id969463902?mt=8" target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xapple-store.png.pagespeed.ic.z0I7tHw8h6.png" alt="App Store'dan indir!" width="135" height="40" /></a>
  <a href="https://play.google.com/store/apps/details?id=com.esmobileinc.vetmapp&amp;hl=tr"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xgoogle_play.png.pagespeed.ic.31v8JAmtbI.png" alt="Google Play'den indir!" width="135" height="40" /></a>
  <a href="https://www.microsoft.com/tr-tr/store/p/vetmapp/9nblggh4s3qm"
  target="_blank"><img src="http://web-test.vetmapp.com/wp-content/uploads/sites/2/2016/09/180x40xwindows_phone.png.pagespeed.ic.xvoiaCiuDP.png" alt="Windows Store'dan indir!" width="135" height="40" /></a>
</p>
[modal-footer] [button type="primary" style="border: solid 1px #18bda3; background-color: #fff; color: #18bda3;" link="#" data="dismiss,modal"]Kapat[/button] [/modal-footer] [/modal]

In your theme function.php create a new function and include this file.

function modal_shortcode_content(){
  ob_start();
  include "my-modal.php";
  $shortcode_content = ob_get_content();
  ob_clean();
  return do_shortcode($shortcode_content);
}

Add shortcode output in nav content. I am not sure i think shortcode gives button only and other part is hide and visible when you click on button.

function navigation_add_button_menu($item_output) {
 // apply any logic here...
       $item_output .= modal_shortcode_content();

    return $item_output;
}

add_filter('wp_nav_menu', 'navigation_add_button_menu', 10, 1);

Answer 4

Your code is pretty messy, I can't give you a working script since is in another language I don't understand, and I don't want to mess something.

Anyways, try this. This is a simple logic to get what you want, via shortcodes. I use it my website.

function html_code() {
    if( //Trigger Event Goes Here ) {
       // Use echo's to output the HTML of the window
    }
}

function modal_window() {
    html_code();

    return ob_get_clean();
}

add_shortcode( 'modal_window' );

Answer 5

Is this for a specific use where class will always be the same? If you're only looking to ever use this on one place, you can do this:

 function print_menu_shortcode($atts, $content = null) {
    extract(shortcode_atts(array( 'name' => null, 'class' => null ), $atts));
    return wp_nav_menu( array( 'menu' => $name, 'menu_class' => 'myclass', 'echo' => false ) );
    }

add_shortcode('menu', 'print_menu_shortcode');

Then change the section 'menu_class' => 'myclass' with the class you need. this will avoid having to use the class. Again, don't use the "." in front of the class here.

Short code usage:

[menu name="menu_name"]