Adding a div above buddypress group page

Hello friends! I am wanting to learn how to add divs to buddypress pages. As an example could you please help me add the following div above my groups page:
<div class="group-instructions">Please do not join more than one group :)</div> I want this to be on top of my groups page. Kindly assist with best way to do this.

  • Rupok

    Hi Schmirts,

    The best way will be overriding BuddyPress template by making your theme compatible with BuddyPress. To do that, please go to "/wp-content/plugins/buddypress/bp-templates/" directory and there you will find a "buddypress" folder. Copy that whole folder and paste that inside "/wp-content/themes/your_current_theme_directory/".

    Now go to "/wp-content/themes/your_current_theme_directory/buddypress/groups/single/" directory and open "home.php" file. In "home.php" file, look for the following line:
    <div id="item-header" role="complementary">
    Above that line, enter your custom code:
    <div class="group-instructions">Please do not join more than one group :)</div>
    Save the file and you are good to go. From now on, all your group single page will show this message at the top.

    But if you want to show this message in your groups listing page, then please go to "/wp-content/themes/your_current_theme_directory/buddypress/groups/" directory an open "index.php" file. Now find the following line:
    <form action="" method="post" id="groups-directory-form" class="dir-form">
    Add your custom code above it:
    <div class="group-instructions">Please do not join more than one group :)</div>
    Save the file and from now your group listing page will show this message.

    If you want to know more about BuddyPress theme compatibility, you can check this official guide: https://codex.buddypress.org/themes/theme-compatibility-1-7/a-quick-look-at-1-7-theme-compatibility/

    Please let us know if you have any confusion or if you are stuck at any point. We will be glad to help further.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Schmirts,

    I think, there might be a little misunderstanding. I didn't mention about "bp-groups" folder. Let me describe it again, step by step. I believe, that will be easier for you to follow:

    # Please go to "/wp-content/plugins/buddypress/bp-templates/" directory.
    # There you will find a "buddypress" folder. Copy that whole folder.
    # Paste that inside "/wp-content/themes/tesseract/" folder.

    # Now go to "/wp-content/themes/tesseract/buddypress/groups/single/" directory [not "bp-groups" folder].
    # There you will see the "home.php" file.

    # Now go to "/wp-content/themes/tesseract/buddypress/groups//" directory [not "bp-groups" folder]
    # There you will see the "index.php" file.

    Please check the attached screenshot for reference.

    I believe, now you can find those files.

    If you still have any confusion, please let us know. We will be glad to assist further.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Schmirts,

    Emoticons are not disappearing on my test site. Please check the attached screenshot for reference.

    So there is no issue regarding coding I believe and I think this is your browser specific issue. Can you please try clearing cache and cookies from your browser and check if the emoticon appears normally? If not, can you please try from another browser?

    If it's showing a small vague box after checking with all these, can you please provide the URL of any of your Group pages so we can see the issue live and inspect that element?

    I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.