This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tagged: 

bbPress user menu and login used for support site

  • Creator
    Topic
  • #22450
    mizzinc
    Participant

    Hey Jason,

    I have installed Demo 1. In regards to bbPress is there a default User Menu / Sign In added to the top header. Similar to whats displayed here on the support website.

    Cheers,

Viewing 12 replies - 1 through 12 (of 12 total)
  • Author
    Replies
  • #22451
    Joseph Sellers
    Participant

    Hi @mizzinc,

    Ha! I just emailed Jason about this the other day. He hasn’t replied yet but I am pretty sure that the User Menu is a bit of custom code. I would really appreciate it if Jason would Open Source it via Github or something.

    #22457
    mizzinc
    Participant

    @themeblvd Was asking about the login menu you have used here on your support site.

    #22458
    Jason Bobich
    Keymaster

    Hi guys,

    In regards to bbPress is there a default User Menu / Sign In added to the top header. Similar to whats displayed here on the support website.

    No, this is something built custom for the support site. Here’s how I set it up:

    <?php if ( function_exists('is_bbpress') && is_user_logged_in() ) : ?>
    
    	<?php get_template_part('parts/menu-user'); ?>
    
    <?php else : ?>
    
    	<span class="login">
    		<a href="#" data-toggle="modal" data-target="#login-popup"><i class="fa fa-sign-in"></i> Sign In</a> or <a href="<?php echo esc_url( $register_url ); ?>"><i class="fa fa-user-plus"></i> Register</a>
    	</span>
    
    	<div id="login-popup" class="modal fade">
    		<div class="modal-dialog modal-sm">
    			<div class="modal-content">
    				<div class="modal-header">
    					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    					<h4 class="modal-title">Sign In</h4>
    				</div>
    				<div class="modal-body">
    					<?php get_template_part( 'parts/login' ); ?>
    				</div>
    			</div><!-- .modal-content (end) -->
    		</div><!-- .modal-dialog (end) -->
    	</div><!-- #login-popup (end) -->
    
    <?php endif; ?>

    Note: Because of the awesomeness of Bootstrap, the login inside the popup is already taken care of, using Bootstrap’s popover feature.

    And then my /parts/menu-user.php you see included above if the user is logged in looks like this:

    <?php
    // URLs
    $private_info_url = get_permalink( themeblvd_post_id_by_name( tb_support_get_option('private_info'), 'page' ) );
    
    // User
    $user = get_userdata( get_current_user_id() );
    $user_config = themeblvd_get_user_config();
    ?>
    <div class="user-menu">
    	<ul class="list-unstyled">
    		<li>
    			<div class="profile-drowdown">
    				<a href="<?php echo esc_url( bbp_get_user_profile_url($user->ID) ); ?>" title="<?php echo esc_attr($user->display_name); ?>" class="dropdown-toggle">
    					<?php echo get_avatar($user->ID, 40); ?>
    					<?php echo esc_html($user->display_name); ?>
    					<i class="fa fa-chevron-down"></i>
    				</a>
    				<ul class="list-unstyled">
    					<li><a href="<?php echo esc_url( add_query_arg('tb-support', 'purchases', bbp_get_user_profile_url($user->ID)) ); ?>" title="Purchases">Purchases</a></li>
    					<?php if ( ! empty( $user_config['wpjumpstart']['purchases'] ) ) : ?>
    						<li><a href="<?php echo esc_url( add_query_arg('tb-support', 'downloads', bbp_get_user_profile_url($user->ID)) ); ?>" title="Downloads">Downloads</a></li>
    					<?php endif; ?>
    					<li><a href="<?php echo esc_url( bbp_get_user_profile_edit_url($user->ID) ); ?>" title="Account Settings">Account Settings</a></li>
    					<li><a href="<?php echo esc_url($private_info_url); ?>" title="Submit Private Info">Submit Private Info</a></li>
    					<li class="divider"></li>
    					<li><a href="<?php echo esc_url( bbp_get_user_profile_url($user->ID) ); ?>" title="<?php echo esc_attr($user->display_name); ?>">Profile</a></li>
    					<li><a href="<?php echo esc_url( bbp_get_user_topics_created_url($user->ID) ); ?>" title="Topics Created">Topics Created</a></li>
    					<li><a href="<?php echo esc_url( bbp_get_user_replies_created_url($user->ID) ); ?>" title="Replies Created">Replies Created</a></li>
    					<li><a href="<?php echo esc_url( bbp_get_subscriptions_permalink($user->ID) ); ?>" title="Subscriptions">Subscriptions</a></li>
    					<li class="divider"></li>
    					<li><a href="<?php echo wp_logout_url(); ?>" title="Sign Out">Sign Out</a></li>
    				</ul>
    			</div>
    		</li>
    	</ul>
    </div>

    And here’s my /parts/login.php, which is what’s included in the original snippet, within the popup:

    <form method="post" action="<?php bbp_wp_login_action( array( 'context' => 'login_post' ) ); ?>" class="bbp-login-form">
    	<fieldset class="bbp-form">
    
    		<div class="bbp-username">
    			<label for="user_login"><?php _e( 'Username', 'bbpress' ); ?>: </label>
    			<input class="form-control" type="text" placeholder="<?php if ( ! wp_is_mobile() ) : ?>Username<? endif; ?>" name="log" value="<?php bbp_sanitize_val( 'user_login', 'text' ); ?>" size="20" id="user_login" tabindex="<?php bbp_tab_index(); ?>" />
    		</div>
    
    		<div class="bbp-password">
    			<label for="user_pass"><?php _e( 'Password', 'bbpress' ); ?>: </label>
    			<input class="form-control" type="password" placeholder="<?php if ( ! wp_is_mobile() ) : ?>Password<? endif; ?>" name="pwd" value="<?php bbp_sanitize_val( 'user_pass', 'password' ); ?>" size="20" id="user_pass" tabindex="<?php bbp_tab_index(); ?>" />
    		</div>
    
    		<div class="bbp-submit-wrapper">
    			<input type="submit" name="user-submit" value="Sign In" tabindex="<?php bbp_tab_index(); ?>" class="user-submit btn btn-primary" />
    			<p class="hidden-md hidden-lg">Need an account? <a href="<?php echo esc_url( get_permalink( themeblvd_post_id_by_name( tb_support_get_option('register'), 'page' ) ) ); ?>" title="Register">Register Now</a></p>
    			<?php bbp_user_login_fields(); ?>
    		</div>
    	</fieldset>
    </form>
    • This reply was modified 5 years, 11 months ago by Jason Bobich. Reason: Added note about login popup
    • This reply was modified 5 years, 11 months ago by Jason Bobich. Reason: Added code for included login form in /parts/login.php
    #22459
    Jason Bobich
    Keymaster

    @mizzinc Ha yeah I realized that after I re-read. Busy on a brand new theme and working through some challenging issues. So my brain is a bit frazzled.

    @rokesmith Emailing me is like throwing a rock into a dark well. Needless to say I never got it, and don’t generally do much through email these days. If you have any questions, even if it’s about how I did something with Jump Start here on the support site — I maybe can’t guarantee I’ll code it for you or anything, but still feel free to post here and ask.

    To both of you: Hopefully the above code snippets help. It’s got some code in there that’s not relevant to you guys, but should all be still pretty clear. In the future I’d like to do a tutorial about creating a child theme that’s a starting point of how I made this support site.

    Basically I set it up so the header and footer of Jump Start are completely empty (by unhooking all default functions), and I make files /parts/header.php and /parts/footer.php that are hooked into place to take up the entire header/footer… then just manage those files all with basic HTML/PHP. This allows me to have the basic structure header and footer code in my child theme, excluding the outer framework stuff like main wrapper, <html>, <head>, etc.

    #22460
    mizzinc
    Participant

    Thank you

    #22463
    Jason Bobich
    Keymaster

    It’s also probably worth mentioning that I did add styling for default bbPress login/user menu widget in Jump Start.

    #22464
    mizzinc
    Participant

    Fantastic, will make for an easy implementation.

    #22469
    Joseph Sellers
    Participant

    Hi @themeblvd,

    Thank you so much for making this available!

    I have been tinkering with it today and I feel I am nearly there. I have it up and running on a test site which is cool. The thing I haven’t been able to get working is the mobile menu. It almost looks like you are outputting that separately and just exchanging it for for something entirely different at 991px. Is that right?

    Best,

    Joseph

    #22473
    Jason Bobich
    Keymaster

    The mobile login/user menu is a completely separate item, same with normal mobile nav.

    The two panels are positioned fixed and off the screen with CSS to the right and left. Then I use JavaScript to add a body class when either trigger is clicked by mobile user. The body classes added are then styled from CSS file to shift the #wrapper and panel accordingly to one side or the other. The animation is CSS transitions.

    The triggers (buttons to show mobile navs) only show to the user (utilizing CSS media queries) when the viewport is less than 992px.

    Then there is JavaScript in place that checks when the user is resizing the window and removes and body classes for open panels of the viewport is resized to 992+ — just mainly for people screwing around with responsiveness in their desktop browsers.

    #22474
    Jason Bobich
    Keymaster

    The secret with the standard mobile nav in Jump Start is that it is a completely separate menu… But it’s built with JavaScript when the page loads using jquery to clone other elements on the page. This way for SEO you don’t have two outputs of your menu in your markup.

    On this support site, I don’t really care about that, so I just output the separate menu/login through PHP hooks.

    #22483
    Joseph Sellers
    Participant

    Hi @themeblvd,

    It has taken me far more time that it should have but i finally have something I am happy with.

    I gave up on having the separate menu for mobiles. It isn’t as elegant on a mobile but it seems to work fine.

    I ended up plugging into Bootstrap for styling using a dropdown button and, mostly, the default styling (yay Bootstrap!). So, by slightly modifying the code you shared and a few lines of CSS tweaks I think it looks pretty good.

    Here is how it looks now: https://cloudup.com/cNOZy1Qv_Z5

    Thanks so much!

    #22494
    Jason Bobich
    Keymaster

    Yeah, it looks very clean with the Bootstrap dropdown. And believe me when I tell you that it took me much longer than 24 hours to figure out and accomplish all the stuff I explained above! So don’t worry.

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.