Back to Community
Home / Community / Theme → Twenty eleven

How to Add and Customize a Logo in the Twenty Eleven Theme

26 threads Sep 16, 2025 Theme → Twenty eleven

Content

Adding a custom logo to the Twenty Eleven theme is a common request, but the process isn't always straightforward. This guide compiles the most effective methods and solutions from the community to help you successfully integrate your branding.

Why This Can Be Tricky

The Twenty Eleven theme is designed with a specific header structure. It primarily supports either a large, full-width header image or a text-based site title and description. There is no built-in 'logo upload' option in the Appearance → Header settings, which often leads users to seek custom coding solutions.

Important: Use a Child Theme

Before making any changes, the most critical step is to create a child theme. Modifying the parent Twenty Eleven theme directly is strongly discouraged, as your changes will be overwritten with every theme update. A child theme protects your customizations.

Common Solutions for Adding a Logo

1. CSS Background Image Replacement (Text Hiding)

This popular method hides the existing text title and replaces it with your logo as a background image. Add the following CSS to your child theme's style.css file:

h1#site-title span, h2#site-description {
    display: none;
}

h1#site-title a {
    background: url('path/to/your/logo.png') no-repeat;
    display: block;
    width: 350px; /* Width of your logo */
    height: 130px; /* Height of your logo */
    text-indent: -9999px; /* Hides the text */
}

Pros: The image is automatically linked to the homepage.
Cons: The logo may not be responsive and could appear cropped on different devices if the dimensions are fixed. Users have reported issues with alignment and mobile responsiveness using this method.

2. Directly Editing Header.php in a Child Theme

For more control, you can edit the header.php file in your child theme. Locate the <hgroup> section and insert your logo code. A common approach is to place it before the <hgroup> tags.

<img class="header-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Site Logo" />
<hgroup>
    <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" ...><?php bloginfo( 'name' ); ?></a></span></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

You can then use CSS to position the logo. To make it link to your homepage, wrap it in an anchor tag:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img class="header-logo" src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="Site Logo" />
</a>

3. Controlling Logo Size and Responsiveness

A frequent issue is that logos scale or behave unexpectedly on mobile devices.

  • To Prevent Scaling: Target your logo's class or ID in your CSS and assign it a fixed size. 
    .header-logo {
    width: 250px !important;
    height: 75px !important;
}
  • To Center a Logo: Use CSS margin properties. For a logo inserted as an <img> tag, try: 
    .header-logo {
    display: block;
    margin: 0 auto;
}

Troubleshooting Common Problems

  • Logo Not Linking to Homepage: Ensure your logo image is wrapped in the correct anchor tag with href="<?php echo esc_url( home_url( '/' ) ); ?>".
  • Logo Cropped or Misaligned: Double-check the width and height values in your CSS to ensure they match your image's dimensions exactly. Using background-size: contain; can help.
  • Mobile Responsiveness: Consider using CSS media queries to adjust the logo's size and position for different screen sizes.

Conclusion

While the Twenty Eleven theme doesn't have a one-click logo option, it is highly customizable through child themes and CSS. The CSS background method is quick but can be less flexible, while modifying the header.php file offers more control for positioning and responsiveness. Always remember to test your changes on different devices to ensure your logo looks great everywhere.

Related Support Threads Support