6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

How to put graphic logos into Wordpress headers?

by SageSound
4 replies
Most standard Wordpress themes seem to have a text field with the site's name as an Anchor tag to the home page, and the subtitle below it.

Is there a recommended way of replacing these header text blocks with a header graphic that's also tied to an anchor tag?

This is a fairly common header:

Code:
    <header>
        <h1 id="logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a> <span><?php bloginfo('description'); ?></span></h1>
        <nav>
            <ul id="nav">
                <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
                <?php wp_list_pages('title_li=&depth=1&include='); ?>
            </ul>
        </nav>
        <form method="get" id="search" action="<?php bloginfo('url'); ?>/">
            <input type="text" name="s" value="Search Keywords" onblur="if(this.value=='') this.value='Search Keywords';" onfocus="if(this.value=='Search Keywords') this.value='';" id="s" />
            <input type="submit" value="Search" id="searchsubmit" />
        </form>
    </header>
#graphic #headers #logos #put #wordpress
  • Profile picture of the author NK
    You could add the header image by using it as a background image for your header in your css. But what I would usually do is remove the text and add in my own banner complete with my site name and tagline. It looks more professional that way, and you can edit your text to look fancy as well
    Signature

    Affiliate Link Cloaking & Tracking Software - The most powerful tool available for affiliate marketers who are sick and tired of making way too little money!
    {{ DiscussionBoard.errors[1802992].message }}
  • Profile picture of the author MJ Sterling
    Code:
    <header>
        <h1 id="logo"><a href="<?php bloginfo('url'); ?>">
<img src="URL TO YOUR IMAGE HERE" alt="<?php bloginfo('name'); ?>"></a> <span><?php bloginfo('description'); ?>
 
</span></h1>
        <nav>
            <ul id="nav">
                <li<?php if(is_home()) echo ' class="current_page_item"' ?>><a href="<?php bloginfo('url'); ?>/">Home</a></li>
                <?php wp_list_pages('title_li=&depth=1&include='); ?>
            </ul>
        </nav>
        <form method="get" id="search" action="<?php bloginfo('url'); ?>/">
            <input type="text" name="s" value="Search Keywords" onblur="if(this.value=='') this.value='Search Keywords';" onfocus="if(this.value=='Search Keywords') this.value='';" id="s" />
            <input type="submit" value="Search" id="searchsubmit" />
        </form>
    </header>
    Could work.

    This is also SEO friendly because the image tag uses an alt, with your blog title in there as the anchor, wrapped around a H1 tag and also links back to your main page.

    That's one option.
    {{ DiscussionBoard.errors[1802997].message }}
  • Profile picture of the author SageSound
    Trying that, MJ, but it can't seem to find the images folder.
    {{ DiscussionBoard.errors[1803051].message }}
  • Profile picture of the author MJ Sterling
    You can put an image anywhere online, just paste in the location.
    {{ DiscussionBoard.errors[1807378].message }}

Trending Topics