[bradkerinParticipant]

Hi there,

I would like to add a “login” button to my header, to the right of the current header menu items. I have read other topics, but none that I can see are quite right for what I’m trying to do.

Any thoughts? webpage here – http://101.0.105.90/~carbonmarketinst/

Thanks for your help! You guys are awesome!

Thanks,

Brad

[ChristopherModerator]

Hi there,

Copy _nav-primary.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

?>

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
   <li class="x-menu-item login-button"><?php wp_loginout(); ?></li>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

Hope it helps.

[bradkerinParticipant]

Nope sorry that completely broke my header – http://101.0.105.90/~carbonmarketinst/wp-content/uploads/2015/11/Capture.png

I want to keep my header the way it is, but add a button on the right hand side like this (please excuse the terrible drawing skills) – http://101.0.105.90/~carbonmarketinst/wp-content/uploads/2015/11/Capture2.png

Any ideas?

Thanks!

[ChristopherModerator]

Hi there,

I tried the code on my installation and it worked fine.
Let’s try this.

Add a custom link to header and link it to login page, to style this menu item add a custom class name to this menu item like navbar-btn, then we’ll help you to style it with CSS.

Hope it helps.

[LelyModerator]

Hello There,

Please add the following code in your child theme’s functions.php file instead:

  function x_navbar_login_nav_item( $items, $args ) {

      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-custom-login">';
		if ( is_user_logged_in() ) {
		 $items .=  '<a href="'.wp_logout_url( get_permalink() ).'" title="Logout">Log out of my site</a>';
	} else {
		 $items .=  '<a href="'.wp_login_url( get_permalink() ).'" title="Login">Log in to my site</a>';
}
$items .= '</li>';
     	 }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_login_nav_item', 9999, 2 );

Feel free to customize the link title.
Hope this helps.

[bradkerinParticipant]

Thanks for all your help guys – It’s not quite right….I think maybe I didn’t explain myself?

So the button needs to be an orange rectangle button with the text “login” in it. It will have a simple link to a password protected subdomain page that members will use to log into.

So the button needs to look like an actual button rather than just another menu item.

Is it possible to just add a button shortcode or something into the PHP file – like these X-theme buttons? – http://theme.co/x/demo/integrity/1/shortcodes/buttons/

Really appreciate all your help and apologies for the confusion!

[LelyModerator]

Hello There,

We can use a button like below:

  function x_navbar_login_nav_item( $items, $args ) {

      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-custom-login">';
		if ( is_user_logged_in() ) {
		 		 $items .=  do_shortcode( '[button type="real" shape="rounded" size="mini" href="'.wp_logout_url( get_permalink() ).'" title="Example"]Logout[/button]');

	} else {
		 $items .=  do_shortcode( '[button type="real" shape="rounded" size="mini" href="'.wp_login_url( get_permalink() ).'" title="Example"]Login[/button]');		 

}
$items .= '</li>';
     	 }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_login_nav_item', 9999, 2 );

Then feel free to adjust button properties.

Hope this helps.

[bradkerinParticipant]

Ok thanks for that everyone – really helpful!

I still have an issue though…The button is taking up the full height of the header, rather than being a longer pill shaped button. Additionally, I need it over at the right edge of the screen, rather than bound right next to the other text – http://carbonmarketinstitute.org/

I need it to look like this… – http://members.carbonmarketinstitute.org/wp-content/uploads/2015/11/zxcv.png (please excuse the terrible drawing…

Thanks for bearing with me! You guys are awesome!

[Paul RModerator]

Hi,

Kindly add the code back, we can then provide you with some css code to make it look the way you want.

Thanks

[bradkerinParticipant]

The code is already in there? Not sure what else you want me to do….

http://carbonmarketinstitute.org/

[Paul RModerator]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[bradkerinParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

I would like to check but the login you provided is not working.

Can you please check again and let us know the correct login.

With regards to ftp credentials, yes you can provide us with your cpanel login instead.

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[bradkerinParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

To fix your login button in the navbar, please add the following css code in the customizer, Appearance > Customize > Custom > CSS or insert this code in your child theme’s style.css

.site .x-navbar .desktop .x-nav > li.x-menu-item-custom-login > a {
    height: auto !important;
    padding: 10px 15px !important;
    margin-top: 25px;
    margin-left: 10px;
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts