New to the community? Start here

Moving BBpress Admin Link to the bottom of the page

1. I would like to move the Bbpress admin link

(Edit | Close | Stick (to front) | Merge | Trash | Spam | Reply)

link to the bottom of the page rather than showing on the top.

Screenshot: https://imgur.com/a/N4MldrB

2. Add icons before each text.

(icon)Edit | (icon)Close | (icon)Stick (to front) | (icon)Merge | (icon)Trash | (icon)Spam | (icon)Reply)

Screenshot: https://imgur.com/KT4rxXQ

Can you help in in getting this done?

Thu, 29 Nov 2018 13:14:04
  • Adam
    • Support Gorilla

    Hi Yogen

    I hope you’re fine today!

    1. I would like to move the Bbpress admin link

    (Edit | Close | Stick (to front) | Merge | Trash | Spam | Reply)

    link to the bottom of the page rather than showing on the top.

    Screenshot: https://imgur.com/a/N4MldrB

    I wouldn’t try to do this with CSS solely as due to the default structure of the template it would take quite a “tricky” CSS and would most likely be unreliable/inconsistent. I think it would be similar with JS so the best option would be to actually change bbPress template files.

    To do this, you’d first need to copy default BP templates to your current theme folder. To do this copy entire

    /wp-content/plugins/bbpress/templates/default/bbpress

    folder to

    /wp-content/themes/YOUR_THEME_FOLDER/

    folder.

    Once that’s done you’ll want to enter

    /wp-content/themes/YOUR_THEME_FOLDER/bbpress

    folder and edit the file named “loop-single-reply.php”.

    1. Find following code inside that file (starts around line 30):

    <?php do_action( 'bbp_theme_before_reply_admin_links' ); ?>
    

    
<?php bbp_reply_admin_links(); ?>
    

    
<?php do_action( 'bbp_theme_after_reply_admin_links' ); ?>

    2. Move this code to the end of the file in between these two lines:

    </div><!-- .bbp-reply-content -->
    

    
</div><!-- .reply -->

    so these above two lines become:

    </div><!-- .bbp-reply-content -->
    
<?php do_action( 'bbp_theme_before_reply_admin_links' ); ?>
    

    
<?php bbp_reply_admin_links(); ?>
    

    
<?php do_action( 'bbp_theme_after_reply_admin_links' ); ?>
    
</div><!-- .reply -->

    3. Save the file and your links should be moved. Then you can use some simple additional CSS to e.g. center them or change colors/fonts etc. 

    2. Add icons before each text.
    
(icon)Edit | (icon)Close | (icon)Stick (to front) | (icon)Merge | (icon)Trash | (icon)Spam | (icon)Reply)
    
Screenshot: https://imgur.com/KT4rxXQ

    Yes, that’s doable as well and it can be done with a little bit of CSS. Are you going to is image icons (image files as icons) or are you’d rather prefer to use some FontAwesome icons (and if so, do you have Font Awesome installed on site already)?

    Best regards,

    Adam

    • Yogen
      • Flash Drive

      Yes, I would like to add Font Awesome icons. I hope the font awesome icon is installed in the theme.

      1. I would like to move the Bbpress admin link

      (Edit | Close | Stick (to front) | Merge | Trash | Spam | Reply)

      link to the bottom of the page rather than showing on the top.

      Screenshot: https://imgur.com/a/N4MldrB

      This code worked. Thank you so much for the quick and perfect solution.

  • Adam
    • Support Gorilla

    Hi Yogen

    I'm glad that the solution works :slight_smile:

    As for icons. If that's about the site that you got hosted on our hosting and assigned to this ticket then yes, it seems that you have the Font Awesome fonts installed so that can be used to add icons. We'll use some CSS for this:

    .bbp-topic-edit-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}
    
.bbp-topic-close-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}
    
.bbp-topic-sticky-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}
    
.bbp-topic-super-sticky-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}
    
.bbp-topic-merge-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}
    
.bbp-topic-trash-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}
    
.bbp-topic-spam-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}
    
