Topic: Edit the bbPress login widget

Edit the bbPress login widget

@geekserve

Participant

9 years, 11 months ago

Hi guys,

the way bbPress outputs the login page bugs me, a lot. What I am trying to do is add a login box to my layout, when I did – I found it added a list and a horrible fieldset around the whole thing. This doesn’t work with my design at all.

So, on with my quest to change this, I found there is no template readily available to just change. Really? So, it seems all I can do is hack away at the core code, which will all be reverted once a new version comes around.

Does anyone have any suggestions for this?

Viewing 24 replies - 26 through 49 (of 49 total)

← 1 2

@robkk

Moderator

9 years, 10 months ago

@supremor

everyone is trying to help you out so any code, suggestions is for you and your issue.

to help with the button because it looks to close to the input box try this css code

.bbp-login-form .bbp-submit-wrapper {
margin-top: 10px;
}

@supremor

Participant

9 years, 10 months ago

I added the code to the style.css of the child theme and it didn’t work, the registration button is still too close to the email input box. And on FireFox the email text is to the left of the email input box instead of on top.

@supremor

Participant

9 years, 10 months ago

Sure thing. On Chrome, I need there to be space between the email input box and the registration box. On Firefox I want the email text to be on top of the email input box, not on the left. And also for there to be space between the email input box and registration box. All this on the registration page not log in.

@robkk

Moderator

9 years, 9 months ago

@supremor

sorry i almost forgot about this topic

i dont know why it would have issues with firefox/ie its some basic CSS that should work on all platforms.

maybe your theme doesnt have normalizer CSS?? thats all i can think of.

@geekserve

Participant

9 years, 8 months ago

yes there is its called form-user-login.php

using the bbp-login shortcode works as one would expect, editing the user-login form works also, as one would expect. However:

When the user is logged in, it constantly displays a “you are already logged in message”. The reason I want to edit the bbp login widget is because that handles whether or not the user is logged in flawlessly, it just looks plain awful.

So, if I can easily edit the form that is included within the widget, that would be much better

@robkk

Moderator

9 years, 8 months ago

@geekserve

what looks awful?? the you are already logged in status?? or how the login widget displays the avatar and profile links if you are logged on.

But to really customize how you want the bbPress login widget to be , the easiest thing to do is create a new widget and base most of the code off of the original bbpress login widget.

@matthias70

Participant

4 years, 11 months ago

I have a lot of space between the fields of the login widget. Does anyone know how to reduce it.

Thanks
Matthias

@robin-w

Moderator

4 years, 11 months ago

theme dependant – need a link to a live example

@matthias70

Participant

4 years, 11 months ago

Hi Robin,
here we go: https://gtauscht.de/forums/

Thanks
Matthias

PS: Thanks for your plugins and your engagement for bbpress!

@robin-w

Moderator

4 years, 11 months ago

Try adding this to the custom css of your theme

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select {
	margin-bottom: 0rem;
	padding: 0px;
}

@matthias70

Participant

4 years, 11 months ago

Hey Robin,
works fine 🙂
Thanks for your time!
Matthias

@robin-w

Moderator

4 years, 11 months ago

great – glad you are fixed

@matthias70

Participant

4 years, 10 months ago

Hi Robin,
I don’t know why, but I can not fix the css of the login widget.
Just need a white background and a litte padding, but all attempts with .bbp-form; .bbp-login-form or .sidebar-item fail…?
https://gtauscht.de/forums/

Do you have an idea?
Thanks
Matthias

@robin-w

Moderator

4 years, 10 months ago

should be

.bbp-login-form {
	background: white !important;
	padding: 10px !important;
}

@matthias70

Participant

4 years, 10 months ago

Oh no, I forgot the !important 😉
It’s working…
Thanks
Matthias

@robin-w

Moderator

4 years, 10 months ago

often the !important is not needed, it all depends on what order css is being loaded !

@matthias70

Participant

4 years, 10 months ago

<?php bbp_user_profile_link( bbp_get_current_user_id() ); ?>

How can I change the code above, to show only the name, without the link to bbpress profile?

Thanks
Matthias

@robin-w

Moderator

4 years, 10 months ago

untested, but try this

add_filter ('bbp_get_user_profile_link' , 'rew_get_user_name', 10 , 2) ;

function rew_get_user_name ($user_link, $user_id ) {
	// Validate user id
		$user_id = bbp_get_user_id( $user_id );
		if ( empty( $user_id ) ) {
			return false;
		}

		$user      = get_userdata( $user_id );
		$user_link = esc_html( $user->display_name ) ;

		// Filter & return
		return apply_filters( 'rew_get_user_name', $user_link, $user_id );
}

