The positioning should be do-able using CSS but it’s hard to advise without access to the page to see what CSS classes etc are on those elements.
For the login form area you want something like…
.login-form {
width: 70%;
float: left;
display: inline;
}
and for the search area…
.theclassname {
width: 27%;
float: right;
display: inline;
}
But you may also want to look in to using media queries so that this CSS is only used when the browser window is big (on a pc) so that when people access the site on a smaller browser window (on a mobile or tablet etc) those areas aren’t all crammed in together.
Re: defining different class names – I think we’d need to see your site/code to make sense of that, I just had a quick look at the buddypres template for the registration page and can’t see any classes of .login-form there so it may depend on your theme.
Hope that’s of some help 🙂
How can I position the login form to the same line as the search ?
This would look terribly squashed in mobile layouts though. I think the way you have it now is fine.
Lastly, how can I define a different .class-name to both the login form and registration form ? Because I noticed that both login form and registration form use .login-form, which made it impossible to style individually.
Also the lost password form too, and yes this is annoying for styling. i think it was there to minimize the lines of CSS.
You can copy the bbPress templates for each authentication form into your child theme and edit them to change the classes.
@PinkishHue My bad. Was suppose to be .bbp-login-form.
@Robkk I’m not overly worried about the mobile layout because as pointed out by PinkishHue, I’ll be using media queries later.
Though thank you for reminding me about the form templates. I’ve copied them over, just in case I might need them.
Coming back to the topic of the login form position..
I’ve looked inside the loop-forums.php template, then found this <?php do_action( 'bbp_template_before_forums_loop' ); ?> being executed. Which template file is bbp_template_before_forums_loop pulling from ?
Because this is also loading the Search form, I’d like to load the login form too. Rather than use the shortcode [bbp-login] above my [bbp-forum-index].
What I’d like to achieve is a header with the login form and search form on the same line before listing the forums.
Thank you in advance for the help so far.
I’ve looked inside the loop-forums.php template, then found this <?php do_action( ‘bbp_template_before_forums_loop’ ); ?> being executed. Which template file is bbp_template_before_forums_loop pulling from ?
Sorry for the late reply, but that is a hook. If you want the login form only above the forum index just echo the shortcode like so above or below that hook.
<?php echo do_shortcode("[shortcode]"); ?>
or if you are pretty good with PHP just use the hook.
If you want the login form above all bbPress pages, you might have to consider echoing the shortcode in a bbpress.php file.
Getting Started in Modifying the Main bbPress Template
@dannyfoo I came across your screenshot above. I would be very interested to know how you managed to load the login form at the top of the page? I am not looking for the login to be on the same line as the search box. I would just like to know how to position the Login, Register and Lost password buttons at the top of the forum index page (and possible all the bbpress pages).
Many thanks.
@mica123 Placing the login form above on the main Forums page created in your WordPress is easy.
- Edit your WP page containing [bbp-forum-index]
- Include [bbp-login] above that line
- Update the page
And the login form will show above your forum index.
I’ve not fully experimented placing the login above all the forum pages. Though I think it’s very much possible, and the answer may lie in other forum topics.
What I could share though is I tried adding <?php echo do_shortcode("[bbp-login]"); ?> to loop-forums.php and loop-topics.php but it didn’t work.
What happened was the list of forums and topics disappeared.
I hope this was helpful.
Place something like this in content-forum-archive.php if you copied it into your child theme to display the login form above the forum archive. You can also place it above single forums by adding this exact code into content-single-forum.php and for topics in content-single-topic.php.
<?php if ( !is_user_logged_in() ) : ?>
<div class="bbp-forum-login-form">
<?php echo do_shortcode("[bbp-login]"); ?>
</div>
<?php endif; ?>
Thank you so much both of you – that’s very helpful indeed. I will now have to try and position it on one line. I hope I’ll manage it although it is not easy at all – @dannyfoo you seem to have managed it. Is there any way to add Register and Lost password to the code? Many thanks – I was getting really desperate.
Right after this in the code.
<?php echo do_shortcode("[bbp-login]"); ?>
Just add any additional forms you want using similar code like this. Or just add any html links to the pages.
<?php echo do_shortcode("[bbp-register]"); ?>
If you need to style them better add a custom class around them.
Thanks very much – this will help me to make some progress indeed.
