How to add a logout button that includes the nonce, in an Upfront child theme


I'm using the Fixer theme and all is generally going well, thanks.

My primary navigation area is currently just two button elements (that I dragged in from the Upfront editor) that link to internal pages.

I'd like to add a third button for users to Logout, and I've tried a couple of things that were unsuccessful:

1. Using another button and linking to wp-login?action=logout
This doesn't contain the nonce so it takes me to the "Are you sure you want to logout?" error page.

2. Dragging in a code element and setting the following as the code: < a href="<? php echo wp_logout_url(); ? >">Logout< /a>

But this doesn't resolve the php code and literally makes the target of the link <?php echo wp_logout_url(); ?>

I found other solutions (like this: where you add code to the functions.php file, but I wasn't sure if doing that (to Fixer's functions.php file) was a good idea, or if it would even work.

Please advise, and thanks so much.

  • Luís

    Hi @Len,

    I hope had been good today!

    Have you tried the Login element? You can use it as form or just a link with a dropdown form.

    This element have a double function, show the Login link (when users are logged out) that will display a form to introduce the credentials and Logout link (when users are logged in).

    1) Drag a login element;

    2) Click in the settings button (gear button)

    3) In the Login Settings panel (left panel) choose "Drop down form";

    Can this work for you?

    Cheers, Luís

  • Len

    Hi Luís

    Thanks for the reply.

    I had dragged the Login element onto the page and thought I couldn't use it when the form displayed. I didn't even think that there might be a setting that turns it into a link! This seems to be exactly what I need, thanks.

    Some additional questions for you:
    1. In the Login element's settings, what does the "Log In Trigger" refer to and do?
    2. Is there a quick way to change the link into a button, or do I need to modify the Login element's custom css?
    3. When I'm logged out and I click the "Log in" link to show the form, the bottom parts of the form are being hidden under page content. I tried setting the z-index of the login element to 100 and the z-index of the class upfront-output-this_post to 1, but it didn't change anything. I feel like this shouldn't be happening anyway. Do you have any ideas?
    4. The "Remember Me" option doesn't seem to be able to be clicked.

    Thanks for your help Luís, it's greatly appreciated.

  • Luís

    Hi @Len,

    Hope you're doing well today!

    Firstly, sorry for my late reply and all the problems it may have caused.

    Regarding to your questions:

    1) The "Login in Trigger" is the link text to open the drop down form. You can change it for the text you want to show, like: "Login Here";

    2) Yes, you need to use CSS to give the link a button style.

    2.1) Open the Login Settings (the gear icon);

    2.2) Click in Edit Element CSS;

    2.3) It will open a CSS tab and add this code at the bottom:

    .upfront_login-label {
       background-color: #5ebf6b ;
       border: 3px solid transparent;
       color: #fff;
       padding: 10px 20px;

    It will change the style of the link the default theme button style. See the image attached.

    2.4) Save the changes.

    3) I've confirmed this bug and flagged the developer so they can get it fixed up asap.

    Either myself or the developer will reply back here once we have pushed a fix out.

    4) Can you give us access to your admin panel, so we can check your issue?

    If you don't already know, please, follow the link below, to see how enable the staff login:

    When you enable this option, please post again!

    Cheers, Luís

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.