[SmarticleParticipant]

Hi there,

I’m currently building a members website and would like to be able to have a members login section in the top right corner in the navigation bar. Ideally it would be great if it had the standard features of login/login but also a drop down menu that could link to areas such as account and profile etc.. Can this be done somewhat manually using word press menus for example or do third party plugins need to be installed to achieve what I want?

A good example of what I want is Amazon. Most have an Amazon account so are probably familiar with how that functions. That is what I am after but not as in depth. My navigation bar will probably have 3 or 4 main page links and the the desired account login/logout section with the drop down menu for a few pages unique to that persons account.

To set up the membership site I’m currently using wpmu’s third party membership plugin so I’m obviously aware there may only be so much that can be done on the standard wordpress side of things. Any help on getting this set up is greatly appreciated.

Thanks

[Rue NelModerator]

Hello There,

Thanks for posting in!

What you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

By adding a filter to the menu items, you can have a menu item and it’s sub menu items easily just like the example you gave. We are not totally sure of what other page likes you might add. We must tell you in advance that heavy modifications and template customizations falls beyond the scope of our support. All we can do is give you an example of how to do it and you can continue from there. Please consider the example code below:

// Add Login/Logout Link in the menu navigation
// =============================================================================
if ( ! function_exists( 'add_login_logout_navbar_menu' ) ) :
  function add_login_logout_navbar_menu( $items, $args ) {
    if ( ! is_user_logged_in() ) {
      $submenu_items .= '<li class="menu-item menu-item-my-account-navigation"><a href="' . wp_login_url() . '"><i class="x-icon x-icon-sign-in"></i> <span>' . __( 'Log in', '__x__' ) . '</span></a></li>';
      
      //$submenu_items .= 'You can add more here';

    } else {
      $submenu_items .= '<li class="menu-item menu-item-my-account-navigation"><a href="' . get_edit_user_link() . '" class="cf"><i class="x-icon x-icon-cog"></i> <span>' . __( 'My Account', '__x__' ) . '</span></a></li>';
      $submenu_items .= '<li class="menu-item menu-item-my-account-navigation"><a href="' . wp_logout_url() . '"><i class="x-icon x-icon-sign-out"></i> <span>' . __( 'Log Out', '__x__' ) . '</span></a></li>';

      //$submenu_items .= 'You can add more here';

    }

    if ( $args->theme_location == 'primary' ) {
      $items .= '<li class="menu-item current-menu-parent menu-item-has-children x-menu-item x-menu-item-my-account">'
                  . '<a href="#" class="x-btn-navbar-my-account">'
                    . '<span><i class="x-icon x-icon-user"></i><span> ' . __( 'My Account', '__x__' ) . '</span></span>'
                  . '</a>'
                  . '<ul class="sub-menu">'
                    . $submenu_items
                  . '</ul>'
                . '</li>';
    }

    return $items;
  }
  add_filter( 'wp_nav_menu_items', 'add_login_logout_navbar_menu', 9996, 2 );
endif;

The result of the code above look like this: http://prntscr.com/6jbyd0

Please let us know if this has been helpful to you.

Thank you.

[SmarticleParticipant]

That’s what I want thanks, I will try this out and let you know. Thanks for the reply

[Rue NelModerator]

You are most welcome!

We’re happy we are able to help you.

[SmarticleParticipant]

Hi there, I forgot to add that I am currently using the X theme with the child renew. Is is possible to do what you advised above with this child theme or do others allow for better customization?

[Rue NelModerator]

Hello,

As long as you are using a child theme, it will work and is safe from risk of losing the changes when you update X Theme.

Cheers,
X

[SmarticleParticipant]

I got that working thanks, works very nicely.

At the moment, when clicking on account it redirects my to my wordpress profile. If it was a user clicking on the account link, would it redirect them to their accounts page or do I need to edit these links manually to redirect the user to certain pages. If so how would I do that and also if I wanted more pages added to that menu?

Thanks alot. Been a big help

[Rue NelModerator]

Hello There,

This is the code href="' . get_edit_user_link() . '" for the user account link. When they click on this they will be redirected to their profile page. You do not need to edit this unless you want them somewhere in your site like a dedicated page for them. You can also add more links to it which we already provided in the code.

Hope this helps.

[SmarticleParticipant]

That’s great, I’ve been able to edit that for what I want. I do have another couple of questions regarding the configuration though.

1) When a member logs in they have access to the wordpress bar at the top of the page. I want to disable/hide this so they would litterally only be viewing the website as a member of the public and not be able to access any area of the wordpress dashboard. This leads me to my second question,

2) When logging in and out from the website using the test users account, I am redirected to the standard wordpress login page which is undesired. Ideally I want to have a login popup that keeps the user on the page that they are on. If not, a custom login page. Can this be done using any custom coding or is there third party plug ins have to be used. I have attached a screenshot to help demonstrate what I meant if it was unclear.

Thanks again

[NicoModerator]

Hi There,

Would you mind sharing us your admin credentials so we could take a closer look on your setup. Don’t forget to set it as private reply.

Thank you so much.

Cheers.

[SmarticleParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

We’re sorry for the confusion! The functionality you requested requires custom development and falls outside the scope of our support. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

In the meantime, you can review this thread in regards to your first question: https://wordpress.org/support/topic/disable-admin-bar-for-subscribers

And this thread in regards to the second one: https://wordpress.org/support/topic/wp-logout-page-redirect-to-homepage

Thanks for understanding. Take care!

[SmarticleParticipant]

Ok that’s not a problem. Those issues I have been able to solve with plugins to hide the word press bar and redirect users after they have logged in. One final thing I was hoping you may be able to help with (providing its within your scope) is either editing the current login page I have or having a pop up appear that allows the user to login. Currently I have this login page.

http://elevenplusify.wpengine.com/login/

This is quite undesirable as it is unattractive it would be ideal to be able to completely customise this page so I could set the page up as No container, header footer, and then centre the login section, change any desired text and add logo etc,

Or it would be handy to have from what I’ve researched a modal popup, either internally or from a third party plugin called Ultimate AJAX Login which would then allow the user to click the login from the drop down account menu and then the popup would appear on the page.

If one of these could be done with your help, within the scope of your support I’d be very happy with either solution.

Many thanks for all the support.

[ChristopherModerator]

Hi there,

Please add the following CSS under Customize -> Custom -> CSS :

.page-id-147 .x-container.max.width.offset {
  max-width: 100%;
  width: 98%;
}
.page-id-147 aside.x-sidebar {
  display: none;
}
.page-id-147 .x-main {
  width: 100%;
}
.page-id-147 form#loginform {
  margin: 0 auto;
  float: none;
  display: table;
}

Hope it helps.

[SmarticleParticipant]

That sort of was what I meant, but it doesn’t really give me creative control of the page. Like if I wanted to add the logo, extend the fields. I’m happy to do this myself but ideally I’d like to edit the actual page to get exactly what I want rather than just override things in the customiser as this has still left some issues such as the login breadcrumbs and the lost password link not being centred.

Thanks for the assistance

[Author]

Posts