WordPress.org

1. ohbearly
   Member
   Posted 2 years ago #

   I am a new Wordpress user. I have spent the past month learning the ropes. I purchased a template to start my development. I have spent the past 4 weeks updating the look and feel and adding plug-ins. I am stumped with the following problem. I would like to have the blog logo be a hyperlink so that when it is clicked on, it takes you to the home page. The image is in the CSS as a background image. Can you make a background image act as a hyperlink? If not, what are my options? I assume I can move it to the header file and treat it like any image. Thanks, Tom

2. DanielEK
   Member
   Posted 2 years ago #

   I'd like an answer to your question, as well.

3. vkaryl
   Member
   Posted 2 years ago #

   Here's what you can do:

   Add the following code into (usually) the div with the id of header in (usually) header.php:

   <div id="header" onclick="location.href='http://www.yoursite.com';" style="cursor: pointer;">

   This is javascript; the only time it won't work is if someone has js disabled while browsing - probably not a big enough percentage to worry about.

   If your header graphic is in some other id in the css, just find the appropriate div in the header.php (usually) file.

   [You won't of course add the whole section there - only the part which comes after id="header"....]

4. brianfit58
   Member
   Posted 1 year ago #

   If you prefer a non-javascript option, you can do the following.

   Presuming you have an existing class defined for your header image which is something like this:
   

   .header_logo {
   background-image: url(images/header.png);
   background-repeat: no-repeat;
   margin-top: 8px;
   float: left;
   height: 145px;
   width: 870px;
   }

   You define two new classes:

   .header_logo a {
   display: block;
   float: left;
   height: 145px;
   width: 870px;
   outline: none;
   }
   
   .header_logo a span {
   display: none;
   }

   And then, in the HTML where the class is called, add a hyperlink to some dummy text within span tags. The dummy text will be invisible on the page, and a block the size of your graphic will be clickable:

   <div class=”header_logo”>
   <a href="http://blog.brian-fitzgerald.net"
   title="There's no place like…">
   <span>This links home, dear screen reader</span>
   </a>
   
   </div>

   If you want to know why this works, I blogged it here:

   http://blog.brian-fitzgerald.net/?p=252

5. rahawa
   Member
   Posted 1 year ago #

   Thanks, vkaryl. This helped settle the problem.

Topic Closed

This topic has been closed to new replies.