Add logo to header
-
Hi Guys,
Im trying to add a logo instead of diplaying the header title.
Im not a coder but I do understand how it all fits together.
-
Link please to your site or at least the theme?
Generically you just add a
<img src="http://your-url/image.png" alt="" />to yourheader.phpfile or even do it in CSS. But knowing which theme you are specifically talking about helps.Hi,
Thanks for the response!
Im using the standard wordpress 3.3.1 twenty Eleven theme.
I thought that might be the case but I dont know at which line of code to add it – here the code:
<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>
and I dont know if I need to amend any PHP?
Thanks again
sorry wrong code above – this is the code:
<header id=”branding” role=”banner”>
<hgroup>
<h1 id=”site-title”><span>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></span></h1>
<h2 id=”site-description”><?php bloginfo( ‘description’ ); ?></h2>
</hgroup>Twenty Eleven… Let’s give it a shot, and I’ll recycle a response I gave out last week or before.
Im trying to add a logo instead of diplaying the header title.
First off, download this child theme for Twenty Eleven that Esmi considerately provided (it’s one of her many charms).
Once that’s installed in your
wp-content/themesdirectory, select the theme calledTwenty Eleven Child 2.0 by Mel Pedley A basic starter child theme for Twenty ElevenThe screenshot for that theme only looks like TwentyTen but it’s Twenty Eleven. 😉
One solution is to make the banner your logo and hide the text above it.
The normal Twenty Eleven has a text area for the title and search, followed by a graphical banner. The graphical banner can be replaced by an image that you upload such as a logo.
It’s a quick CSS solution an generally easier than editing PHP files.
In the
wp-content/themes/twentyeleven-childdirectory edit the style.css file and add these lines to the bottom.#branding hgroup { display: none; } input#s { background: #fafafa url(../twentyeleven/images/search.png) no-repeat 5px 6px; }The pastebin.com link for that file is here http://pastebin.com/zJ7vYCD8
This will hide the text and consequently move up the banner image (or your logo if you’ve uploaded one). It leaves the search field where it is but changes the background of the form so that you can still see it.
See if that works for you.
Ha! I followed my own instructions and didn’t notice that it did display the header as I thought it would. But the home page changed too and I totally missed that.
That download I suggested to you has some extra’s in it that will change how things diplay.
If you downloaded and installed that theme from Esmi’s site then do these additional steps:
In your
wp-content/themes/twentyeleven-child(the child directory and no where else) delete the following files:index.php pageofposts.php functions.phpLeave just the
style.cssfile remaining.If you didn’t download that zip file, then make a
wp-content/themes/twentyeleven-childand download thestyle.cssonly from http://pastebin.com/zJ7vYCD8Put that
style.cssfile in that new directory and you should be good to go.Hey thanks!
Ive managed to add the logo as a background image myself! Even with my limited knowledge of CSS (im getting better)
But that means the logo cant be clicked on to take you home!
Here’s the css
}
#site-title {
margin-right: 270px;
padding: 20px 0 0;width: 400px; /*added for logo image*/
height: 120px;/*added for logo image*/
position: relative;/*added for logo image*/}
#site-title span {/*added for logo image*/
background: url(“http://www.dogkennelsheathrow.co.uk/wp-content/uploads/2012/03/logo.jpg”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;}
#site-title a {
color: #111;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
display: none;/*added for logo image*/Is there anyway in this css I can add as an image with a link?
That’s a good logo too! The CSS is always tough for me.
But you still want to use a child theme else when Twenty Eleven get’s updated you’ll lose you changes.
Losing your work would not be fun.
After you’ve made a child theme (do you see a trend in my replies…?) copy the
wp-content/twentyeleven/header.phpfile towp-content/twentyeleven-childdirectory.Modify the copy starting at line 73 from this:
<hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup>to this
<hgroup> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"> <h1 id="site-title"><span></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </a> </hgroup>Which is admittedly a lot to look at. 🙂 Try this pastebin.com link instead.
That’s the entire updated copy of the file. That should make the
<h1>and<h2>into links.Thank you so much Jan!
I havent added as a child theme but will look to do this in the future – ive heard its quite easy.
The link works perfectly but I did add the closing before the opening <h2> tag as I didnt want the site-description to underline when hovering over the logo.
Thanks again!
- The topic ‘Add logo to header’ is closed to new replies.