Add BBPress admin links in a menu

Hello,
URL: http://yourtechadvisors.com/forums/topic/test-topic/
I would like to add the admin links in to a menu so that they do not take up to much space. This is how I think it should be setup in my mind.

Menu Link Text: Options.
On click or hover menu opens below link.
The following options appear:
Edit
Close
Stick To Front
Merge
Trash/Delete
Spam
Menu items should be stacked vertically.

Would this be possible? Support access is open.

Thanks.

  • Vaughan

    Hi Alex,

    Hope you're well?

    This could certainly be accomplished,but would require some custom coding.

    You can use the following filter(taken from template.php)

    apply_filters( 'bbp_get_topic_admin_links', $retval, $r, $args );

    Then you would get the value of $retval which outputs the links as HTML.

    Whilst I haven't tested this at all, the following might work,then it's just a matter of tweakingto your liking.

    function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
        if(!is_array($retval)) {
            $link_array = explode(" | ", $retval);
        }
    
        $links = '<select name="bbp_admin_links">';
        $links .= '<option value="">Admin Functions</option>';
        for ($i = 0; $i < count($link_array); $i++) {
            $links .= '<option value="' . $i . '">' ;
            $links .= $link_array[$i];
            $links .= '</option>';
        }
        $links .= '</select>';
    
        return $links;
    }
    add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);

    If you add the above to your theme functions.php

    Hopefully now, the admin links willappear in a dropdown select box instead.

    Hope this helps

  • Vaughan

    Hi,

    Yeah, forget the previous code. I went about it all wrong.

    Try the following:

    function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
        $links = '<ul id="bbp_admin_links_menu">';
        $links .= '<li><a href="#">Admin Functions</a>';
        $links .= '<ul>';
        foreach($r['links'] as $key => $val) {
            $links .= '<li>' . $val . '</li>' ;
        }
        $links .= '</ul></li></ul>';
    
        return $links;
    }
    add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);

    Then add the following CSS to your theme style.css

    .bbp-meta ul {list-style: none;padding: 0px;margin: 0px;}
     .bbp-meta ul li {display: block;position: relative;float: left;border:1px solid #000; z-index: 9999999;}
     .bbp-meta li ul {display: none;}
     .bbp-meta ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #fff; z-index: 9999999;}
      .bbp-meta ul li a:hover {background: #f00;}
      .bbp-meta li:hover ul {display: block; position: absolute;}
      .bbp-meta li:hover li {float: none;}
      .bbp-meta li:hover a {background: #f00;}
      .bbp-meta li:hover li a:hover {background: #000;}
      .bbp-meta #bbp_admin_links_menu li ul li {border-top: 0px;}

    That should now give you a dropdown. But the CSS will most likely need some adjusting as the dropdown might not appear above the existing container & the colours & position will be out.

    But this is a lot closer now.

    Hope this helps

  • Vaughan

    Hi,

    I'm pretty close, but still something isn't right. I can't seem to get the CSS to display themenuabove the div below. z-index doesn't seem to work.

    Let me just ask one of our SLS guys to help with this for you, hopefully he should be able to come up with a quick solution.

    Here's the fullcode function & the Current CSS.

    /*Add admin links for BBPress in to a sub menu*/
    function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
        $menulinks = '<ul class="bbp_custom_links_menu">';
        $menulinks .= '<li><a href="#">Admin Functions</a>';
        $menulinks .= '<ul class="bbp_custom_links_submenu">';
        foreach($r['links'] as $key => $val) {
            $menulinks .= "<li>{$val}</li>";
        }
        $menulinks .= '</ul></li></ul>';
    
        echo $r['before'] . $menulinks . $r['after'];
    }
    add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    .bbp-meta ul.bbp_custom_links_menu {list-style: none;padding: 0px;margin: 0px;}
    .bbp-meta ul.bbp_custom_links_menu li {display: block;position: relative;float: left;border:1px solid #000; z-index: 9999999;}
    .bbp-meta .bbp_custom_links_menu li ul {display: none;}
    .bbp-meta ul.bbp_custom_links_menu li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #fff; z-index: 9999999;}
    .bbp-meta ul.bbp_custom_links_menu li a:hover {background: #f00;}
    .bbp-meta .bbp_custom_links_menu li:hover ul {display: block; position: absolute;}
    .bbp-meta .bbp_custom_links_menu li:hover li {float: none;}
    .bbp-meta .bbp_custom_links_menu li:hover a {background: #f00;}
    .bbp-meta .bbp_custom_links_menu li:hover li a:hover {background: #000;}
    .bbp-meta .bbp_custom_links_menu li ul li {border-top: 0px;}

    Hope this helps

  • Rupok

    Hi Alex

    Hope you had a wonderful day.

    You need to use both jQuery and CSS for fixing the current issue and you need to create one MU Plugin for that. For creating a mu plugin, create a folder named "mu-plugins" inside your "wp-content" folder. Then inside that "mu-plugins" folder, create a file with any name and with a .php extension. Now paste the code inside that file and save.

    <?php
    add_action( 'wp_footer', 'overflow_overriding' );
    function overflow_overriding() {
        if ( is_user_logged_in() ) {
        }else{
        ?>
        <script type="text/javascript">
    		jQuery( document ).ready(function() {
    		   jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
    		});
        </script>
        <?php
        }
    }

    For getting more idea on mu plugins, you can go through this article: https://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    Moreover, add the following custom CSS Code:

    .bbp_custom_links_submenu > li {
      left: -1px;
      width: 151px;
    }
    .bbp-meta ul.bbp_custom_links_menu li a {
      padding: 2px 10px;
    }

    The output will be like the given screenshot.

    Can you please confirm if this works for you? If not, let us know. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Vaughan

    Hi,

    Done :slight_smile:

    For reference, the full code is:

    /* Custom BBP admin links menu */
    function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
        $menulinks = '<ul class="bbp_custom_links_menu">';
        $menulinks .= '<li><a href="#">Admin Functions</a>';
        $menulinks .= '<ul class="bbp_custom_links_submenu">';
        foreach($r['links'] as $key => $val) {
            $menulinks .= "<li>{$val}</li>";
        }
        $menulinks .= '</ul></li></ul>';
    
        echo $r['before'] . $menulinks . $r['after'];
    }
    add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    
    add_action( 'wp_footer', 'overflow_overriding' );
    function overflow_overriding() {
        if ( !is_user_logged_in() ) {
        }else{
        ?>
        <script type="text/javascript">
    		jQuery( document ).ready(function() {
    		   jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
    		});
        </script>
        <?php
        }
    }
    /* End of BBP admin links custom menu */

    The Current CSS is:

    /* BBPAdmin Links Menu */
    div.bbp-admin-links {float: right;}
    .bbp-meta ul.bbp_custom_links_menu {list-style: none;padding: 0px;margin: 0px;}
    .bbp-meta ul.bbp_custom_links_menu li {display: block;position: relative;float: left;border:1px solid #000; background: buttonface;}
    .bbp-meta .bbp_custom_links_menu li ul {display: none;}
    .bbp-meta ul.bbp_custom_links_menu li a {display: block;background: buttonface;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #000000; font-size: 12px;}
    .bbp-meta ul.bbp_custom_links_menu li a:hover { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li:hover ul {display: block; position: absolute;}
    .bbp-meta .bbp_custom_links_menu li:hover li {float: none;}
    .bbp-meta .bbp_custom_links_menu li:hover a { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li:hover li a:hover { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li ul li {border-top: 0px;}
    
    .bbp_custom_links_submenu > li {
      left: -1px;
      width: 118px;
    }
    .bbp-meta ul.bbp_custom_links_menu li a {
      padding: 2px 10px;
    }

    Cheers

  • Alex Stine

    Hello @Vaughan
    We tried playing around with it in chat, the CSS styles, but it did not help. I think when we made the menu not clickable, it messed something up for mobile users. So instead what we need to do I think is let the menu link be clickable and then make it so the page does not scroll to the top. I think that would be the best solution, but I am not a coder, so you can tell me.

    Thanks, awaiting your reply :smiley:

  • Vaughan

    Hi,

    Try now.

    If it still inwrong place, check the custom CSS & lookat the @media code I added for different screensizes, then adjust the values accordingly to suit. You should get the idea.

    If you use firebug for FF, or chrome developer tools, you'll be able to check everything easier.

    If you aren't sure how to use firebug. There's a couple guides here which I would recommend :slight_smile:

    http://www.studiopress.com/tips/using-firebug.htm

    http://www.w3resource.com/web-development-tools/firebug-tutorials.php

    Hope this helps

  • Alex Stine

    Hello @Vaughan,
    It is working great on mobile now. I would like to do 2 more things if at all possible.

    1. Can we add some jquery so when the menu is clicked a second time it will close? This is mainly useful for mobile devices.
    2. Change the menu name to Options instead of Admin Options.

    Hopefully I am not wearing you out with this ticket.

    EDIT 1: #2 is taken care of. :slight_smile:
    EDIT 2: I do use Firebug all the time, how do I test the CSS at different breakpoints?

    Thanks for your awesome support :smiley:

  • Alex Stine

    Hello,
    I just fixed my CSS issue. Thanks for not responding very quick, you made me learn how to fix it. This is the updated CSS code.

    /* BBPAdmin Links Menu*/
    div.bbp-admin-links {float: right;}
    /*ul.bbp_custom_links_menu li.parent {display: block;background: #cccccc;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #000000; font-size: 12px;}
    */
    .bbp-meta ul.bbp_custom_links_menu {list-style: none;padding: 0px;margin: 0px;}
    .bbp-meta ul.bbp_custom_links_menu li {display: block;position: relative;float: left;border:1px solid #000; background: buttonface;}
    .bbp-meta .bbp_custom_links_menu li ul {display: none;}
    .bbp-meta ul.bbp_custom_links_menu li a {display: block;background: buttonface;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #000000; font-size: 12px;}
    .bbp-meta ul.bbp_custom_links_menu li a:hover { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li:hover ul {display: block; position: absolute;}
    .bbp-meta .bbp_custom_links_menu li:hover li {float: none;}
    .bbp-meta .bbp_custom_links_menu li:hover a { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li:hover li a:hover { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li ul li {border-top: 0px;}
    
    .bbp_custom_links_submenu > li {
      left: -1px;
      top: 1px;
      width: 118px;
    }
    .bbp-meta ul.bbp_custom_links_menu li a {
      padding: 2px 10px;
    }
    .bbp-reply-header{overflow: visible !important;}
    @media only screen and (max-width: 480px) {
        .bbp-meta ul.bbp_custom_links_menu {top: 30px; left: 210px; position: absolute;}
    }
    @media only screen and (min-width: 481px) and (max-width: 600px) {
        .bbp-meta ul.bbp_custom_links_menu {top: 60px; left: 245px; position: absolute;}
    }
    @media only screen and (min-width: 601px) and (max-width: 800px) {
        .bbp-meta ul.bbp_custom_links_menu {top: 0px; left: 140px; position: absolute;}
    }

    We still need to take care of this.

    1. Can we add some jquery so when the menu is clicked a second time it will close? This is mainly useful for mobile devices.

    Thanks :smiley:

  • Alex Stine

    Hello Vaughan,
    Adam Czajczyk actually gave me some instructions on how to do this in Firefox as well, it has proven to be an awesome tool. It helped me solve the CSS button problem here and another problem that I had. It has also helped me to learn how to make better breakpoint decisions.

    I have a couple more questions for you before closing this for good. :smiley:
    1. Can we add some jquery so when the menu is clicked a second time it will close? This is mainly useful for mobile devices.
    2. I could not figure out how to expand the menu width. Stick To Front goes on to the next line, I would like the menu to be wide enough where none of the links have to wrap to the next line. Please see screenshot.

    Awaiting your response.

    Thanks,
    Alex.

  • Alex Stine

    Hello @Vaughan,
    I never knew that. OK, we will leave it alone.
    If you are not so good at jquery, this is really what I want to do, you can tell me what it may require. I would like to close the menu on mobile when someone clicks Options again or touches the page background. I think we need to add some more code to identify if the menu is open, then take action.

    If it is not possible, then this will be it for this ticket. Thoughts?

    Thanks,
    Alex :smiley:

    • Alex Stine

      Hello @Vaughan,
      Just to keep everything moving smoothly, I have included another copy of the code here.

      /* Custom BBPress admin links menu */
      function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
          $menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
          $menulinks .= '<li class="parent"><a href="#bbp_custom_links_menu-' . $r["id"] . '">Options</a>';
          $menulinks .= '<ul class="bbp_custom_links_submenu">';
          foreach($r['links'] as $key => $val) {
              $menulinks .= "<li>{$val}</li>";
          }
          $menulinks .= '</ul></li></ul>';
      
          echo $r['before'] . $menulinks . $r['after'];
      }
      add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
      add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
      
      add_action( 'wp_footer', 'overflow_overriding' );
      function overflow_overriding() {
          if ( is_user_logged_in() ) {
          }else{
          ?>
          <script type="text/javascript">
      		jQuery( document ).ready(function() {
      		   jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
      		});
          </script>
      <script type="text/javascript">
      jQuery('.bbp-admin-links ul li')
      .css({cursor: "pointer"})
      .on('click', function(){
        jQuery(this).find('ul').toggle();
      })
      </script>
      
           <?php
          }
      }

      Awaiting your reply.

      Thanks,
      Alex :smiley:

  • Alex Stine

    Hello,
    It appears what ever change you made kind of messed things up. Or maybe it was me. Now the menu is aligning on the right of the quote button. It was not doing that just hours before today. Can you please take a look?

    EDIT: It looks like all the divs I targeted in CSS are not there anymore according to Firebug. Kind of strange.

    EDIT 2: Might want to restore the code we had before you made that syntax error, it was working just fine then.

    Thanks :smiley:

  • Alex Stine

    Hey @Vaughan,
    Don't forget we still need to hide this menu to logged out users. Would this be something that we can fix now?

    Again, I am including an updated code here for everyone.
    functions.php

    /* Custom BBPress admin links menu */
    function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
        $menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
        $menulinks .= '<li class="parent"><a href="#bbp_custom_links_menu-' . $r["id"] . '">Options</a>';
        $menulinks .= '<ul class="bbp_custom_links_submenu">';
        foreach($r['links'] as $key => $val) {
            $menulinks .= "<li>{$val}</li>";
        }
        $menulinks .= '</ul></li></ul>';
    
        echo $r['before'] . $menulinks . $r['after'];
    }
    add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    
    add_action( 'wp_footer', 'overflow_overriding' );
    function overflow_overriding() {
        if ( !is_user_logged_in() ) {
        }else{
        ?>
        <script type="text/javascript">
    		jQuery( document ).ready(function() {
    		   jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
    		});
        </script>
    
         <?php
        }
    }

    This is the code we had before the syntax error correct?

    Custom CSS

    /* BBPAdmin Links Menu*/
    div.bbp-admin-links {float: right;}
    /*ul.bbp_custom_links_menu li.parent {display: block;background: #cccccc;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #000000; font-size: 12px;}
    */
    .bbp-meta ul.bbp_custom_links_menu {list-style: none;padding: 0px;margin: 0px;}
    .bbp-meta ul.bbp_custom_links_menu li {display: block;position: relative;float: left;border:1px solid #000; background: buttonface;}
    .bbp-meta .bbp_custom_links_menu li ul {display: none;}
    .bbp-meta ul.bbp_custom_links_menu li a {display: block;background: buttonface;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #000000; font-size: 12px;}
    .bbp-meta ul.bbp_custom_links_menu li a:hover { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li:hover ul {display: block; position: absolute;}
    .bbp-meta .bbp_custom_links_menu li:hover li {float: none;}
    .bbp-meta .bbp_custom_links_menu li:hover a { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li:hover li a:hover { background: #cccccc;}
    .bbp-meta .bbp_custom_links_menu li ul li {border-top: 0px;}
    
    .bbp_custom_links_submenu > li {
      left: -1px;
      top: 1px;
      width: 118px;
    }
    .bbp-meta ul.bbp_custom_links_menu li a {
      padding: 2px 10px;
    }
    .bbp-reply-header{overflow: visible !important;}
    @media only screen and (max-width: 480px) {
        .bbp-meta ul.bbp_custom_links_menu {top: 30px; left: 210px; position: absolute;}
    }
    @media only screen and (min-width: 481px) and (max-width: 600px) {
        .bbp-meta ul.bbp_custom_links_menu {top: 60px; left: 245px; position: absolute;}
    }
    @media only screen and (min-width: 601px) and (max-width: 800px) {
        .bbp-meta ul.bbp_custom_links_menu {top: 0px; left: 140px; position: absolute;}
    }

    EDIT: I did move the custom CSS down to the bottom for better access.

    Sorry for all the updates and questions, just trying to keep things organized and running smoothly in a ticket this large.

    Awaiting your reply.

    Thanks,
    Alex :smiley:

  • Alex Stine

    Hello @Vaughan,
    I see you have fixed the code so Options does not show to people who are not logged in, just so we are all updated, here is another current version of the code in functions.php.

    /* Custom BBPress admin links menu*/
    function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
       if ( is_user_logged_in() ) {
       $menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
        $menulinks .= '<li class="parent"><a href="#bbp_custom_links_menu-' . $r["id"] . '">Options</a>';
        $menulinks .= '<ul class="bbp_custom_links_submenu">';
        foreach($r['links'] as $key => $val) {
            $menulinks .= "<li>{$val}</li>";
        }
        $menulinks .= '</ul></li></ul>';
    
        echo $r['before'] . $menulinks . $r['after'];
        }
    }
    add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
    
    add_action( 'wp_footer', 'overflow_overriding' );
    function overflow_overriding() {
        if ( !is_user_logged_in() ) {
        }else{
        ?>
        <script type="text/javascript">
    		jQuery( document ).ready(function() {
    		   jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
    		});
        </script>
    
         <?php
        }
    }

    Thanks,
    Alex :smiley:

  • Michael Bissett

    Hi Alex,

    I'm responding here because this thread's gone well beyond our custom development policy (which is something I'm bringing up to my colleagues that have been working this ticket, as well as my other colleagues), and needs to be closed up.

    Walking through our custom development policy:

    We love our members! We also love to solve their problems even when it’s not regarding our own plugins and themes

    And that's true. :slight_smile:

    ...but there does come a point where hiring a developer is the most appropriate action to take.

    And that's really the case for this site of yours. I've also brought up our Members area as of late, in case one of our members has some additional insight of his own.

    If it’s a bug in our plugin, we’ll fix it, we’ve got you covered and we’ll even guarantee that!

    Also true. :slight_smile:

    If it’s custom (something CSS, HTML or PHP-based), then we’ll happily give you some help and guidance, and if it’s something that takes us around 5 to 10 minutes, then we’ll also be more than happy to look at providing a code snippet. This is not part of our official offering, and we may decline in periods where we have heavy demand for our service.

    This has easily gone over the 5-10 minute mark, and is something that's becoming more of a problem now.

    Like I said, I don't mind offering help to folks, in offering code snippets, but support & website design are two very different things (speaking from experience, as I've worked in both realms).

    In that instance (and in instances where more than 5 to 10 minutes is needed for a customisation), we would direct you to our Jobs Board and advise that you need to hire a developer.

    Which is what I'm advising now. I realize there may be financial considerations (having helped out a non-profit in the past myself, in my website design efforts), so that's where our Members area is another option open to you.

    Where we continue to assist with customisations, we restrict this to once per week, this is to ensure we offer an efficient service to all of our members.

    Because it's not efficient, which translates to not being fair to the other members, when so much attention is put on one member.

    In the interest of full disclosure, I'm not happy to do this. But there's more than just myself to consider here, there's other folks that I have to help in a day of work here, same story for my colleagues.

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.