Support » How-To and Troubleshooting » adding logo to header

adding logo to header

Viewing 15 replies - 1 through 15 (of 18 total)
  • Can anyone help with this.



    Forum Moderator

    A link to your site would help.

    If you are using the default theme, see the following videos.

    How to Edit the Kubrick WordPress Theme



    Hi guys, I’ve been trying to add my logo to my site..


    but unfortunately, I can’t! please help me out..

    I’m trying to Replace my Blog title For a Logo title which gives a link to the homepage of my blog.. i’ve search everywhere but I still can’t figure it out..

    here’s my headercode btw..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <?php bloginfo('name'); ?>
    <?php if(is_home()) { ?>
     - <?php bloginfo('description'); ?>
    <?php } ?>
    <?php if(is_single()) { ?>
    <?php wp_title(); ?>
    <?php } ?>
    <?php if(is_404()) { ?>
     - Page Not Found
    <?php } ?>
    <?php if(is_search()) { ?>
     - Search Results for: <?php echo wp_specialchars($s, 1); ?>
    <?php } ?>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <script src="<?php bloginfo('template_directory'); ?>/js/tabcontent.js" type="text/javascript"></script>
    <?php wp_head(); ?>
    <meta name="verify-v1" content="wSM5djJ25xgmaomggosxkskju1nrzSIS1uaEfQBXhJA=" />
    <link rel="shortcut icon" href="favicon.ico" >
    <!-- Start of StatCounter Code -->
    <script type="text/javascript">
    var sc_project=5137656;
    var sc_invisible=1;
    var sc_partition=58;
    var sc_click_stat=1;
    var sc_security="b2e0bb50";
    <script type="text/javascript"
    class="statcounter"><a title="wordpress analytics"
    target="_blank"><img class="statcounter"
    alt="wordpress analytics" ></a></div></noscript>
    <!-- End of StatCounter Code -->
    <div id="container">
    <!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->
    <div id="header">
    	<div id="pagenav">
    	<li<?php if(!is_page() ) { ?> class="current_page_item"<?php } ?>><a href="<?php bloginfo('home'); ?>">Home</a></li>
    	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
    	<div id="searchform">
    	<form method="get" action="<?php bloginfo('url'); ?>/">
    	<label><?php _e('Blog Search'); ?></label>
    	<input type="text" value="<?php the_search_query(); ?>" name="s" id="searchinput" />
    	<input type="submit" value="GO" id="searchbutton" />
    	<div id="logo">
    	<h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
    	<div class="description"><?php bloginfo('description'); ?></div>
    	<?php include('about.php'); ?>
    <div class="clear"></div>
    <!-- ^^^^^^^^^^^^^^ header code ^^^^^^^^^^^^^^ -->

    Inside of the <div id=”logo”> replace the <h1> and the <div class=”description” with this:

    <a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" title="<?php bloginfo('name'); ?>" alt="" /></a>

    Upload your logo to the images folder in your theme and it should find it.



    hi, thanks for the instructions..

    but I’m still having problems.. the title was gone but my logo is “not showing up” please help..


    please be forgive as I am new to these kinds of stuff.


    Ok did you upload the logo to your wp-content/themes/yourtheme/images/ folder? Or is the images folder called something else? And what exactly is the logo named as? If it’s not logo.png like in the example above it won’t show. You’ll have to change the image name and extension to match your own.



    thanks jessn, I changed png to gif..

    but it’s not “mixing up” to the header well.. what should i do next?



    hi, jessn..

    thanks.. I already figured it out..

    thank you so much for the time!


    Good job! Ok in your stylesheet you have this:

    #logo {
    	float: left;
    	display: inline;
    	margin-top: 50px;
    	margin-left: 20px;
    	margin-right: 20px;
    	padding-right: 40px;
    	padding-left: 28px;
    	border-right: 1px dashed #ccc;
    	background-position: left 0px;

    I’d start with trying to shrink down the size of the top margin from 50 to maybe 20, or 0, depending on what the theme needs. Maybe taking off the left padding too to line it up with the menu buttons.



    jessn, Last question.. (for today) ^_^

    how do I adjust these?

    I uploaded screenshots below:

    You want to get rid of the blue spacing? That looks like something that has to do with spacing between your header div, and the column/sidebar divs. The first thing that jumps out at me when looking at your source code is there’s an empty div id=”about” just after your header. That might be shoving the columns down a bit.

    <div id="about">

    I don’t know if you use that space for anything elsewhere on your site…

    Other than that I can’t really see any reason in your stylesheet for those to be moving down. What you can try to do is give the column and sidebar divs a negative top margin to pull them up;

    #column {
    	float: left;
    	width: 540px;
            margin-top:-30px; /* add this line in */
    	margin-right: 20px;
    	border-top: 5px solid #3f4c6b;
    #sidebar {
    	float: left;
            margin-top:-30px; /* add this line in */
    	width: 420px;
    	border-top: 5px solid #3f4c6b;


    jessn, waaaaa.. I hope you receive this message..

    first of all THANK YOU VERY MUCH..
    the instructions you gave me was overall brilliant. and I can’t believe someone like you actually exist… =D


    I am trying to add a Leaderboard ad unit beside the logo of my blog which
    I made screenshots of how I want it below:

    The problem is, I don’t know how..!! waaa..
    please help me out..

    I would really appreciate it..

    You’re welcome!

    K, I’d do it like this: In your header.php file add the “ads” div after the logo div.

    <div id="logo">
    	<a href="http://www.elie-palima.com/"><img src="http://www.elie-palima.com/wp-content/themes/freeblog/images/logo.gif" title="Make Money Online | I'm Pinoy and I make money online | elie-palima.com" alt="" /></a></div>
    <div id="ads">
    ad stuff here

    Then in your stylesheet:

    #ads {
    	float: left;
    	display: inline;
    	margin-top: 8px;
    	margin-left: 20px;
            width:250px; /* or whatever the width should be */

    If that doesn’t align properly come back and let me know. You might need to wrap them both in a wrapper div…



    wow. You did it! =D

    but yeah, it did not align properly and the ad is too big

    edit: it aligned properly, the ad is just too big to fit, Nwei,

    Jessn, your legend man, Thanks a bunch!

    where’s your website btw?

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘adding logo to header’ is closed to new replies.