[BbPress] How to set up a link button to move to the profile page of the user who is currently logged in to any location

[BbPress] How to set up a link button to move to the profile page of the user who is currently logged in to any location

Thank you for visiting. This page is an English translation of the Japanese site [Knowledge Base] using Google Translate. Please understand that there are some points that are difficult to read, such as sentences and expressions.

“BbPress” is famous as a WordPress bulletin board creation plugin. One of the attractions is that the user can edit the profile from the front end (viewing screen side) without going to the management screen side, not just the bulletin board function.

However, I feel a little inconvenient in terms of operation when I want to edit my profile.

  1. Click the user link in the topic to display the profile screen
  2. If you are yourself, the “Edit” link will be displayed in the menu on the left, so click it
  3. Edit your profile

It will be like this. If you’re not very active and want to edit your profile, it’s hard to find the one with your link! It is like that.

In this customization, we will make it easier to edit by allowing you to open your own profile directly as shown in the video below.

… In conclusion, is this a simple code? However, it seems that there are some people who are having trouble with this, so I will publish it as a reference article.

In this customization
・Add code to the theme’s functions.php
・Add theme Add code to CSS
Is required. To prevent troubles, please do not do it if you have never done it before or if you are inexperienced.

Add code to functions.php for the theme you have enabled

Add the following code to the end of your theme’s functions.php

/***** bbp profile lik button function *****/
function ha_bbp_profile_link() {
$this_user = wp_get_current_user();
$user_url=bbp_get_user_profile_url($this_user->ID);

echo '<div class="bbp-plink-button"><a href="' .$user_url. '">Edit Your profile</a></div>';
}
add_shortcode('ha-profilelink', 'ha_bbp_profile_link');

Add theme Add code to CSS

Please add the following code to “Additional CSS” of the theme customizer, or add it to the style.css of the child theme.

/*****bbPress profile link button design *****/
/* Allow only logged-in users to click */
.bbp-plink-button{
pointer-events: none;
}

.logged-in .bbp-plink-button{
pointer-events: auto;
}

/* Button appearance */

.bbp-plink-button {
    border: 1px solid #000;
    text-align: center;
    padding: 8px;
    background: #eee;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2em;

}

/* At the time of personal computer */
@media only screen and (min-width: 768px) {
.bbp-plink-button {
	max-width:340px;
}
}

/* On mobile */
@media only screen and (max-width: 767px) {
.bbp-plink-button {
	width:100%;	
}
}


.bbp-plink-button a{
text-decoration:none;
}

.bbp-plink-button:hover {
    background: #000;
    color: #fff;
}

.bbp-plink-button a:hover {
    color: #fff;
}

Since the CSS loading order differs depending on the theme, it is ideal to add to the “additional CSS” that is usually applied last in any theme.

How to display the button

At this point, you are ready to display the button. After that, add a “custom HTML” widget to the sidebar widget etc.

[ha-profilelink]

If you enter the short code, the button will be displayed.

Also, if you want to insert it directly into the theme template, convert it to PHP.

<?php echo do_shortcode( '[ha-profilelink]' ) ?>

It works if you insert.

At the time of installation, the bbPress template has a slightly complicated structure that is displayed through the template in the plugin folder and through the fixed page template of the theme. If you do not know how to customize the template, it is safer to install it by inserting it into the widget.

When you want to set a button on the global menu

In this customization, it is a specification to display a link to the profile page to any place with a short code.

And you can’t add a shortcode as a menu to the WordPress global menu under normal conditions.

However, I think that there are many hopes for a global menu as a scene to display this button, so in such a case it is better to use a plug-in called “Shortcode in Menus“.

[Global Menu] is a menu created by opening “Appearance”-> “Menu” from the WordPress administration screen. Depending on the theme, global menus are usually displayed under the site title or in the footer.

If you add it to the global menu, it may be displayed unpleasantly due to the influence of CSS introduced in the middle of the page, so please edit it as appropriate.

If you want to separate the buttons for 〇〇

So far, I’ve introduced how to make two types of buttons, thinking that you may want to have “normal buttons on the sidebar” and “display that blends into the global menu on the global menu” ( The first is the same method introduced so far)

Modify and add the contents of functions.php mentioned above. The following parts are to be changed

/***** bbp profile lik button function *****/
function user_function_name() {
$this_user = wp_get_current_user();
$user_url=bbp_get_user_profile_url($this_user->ID);

echo '<div class="bbp-plink-button"><a href="' .$user_url. '">Edit Your profile</a></div>';
}
add_shortcode('short-code-slug', 'user_function_name');

The above “user-defined function name” originally contained “ha_bbp_profile_link”, but since you cannot use more than one, change it to an arbitrary character string (only half-width alphanumeric characters and underscores can be used). (Please note that there are two places)

At the same time, “ha-profile link” (enclosed in [] in the shortcode) is already used, so change it to another string.

further

<div class="bbp-plink-button">

If you change the “bbp-plink-button” of “bbp-plink-button” to an arbitrary character string, the design added in the first will not be applied.

<div class="bbp-plink-button">

and

</div>

If you remove, only a simple link string will be output.

All you have to do is write another design element or adjust it. You can create as many patterns as you like in this way.


This customization is based on the sample code posted on the official codec of bbPress so that it can be inserted anywhere as a short code.

Post Author: