Link to home
Start Free TrialLog in
Avatar of CSHTech
CSHTechFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Add clickable logo to TwentyTen theme using child theme

I would like to add a clickable logo to my twentyten-based site and am using a child theme to make changes (sounds good but I'm just starting out with child themes!).

Could anyone advise me how to do this - I've seen sites that say replace: -

 
<<?php echo $heading_tag; ?> id="site-title">
 <span>
 <a href="<?php echo home_url( '/' ); ?>" title="<?php echo  esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"  rel="home"><?php bloginfo( 'name' ); ?></a>
 </span>
 </<?php echo $heading_tag; ?>>

Open in new window


with

 
<h1 id="site-title">
<span>
<a href="<?php bloginfo ('home');?>" rel="home" title="<?php bloginfo('name');?>">
<img src="<?php echo bloginfo ('template_directory');?>/images/logo.png" alt="<?php bloginfo ('name');?>" />
</a>
</span>
</h1><!--end of h1 site-title-->

Open in new window


Is this correct?

If so, I'm not sure: -

1. how do you remove the first segment using a child theme header.php file
2. how to include a link to make the logo clickable.

Help appreciated........
ASKER CERTIFIED SOLUTION
Avatar of gwkg
gwkg
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CSHTech

ASKER

Many thanks for your reply.

How can I make it a clickable logo to link it to the home page....?
All you really need to do is, in the original code, replace this

<?php bloginfo( 'name' ); ?>

with your image.
Avatar of CSHTech

ASKER

Excuse me as I'm a newbie at this - how do I enter the image into the code in a way which makes it a clickable link when viewed as a webpage?
The <a> tag is what makes it clickable.  A simple link is

<a href="http://google.com">Google</a>  (i left off the < so it would display correctly in this post)

So putting text or an image inside <a> </a> is what makes it clickable.

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo  esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"  rel="home"> TEXT AND IMAGES HERE WILL BE CLICKABLE </a>

Open in new window

Actually, I didn't leave off the < so ignore that comment in the ()
Avatar of CSHTech

ASKER

I understand the link but am a bit stuck as to the exact syntax of the code that needs to replace

<?php bloginfo( 'name' ); ?>

One last clarification please - can you give me an example of the code I need to use, if the website that the logo needs to be linked to, is (say) www.domain.com...?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CSHTech

ASKER

jeremyjared74 - thanks for your reply.

Unfortunately the code I am using varies slightly from the code you used in your tutorial - here's what I've done so far.

I replaced (whilst keeping <<?php echo $heading_tag; ?> id="site-title"> as advised by qwkg)

<span>
 <a href="<?php echo home_url( '/' ); ?>" title="<?php echo  esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"  rel="home"><?php bloginfo( 'name' ); ?></a>
 </span>
 </<?php echo $heading_tag; ?>>

Open in new window


with....

 
<h1 id="site-title">
<span>
<a href="<?php bloginfo ('home');?>" rel="home" title="<?php bloginfo('name');?>">
<img src="<?php echo bloginfo ('template_directory');?>/images/logo.png" alt="<?php bloginfo ('name');?>" />
</a>
</span>
</h1><!--end of h1 site-title-->

Open in new window



so the full code is now

<?php echo $heading_tag; ?> id="site-title">
<h1 id="site-title">
<span>
<a href="<?php bloginfo ('home');?>" rel="home" title="<?php bloginfo('name');?>">
<img src="<?php echo bloginfo ('template_directory');?>/images/logo.png" alt="<?php bloginfo ('name');?>" />
</a>
</span>
</h1><!--end of h1 site-title-->

Open in new window


....I now want to insert the link to the logo.png code as advised, but your tutorial code uses <?php bloginfo('url') instead of <?php bloginfo ('home'), and other small differences. I know I am using the latest version of Wordpress which may explain the slightly different code terminology, but it's a little confusing at the moment as to exactly what I need to change to the get the logo and it's link to the home page inserted.

But in any event the tutorial says that everything between the h1 tags should be removed and replaced with your code...?

Your help in clarifying would be appreciated. (Excuse the newbiness!)
Avatar of CSHTech

ASKER

I have now got the logo appearing in the header, using this: -

 
<div id="header">
		<div id="masthead">
			<div id="branding" role="banner">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
				<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Test logo in child theme" height="52px" width="250" 
/></a>
				<div id="site-description"><?php bloginfo( 'description' ); ?></div>

				<?php

Open in new window


...which I now realise also incorporates the link back to the home page - thank you.

The logo does not appear unless there is a logo.png in the parent theme's 'images' folder and the child theme's 'images' folder. Is this usual?
I don't believe that is normal. I think it is because you used ('template_url'). This looks in the folder that the stylesheet resides in.
Avatar of CSHTech

ASKER

It also doesn't have the black line at the top and bottom of the image that I understand you usually need to tweak CSS to remove.

Many thanks guys - much appreciated.