Clickable Header with custom theme

Javascript onclick function //


onclick="javascript:location='https://www.whatever.com'"


add it the div header //


<div id="header" onclick...


I don’t have a <div id=”header” the only thing close in any of my files is the div class=”header” that I listed above- The theme I’m using is different than the standard Kubrick or other themes- it’s the Tiga theme if that helps any?

Try using the same function with the class, should work. As in:

onclick="javascript:location='https://www.whatever.com'"
<div class="header" onclick...

can u tell me where u download the Tiga theme? maybe i can help..

paskal, I think I got it out of the repostitory for wordpress themes- I looked up one that was widget ready- I’ll see if I can find the link though- thei- I’ll give that a go & see what happens- thanks

This one looks just a bit different, but it’s the theme I use- https://www.shamsulazhar.com/wp/archives/31# you can check out my site at https://sacredscoop.com to see what I’ve doen with it- I changed the header, added a few things on the sidebar etc. (gotta learn how to create new sidebar box with the blue bar at top though- as it is I had to include elements to sidebar outside of those boxes)

Why would you need javascript to make it clickable?

<div class="header">
<h1><a href="https://www.yourlinkhere.com"><?php bloginfo('name'); ?></a></h1>
<h2 class="blog-description"><?php bloginfo('description'); ?></h2>
</div>

That right there will make your header name a link. No need for javascript. If you want the *entire* thing to be clickable, you can just adjust the margins and padding of the h1 a part of your css to make it cover the whole header area – so if your header is, say, 500px by 200px:

h1 a {
display:block;
width:500px;
height:200px;
line-height:200px;
text-align:center;
}

That’ll vertically and horizontally center the text in the header. (If you blog name is more than one line in height, though, it won’t center it vertically – what I put up there only works if the text doesn’t break over two lines).

If you don’t want the header description there, just remove the part between the H2 tags.

Yeah, my new header is a whole picture instead of having header name and description (I moved those off to the side so they can’t be seen- rather do it that way so search engines still get the description) so I’d need to make the whole picture in the heading clickable

The onclick solution sometimes is the only thing you can do to make the whole header clickable – you can’t nest an h1/h2 tag inside an href tag and have it validate.

ok IU did the onclick thing & it works- the only thing is that the curser doesn’t change when you hover your mouse over it- so it’s not really apparent that it’s a clickable link- any thoughts? It’s no big deal really, I just wanted the header clickable for my own convenience, but would be nice if people were alerted by a curser change that it’s clickable.

onclick = easy no hassle solution, if you wanna do an image replacement technique like what doodlebee suggested, use the dave shea thingy:

https://www.mezzoblue.com/tests/revised-image-replacement/
(very bottom)

cursor change thingy,
add this to your .header part in the css:

cursor: pointer;

>>you can’t nest an h1/h2 tag inside an href tag and have it validate.<<

I didn’t. I nested the anchor tag inside the H1/H2 tag, which *does* validate.

>>so I’d need to make the whole picture in the heading clickable<<

The solution I posted above *will* work – all you do is set the image as the background (as you are already doing), and simply make the text display as a block that will cover the image – you may have to adjust margins and padding, but it’ll work. I do it all the time. The background image is still visiible. The padding around the text makes the entire header clickable. No need for javascript. (It’s not an image replacement, either…just adjustment for the space surrounding the anchor link text – nothing to it.)

Wasn’t pointing that at you, doodlebee. It’s a common-enough problem with the layout of a lot of header setups though.

I’ve also tried the padding thing – which sometimes works, and sometimes causes link-hover jumping in IE. In the long run, the js solution is by far the easiest one to implement effectively and quickly across a broad platform of sites, themes, and browsers.

>>Wasn’t pointing that at you, doodlebee.<<

Oh, sorry. I had to give up coffee and it’s too early in the morning for me. LOL

>>sometimes causes link-hover jumping in IE.<<

The only time I’ve seen that happen is when you apply any background-positioning to the background elements of the link. As long as you don’t apply any background-positioning, it won’t happen.

But I use background positiong with links all the time. So it does make a difference to me….

[Give up coffee? Oy…. better you than me!]

I use the good ol’ #header a { text-indent: -9999px; display: block; width: XXXpx; height: XXXpx; background: url('../path/to/image.ext'); }

Actually, I was happily unaware of any compatibility issues until you forced me to view that mezzoblue site.

=P

EDIT: What doodlebee said, oops. I’m not thinking properly this morning – need coffee.