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)
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);
}
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>
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;}
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.