Michael
|
Hello. I want to make my wordpress blog header clickable. I use a theme created with artisteer and I tried to follow this tutorial :
http://codex.wordpress.org/Designing_Headers#Making_the_Whole_Header_Clickable
However, in my header.php I don't have the same lines and I don't know what to change or what to replace.
So, this is my entire header. Can you help me make it clickable ? thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); }
elseif (is_single() ) { single_post_title(); }
elseif (is_page() ) { bloginfo('name'); echo ': '; single_post_title(); }
else { wp_title('',true); } ?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="art-page-background-simple-gradient">
</div>
<div id="art-main">
<div class="art-Sheet">
<div class="art-Sheet-tl"></div>
<div class="art-Sheet-tr"></div>
<div class="art-Sheet-bl"></div>
<div class="art-Sheet-br"></div>
<div class="art-Sheet-tc"></div>
<div class="art-Sheet-bc"></div>
<div class="art-Sheet-cl"></div>
<div class="art-Sheet-cr"></div>
<div class="art-Sheet-cc"></div>
<div class="art-Sheet-body">
<div class="art-Header">
<div class="art-Header-jpeg"></div>
</div>
|
| |
Garry
|
You can do it changing following code in your header.php:
<div class="art-Header">
<div class="art-Header-jpeg"></div>
-----------------
To:
-----------------
<div class="art-Header"onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;">
<div class="art-Header-jpeg"></div>
|
| |
Michael
|
it worked. thanks :)
|
| |
rluquis
|
Quote Michael:
it worked. thanks :)
How do you make it work?? 
When I change the code my header disappear completely. I just want to make the header clickable and take the people to the home page...
This is my header.php code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); if(get_bloginfo('name') != "") echo ' - ' ; bloginfo('name'); }
elseif (is_single() ) { single_post_title(); }
elseif (is_page() ) { bloginfo('name'); if(get_bloginfo('name') != "") echo ': '; single_post_title(); }
else { wp_title('',true); } ?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.ie7.css" type="text/css" media="screen" /><![endif]-->
<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="art-main">
<div class="art-sheet">
<div class="art-sheet-tl"></div>
<div class="art-sheet-tr"></div>
<div class="art-sheet-bl"></div>
<div class="art-sheet-br"></div>
<div class="art-sheet-tc"></div>
<div class="art-sheet-bc"></div>
<div class="art-sheet-cl"></div>
<div class="art-sheet-cr"></div>
<div class="art-sheet-cc"></div>
<div class="art-sheet-body">
<div class="art-header">
<div class="art-header-png"></div>
<div class="art-header-jpeg"></div>
</div>
|
| |
Garry
|
@ Rluquis
I think your are making some mistake while changing code.
|
| |
Adeptris
|
The example above makes the header div clickable, nested inside the header div is the png and jpg, as the image is a background image you cannot make it clickable, that's why garry's example makes the art-header div clickable.
This works fine in most cases but in some themes you might need to add a clickable region instead.
You could follow my tutorial on creating clickable regions, and just create one full size one.
http://digitalraindrops.net/demo/wordpress/cms-lite/2010/02/16/one-header-three-urls/
David
|
| |
John
|
Works for me thanks.
|
| |
Brett Bumeter
|
Quote Garry:
You can do it changing following code in your header.php:
<div class="art-Header">
<div class="art-Header-jpeg"></div>
-----------------
To:
-----------------
<div class="art-Header"onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;">
<div class="art-Header-jpeg"></div>
Quick update, I just tried this with a slight modification pointing things to the root domain as the home page
<div class="art-header" onclick="location.href='../';" style="cursor: pointer;">
This worked fine using Artisteer 2.4xxx on a WP 3.0 theme running the 1.9 patch. :)
|
| |
Dragos
|
Quote :
<div class="art-Header"onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;">
Ho to open in new window?
Thanks
|
| |
Kelley Rao
|
Not sure why you'd want the header link to open in a new window unless it's a link to somewhere outside of your site? But, to answer your question, you can use the target="_blank" attribute. More on that...
http://www.w3schools.com/HTML/html_links.asp
Kelley Rao, Webeze
www.web-eze.com
|
| |
Dragos
|
Kelley thanks for info,
you know logo image can be banner, yeah?
Banner can be link to another site.
We do not want our visitor to go from our site
I know how to doit in old fashion HTML way
but I want to know how to do it in this combination:
<div class="art-Header"onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;">
|
| |
Kelley Rao
|
You're welcome. So, just use the target="_blank" attribute on your link and you're good to go. Try it and see and then post back if you have any difficulty.
Kelley Rao, Webeze
www.web-eze.com
|
| |
Kathy
|
I'll start by saying thanks to everyone here for all the help you give. I'm new to Artisteer and the helpful people here have saved me hours of research and trial and error. I have one client that doesn't know what his blog url will be yet and I wanted a more flexible option than hard coding the url. Bret's solution worked but I found this one does too.
<div class="art-header">
<a href="<?php echo get_option('home'); ?>/"><div class="art-header-png"></div></a>
<a href="<?php echo get_option('home'); ?>/"><div class="art-header-jpeg"></div></a>
This makes the header image clickable whether it's a jpg or a png. Dragos, you should be able to add the target="_blank" attribute this way too. Just remove the php code and put in the external url.
|
| |
Greg
|
Hey Dragos,
It might be worth thinking about SEO if the link goes to another website by adding rel="nofollow" 
|
| |
Claudio
|
Quote Garry:
You can do it changing following code in your header.php:
<div class="art-Header">
<div class="art-Header-jpeg"></div>
-----------------
To:
-----------------
<div class="art-Header"onclick="location.href='http://www.yoursite.com/';" style="cursor: pointer;">
<div class="art-Header-jpeg"></div>
Hi. I followed these steps, although I found that code in "page.php" and "onecolumn-page.php", instead of "header.php". I changed both and now the logo is clickable, indeed, but I found a problem; this just happens in the home page of my blog. When I open a different page (a post, or comments, archival, etc.) the whole image disappears. Any suggestions? Thanks.
|
| |
Mr Parrot
|
I seem to keep saying this, but the most painless way is to use the Dynamic Headers plugin. It makes headers clickable, gives them an alt and lets you choose the target window.
It also allows you to use different headers on different pages or have random headers.
The only coding is a line in your header.php and you're away.
Definitely in my top ten plugins.
Mr Parrot (Ian)
|
| |
Claudio
|
Thank you, Mr Parrot; the plugin is nice but it's not exactly what I was looking for. But it will be a good alternative, whenever I should't find the right solution.
|
| |
Jos
|
Thanx for sharing it again Ian. I clearly missed your calls before 
|
| |
Mr Parrot
|
Hi Jos,
I think I need to backtrack. I've just tried using the Dynamic Headers on a Artisteer 3 site tonight and the images aren't aligning proper;ly. I need to try to work out why.
Mr Parrot (Ian)
|
| |
Jeffrey
|
Here's an extension to the art-header DIV replacement method. I didn't want to edit page.tpl.php (Drupal) every time I re-gen Artiseer files. This jQuery script will replace the div dyanmically. Insert it in the right place on whatever CMS/webpage you are using. I'm sure you can extend it in different ways to suit your needs:
$(document).ready(function()
{
$('.art-header').replaceWith('<div class="art-header"><a href="http://www.yahoo.com"><div class="art-header-png"></div></a><a href="http://www.yahoo.com"><div class="art-header-jpeg"></div></a></div>');
});
|
| |