How To Add Images In Login/Logout Link In WordPress?

Hi,

WordPress code is an open source so any one can customize it with desired requirement. I have done some experiment to add image in login/logout link and I had done it successfully. To replace Login/Log Out with desired image copy this code and add it in functions.php file of your theme:

function ax_login() {
$before = ‘<li>’;
$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);
}

Now, pick two desired images and name it to logout.png and login.png after that upload them in images folder of the theme. Now, clear the cache and have a check with your blog login/logout link.

This function will override the output of loginout filter which requires to wp_loginout()..We can style it using CSS by adding the .axLinks{ } class to theme’s style.css file,

Thanks,

Shane G.

Popularity: 1%