Things are coming along with our theme transformation, in this part we will deal with the logo, the logo that comes with the theme is nice but it does not belong to our website, we can just replace the logo in the images folder and upload it to our website.

We think that a better option is to empower the theme’s administrator to upload a new logo from the media menu and link to this, if we are producing a theme that is downloadable or we want to use on a few websites then linking to a logo might be preferred.

The Logo

If we look in the images folder we can see the header-object.png file, this is 254px wide by  100px wide and if opened in an image editing application we can see that it has a transparent background.

Download the files for Investica Part Six: Investica Part Six (379)

We use Adobe Photoshop in the screenshot but if you do not have a commercial package to edit images then there are a number of products, a popular free product is called Gimp this has many features found in the commercial products.

options.php

Our first change is to add a theme option where the administrator can add the url of the new logo, to do this we navigate to the /library/ folder and locate and open the options.php file, we want to add our option in the header section.

We add the new option with the ‘id’ of theme_header_logo_url and with a ‘type’ of text just before the Navigation Array:

/* Add the Logo URL to the Theme Options */
array(
'id'    =>    'theme_header_logo_url',
'name'    =>    __('Custom Logo URL', THEME_NS),
'desc'    =>    __('Logo Image Width: 254px Height: 100px', THEME_NS),
'type'    =>    'text'
),

Our header section now looks like this:

array(
'name'    =>    __('Header', THEME_NS),
'type'    =>    'heading'
),
array(
'id'    =>    'theme_header_show_headline',
'name'    =>    __('Show headline', THEME_NS),
'desc'    =>    __('Yes', THEME_NS),
'type'    =>    'checkbox'
),
array(
'id'    =>    'theme_header_show_slogan',
'name'    =>    __('Show slogan', THEME_NS),
'desc'    =>    __('Yes', THEME_NS),
'type'    =>    'checkbox'
),
/* Add the Logo URL to the Theme Options */
array(
'id'    =>    'theme_header_logo_url',
'name'    =>    __('Custom Logo URL', THEME_NS),
'desc'    =>    __('Logo Image Width: 254px Height: 100px', THEME_NS),
'type'    =>    'text'
),

header.php

The logo is set in the style.css for the theme element <div class=”art-headerobject”></div>, what we will do is change the image only if a url has been entered, we do this by populating a string variable, if this has no value then the default logo will be used.

We will insert our code between these three lines replacing the second line, open header.php from the main theme folder and find the lines:

<div class="art-header-inner">
        <div class="art-headerobject"</div>
        <div class="art-logo">

We insert or code after the first line, the if statement looks to see if there is a new logo url, if there is we create an inline style to override the one in the stylesheet, note: that we do not make any checks on the size of the logo.

<div class="art-header-inner">
    <?php /* Do we have a custom Logo URL */
        if( theme_get_option('theme_header_logo_url') ){
            $style= 'style="background: url(' .theme_get_option('theme_header_logo_url') .') no-repeat scroll left top transparent;"';
        }else{
            $style='';
        }
        ?>
        <?php /* add the custom logo or nothing */ ?>
        <div class="art-headerobject" <?php echo $style; ?> ></div>
        <div class="art-logo">

Adding a Logo

To add a logo we visit the WordPress Admin > Media > Add New and upload our new logo, we make sure we have the right size, and copy the File URL to the clipboard.

Next we open the Artisteer Theme Options page from Admin > Appearance > Theme Options, we paste in the Custom Logo URL and at the foot of the page choose to Save Options

And here is our new website logo, you can see this on the test website:

We have included the new logo in the download so we can test, in the next part we will be adding the first of our banners, this will be a single wide banner.