Put this in your child theme’s function file – or use

Code Snippets

@matthias70

Participant

4 years, 10 months ago

Hi Robin,
this code works fine, thanks. I put it in functions.php

After this I changed some code in bbpress/includes/common/widgets.php
The changes work fine, but it only works when I change the core file.

When I copy widgets.php into child theme it does not work.
Is there now way to put core code to child theme?

Thanks
Matthias

@robin-w

Moderator

4 years, 10 months ago

no, core code does not get changed in child themes

what did you change?

@matthias70

Participant

4 years, 10 months ago

I just added some needed extra links 🙂

`<div class=”bbp-logged-in”>
<a href=”<?php bbp_user_profile_url( bbp_get_current_user_id() ); ?>” class=”submit user-submit”><?php echo get_avatar( bbp_get_current_user_id(), ’40’ ); ?></a>
<h4><?php bbp_user_profile_link( bbp_get_current_user_id() ); ?><br />
<a href=”URL”>Dashboard</a><br />
<a href=”URL”>Dein Profil</a><br />
<a href=”URL”>Alle Einträge</a><br />
<a href=”URL”>Neuer Upload</a><br /><br />
</h4>
<?php bbp_logout_link(); ?>
</div>`

@robin-w

Moderator

4 years, 10 months ago

The best solution is to clone this widget and then amend.

so put this in your functions.php

It creates a duplicate login widget, but you’ll find it in dashboard>appearance>widgets called
(mat) login Widget. You can then add your code to this version

function register_mat_login_widget() {
    register_widget("MAT_Login_Widget");

}

add_action('widgets_init', 'register_mat_login_widget');

class MAT_Login_Widget extends WP_Widget {

	/**
	 * MAT Login Widget amended
	 *
	 */
	public function __construct() {
		$widget_ops = apply_filters( 'mat_login_widget_options', array(
			'classname'                   => 'mat_widget_login',
			'description'                 => esc_html__( 'A simple login form with optional links to sign-up and lost password pages.', 'bbpress' ),
			'customize_selective_refresh' => true
		) );

		parent::__construct( false, esc_html__( '(mat) Login Widget', 'bbpress' ), $widget_ops );
	}

	/**
	 * Register the widget
	 *
	 *
	 */
	public static function register_widget() {
		register_widget( 'MAT_Login_Widget' );
	}

	/**
	 * Displays the output, the login form
	 *
	 * 
	 * @param array $args Arguments
	 * @param array $instance Instance
	 */
	public function widget( $args = array(), $instance = array() ) {

		// Get widget settings
		$settings = $this->parse_settings( $instance );

		// Typical WordPress filter
		$settings['title'] = apply_filters( 'widget_title', $settings['title'], $instance, $this->id_base );

		// mat filters
		$settings['title']    = apply_filters( 'mat_login_widget_title',    $settings['title'],    $instance, $this->id_base );
		$settings['register'] = apply_filters( 'mat_login_widget_register', $settings['register'], $instance, $this->id_base );
		$settings['lostpass'] = apply_filters( 'mat_login_widget_lostpass', $settings['lostpass'], $instance, $this->id_base );

		echo $args['before_widget'];

		if ( ! empty( $settings['title'] ) ) {
			echo $args['before_title'] . $settings['title'] . $args['after_title'];
		}

		if ( ! is_user_logged_in() ) : ?>

			<form method="post" action="<?php bbp_wp_login_action( array( 'context' => 'login_post' ) ); ?>" class="bbp-login-form">
				<fieldset class="bbp-form">
					<legend><?php esc_html_e( 'Log In', 'bbpress' ); ?></legend>

					<div class="bbp-username">
						<label for="user_login"><?php esc_html_e( 'Username', 'bbpress' ); ?>: </label>
						<input type="text" name="log" value="<?php bbp_sanitize_val( 'user_login', 'text' ); ?>" size="20" maxlength="100" id="user_login" autocomplete="off" />
					</div>

					<div class="bbp-password">
						<label for="user_pass"><?php esc_html_e( 'Password', 'bbpress' ); ?>: </label>
						<input type="password" name="pwd" value="<?php bbp_sanitize_val( 'user_pass', 'password' ); ?>" size="20" id="user_pass" autocomplete="off" />
					</div>

					<div class="bbp-remember-me">
						<input type="checkbox" name="rememberme" value="forever" <?php checked( bbp_get_sanitize_val( 'rememberme', 'checkbox' ) ); ?> id="rememberme" />
						<label for="rememberme"><?php esc_html_e( 'Keep me signed in', 'bbpress' ); ?></label>
					</div>

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

					<div class="bbp-submit-wrapper">

						<button type="submit" name="user-submit" id="user-submit" class="button submit user-submit"><?php esc_html_e( 'Log In', 'bbpress' ); ?></button>

						<?php bbp_user_login_fields(); ?>

					</div>

					<?php if ( ! empty( $settings['register'] ) || ! empty( $settings['lostpass'] ) ) : ?>

						<div class="bbp-login-links">

							<?php if ( ! empty( $settings['register'] ) ) : ?>

								<a href="<?php echo esc_url( $settings['register'] ); ?>" title="<?php esc_attr_e( 'Register', 'bbpress' ); ?>" class="bbp-register-link"><?php esc_html_e( 'Register', 'bbpress' ); ?></a>

							<?php endif; ?>

							<?php if ( ! empty( $settings['lostpass'] ) ) : ?>

								<a href="<?php echo esc_url( $settings['lostpass'] ); ?>" title="<?php esc_attr_e( 'Lost Password', 'bbpress' ); ?>" class="bbp-lostpass-link"><?php esc_html_e( 'Lost Password', 'bbpress' ); ?></a>

							<?php endif; ?>

						</div>

					<?php endif; ?>

				</fieldset>
			</form>

		<?php else : ?>

			<div class="bbp-logged-in">
				<a href="<?php bbp_user_profile_url( bbp_get_current_user_id() ); ?>" class="submit user-submit"><?php echo get_avatar( bbp_get_current_user_id(), '40' ); ?></a>
				<h4><?php bbp_user_profile_link( bbp_get_current_user_id() ); ?></h4>

				<?php bbp_logout_link(); ?>
			</div>

		<?php endif;

		echo $args['after_widget'];
	}

