Adding Logo to Blog

  • Resolved webmarketingmaven

    (@webmarketingmaven)


    13 years, 5 months 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

Viewing 15 replies - 1 through 15 (of 17 total)
1 2
  • jibbius

    (@jibbius)

    13 years, 5 months 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

    Thread Starter webmarketingmaven

    (@webmarketingmaven)

    13 years, 5 months 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. 🙂

    jibbius

    (@jibbius)

    13 years, 5 months ago

    no worries 🙂

    Thread Starter webmarketingmaven

    (@webmarketingmaven)

    13 years, 5 months 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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years, 5 months ago

    Are you working within a Child Theme?

    Thread Starter webmarketingmaven

    (@webmarketingmaven)

    13 years, 5 months 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.

    jibbius

    (@jibbius)

    13 years, 5 months ago

    yep, go with Andrew’s suggestion, and put this in a child theme.
    http://codex.ww.wp.xz.cn/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.

    jibbius

    (@jibbius)

    13 years, 5 months 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.ww.wp.xz.cn/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

    leejosepho

    (@leejosepho)

    13 years, 5 months 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.

    Thread Starter webmarketingmaven

    (@webmarketingmaven)

    13 years, 5 months 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.

    Thread Starter webmarketingmaven

    (@webmarketingmaven)

    13 years, 5 months 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

    jibbius

    (@jibbius)

    13 years, 5 months ago

    Hi webmarketingmaven,

    Refer here: http://codex.ww.wp.xz.cn/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.

    leejosepho

    (@leejosepho)

    13 years, 5 months 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”! 😉

    jibbius

    (@jibbius)

    13 years, 5 months 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

    Thread Starter webmarketingmaven

    (@webmarketingmaven)

    13 years, 4 months 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.

Viewing 15 replies - 1 through 15 (of 17 total)
1 2

The topic ‘Adding Logo to Blog’ is closed to new replies.

Tags