Putting a logo (from desktop image) on my Twenty Eleven header
-
Hi, I’m trying to replace my header site title with a logo (logo.png) from my desktop. I followed a Youtube tutorial, and made a MyTwentyEleven child theme, but this is my first attempt at coding, so my logo image is the only thing on that theme.
When I entered this code, nothing changed on my header. So either I missed a step before or after the coding, or the coding is messed up.
Can anyone help me?
This is what I entered:
<hgroup>
<h1 id=”site-title”><span>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src=”<?php echo bloginfo(‘template_directory);?>/images/logo.png” alt=”<?php bloginfo( ‘name’ ); ?>” width=”413″ height=”82″/></span></h1><h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>
-
A link to your site would make life a lot easier…
But just guessing from what you’ve posted, I’d say that the browser is not finding the image because you’re using the call
bloginfo('template_directory')
which returns the URL of the parent theme’s directory. See the Codex entry for bloginfo.If you’ve put your image in an images folder in your child theme’s directory, which is what you should be doing because the whole point of a child theme is to leave the parent theme unchanged, you should be using,
<?php bloginfo('stylesheet_directory'); ?>/images/logo.png
HTH, but a link to your site would make things a lot easier.
Cheers
PAE
just flush that child theme and try coding it once again. If you encounter the same error again just post the link to that tutorial here once.
cheersThanks for the advice, I changed the code so it read ‘stylesheet’ instead of ‘template’ but it hasn’t changed anything…
FazBuzzWP, do you mean upload the image into the original twentyeleven and code from that theme?
My website is https://www.alaqaba-village.org
And this is the tutorial I used. It’s a continuation of another tutorial, so I wasn’t sure if my child theme was incomplete because I only had my logo image in there…I just wanted the logo ??
https://www.youtube.com/watch?v=tLp0Ig6l1t0<hgroup>
<h1 id=”site-title”><span>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img src=”<?php echo bloginfo(‘stylesheet_directory’); ?>/images/logo.png” alt=”<?php bloginfo( ‘name’ ); ?>” width=”413″ height=”82″/></span></h1><h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>Thanks guys! I really appreciate this.
I just looked again at the original code you posted:
<hgroup> <h1 id="site-title"> <span>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo bloginfo('template_directory);?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" width="413" height="82"/></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup>
That’s never going to work, is it?
You’re looking for something like this, starting with the
<header>
tag:<header id="branding" role="banner"> <div id="mylogo"> <a href="<?php site_url(); ?>"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="" /> </a> </div> <!-- rest of the stuff currently in the header goes here --> <!-- starting with the anchor tag for the main site header image --> </header>
Put something like that up on your site so that we can look at it again.
Cheers
PAE
see that
ooooook. I replaced my title code with your logo code and the only difference is, the title is now a clickable link…to the same site
https://www.alaqaba-village.org
I must be missing something really basic here. My header should be changing after I edit…??
Here’s everything:
`<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id=”main”>
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
?><!DOCTYPE html>
<!–[if IE 6]>
<html id=”ie6″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 7]>
<html id=”ie7″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html id=”ie8″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if !(IE 6) | !(IE 7) | !(IE 8) ]><!–>
<html <?php language_attributes(); ?>>
<!–<![endif]–>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width” />
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;wp_title( ‘|’, true, ‘right’ );
// Add the blog name.
bloginfo( ‘name’ );// Add the blog description for the home/front page.
$site_description = get_bloginfo( ‘description’, ‘display’ );
if ( $site_description && ( is_home() || is_front_page() ) )
echo ” | $site_description”;// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘twentyeleven’ ), max( $paged, $page ) );?></title>
<link rel=”profile” href=”https://gmpg.org/xfn/11″ />
<link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<!–[if lt IE 9]>
<script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js” type=”text/javascript”></script>
<![endif]–>
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( ‘thread_comments’ ) )
wp_enqueue_script( ‘comment-reply’ );/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head><body <?php body_class(); ?>>
<header id=”branding” role=”banner”>
<div id=”mylogo”>
“>
<img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/logo.png” alt=”” />
</div><?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( ! empty( $header_image ) ) :
?>
“>
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it’s a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
else : ?>
<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />
<?php endif; // end check for featured image or standard header ?>
<?php endif; // end check for removed header image ?><?php
// Has the text been hidden?
if ( ‘blank’ == get_header_textcolor() ) :
?>
<div class=”only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>”>
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?><nav id=”access” role=”navigation”>
<h3 class=”assistive-text”><?php _e( ‘Main menu’, ‘twentyeleven’ ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class=”skip-link”>“><?php _e( ‘Skip to primary content’, ‘twentyeleven’ ); ?></div>
<div class=”skip-link”>“><?php _e( ‘Skip to secondary content’, ‘twentyeleven’ ); ?></div>
<?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>
</nav><!– #access –>
</header><!– #branding –><div id=”main”>’
there’s space for a URL on that new code I added, do i need that if I’m just using a desktop image?
Firstly, please do not paste code like that. It contravenes the forum rules and is unnecessary.
If you were going to post anything at all, then this was all you needed:
<header id="branding" role="banner"> <div id="mylogo"> "> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="" /> </div>
And that doesn’t look at all like I suggested, which was:
<header id="branding" role="banner"> <div id="mylogo"> <a href="<?php site_url(); ?>"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="" /> </a> </div>
Cheers
PAE
there’s space for a URL on that new code I added, do i need that if I’m just using a desktop image?
It’s usual for a logo to point to the site it’s a log for, but it doesn’t have to. If you don’t want it to be a link, just use this:
<header id="branding" role="banner"> <div id="mylogo"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="" /> </div>
And I don’t know why you keep saying “desktop” image. I don’t understand what a desktop has to do with it.
Cheers
PAE
Yeah, I tried to the post the code normally, I knew that wasn’t the right way when I saw it…though I did use the code you suggested. It just didn’t display completely…instead of showing the URL bit, it just turned the rest of the line into a URL.
I put in the last code you suggested…
<header id="branding" role="banner"> <div id="mylogo"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="" /> </div>
Still, no change. I don’t have to put in dimensions or anything?
Well, the code on your site hasn’t changed from where it was originally. It still has the
<hgroup>
in there and everything. You *are* altering the code on the site, aren’t you? If not, I can’t see what the results are of what you’re doing.And if I can’t see the results, I can’t help.
Cheers
PAE
Turns out my child theme wasn’t even activated…ouch. So now I have the logo up, and I fixed the sizing.
Unfortunately, now the header picture is huge. How can I get it back to normal?
Upload a smaller version? Use something like the GIMP to resize the image.
Cheers
PAE
No Hang on! It’s your existing image that’s huge, isn’t it.
In your child theme you must have messed with the widths of the various parts of the page because everything is now at width 100% whereas it wants to be around about 1000px.
Cheers
PAE
- The topic ‘Putting a logo (from desktop image) on my Twenty Eleven header’ is closed to new replies.