Ask your WordPress questions! Pay money and get answers fast! (more info)

Need Logo to be H1 Blog Title WordPress

  • SOLVED

Love this theme but when you swap out the text for logo you can't even put in an alt tag. I want the search engine to treat the logo link as an H1 tag wrapped around the blog's title.


[[LINK href="http://www.wandklaw.com/"]][[/LINK]]

Answers (4)

2010-10-16

José Pardilla answers:

You may want to try this:

In header.php

<strong>REPLACE</strong>

<div id="logo">
<?php if(!$custom_logo): ?><a href="<?php echo home_url( '/' ); ?>"><img alt="test" src="<?php echo THEME_IMAGES;?>/logo.png" /></a><?php else: ?><a href="<?php echo home_url( '/' ); ?>"><img alt="" src="<?php echo $custom_logo; ?>" /></a><?php endif; ?>
</div>


<strong>WITH</strong>

<div id="logo">
<h1 id="blog-title"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>


<strong>In CSS file add</strong>

#blog-title,
#blog-title a {
display: block;
height:200px;
width:200px;
}

#blog-title a {
background: url(img/logo.jpg);
text-indent:-9999px;
}

With and ID the CSS won't alter any other H1 and with negative text-indent the text will be hidden to visitors but visible to search engines.

Since i have no acess to the site i can't personalize the css more specifically (width and height in css have to correspond to your logo size).

Also for hover state you can add:

#blog-title a:hover {
background: url(img/logo-hover.jpg);
}

2010-10-15

Joe Jenkins answers:

The simplest method would be:

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


Clay Butler comments:

I don't undeatand where to put it. This is the header code:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php theme_generator('title'); ?></title>
<?php if($custom_favicon = theme_get_option('general','custom_favicon')) { ?>
<link rel="shortcut icon" href="<?php echo $custom_favicon; ?>" />
<?php } ?>

<!-- Feeds and Pingback -->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS2 Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<!-- Stylesheets -->
<link rel="stylesheet" href="<?php echo THEME_URI;?>/style.css">

<?php wp_head(); ?>

<!--[if IE 6 ]>
<link href="<?php echo THEME_CSS;?>/ie6.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?php echo THEME_JS;?>/dd_belatedpng-min.js"></script>
<script type="text/javascript" src="<?php echo THEME_JS;?>/ie6.js"></script>
<![endif]-->
<!--[if IE 7 ]>
<link href="<?php echo THEME_CSS;?>/ie7.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->

<script type="text/javascript">
var image_url='<?php echo THEME_IMAGES;?>';
</script>
</head>
<body>
<header id="header">
<div class="inner">
<?php if(theme_get_option('general','display_logo')):
$custom_logo = theme_get_option('general','logo');
?>
<div id="logo">
<?php if(!$custom_logo): ?><a href="<?php echo home_url( '/' ); ?>"><img alt="test" src="<?php echo THEME_IMAGES;?>/logo.png" /></a><?php else: ?><a href="<?php echo home_url( '/' ); ?>"><img alt="" src="<?php echo $custom_logo; ?>" /></a><?php endif; ?>
</div>
<?php else:?>
<div id="logo_text">
<a id="site_name" href="<?php echo home_url( '/' ); ?>"><?php bloginfo('name'); ?></a>
<?php if(theme_get_option('general','display_site_desc')){
$site_desc = get_bloginfo( 'description' );
if(!empty($site_desc)):?>
<div id="site_description"><?php bloginfo( 'description' ); ?></div>
<?php endif;}?>
</div>
<?php endif; ?>

<?php theme_generator('menu');?>

</div>
</header>

2010-10-15

Roberto Mas answers:

what you need to do in order to put a logo inside an h1 tag the right way for search engines http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

in header.php

add something like this

<div id="site-logo"><h1><?php bloginfo( 'name' ); ?></h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="http://theurlofyourlogo" alt="<?php bloginfo( 'name' ); ?>" /></a></div>

and then in style.css
#site-logo h1 {position:relative; text-indent: -999em;}

2010-10-15

Nile Flores answers:

Both above are wrong.

<h1><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"></h1>

for the theme template

CSS:

Please alter the CSS to fit your logo's width and height. I left some you can also put float:left or float:right; and even adjust margin in case you need to tweak placement:

h1 {
display:block;
width:300px;
height:150px;
padding:10px;
margin:0px;
background: url(images/yourimagehere.png) no-repeat;
}

h1 a{
display:block;
width:300px;
height:150px;
padding:10px;
margin:0px;
background: url(images/yourimagehere.png) no-repeat;
}

If you have a logo that you want to have a hover:

h1 a:hover{
display:block;
width:300px;
height:150px;
padding:10px;
margin:0px;
background: url(images/yourimagehere-hover.png) no-repeat;
}



Clay Butler comments:

Do I add this to the header php template

<h1><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"></h1>

or does it replace something.


Nile Flores comments:

You will want that code to replace the area for the logo_text's code -

this line -
<a id="site_name" href="<?php echo home_url( '/' ); ?>"><?php bloginfo('name'); ?></a>

You will have to make sure in your theme, since it looks to have theme options for you to have the logo, do not put anything in that theme option. I am really surprised it was not coded with SEO in mind.


Clay Butler comments:

Think I'll just give to give up for now. The site needs to go live tonight. I too am shocked the developer dropped the ball on this option. When I implemented your suggesting it messed up all the H1 tags site wide and didn't effect the logo at all.


Nile Flores comments:

If you need hands on help, feel free to go to my profile and send an email through the contact form. Perhaps I can help you get this working if you want. Not a problem to do so.