0

wp_nav_menu()

 <!-- Cart Menu -->
            <?php 
              wp_nav_menu([
               'menu'            => 'Cart',
               'theme_location'  => 'Cart',
               'container'       => false,
               //'container_id'    => 'bs4navbar',
               //'container_class' => 'collapse navbar-collapse',
               'menu_id'         => false,
               'menu_class'      => 'navbar-nav mr-auto',
               'depth'           => 2,
               'fallback_cb'     => 'bs4navwalker::fallback',
               'walker'          => new bs4navwalker()
             ]);
            ?>
                    <!-- code for the badge START-->
            <?php $args = array(
              'menu' => 'Cart',
              'container' => '',
              'items_wrap' => '%3$s'
            ); ?>
            <ul class="badge">
            <?php wp_nav_menu($args); ?>
            <li>

              <?php
            if ( WC()->cart->get_cart_contents_count() !== 0 ) {
            // Do something fun
              ?>  
              <span class="badge-pill badge-warning no-md-view">
                <a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?></a>
              <?php 
            }
            ?>

            </span>

            </li>
            </ul>

Result

enter image description here


I want to add my PHP code to add a Bagde in my link using the wodpress menu admin.

I already add the code to the header (navbar), but I'd like to add it like a Badge in my cart icon.

enter image description here

Is anybody knows what happens?

  • You haven't closed the span tag and typically it's not a wise idea to float spans. Try floating the <a> tag instead and place the span inside it. – WebElaine May 9 '17 at 15:19
  • @WebElaine I closed the <span> and the result was the same. I did all these tests and if I use just the PHP code, the browser (or wordpress) renders it as a comment <!-- -->. Do you know another way to do it? – Állan Fidelis Toledo May 10 '17 at 11:54
  • Try taking out the comment above your code <!-- code for the badge START-->. Other than that we probably would need to see more of your code to help. As @Jeff Mattson mentioned this may be the wrong code block you are working on. See if it is anywhere else in your theme or plugins. – WebElaine May 10 '17 at 14:59
  • @WebElaine please, see edit. I put my full code there, Badge is ok there, the problem is when I use the PHP code inside de admin menu section. tks! – Állan Fidelis Toledo May 10 '17 at 15:48
  • I think a little may be getting lost in translation. front-page.php is not an admin page. It's a front end visitor facing page. I personally find it best to simplify: instead of using your full code, try just outputting something simple. So inside your if statement, just put <a href="foo">I am working</a> and see if that works. If not, it has nothing to do with your badge code, it's something outside/before it that's causing it to appear as a comment. – WebElaine May 10 '17 at 17:02
0

Allan, thanks for clarifying the question. You can't add PHP in the wp-admin menu manager. Instead, here is a way to keep the menu dynamic and managed in wp-admin, while still allowing you to add your PHP at the end:

<?php $args = array(
    'menu' => 'your-menu-name',
    'container' => '',
    'items_wrap' => '%3$s'
); ?>
<ul class="my-custom-menu">
<?php wp_nav_menu($args); ?>
<li><?php // add your badge code here ?></li>
</ul>

What this does: outputs a menu named your-menu-name (replace this with whatever you're calling the menu, looks like it may be cart). Leaving container empty means it removes the <div> that normally wraps around the menu. You want to remove that because if you don't, you'll have a <div> around the menu but not your badge. Setting items_wrap to just %3$s strips off the <ul> that normally wraps around the menu - you're removing it for the same reason you're removing the <div>. Finally, you wrap both the menu and your custom code within your own <ul> - you can change my-custom-menu to whatever CSS class you like, add an ID, etc. - and by putting your badge code inside an <li> it will then get the same CSS styles such as float that your other menu items are getting.

| improve this answer | |
  • Hi, thank you very much. I have a little problem :).I already have a custom args to my wp_nav_menu(). I'll add another comment to explain better. Is is full. <?php wp_nav_menu([ 'menu' => 'top', 'theme_location' => 'top', 'container' => 'div', 'container_id' => 'bs4navbar', 'container_class' => 'collapse navbar-collapse', 'menu_id' => false, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 2, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> – Állan Fidelis Toledo May 11 '17 at 23:43
  • First step: I used the code as you wrote, it create an bagde with all itens of my original menu. Second step: I mixed your code with mine. If I remove 'div' and '<li>' or keep both my code broke (no CSS). It worked, but the 'style' and 'js' didn't. – Állan Fidelis Toledo May 11 '17 at 23:47
  • Right, this will change the HTML elements, so you can either go back and edit your CSS, or, you can hard-code the outer <div> with the same class it had before and set the <ul> class to whatever it was before. – WebElaine May 12 '17 at 14:17
  • I did what I told me, but I don't know if I undertand eveything. I edit one more time my question to show you the result. You can see more of my code (and evolution stage) here: wordpress.stackexchange.com/questions/267827/… – Állan Fidelis Toledo May 24 '17 at 12:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.