Home | Internet | Internet Tools & Resources

How To Turn Your WordPress Header Image Into A Home Link

By: Chad

Read More About Internet Tools & Resources

In a recent article, I talked about ways to control which pages show up in your navigation bar, but what if you want to provide an easy link to your blog's homepage, without taking up valuable navbar real estate? The answer is to use your header image as a link instead!
Fortunately, turning your header image into a clickable link is pretty straightforward. All you really need to do is add a little javascript to your theme's header.php and your visitors will be able to click to their heart's content!
Tracking Down Your Header Image
The first thing you are going to need to do is locate your header in your theme's code. You can use a development tool (such as the FireBug addon for FireFox) to identify the CSS rules for the header section. Once you have figured out what CSS ID is being used to control your header, you'll know what you need to modify in your header.php file.
Make The Header Image Clickable
Now that you've disovered what CSS ID is controlling the header image, you'll be able to find it easily in the header.php file of your WordPress theme. Open the file (by either downloading it or in the theme editor under the "Appearance" module) and search for the CSS ID you found in the last step.
You will most likely be working with a DIV tag, and there may be some content within the DIV and /DIV for a link, title or description. Whether or not you want to keep/add this, depending on your image.

What we are concerned with is the opening tag for the header itself (the one carrying the CSS ID you located earlier). To this, we are going to make a few additions, after the CSS ID:
-Title="Home"
-onclick="location.YOUR-BLOG-URL-GOES-HERE"
-style="cursor:pointer;"
First, we added a Title of "Home," to display when visitors hover over your header. This is optional and can be left out.
Second, we have the "onclick" parameter, which you will of course want to update with your own url.
Lastly, we added a style rule to change the cursor to a hand when users point at it, because this is the best way to indicate that the header is clickable. That style rule can easily be added to the stylesheet (personally, I prefer to do it that way whenever possible) but it can also be added here if you don't want to edit another file.
That's all it takes! You can leave whatever you need inside the header, like a title or logo, but now that you've applied the "onclick" to the opening tag, your visitors will be able to click on the image to get back to your homepage whenever they want!

Article Source: http://depositarticles.com/

Chad is the creator and author of WelcomeToWP.com - a blog dedicated to helping others create and optimize their own WordPress Blog. You can visit WelcomeToWP.com to read the original article about How To Turn Your WordPress Header Image Into A Home Link, complete with code demonstrations that you can copy-and-paste to your own files!

Please Rate this Article

 

Not yet Rated

Click the XML Icon Above to Receive Internet Tools & Resources Articles Via RSS!
Additional Articles From - Home | Internet | Internet Tools & Resources
Sign Up for a free account.
Our other websites
All about SEO
Beauty Tips Forum
Submit Articles
Member Login
Link Us
Submission Guidelines
Ezine Notifications
Article RSS Feeds
Sitemap
New Stuff
About Us
Developer
Good shopping portal
Link to Us
Contact Us
Privacy Policy
Terms of Service

counter easy hit

Powered by Article Dashboard