Storefront “Elegance” theme, add a custom link to the header logo.

Posted by on Dec 4, 2011 in Blog, Elegance, Storefront Themes, Themes, Wordpress, WP e-Commerce | 2 Comments

The hardcode way.

The logo you upload via the Storefront Options panel/Style tab is by default a link to the root of your site. What if you want it to link to somewhere else? Well that is pretty simple but does involve a little PHP. Show no fear and jump in even if you have never done it before.
New to PHP editing? see the Tools note at the end of this post

The line numbers here may change in other versions but I show enough code for you to be able to find the relevant parts, the code probably will not change much. You will need to maintain the PHP file when there are theme updates so keep a copy of it and what changes you made. On to the good stuff, you need to edit header.php which is in your theme folder. First make a backup copy of this file somewhere!

You just need to hard code in your link where the theme would normally call bloginfo which is where WordPress stores the root of your site. I told you it was easy.

<body <?php body_class(); ?>>

<div id="wrapper">
   
	<div id="header" class="container_24">
       
		<div id="logo" class="grid_24">
	       
		<?php if ( $storefront_options['storefront_logo'] ) { ?>
            <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"><img src="<?php echo $storefront_options['storefront_logo']; ?>" /></a>
        <?php } else { ?>
        	<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>"><img class="title" src="<?php bloginfo('template_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /></a>
        <?php } ?>
	      	
		</div><!-- /#logo -->

Change this

line 65 approximately, the line highlighted above should be changed to something like this, this leads to my site, add you URL and description. Just put your link between those first set of ” ” for href.

<?php if ( $storefront_options['storefront_logo'] ) { ?>
            <a href="http://gasolicious.com/" title="<?php bloginfo('description'); ?>"><img src="<?php echo $storefront_options['storefront_logo']; ?>" /></a>
        <?php } else { ?>

Close and save the file. You should be done. Remember if you mess up just replace the file with that backup copy you saved. You did save one right!

The more adaptable plugin way

Now the method above is fine but what if you want to change that link on a regular basis? Wouldn’t it be nice if you could so that without editing your header.php file? What if you wanted to have different links on different pages? No way without a bunch of awful PHP if statements. Wouldn’t it be nicer if you just had a field to enter the URL in your WordPress backend? Time for a plugin, this plugin, Advanced Custom Fields

Get the plugin and install it. You can just search its full name in the plugins screen, it should be the first one.
Go to the Advanced Custom Fields website for excellent detailed examples, how to videos and documentation.

Creating your custom field.

Go to Settings you should see a new item Adv Custom Fields, click it.
Follow these steps in the Advanced Custom Fields screen….

  1. Click “Add New”
  2. Enter a title “Logo Link” for the field group, in this case we will be making only 1 field
  3. Click “+Add Field”
  4. Give it a Field Label which will appear in your WordPress backend, “Header Logo Links to”
  5. Click in the “Field Name” field, it should autofill with “header_logo_links_to”
  6. For “Field Type” select Text from the drop down list
  7. Leave “Default Value” blank, I could not get this to work.
  8. Set “Formatting” to None
  9. For field instructions enter soem simple instructions for the user, for example “Add a URL here that will be launched when the header logo is clicked.”
  10. Click “Save Field”
  11. Below the Field panel is the Location panel, set the 3 dropdowns to say “Page” “is equal to” “Home” (assuming you have your front page set to be a page named “Home”)
  12. Beneath those 3 set the dropdown to, match “all” of the above
  13. Leave the rest of the fields as they are.
  14. Click “Update”

Now you have a text field that will only appear in the WordPress backend when you edit the page called Home. Go and have a look. It should not appear for any other page.

Adding it to your theme.

First we need to know something about our “Home” page. Open your site in a browser, if you have Firefox and Firebug inspect the page code and find the body tag. If you do not have Firebug, you should, but you can select somewhere on the menu of all browsers to “inspect page source”, you will be able to find the body tag. It will start something like this

<body class="home page page-id-117 page-template page-template-tpl-homepage-php

Write down that page id number for your home page, it will most likely be different on your site.

Now back to Header.php we go. We will be editing the same line of code. We want to use the value in the custom field on our home page as the URL to link to when the logo is clicked. We will need the page id number to tell our PHP that it should use the value in the Home page text field as the link for all pages. Without this it would only work on the Home page. Our PHP should look like this, calling the text field by the name we gave it and identifying the page it is on by number.

<?php if ( $storefront_options['storefront_logo'] ) { ?>
            <a href="<?php the_field('header_logo_links_to', '133'); ?>" title="<?php bloginfo('description'); ?>"><img src="<?php echo $storefront_options['storefront_logo']; ?>" /></a>
        <?php } else { ?>

What if I want to have different links from different pages?

really your not happy yet! OK, I think you may even be able to see the answer yourself, but lets make it clear. At step 11 above you will do something different. There are many options which you can arrange to achieve the desired result. For example, if you wanted to have the ability to set a different URL on all Pages (as opposed to Posts) you woud set the 4 dropdowns to say…
“Post Type is equal to page match all of the above”
Click Update, now all of your Pages should have a text field to enter a URL.

Now lets get crazy, how about we set the first dropdown to “Taxonomy” second one “is equal to” now choose a product category from the third dropdown. Click Update. Now any product in that Category has a Link text field. Thats right you could have every product in that category link to a different location! You could even have every product have its own logo link…
“Post Type” “is equal to” “wpsc-product” “match all of the above”

You can click the little + sign to the right of the drop downs to add a rule..
so rule 1 could be, “Page” “is equal to” “Home”
and rule 2 “page parent” “is equal to” “Products Page”
Now your link will work on the Home page and any product page.
Remember you can say “is not equal to” to exclude pages or post types etc.
You can set up more than one field group. So you could assign one to all product pages, and a different field for all regular pages.

OK enough of the limitless possibilities, I can’t possibly cover them all. lets get that PHP setup so it does not use the home link everywhere. Yes it is pretty obvious, just leave out that page id. Of course now any page that does not have a link field will have no logo link. We coud wrap it all in a PHP if statement and use the WordPress one when there is not a custom one present. Maybe I will add that to this post another day.

<?php if ( $storefront_options['storefront_logo'] ) { ?>
            <a href="<?php the_field('header_logo_links_to'); ?>" title="<?php bloginfo('description'); ?>"><img src="<?php echo $storefront_options['storefront_logo']; ?>" /></a>
        <?php } else { ?>

That’s it folks, enjoy linking mania.

Tools:

Edit the PHP file with a code editor. You may also edit custom.css outside WordPress and upload it to your server. You must use an appropriate code editor NOT Microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

2 Comments

  1. remote control helicopter
    December 11, 2011

    I suggest adding a “google+” button for the blog!
    Hellen

    Reply
  2. Nativity scenes for sale
    December 7, 2011

    Mate, this is good piece of writing.

    Reply

Leave a Reply