USP has been working closely with the Bolton based insurers over the past twelve months creating a brand identity that embodies the unique qualities of the company.

The brand refresh features Stanley the Bear as the hero, reflecting the caring, approachable values of the company and creating an affinity with the Childcare and Early Years Sector that are central to the business. All external communications are backed by strong, vibrant colours, including advertising, website, marketing materials and company collateral, to make the brand and company stand out in a competitive marketplace.

The dot2dot website which was also designed and built by USP Creative features intelligence that changes content depending on if the site is visited either in or out of office hours, tailoring the user experience based on the time of day. The site has been designed to maximise user engagement with interactive Stanley’s reinforcing the brand message and personality.

Following on from the successful refresh, USP Creative and dot2dot are continuing their working partnership with USP acting as the retained creative and marketing agency for the insurers.

There are a number of solutions, some of which include splitting the header, content, and footer once you’re happy with the theme. The problem with this approach comes when you’re working on a layout that has many theme pages. My solution is to trick dreamweaver, which gives us full preview and ability to edit the style.css page.

Step 1 – Preparing header.php

This is where it all starts, header.php. Stylesheets are called using ‘bloginfo(‘stylesheet_url’)', which as you can see in the screenshot below doesn’t give a preview. Furthermore, we can’t use the CSS pane to edit the stylesheet.

The line we’re looking to change is the one which relates to the link tag for the stylesheet. We could just tell Dreamweaver to directly reference the style.css, but we don’t want to do that – because we’re building properly! This is good practice for those rare occasions where a theme’s folder may change for example.

We’re going to change:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> 

to:

<?php if ($edit) { ?>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<?php } else echo '<link rel="stylesheet" type="text/css" media="all" href="'.get_bloginfo( 'stylesheet_url' ).'" />'; ?>

By using the <?php if ($edit) { ?> and calling the stylesheet, Dreamweaver is able to read and edit the stylesheet. When we upload this to the web server, PHP ignores the manual call that dreamweaver uses because $edit variable is not set and instead uses the call to ‘get_bloginfo()’ instead.

Now you can edit and preview the changes in Dreamweaver without having to upload it to the web server.

Step 2 – The template file

The next thing we’re going to do is trick dreamweaver in a similar way when we’re working with template files. In this example, I’m going to use ‘front-page.php’, and applying a similar fix we can work directly to the stylesheet and preview the changes before uploading. Furthermore the fix also includes the header and footer sections into the preview, allowing a fuller previewing experience.

The first thing we’re going to do is replace:

<?php get_header(); ?> 

With:

<?php if ($edit) { ?>
<?php require('header.php'); ?>
<link type="text/css" rel="stylesheet" href="style.css" />
<?php } else get_header(); ?>

In the same way that we applied the fix in step 1, by using a dummy variable we know is blank, we can use the require() function to pull in the content from header.php and use a link tag to allow editing of the stylesheet directly.

As we know the variable ‘$edit’ has no value, the web server ignores the require() and the link tag, and uses ‘get_header()’ instead to call the header content.

The screenshot above shows the preview of the site on the right which includes the ability to edit the style.css from the design view. The last thing we’re going to do is replace

<?php get_footer(); ?> 

With:

<?php if ($edit) { ?>
<?php require('footer.php'); ?>
<?php } else get_footer(); ?>

This applies the fix in the exact same way to call our footer from within the template file.

Step 3 – The footer.php file

Finally, we’re adding 3 lines to the footer file to use the link tag to the stylesheet to allow previewing in Dreamweaver, as well as editing of the ‘style.css’ file within the Design view.

All we need to do is call the same dummy variable, which tricks Dreamweaver into using the tags contained within the call. Simply insert the following to the top of your footer.php file:

<?php if ($edit) { ?>
<link type="text/css" href="style.css" rel="stylesheet" />
<?php } ?>

That’s it! You now have the ability to directly change the styles.css file from Design view, preview full template files, and all of this without breaking anything in WordPress!

The Author

Ste Wright is the Web Applications Developer at USP Creative, and author of this post.

FOOD WON!

The wallplanner is part of the dot2dot brand refresh that USP Creative has been working on this year- we can’t wait to show you the relaunched website next year!

Stanley enjoying his summer holidays.

He was commissioned, and given range of the Port Sunlight research and development centre.

‘The result is a three-part exhibition, featuring a series of photographic images interlinked with key words, an installation and a short film, which consisted of ‘moving stills’.
The exhibition will remain at the facility until the New Year. It will then transfer to the Bluecoat in Liverpool in Spring on a date yet to be determined.’

To read more visit his click here to see his blog
To see the images of this project and more of his projects click here to visit his website

Our Exhibition Visual

Please note: Andy may look heavily involved in our production line…
…but he definitely just made himself comfy for tho photo! Fraud! hehe

sooooo many candy canes!
Fulfilment completed for one of our clients Christmas parties!