Case Study: Stavanger Golf Club

Written by Magnus Jepson on April 19, 2013 Blog, Customer Stories.

When I was asked to redesign the website for my local golf club a couple of months ago, I knew it was time to update the theme too. I wanted to create the new design using a child theme, and the obvious choice for a parent theme was Canvas. Canvas is our most versatile theme that works great for quickly putting together a website with a child theme.

The custom previous version of the Stavanger Golfklubb website.
My previous design of the Stavanger Golf Club website.

Stavanger Golfklubb
The new Stavanger Golfklubb website

I wanted the new design to have a bit more professional style, and they had specific needs for the homepage layout. I needed to create a custom homepage template which consisted of a image slider, news area, course info, Golfbox login and sponsors.

After designing the site in Photoshop, I was ready to start coding. I installed Canvas as the parent theme, and started with a child theme consisting of style.css, functions.php and a custom.css. See our tutorial for more info on child themes if you are new to this.

I’ll go through each customized area of the site to try to explain what I did, and you can view the project on GitHub to learn from the code yourself.

Getting Started with Canvas

I wanted to include only the things I needed, so the first task was to remove unwanted things in functions.php:

  • Remove feedback javascript
  • Remove site width from options
  • Remove output of custom styles from options
  • Remove meta tags with theme / framework info
  • Move the navigation inside header

Other things I added in functions.php:

  • Setup link to my logo image as I didn’t want to use options panel
  • Add Coda and Arvo Google fonts

A Simple Header

Header Area
Header Area

For the header, I wanted to have logo and navigation, and an additional contact area above the navigation. I added this contact area with header_address() in functions.php, which basically outputs the HTML in the woo_header_inside hook.

A Customized Homepage

Homepage Areas
Homepage Areas

For the homepage, I created a new home.php in my child theme and copied the index.php from the parent theme, where I added the code for the various parts. The news section is a regular custom query which excludes one category. The course info parts are normal page queries. For both these areas, I use the more tag inside the page and only show what is before the more tag on the homepage.

For the main image slider, I used the tutorial on how to add the business slider to the default WP homepage. I wanted the slider to have full width images, so I needed to add quite a bit of custom CSS to accomplish that, which was probably the most tricky part of coding this theme.

The sponsor slider uses Flexslider like the main slider, and I generate the sponsor images using the WP125 plugin.

I also wanted to use some nice icons in the design, which I accomplished with adding a web-font called EightyShades in my style.css. These icons are easy to use, by simply adding a icon class where you want to use it. We include FontAwesome in Canvas so you can do the same in your website!

Adding plugins

I used a few plugins on the site:

Conclusion

I designed and built this site over a weekend, spending probably 10 hours overall which for me is fairly quick compared to previous projects. I used the Canvas tutorials to help me along the way. I hope the child theme is helpful, and if you are new to child themes, I suggest starting with our tutorial. If you have any question, fire away in the comment section.

cta-banner-10-product-page-v2_2x

17 Responses

  1. Kjetil Kaland
    April 19, 2013 at 12:49 pm #

    Aren’t you a wiz! Good job!

  2. nightrider
    April 19, 2013 at 1:24 pm #

    Nice touches and the full-width slider looks super.

    Any tips on why you use W3 Total Cache instead of WP Super Cache?

    I see you’re having the same type of troubles as I am with small-size responsive views. The nav menu overlays the squirrel, and then, once the mobile nav menu appears, it doesn’t shift over the main page. It just overlays.

    Cheers!

    • Magnus
      April 19, 2013 at 2:34 pm #

      No particular reason for using W3TC, I think any caching plugin is better than no plugin.

      I’ve set the option to “Enable Fixed Mobile Layout” in my options so the site shows in full size on mobile devices: http://d.pr/i/ogyF/5URzyIIY

      It will still show the responsive parts if you change the width of your desktop browser, but it looks fine on the mobile devices, so I haven’t paid any attention to the placement of the responsive navigation etc.

  3. dondowell
    April 19, 2013 at 10:06 pm #

    Liking these case studies! Have there been any issues with Better WP Security and Canvas or other Woo Themes? I’ve started using it in a couple of sites.

    • Magnus
      April 20, 2013 at 4:44 pm #

      I haven’t experienced any issues 🙂

  4. MayaPapaya
    April 20, 2013 at 1:21 am #

    Nice Magnus, any chance you will add a full-width slider option to Canvas core? 🙂

  5. victorlgarcia
    April 20, 2013 at 6:30 am #

    Hey… I missed an easter promotion for 13′ : (
    Nice job with your golf theme though

  6. Emanuel
    April 20, 2013 at 1:52 pm #

    Great read! … but the responsiveness of that site is broken.

    • Magnus
      April 20, 2013 at 4:45 pm #

      It works fine on mobile devices. It is only on the desktop it looks broken if you resize your window, but that is fine.

      http://woo.com/2013/04/case-study-stavanger-golf-club/#comment-505223

    • Magnus
      April 20, 2013 at 4:46 pm #

      I didn’t want the site to be responsive on mobile, which is why I enabled the option to set it to fixed width.

  7. dhogue
    April 21, 2013 at 10:54 pm #

    What a beautiful transformation. Thanks for sharing your process.

  8. samantha9
    April 23, 2013 at 10:01 pm #

    Hi Magnus,
    Thank you for share this case study. I used the methods here for a client site–looks good on the desktop. I want the layout to be responsive on a mobile phone. Can you please share how we can accomplish that? I am imagining maybe moving the menu out of the header and back to default but really want to use the header space for the menu. Please advise. Thank you.

  9. Dirk Bracke
    May 8, 2013 at 9:16 pm #

    I just wanted to type a quick comment to appreciate you for these magnificent tricks you are sharing on this website. My long internet research has at the end been honored with brilliant strategies to exchange with my visitors. I ‘d assume that we website visitors are very much blessed to live in a useful site with many awesome professionals with useful tricks. I feel very much blessed to have encountered the web pages and look forward to many more exciting times reading here. Thanks again for all the details.

    • nic
      May 23, 2013 at 4:07 pm #

      I know that this will embarass my son, but ………….attaboy Mag