make wp_register to act as a button

  • Resolved bananenkopf

    (@bananenkopf)


    6 years, 4 months ago

    Hey,

    I have a line like this:

    <div class="login"><?php wp_register('', ''); ?></div>

    class="login" is styled so it looks like a button but doesnt act as one…

    Because right now, only the link is clickable, i want the full button to be clickable by the user. i tried something like:

    <a href="<?php wp_register('', ''); ?>"><div class="login"><?php wp_register('', ''); ?></div></a>

    But I need the register function tag inside the visible area, to differ between logged in and not logged in users, the same is with the link so I can’t use a static link.

    Any Ideas how to solve this?

    • This topic was modified 6 years, 4 months ago by bananenkopf.
Viewing 5 replies - 1 through 5 (of 5 total)

  • For accessibility, links should look and act like links, and buttons should be buttons. Buttons should not navigate to another page, whereas links do.
    Given that, you can use padding and a border and box-shadow to style your link to look like a button. (But it’s better if you do not.)

    Thread Starter bananenkopf

    (@bananenkopf)

    For accessibility, links should look and act like links, and buttons should be buttons. Buttons should not navigate to another page, whereas links do.

    On top right corner of this page, there is a link that looks like a button “get wordpress” and it navigates to another page, so I realy did not understood how you mean this.

    Given that, you can use padding and a border and box-shadow to style your link to look like a button. (But it’s better if you do not.)

    But the problem is. it doesn’t work! I used padding etc, it styles the link, but it does not expand the clickable area like it would do for a a element. The a element i tried wrapping around doesn’t work with this href.

    That is the problem here.

    Yes, there are a lot of examples of poor design choices on this site. There are also Trac tickets for fixing them. It’s a slow process, and it’s best to avoid creating more of those bad design things on the web.

    Your first example code is better than your second, because the function outputs a link already, and can’t be inside another link. But you need to style
    .login a { padding: 1em; etc.
    and not just login.

    Thread Starter bananenkopf

    (@bananenkopf)

    Thank you!

    Now mobile users can touch it easier.

    The .login a solved this problem! …half.

    How do I get a Icon inside the active link component as well?

    <div class="login"><i class="fa fa-user-o" aria-hidden="true"></i><?php wp_register('', ''); ?></div>

    Thread Starter bananenkopf

    (@bananenkopf)

    I added the icon <i class="fa fa-user-o" aria-hidden="true"> to themes translation file

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘make wp_register to act as a button’ is closed to new replies.