Reading Time: Minutes

Case Study: Stavanger Golf Club

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:

  • Better WP Security for making the site more secure
  • Codestyling Localization to translate to Norwegian. See our tutorial.
  • W3 Total Cache to speed up the site
  • WooSidebars to add custom sidebars for the individual pages
  • WordPress SEO to improve my page titles and description
  • WP125 for the management of sponsor ads


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.

Have Work For Us?

Let's Discuss Your Project

At Hostyler Group, We Craft Visually Stunning & Functional Websites

6 AM to 8 PM (GMT)
© Copyright 2024 Hostyler Group
Sitemap Privacy Policy Terms of Service