WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding Logo to Blog (18 posts)

  1. webmarketingmaven
    Member
    Posted 1 year ago #

    Hello,

    I'd like to add a logo I had designed to my blog at http://www.quickwebsmarts.com. I'd like it to above the header (which I want to keep) where the title and tagline are currently. How do I do that?

    Here's what the header code looks like for the blogolife theme I've installed:

    <?php
    /**
     * The header template
     *
     * @package wplook
     * @subpackage BlogoLife
     * @since BlogoLife 1.0
     */
    ?>
    <?php global $options;
    foreach ($options as $value) {
    	if (isset($value['id']) && get_option( $value['id'] ) === FALSE && isset($value['std'])) {
    		$$value['id'] = $value['std'];
    	}
    	elseif (isset($value['id'])) { $$value['id'] = get_option( $value['id'] ); }
    }?>
    <!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php global $page, $paged;
    	wp_title( '', true, 'right' );
    	// Add the blog description for the home/front page.
    	$site_name = get_bloginfo( 'name', 'display' );
    	if ( $site_name && ( is_home() || is_front_page() ) )
    		echo " $site_name";
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'wplook' ), max( $paged, $page ) );
    	?></title>
    <?php wplook_meta_description();?>
    
    <meta name="keywords" content="<?php echo $wpl_meta_keywords; ?>" />
    <link rel="shortcut icon" href="<?php echo $wpl_favicon_url; ?>" />
    <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri() ?>/images/apple-touch-icon.png" />
    <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <?php echo stripslashes($wpl_ga_code); ?>
    <?php wp_head(); ?>
    	</head>
    <body <?php body_class('two-column right-sidebar'); ?>>
    <div id="page"<?php if (is_single() || is_page() ) { $sidebar = get_post_meta($post->ID,'wpl_enable_sidebar',true);  if($sidebar=="false") echo ' class="template-full-widch"'; } ?>>
    	<header id="branding">
    <hgroup class="fleft">
    	<h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
    	<h2 id="site-description"><?php bloginfo('description'); ?></h2>
    </hgroup>
    <div class="header-desc fright"><p><?php echo stripslashes($wpl_header_desc); ?></p></div>
    <div class="clear"></div>
    <div class="social-icons fright">
    
    <?php if ($wpl_twitter != '') { ?>
    <a href="<?php echo $wpl_twitter; ?>" target="_blank" title="<?php _e('Twitter', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/twitter.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_google_plus != '') { ?>
    <a href="<?php echo $wpl_google_plus; ?>" target="_blank" title="<?php _e('Google +', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/google-plus.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_facebook != '') { ?>
    <a href="<?php echo $wpl_facebook; ?>" target="_blank" title="<?php _e('FaceBook', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/facebook.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_linkedin != '') { ?>
    <a href="<?php echo $wpl_linkedin; ?>" target="_blank" title="<?php _e('Linkedin', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/icons/linkedin.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_tumblr != '') {	?>
    <a href="<?php echo $wpl_tumblr; ?>" target="_blank" title="<?php _e('Tumblr', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/tumblr.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_delicious != '') {	?>
    <a href="<?php echo $wpl_delicious; ?>" target="_blank" target="_blank" title="<?php _e('Delicious', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/delicious.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_digg != '') {	?>
    <a href="<?php echo $wpl_digg; ?>" target="_blank" title="<?php _e('Digg', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/digg.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_stumbleupon != '') {	?>
    <a href="<?php echo $wpl_stumbleupon; ?>" target="_blank" title="<?php _e('Stumbleupon', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/stumbleupon.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_flickr != '') {	?>
    <a href="<?php echo $wpl_flickr; ?>" target="_blank"  title="<?php _e('Flickr', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/flickr.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_picasa != '') {	?>
    <a href="<?php echo $wpl_picasa; ?>" target="_blank" title="<?php _e('Picasa', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/picasa.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_youtube != '') {	?>
    <a href="<?php echo $wpl_youtube; ?>" target="_blank" title="<?php _e('YouTube', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/youtube.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_dribbble != '') {	?>
    <a href="<?php echo $wpl_dribbble; ?>" target="_blank" title="<?php _e('Dribble', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/dribbble.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_rss != '') { ?>
    <a href="<?php echo $wpl_rss; ?>" target="_blank" title="<?php _e('Subscribe to RSS', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/rss.png" width="22" height="22" /></a>
    <?php } ?>
    <?php if ($wpl_pinterest != '') { ?>
    <a href="<?php echo $wpl_pinterest; ?>" target="_blank" title="<?php _e('Pinterest', 'wplook'); ?>"><img src="<?php echo get_template_directory_uri() ?>/images/icons/pinterest.png" width="22" height="22" /></a>
    <?php } ?>
    </div><div class="clear"></div>
    </header>
    
    <?php if ($wpl_menu == '' || $wpl_menu == 'Display') { ?>
    <nav>
    	<?php wp_nav_menu( array('depth' => '3', 'theme_location' => 'primary' )); ?>
    	<div class="left-corner"></div>
    	<div class="right-corner"></div>
    </nav>
    <?php } ?>
    <div id="header-image">
    			<?php
    				// Check to see if the header image has been removed
    				$header_image = get_header_image();
    				if ( $header_image ) :
    				$header_image_width = get_theme_support( 'custom-header', 'width' );
    			?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    				<?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, 'ch-images' );
    					else :
    						// Compatibility with versions of WordPress prior to 3.4.
    
    							$header_image_width  = get_custom_header()->width;
    							$header_image_height = get_custom_header()->height;
    
    						?>
    					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="<?php bloginfo('name'); ?> - <?php bloginfo('description'); ?>" />
    				<?php endif; // end check for featured image or standard header ?>
    
    			</a>
    			<?php endif; // end check for removed header image ?>
    			<?php // Has the text been hidden?
    				if ( 'blank' == get_header_textcolor() ) :
    			?>
    <?php endif; ?>
    </div>
    <div id="main">

    Thanks.

    Dee

  2. jibbius
    Member
    Posted 1 year ago #

    I'd check your theme's settings pages, to make sure the feature is not already catered for somewhere.

    If you do need to manipulate the header file, I would be adding the code right after <div id="header-image">.

    Have a look at this resource, which shows you how to insert images in html:
    http://www.w3schools.com/tags/tag_img.asp

  3. webmarketingmaven
    Member
    Posted 1 year ago #

    Thank you, jibbius. I'll check that out and let you know if I have any additional questions or if I can work it out on my own. :)

  4. jibbius
    Member
    Posted 1 year ago #

    no worries :)

  5. webmarketingmaven
    Member
    Posted 1 year ago #

    jibbius, I tried it and it works GREAT but it puts the logo image below the nav bar and just above the header. I guess I wasn't clear enough. I want it above the nav bar in place of the text, "Get Quick Web Smarts!"

    How do I achieve that? There's no apparent file in editor for the nav bar. Which code do I need to post here to get help placing this snippet of HTML code in the right place?

    Thanks.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you working within a Child Theme?

  7. webmarketingmaven
    Member
    Posted 1 year ago #

    No, Andrew. Should I be? And, if so, how do I create one that preserves the changes I've already made to the content (none to theme itself)?

    FYI: I've hosted this on GoDaddy and installed WordPress in a folder.

    Thanks.

  8. jibbius
    Member
    Posted 1 year ago #

    yep, go with Andrew's suggestion, and put this in a child theme.
    http://codex.wordpress.org/Child_Themes

    Your content will be unaffected by changes to the theme (although you may need to re-enter some config settings).

    After you've done this, copy the existing header.php into the child theme, and you can play to your heart's content, without the fear of future theme updates affecting you.

    You may want to try using Chrome's web developer extension.
    Or Firebug for Firefox.

    These will let you play with the code within the browser, rather than on the server. Once you are happy you can remember what you changed, and then implement this.

  9. jibbius
    Member
    Posted 1 year ago #

    You could replace this:

    <header id="branding">
    <hgroup class="fleft">
    	<h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
    	<h2 id="site-description"><?php bloginfo('description'); ?></h2>
    </hgroup>

    With this:

    <header id="branding">
    <hgroup class="fleft">
    	<h1 id="site-title">
    		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>" rel="home">
    			<img src="http://s.wordpress.org/style/images/wp-header-logo.png?2" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?> - <?php bloginfo('description'); ?>"/>
    		</a>
    	</h1>
    	<h2 id="site-description"><?php bloginfo('description'); ?></h2>
    </hgroup>

    (note: I've added extra indentation for readability, you do not to use all the TAB characters I have inserted).

    This is not the only method.
    There are other options listed here: http://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility

  10. leejosepho
    Member
    Posted 1 year ago #

    how do I create [a Child Theme] that preserves the changes I've already made to the content (none to theme itself)?

    There are only two lines that are absolutely required at the top to make a style.css for a Child Theme, and you could copy as much of your current file as you wish into that. After/when your Child Threme has been activated, WordPress will read yours and get whatever else it needs from the other.

  11. webmarketingmaven
    Member
    Posted 1 year ago #

    Thanks, jibbius. I'm going to do all of these things. But, first, to be clear on a few of them.

    First, if I create this child theme, will I have to migrate all of the site's content into the new directory?

    Next, do I copy the existing header.php from the header file in the editor?

    Also, to your second post, where is the code you're referring to? In style.css or header.css?

    Finally, I've never used either of these extensions but I'm a fast learner so I'll figure it out.

    Thanks for your help. I'll let you know how it goes.

  12. webmarketingmaven
    Member
    Posted 1 year ago #

    Lee,

    Thank you for your response. You said:

    There are only two lines that are absolutely required at the top to make a style.css for a Child Theme, and you could copy as much of your current file as you wish into that. After/when your Child Threme has been activated, WordPress will read yours and get whatever else it needs from the other.

    Which two lines of code do I need to copy and where do I copy them from/to?

    Dee

  13. jibbius
    Member
    Posted 1 year ago #

    Hi webmarketingmaven,

    Refer here: http://codex.wordpress.org/Child_Themes

    Put simply:
    - Create a new directory for your child theme (e.g. wp-content/themes/childtheme/)
    - Add a style.css file to this directory; with this content except for your current theme, not twenty12:

    /*
    Theme Name: Twentytwelve Child
    Description: Child theme for the twentytwelve theme
    Author: Your name here
    Template: twentytwelve
    */
    
    @import url("../twentytwelve/style.css");

    - Copy header.php into this directory.
    - Make your changes to header.php as required.

    In theory you should need nothing else, but some themes have exceptions to this.

  14. leejosepho
    Member
    Posted 1 year ago #

    The (three, oops!) lines you *must* have are not in your present style.css:

    /*
    Theme Name: Twenty Twelve Child
    Template: twentytwelve
    */
    @import url("../twentytwelve/style.css");

    Copy as much of the other into that as you wish (but nothing from the top), and put copies of any modified .php files into the Child Theme folder also. And to do all of that, I would first download and activate a completely-fresh copy of the Parent Theme because you should never modify anything other than a Child Theme and your Child Theme needs a "perfect parent"! ;)

  15. jibbius
    Member
    Posted 1 year ago #

    First, if I create this child theme, will I have to migrate all of the site's content into the new directory?

    No - just create style.css and copy header.php.
    You create this directory within your existing wp install.

    Next, do I copy the existing header.php from the header file in the editor?

    You should create these files/folders using an FTP client, such as Filezilla.

    Also, to your second post, where is the code you're referring to? In style.css or header.css?

    header.php

  16. webmarketingmaven
    Member
    Posted 1 year ago #

    I appreciate all of your help. I started to do what some of you suggested but then realized that all I want to do is add the logo to the top of the website above the navigation bar. I don't want to make any other changes to the site and this one change should be a problem to make without creating a child template. I thought it would be as simple as adding the "img src" tag to the right file.

    Moreover, I'm on shared hosting so I'm not sure doing anything using FTP is necessary.

    What's the easiest way to do that? Where do I add the code or HTML tag? Thanks.

  17. jibbius
    Member
    Posted 1 year ago #

    Refer my comment commencing "You could replace this:"
    I believe you will find that code in header.php

    Use your own <img src= parameter. You can use any image url. Even.an image uploaded via the media uploader.

    If you don't have FTP access / confidence, be very careful. You could very easily break the site and not be able to get back in.

  18. webmarketingmaven
    Member
    Posted 1 year ago #

    Thanks everyone. We brought on some people who can help us with these kinds of things from now on. But, thank you for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic