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.

There are all sorts of WordPress hacks people can easily do to customize and improve both the look and functionality of their WordPress blog, but I’ve always felt that the comments section is one of the best ways to truly customize your WordPress theme.   After all, blogging is all about author interaction, and the comments go a long way towards conversations happening.

If you are looking to improve the comments field of your blog’s theme, Instant Shift recently took the time to feature a number of comment hacks, which can be viewed here.   Looks like they’ve already got 30 hacks included, including a few we’ve featured here in the past.

If you aren’t subscribed to WPEngineer.com, you really should be!   This blog is quickly becoming one of my favorite blogs about WordPress (outside of this one of course!).  In a recent post, Michael has provided a quick and easy to implement WordPress Hack that will allow you to add pages to your WordPress navigation that are private (so only designated people such as administrators can see them).

When I first read this post I immediately felt that this would make for a great way to add your Adminstrator login to your WordPress navigation, so only people that need it could actually see it.

Click here to get the code you need to accomplish this hack.

For any bloggers that maintain an “Advertise” page on their WordPress blog, you might want to check a recent guest post by our friend Jean-Baptiste Jung over at Pro Blog Design.   In his guest post, Jean explains how to manually create an auto-statistics page for advertisers.  As with all of Jean’s posts, you’ll get the code you need and more.

Count me in the camp of people who prefer to manually code something into their theme; however, I think this would also be a great idea for a WordPress plugin.   I know a lot of plugin developers have asked for ideas in the past so there you go! 

Breadcrumbs, as has been said before on WPHacks, are very useful, both for your SEO and reader’s navigation. In other words, there is no reason why you shouldn’t have them on your site.

There are a number of breadcrumb plugins you could use, but with a bit of WordPress code, you can avoid this. If you use sub-categories, then this will only display the name of the sub category.

A typical breadcrumb is something like this:

Home >> [Category] >> [Post Title]

WordPress can very easily do this – to get the name of the category the post is in, all you need is

<?php the_category(); ?>

Then, to display the post title, the code you need is

<?php the_title(); ?>

So our final code, with some arrows added in is:

<a href="/">Home</a> &raquo;  <?php the_category('   '); ?>   &raquo; <?php the_title(); ?>

So now that you’ve got your breadcrumb sorted, you can take this one step further and spice it up a bit. For the next part, we’re going to be using the code from a tutorial at Janko at Warp Speed, and with this code, we’re going to turn our breadcrumb into something that looks like the ones you see on Apple.com!

First, download the html version here, and open it in a your web editor (ie Notepad, Dreamweaver etc). Scroll down until you find <ul id=”breadcrumb”>. This is where we’re going to start editing. All you need to do is copy and paste the following code:

<ul id="breadcrumb">
<li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>
<li><?php the_category(', ') ?></li>
<li><?php the_title(); ?></li>
</ul>

This is basically the same code as we had above, just putting into a list. Make sure you upload the home.png file to /images/, and while you’re at it, upload the other images.

Next thing we need to do is the CSS. Go into your style.css and paste the following:

#breadcrumb {
font: 11px Arial, Helvetica, sans-serif;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a {
height:30px;
display:block;
background-image:url('/images/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#000;
}
.home {
border:none;
margin: 8px 0px;
}
#breadcrumb a:hover {
color:#35acc5;
}

Once you’ve done that, then you’re done! If you copy the code from the source file (which you should), then make sure you change the url of the images.