Have you ever wanted to use icons/images instead of plain text for Login/Register links on a WordPress blog? Thankfully WordPress allows a down to bone customization so you could say that almost everything is possible. Our technique is simply achieved by creating two functions and adding them to your theme’s function.php file.

To replace Log in/Log Out text with a desired image, simply copy the code below and make your functions.php file ready for editing (through WordPress Theme Editor or FTP),

//Image instead of text for the "Login & Log Out" links
function ax_login() {
$before = '<li class="axLinks">';
$after = '</li>';
$theme_url = get_bloginfo('template_url');
if ( ! is_user_logged_in() )
$link = $before . '<a href="' . wp_login_url() . '">' . '<img src="' . $theme_url . '/images/login.png" alt="Log in" />' . '</a>' . $after;
else
$link = $before . '<a href="' . wp_logout_url() . '">' . '<img src="' . $theme_url . '/images/logout.png" alt="Log Out" />' . '</a>' . $after;
echo apply_filters('loginout', $link);
}

Paste the code you copied and then submit/save the file. Pick two icons you like (the size it’s up to you to decide but names are relative to the code, see: login.png, logout.png) and upload them to your theme images folder. Reload your WP site and ta-da!!! There you see two new shiny icons you didn’t have before. This code applies to any situation, whether you do have or not the Meta Widget active.

What just happened?

This function will override the output of loginout filter, it requires you to have wp_loginout(); somewhere on  your theme where you want to show your login icon. You can even style it using CSS by adding the .axLinks{ } class to your theme’s style.css file, and then manipulate it as you desire. Here’s a small CSS block which gives only basic directions.

.axLinks li, a, img{
background-color: transparent;
list-style: none;
text-decoration: none;
border: 0; }

The same treatment can be applied to the register filter as well, with just some small necessary changes, of course a new functions needs to be created only to avoid confusion. Below you can find the code for Register/Site Admin links. Follow the same steps as with the function above.

//Image instead of text for the "Register & Site Admin" links
function ax_register() {
$before = '<li class="axLinks">';
$after = '</li>';
$theme_url = get_bloginfo('template_url');
if ( ! is_user_logged_in() ) {
if ( get_option('users_can_register') )
$link = $before . '<a href="' . site_url('wp-login.php?action=register', 'login') . '">' . '<img src="' . $theme_url . '/images/register.png" alt="Register" />' . '</a>' . $after;
} else {
$link = $before . '<a href="' . admin_url() . '">' . '<img src="' .$theme_url . '/images/site_admin.png" alt="Site Admin" />' . '</a>' . $after;
}
echo apply_filters('register', $link);
}

This function will override the output of register filter, it requires you to have wp_register(); somewhere on  your theme, more precisely wherever you want your register/site admin icon. Now if you don’t have any pre-chosen icons, there are numerous choices out there.

This little modification has been tried and proven to work up to WordPress.2.7.1 and is intended to save you from editing the core, instead creating two easy-to-customize functions that can be delivered with your theme. If you encounter any potential problems feel free to ask by commenting below. Cheers!

This article was contributed by Arian Xhezairi, a WordPress manic, web developer and Twitter user (follow him here!). You can also check out his site at iTechnologize.net.

The above article was contributed by a member of the WPHacks community. If you are interested in participating, you can find our guidelines for contributing an article here.

  • http://www.shoutmeloud.com p@r@noid

    Thanks for the new hack :)

  • http://www.bloghighlight.com Chung Bey Luen

    Nice hack. It is very useful for people who use WordPress as membership system.

  • wayne

    really nice hack…thanx arian…

  • http://ineeddiscipline.com Dean Saliba

    Thank you for this hack. I’m going to use it on my blogs as I think images will look better than the default text links.

  • Dev

    Nice hack @kyle and thanks for the good post @Arian Xhezairi. This is an awesome hack. But where is the demo of this hack. I think you need to show how login page is look like after this hack.

  • Pingback: How To: Add Images to WordPress Login/Register links | wpcrunchy

  • George Serradinho

    Wow, what a nice hack to use.

    It surely makes the normal links look boring now if you use images instead, thanks for the info.

  • Pingback: links for 2009-02-27 | This Inspires Me

  • Arian Xhezairi

    Guys, I’m glad you all welcomed this hack.

    @Dev, let me clarify a misunderstanding. This hack does not change the login page, but it only lets you use images for your links. :)

    Cheers.

  • http://defaultprime.com SuperMario290

    Ha, that’s pretty sweet. Thanks a ton for the tutorial! :)

  • http://www.mojadieta.eu Dieta

    The idea seems so simple yet the results are so great it’s surprising. Thanks for posting that hack – I’m definitely gonna use it one day (I need som nice pics first ;)

  • Mike Wagan

    Nice hack. It is very useful for people who use WordPress as membership system.

  • Career Outlook

    Very useful tutorial but I guess there are many plugins also available that can also perform this function and very easy to use.

  • http://www.tatilyerlerim.biz tatil yerleri

    Nice hack. It is very useful for people who use WordPress as membership system…..