.bbp-topic-reply-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}

    Above is the CSS that you'd like to add to your site. You can add it e.g. via "Appearance -> Customize -> Additional CSS" or via some theme "custom css" option or to a child-theme style file if you are using a child theme.

    However, you'll want to adjust it a bit. I used just one random Font Awesome icon there, the same for each link so that's what you want to change.

    If you look into that CSS the class names should be pretty self-explanatory. For exmaple: ".bbp-topic-reply-link" class is a "Reply" link.

    You would want to select your icons first and to do this:

    – go to this page: https://fontawesome.com/icons?d=gallery&m=free (make sure that the "Free" option is selected, otherwise selected icons might not works).

    – look for the icons that you want to use

    – once you find an icon that you like, click on it and look for the "Unicode Value", see screenshot below:

    [attachments are only viewable by logged-in members]

    – you'll need this value noted down for each icon that you want to use.

    Then, let's say that you want to use icon with unicode value of "f100" for a reply link:

    – find this code in my CSS

    .bbp-topic-reply-link:before {
    
content: 'f2b9';

    replace f2b9 with f100 so the code becomes

    .bbp-topic-reply-link:before {
    
content: 'f100';

    I hope that makes sense. This would add those icons there. Please note: that backslash character there is not a mistake – it's necessary and it has to stay there :slight_smile:

    Best regards,

    Adam

  • Yogen
    • Flash Drive

    This code worked well except a few things:

    #1. As I see there is a code to show an icon for a topic close but I think there should also be a different icon for a topic open link.

    I tried adding

    .bbp-topic-open-link:before {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}

    but this didn’t work. Is it possible to add different icon to topic open admin link?

    #2.

    Also, few free font awesome icons are not showing up.

    f3e5 for reply

    f08d for sticky

    #3. I noticed the same code didn’t apply for the replies.

    Screenshot for three issues: https://imgur.com/a/W1NuXe0

  • Adam
    • Support Gorilla

    Hi Yogen

    This is something I’d need to check and at this stage I’d need to do this on a site where it’s applied – so your site. Would you mind granting me a support access to it so I could take a closer look?

    To do so, please go to the “WPMU DEV -> Support” page in your site’s back-end, click on “Grant support access” button there and then let me know here once it’s done.

    I’ll access the site and check it so we could solve the issue :slight_smile:

    Best regards,

    Adam

  • Adam
    • Support Gorilla

    Hi Yogen

    Thanks for granting access, I was able to check the site now.

    As for the same icon being used for “open/close” and “stick/unstick” – I’m afraid we can’t do much about it. The link is using exactly the same CSS class so there’s no way here to differentiate between whether it’s one or another via a CSS only. In this case we’ll need some additional JavaScript here so we could add/remove additional CSS class depending of the text of the link (open/close and stick/unstick).

    That’s getting a bit more complex so here’s what you need to do step by step.

    First you need to remove the part of the CSS for sticky link and for close link as it’s no longer necessary.

    Then you need to add JS to the site and that can be done via MU plugin:

    – create an empty file with PHP extension (e.g “my-bbp-admin-links-icons-change.php”:wink:

    – copy and paste following code into that file using some “clean text” editor such as e.g. Notepad++, Sublime or similar:

    <?php
    

    
function wpmu_bbpress_change_admin_links_icon_load() {
    
?>
    

    
<script type="text/javascript">
    
jQuery(document).ready(function(j) {
    

    
var sticky = j('.bbp-topic-sticky-link').text();
    
var close = j('.bbp-topic-close-link').text();
    

    
if ( sticky == 'Stick' ) {
    
j('.bbp-topic-sticky-link').removeClass('bbp-topic-sticky-link-unstick').addClass('bbp-topic-sticky-link-stick');
    
}
    
else {
    
j('.bbp-topic-sticky-link').removeClass('bbp-topic-sticky-link-stick').addClass('bbp-topic-sticky-link-unstick');
    
}
    

    
if ( sticky == 'Close' ) {
    
j('.bbp-topic-close-link').removeClass('bbp-topic-close-link-open').addClass('bbp-topic-close-link-close');
    
}
    
else {
    
j('.bbp-topic-close-link').removeClass('bbp-topic-close-link-close').addClass('bbp-topic-close-link-open');
    
}
    

    
});
    
</script>
    

    
<?php
    
}
    
add_action( 'wp_footer', 'wpmu_bbpress_change_admin_links_icon_load', 99 );

    – save the file and upload it to the server to the following folder of your WP install:

    /wp-content/mu-plugins

    Please note: if there’s no /mu-plugins right inside /wp-content, just create an empty one first; do NOT confuse mu-plugins folder with plugins folder.

    Once that’s done you will want to add CSS again. Following exact same principle as for other links previously, you will want to use following classes:

    .bbp-topic-sticky-link-stick:before – for “Stick” link icon

    .bbp-topic-sticky-link-unstick:before – for “unstick” link icon

    .bbp-topic-close-link-close:before – for “close” link icon

    .bbp-topic-close-link-open:before – for “open” link icon.

    I hope that make sense to you :slight_smile:

    As for the icons that do not display properly. I admit I’m not quite sure. The CSS is valid as the same CSS loads icons for other links. On the FontAwesome page these two icons are also indicated as exiting and available in free version of 5 release. I’m actually pretty confused with this to be honest. Do you think you could try replacing them with some other perhaps?

    Also, if you could just give a try to the open/close and stick/unstick solution above, I’d re-search this meanwhile to see what am I missing :slight_smile:

    Best regards,

    Adam

  • Yogen
    • Flash Drive

    Adding another icon actually works. I’ll replace it with the one it works. (Solved)

    As for open/close stick/unstick I will try implementing by following as you have directed. (checking)

    #3. I noticed the same CSS code didn’t apply for the replies made by users.

    Screenshot for three issues: https://imgur.com/a/W1NuXe0

    I hope you missed it. Can you please refer to No .3 marked in Image? Icons not displaying for replies by users.

    Screenshot link particularly for Icons not displaying for replies by users :

    https://imgur.com/a/UoGmKFv

  • Adam
    • Support Gorilla

    Hello Yogen

    You’re right, I missed that part, I’m sorry!

    Actually, I also missed the fact that there are two “types” of those links there – topic links and reply links. You’ll need to add up a bit to your CSS then.

    The rule would be exactly the same as with initial CSS for icons that I shared with you so you only need to add such CSS blocks for additional classes. Those would be:

    .bbp-reply-edit link
    
.bbp-reply-move-link
    
.bbp-topic-split-link
    
.bbp-reply-trash-link
    
.bbp-reply-spam-link
    
.bbp-reply-to-link

    For example: 

    .bbp-reply-to-link {
    
content: 'f2b9';
    
font-family: 'Font Awesome 5 Free';
    
padding-right:5px;
    
}

    That’s exactly the same principle as previously, just different classes :slight_smile:

    As for future assistance. I’m sorry I kept you waiting but I’d also appreciate some patience. We do our best to assist all Members as fast and good as we can but sometimes there’s a “spike” of questions/issues and there might be slight delays. I’d also strongly recommend not to “bump” tickets – post more than one post before staff responds – as it marks the thread as newer and we’re supposed to respond in order from oldest to newest in order to minimize waiting time. I hope that makes sense :slight_smile:

    Anyway, I think adding CSS for these additional classes should help so give it a try, please, and let me know.

    Have a nice day!

    Adam