	/**
	 * Update the login widget options
	 *
	 * 
	 * @param array $new_instance The new instance options
	 * @param array $old_instance The old instance options
	 */
	public function update( $new_instance, $old_instance ) {
		$instance             = $old_instance;
		$instance['title']    = strip_tags( $new_instance['title'] );
		$instance['register'] = esc_url_raw( $new_instance['register'] );
		$instance['lostpass'] = esc_url_raw( $new_instance['lostpass'] );

		return $instance;
	}

	/**
	 * Output the login widget options form
	 *
	 * 
	 * @param $instance Instance
	 */
	public function form( $instance = array() ) {

		// Get widget settings
		$settings = $this->parse_settings( $instance ); ?>

		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php esc_html_e( 'Title:', 'bbpress' ); ?>
			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $settings['title'] ); ?>" /></label>
		</p>

		<p>
			<label for="<?php echo $this->get_field_id( 'register' ); ?>"><?php esc_html_e( 'Register URI:', 'bbpress' ); ?>
			<input class="widefat" id="<?php echo $this->get_field_id( 'register' ); ?>" name="<?php echo $this->get_field_name( 'register' ); ?>" type="text" value="<?php echo esc_url( $settings['register'] ); ?>" /></label>
		</p>

		<p>
			<label for="<?php echo $this->get_field_id( 'lostpass' ); ?>"><?php esc_html_e( 'Lost Password URI:', 'bbpress' ); ?>
			<input class="widefat" id="<?php echo $this->get_field_id( 'lostpass' ); ?>" name="<?php echo $this->get_field_name( 'lostpass' ); ?>" type="text" value="<?php echo esc_url( $settings['lostpass'] ); ?>" /></label>
		</p>

		<?php
	}

	/**
	 * Merge the widget settings into defaults array.
	 *
	 * @since 2.3.0 bbPress (r4802)
	 *
	 * @param $instance Instance
	 */
	public function parse_settings( $instance = array() ) {
		return bbp_parse_args( $instance, array(
			'title'    => '',
			'register' => '',
			'lostpass' => ''
		), 'login_widget_settings' );
	}
}

@matthias70

Participant

4 years, 10 months ago

Hi Robin,
this is awesome.
I just tested it and it works like a charm.
Thanks you
Matthias

@robin-w

Moderator

4 years, 10 months ago

Great – glad you are fixed

Viewing 24 replies - 26 through 49 (of 49 total)

← 1 2

You must be logged in to reply to this topic.

bbPress.org

Edit the bbPress login widget

Topic Info

Topic Tags

bbPress.org

Edit the bbPress login widget

Topic Info

Topic Tags

Reply Search