05-May-2013

Old Soul

This job came about from a client who had tried a complete hosting and web package to host a WordPress based web site but needed help in setting it up.

A Client Redo Using Divi Theme, 2020

The retro arrow shown lit in the hover state.

In late 2020 the client installed the Divi Theme and did a nice job redoing the design. The only element of mine that remains is the retro up arrow that lights up when you hover the mouse.

I think the redo has taken away too much of the vintage design of the original website. I liked the galvanised iron (which is used in a number of the products) and the Oliver type writer font. The beige colour scheme looks more retro than the new

The design using Divi Theme. The Oliver typewriter font only exists in the logo now.

WordPress Twenty Eleven Version, 2013

A particular font "Oliver Type" was wanted to fit in with the retro recycled theme of the business.

To use the font (see below for how) a font file needs to be uploaded and this web service provided no means to do so. It can't be uploaded through WordPress, only image and certain other files are allowed. So without FTP I recommended that the site be moved to Rinet IT hosting, which has all is required!

The old style home page of Old Soul.

Choosing a Responsive Theme

For this build, having had enough of Ultimatum, I used the twentyeleven theme that comes with WordPress. This theme is basic and (mostly) easy to use. It is responsive; that is, it will adapt on its own to the narrow screen of mobile phones and tablets. These devices are becoming more popular for web browsing and it's a good idea to keep those users in mind when designing sites.

Child Themes

Before making any changes to a theme consider making a child theme and modifying that. Your modifications will not be lost when the theme is updated and they are easier to manage when they are not surrounded by the many lines of the main theme.

I didn't use a child theme here but I wish I did! Have a look at the official way here.

Your Own Font

This was my first site which uses a custom font and now that I know how easy it is to do I will be using it again. There are many free fonts around, simply do a web search for them. Google also has many fonts available via their CDN network.

Download the font you want. Sometimes you can download the entire package and sometimes only the TTF file is provided. The TTF file is needed by all browsers except Internet Explorer. For IE convert the file to EOT using one of the many free services like Online Font Converter, or try Googling convert ttf to eot and woff.

Upload these files to the folder that contains your main CSS file, for Old Soul with WordPress this is /wp-content/themes/twentyeleven/.

Next add the following to your main CSS file, for this site it was /wp-content/themes/twentyeleven/style.css.

/* Fonts */
@font-face {
 font-family: OliverFont;
  src: url("OliverPrintype.ttf"), 
       url("OliverPrintype.eot"); /* EOT file for IE */
}
.oliver {
font-family: OliverFont, "Courier New", Courier, monospace;
}

This CSS allows you to style any text by simply giving it the oliver class. The other fonts are provided in case the font fails.

eCommerce or Not?

Because the products from Old Soul are generally one offs I was reluctant to use an eCommerce solution. Using WooCommerce for example would mean creating a "product" for each item. Without it, when an item is sold it can be moved to the portfolio easily.

The purchase process is a bit old fashioned as the buyer clicks on the enquire button which prompts for the buyer's details; and then they are contacted to make the purchase. Some of the items are large and expensive to ship and personal contact is beneficial here.

Forms

I first used Easy Contact Forms plugin; this has a very nice interface both back end and front end. The verification notification and the message at the end are very well presented. It is used for the Contact Us page.

For the Enquire button on the artworks I wanted the artwork name to be automatically passed to the form. The Easy Contact Forms plugin does not provide this so the search went on for another. I found Fast Secure Contact Form plugin and this works quite well. The presentation isn't as pleasing to the eye but it can accept parameters passed to it in the form of a GET string, eg. /product-query/?1ex_field2=vintage+industrial+desk

The different post types for Twenty Eleven WordPress theme.

Gallery Issues

Twenty Eleven theme has a format selection available in the post and page editing screen. What I selected here affected the way the galleries within the page were displayed.

It's best to stick to the standard format. Experiment with one or two pages or posts with the other formats to see what they do before you get too far down the track with content.

The site can be viewed by going to http://www.oldsoul.com.au/

Leave a Reply

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram