Morph Magazine

Adding a custom Logo to Slate Theme

by on Oct.29, 2010, under Wordpress

In this tutorial, we are going to look at how to add a custom logo image to the header section of the Slate theme. This is a topic that comes up regularly. If you are using the theme for a business, this is particularly important, as your logo is the centerpiece of good branding.

In order to follow this tutorial, you will need to have access to the server on which your WordPress platform is hosted. You will also need to create a logo image. If you are not comfortable with creating logos and would like assistance, feel free to contact us through the form at the bottom of the page. Let’s dig right in.

Using FileZilla or a similar program, access the root folder where your blog is hosted. Navigate to /wp-content/themes/slate/images. Upload you logo image here, and we are ready to jump into the code.

Open your WordPress admin panel and select the Editor option under Appearance. On the right side of the screen, you will see a list of the pages that make up the Slate theme. Select Header, which corresponds to the file header.php. Look for this code:

<div id="headertitle">
			<h1><?php bloginfo('name'); ?></h1>
		</div>
		<div id="tag">
			<?php bloginfo('description'); ?>
		</div>

This is the section of html that describes the elements at the top right of the screen. The container called headertitle contains the large blog title at the very top right of your blog. The container called tag contains the small blog description that is positioned directly below the title.

In this instance, I am going to replace both of these items with my new logo. You might decide that you would like to keep one or both of these and simply add the logo image, and that works just as well. We will look at how to do both.

Let’s create the code we will add to header.php to include the logo:

<div id="logo">
		<img src="<?php bloginfo('template_url'); ?>/images/slate-logo.png" alt="" height="66px" width="175" />
</div>

What we have created here is a container called logo that we will use to position the our image. The image tag includes the code ?php bloginfo('template_url');, which tells WordPress to look in the directory of the current theme, which, in this case, is Slate. The rest of the url is self evident, but do remember to change the name of the image file and the height and width to match the logo image that you uploaded.

In header.php add this code either with the existing header objects or in place of them. If you add the logo but keep the title and description, your code should look like this:

<div id="header">

                <div id="logo">
		<img src="<?php bloginfo('template_url'); ?>/images/slate-logo.png" alt="" height="66px" width="175" />
                </div>
		<div id="headertitle">
			<h1><?php bloginfo('name'); ?></h1>
		</div>
		<div id="tag">
			<?php bloginfo('description'); ?>
		</div>
		<div id="nav">
			<ul>

If, on the other hand, you would like to replace the title and description, you should finish with code like this:

<div id="header">

                <div id="logo">
		<img src="<?php bloginfo('template_url'); ?>/images/slate-logo.png" alt="" height="66px" width="175" />
                </div>
		<div id="nav">
			<ul>

Remember to replace my file names with yours! Okay, now let’s see what the visual effect has been. Here is the Slate demo site, with my new logo and without the title and description.
wordpress-tutorial-logo
I am reasonably happy with this, but what if I would rather position it on the right side of the header, where the blog title was before? To make these changes we will open the page called Stylesheet, which corresponds to the file style.css. Scroll down the page to until you see this code:

/*********************header*****************************/

#header {
        position:relative;
	width: 960px;
	height: 160px;
	margin: 0px auto 0px;
	}

#contenttop{
        position:absolute;
        bottom:0px;
        width:100%;
        height:21px;
        }

#headertitle {
        position:absolute;
        top:15px;
        right:20px;
	}

#headertitle h1{
        font: 50px Arial, Helvetica, sans-serif;
        color: #ffffff;
	}
#tag{
        position:absolute;
        top:70px;
        right:20px;
	color: #459dcb;
	font: 11px Arial, Helvetica, sans-serif;
        }

This is the CSS that describes the objects in the header. If you removed the blog title and blog description, you can delete #tag{everyting}, #headertitle {everyting}, #headertitle h1{everyting}. To position the logo image, we will style the logo container. This is what it should look like:

#logo {
        position:absolute;
        top:30px;
        right:30px;
	}

This tells the viewer’s browser to position the logo div 30 pixels from the top and 30 pixels from the right side of the div header. Depending on the size and shape of your image, you may choose to alter the positioning right-left, or top-bottom, to fit your needs. Here is the final effect:
wordpress-tutorial-logo-2


24 Comments for this entry

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...

Archives

All entries, chronologically...