Setting up your logo or site title

Logos are the most varied of all elements because every business has such a wide range of sizes, shapes, and colours. The Title/Logo for this theme is currently using the default WordPress title and description setup and loads into the theme as text using an H1 and H2 tag respectively.

If you decide to totally remove the automatic text for the title and description plus use a larger logo, you will have some editing to do with the header.php file and the style.css file as well. Right now the file has this coding around line 115 which starts with:

/* Primary containers */

If you decide to use the default title and description that WordPress loads, then this is already done for you in the header.php file which you should see this:

<div id="title"><h1><?php bloginfo('name'); ?> <? php // if (!function_exists('dynamic_sidebar') 
|| !dynamic_sidebar('Logo')) :
?>
<? php
// endif; ?></h1></div>
<div id="slogan"><h2><? php bloginfo('description'); ?></h2></div>

You will notice above that there is a lot of strange looking code and this is coded to give you two options of using a title or logo (along with the site description or slogan). The first part is the default code that loads the title by default whereas the <?php followed by the orange text is if you decide to use a text widget to load an image logo or other (more on this later). The last line is what loads the blog description of WordPress – or what I call the slogan.

Option One – Using CSS to load your logo:

The style for the logo is at line 118 in the style.css file and looks like this:

#title {width:auto; float:left; padding-right:25px;}
  1. Upload your logo to the themes/persistence/images/ folder and update the code above by adding background: transparent url(images/yourlogo.jpg) no-repeat; to it. Note: your logo might be titled differently and could be a .gif or png format. See how it looks and make any css adjustments to position it.

Option Two – Using a Text Widget to load your logo:

If you are including your business description slogan to the logo image and won’t be using the default text based title and description. You will have some coding to do here to the header.php file. Look for this code:

<div id="title"><h1><?php bloginfo('name'); ?> <?php // if (!function_exists('dynamic_sidebar') 
|| !dynamic_sidebar('Logo')) :
?>
<?php
// endif; ?></h1></div>
<div id="slogan"><h2><?php bloginfo('description'); ?></h2></div>

You will notice some orange text here that is a result of typing in the // just after the php parts. This is called commenting out the code so it’s not seen or active. What we have to do here is to change this around so that the default now becomes commented out and the other part becomes active. I know, it would be nice to do this automatically. So update the code as you see below:

<div id="title"><h1><?php // bloginfo('name'); ?> <?php if (!function_exists('dynamic_sidebar') 
|| !dynamic_sidebar('Logo')) : ?>
endif; PHP-->
</h1></div>
<div id="slogan"><h2><?php bloginfo('description'); ?></h2></div>

*Noticed I moved the two forward slashes // to the first part just after the php and before the bloginfo and also removed the // from the last part that was before the endif code? Now this is active and the bloginfo(‘name’) is now inactive. So if this worked, pat yourself on the back for doing some php coding!

  1. Go to your widget manager and drag a text widget to the logo widget position and then add this code where the “yourimagelink” is the link you copied after uploading your logo and don’t forget to add your alt tag info, width, and height of your logo:
    <img src=”yourimagelink” alt=”some keywords here” height=”” width=”” />

If you want to keep your slogan there, you don’t need to do anything to the slogan code but if you want that gone, simply remove the last line of code.

By | 2010-09-25T01:26:14+00:00 September 25th, 2010|Blog|0 Comments

About the Author:

Leave a Reply