WordPress.org

Ready to get started?Download WordPress

Forums

Putting a logo (from desktop image) on my Twenty Eleven header (19 posts)

  1. mobach18
    Member
    Posted 2 years ago #

    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>

  2. peredur
    Member
    Posted 2 years ago #

    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

  3. FazBuzzWP
    Member
    Posted 2 years ago #

    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.
    cheers

  4. mobach18
    Member
    Posted 2 years ago #

    Thanks 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 http://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 :P
    http://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.

  5. peredur
    Member
    Posted 2 years ago #

    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

  6. johann64
    Member
    Posted 2 years ago #

    see that:

  7. johann64
    Member
    Posted 2 years ago #

  8. mobach18
    Member
    Posted 2 years ago #

    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

    http://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="http://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">'

  9. mobach18
    Member
    Posted 2 years ago #

    there's space for a URL on that new code I added, do i need that if I'm just using a desktop image?

  10. peredur
    Member
    Posted 2 years ago #

    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

  11. peredur
    Member
    Posted 2 years ago #

    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

  12. mobach18
    Member
    Posted 2 years ago #

    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?

  13. peredur
    Member
    Posted 2 years ago #

    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

  14. mobach18
    Member
    Posted 2 years ago #

    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?

    http://www.alaqaba-village.org

  15. peredur
    Member
    Posted 2 years ago #

    Upload a smaller version? Use something like the GIMP to resize the image.

    Cheers

    PAE

  16. peredur
    Member
    Posted 2 years ago #

    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

  17. peredur
    Member
    Posted 2 years ago #

    You're missing a div in your code. Immediately inside the body, there should be this:

    <div id="page" class="hfeed">

    This is what establishes the page width, so you need to put it back.

    The fact that it isn't there is also causing your HTML to be invalid, because there's a closing tag for it in footer.php.

    Cheers

    PAE

  18. mobach18
    Member
    Posted 2 years ago #

    Got it! Thanks!!

  19. peredur
    Member
    Posted 2 years ago #

    De nada.

    PAE

Topic Closed

This topic has been closed to new replies.

About this Topic