How To
Setting Up Whitelight
The home page of Whitelight is largely module based, with 4 regions available below the slider for you to use at your discretion. You can enable these or turn them off via the theme options under the Homepage Options tab.
![Whitelight Homepage Options](http://woocommerce.test/wp-content/uploads/2012/02/Whitelight-Homepage-Options.png)
Featured Slider
First let’s walk through setting up the Featured Slider. You’ll initially need to enable the Featured Slider in the theme options under Whitelight>Featured Slider. You then have a few options here to control the slider as well, with a few notables being the option to use a full width slider or normal width and order of the slides.
![Slider Options](http://woocommerce.test/wp-content/uploads/2012/02/Slider-Options-600x322.png)
With the Featured Slider setup we need to add slides. It’s important to note that you need to create at minimum the number of slides you set in the theme options. If you’ve set it to show 3 slides then we need to create 3 slides. You can do so by going to Slides>Add New. Be sure to title your slide and write a short description/excerpt. Then you can either upload an image using the Featured Image or TimThumb options, or you can paste a video embed code. The slider will handle either type of media just fine.
To Recap
To add a slide follow these steps:
- Go to Slides > Add New.
- Type a title for the slide and complete all of the postâââ‰â¢s body content.
- If you want an image to appear as the background to the entire slide than add a “Slide Image” in the Custom Settings panel.
- If you want to use a video simply past the embed code in the proper box under the Custom Settings
- Publish the slide.
![Creating A Slide](http://woocommerce.test/wp-content/uploads/2012/02/Creating-A-Slide-600x480.png)
![Whitelight Full Width Slider](http://woocommerce.test/wp-content/uploads/2012/02/Whitelight-Slider-600x254.png)
Now we can talk about the 4 regions you have on the homepage as well. They are as follows; Intro Message, Features Area, Portfolio Area, and Blog Area.
Intro Message
The Intro Message is a small area under the slider where you can put any sort of message you’d like your visitors to see. Enable and enter your message under Whitelight>Homepage Options>Intro Message
![Intro Message Settings](http://woocommerce.test/wp-content/uploads/2012/02/Intro-Message-600x193.png)
![Whitelight Intro Message](http://woocommerce.test/wp-content/uploads/2012/02/Whitelight-Intro-Message-600x129.png)
Features Area
Next is the Features Area. This is very similar to our Mini-Features in our other themes. You can enable this under Whitelight>Homepage Options>Features Area. You’ll find a place to enter a short message the shows up on the left of the features, as well as a title for the section and a link to view a list of all Features you’ve created.
![Features Area Settings](http://woocommerce.test/wp-content/uploads/2012/02/Features-Area-Settings-600x205.png)
Once you’ve setup your options you will need to create at minimum the number of features you specified in the theme options. If you set it to show 3 Features then be sure to create at least 3 features. You can do so by navigating to Features>Add New. Here you simply need to fill out the title, excerpt, and then upload an image if you’d like.
To Recap
To add a feature follow these steps:
- Go to Features > Add New.
- Type a title for the feature and complete all of the post’s body content.
- If you want an icon to appear beside the feature than add a “Features Icon” in the Custom Settings panel.
- Add an excerpt for the feature in the “Features Excerpt” field in the Custom Settings panel.
- Publish the Feature.
![Creating Whitelight Features](http://woocommerce.test/wp-content/uploads/2012/02/Creating-Whitelight-Features-600x536.png)
Setup The Portfolio
The portfolio area setup below is a great spot to show off the work you’ve done and is pretty simple to setup. First we’ll need to be sure that your portfolio is setup correctly. Create a page and title it however you’d like, we’d recommend calling it Portfolio. Then be sure to assign the Portfolio page template to it.
![Portfolio Page Template](http://woocommerce.test/wp-content/uploads/2012/02/Portfolio-Page-Template.png)
From here we need to add items to the portfolio. Go to Portfolio>Add New. Title your portfolio item and write a short description of it if you’d like. You can also add it to a portfolio gallery of your choice to organize it. Now you can add your images or paste a video embed code in the custom settings box. Finally, click publish.
To add multiple images to a portfolio post simply upload all of them when setting a featured image. Once you’ve set your featured image the rest of the images will be pulled into the post.
To Recap
To add a portfolio post follow these steps:
- Go to Portfolio > Add New.
- Type a title for the post and complete all of the postâââ‰â¢s body content.
- If you are posting an image(s) upload them via the appropriate image options you’ve chosen.
- If you want to use a video simply past the embed code in the proper box under the Custom Settings
- Publish the portfolio post.
![Creating A Portfolio Item](http://woocommerce.test/wp-content/uploads/2012/02/Creating-A-Portfolio-Item-600x576.png)
Portfolio Area
Now that we’ve setup our portfolio and added some work to it, we need to show a few of our latest posts on the homepage. Navigate to Whitelight>Homepage Options>Portfolio Area to enable this and tweak any other options here to your liking.
![Portfolio Area Settings](http://woocommerce.test/wp-content/uploads/2012/02/Portfolio-Area-Settings-600x257.png)
Blog Area
Our last area on the home page is the Blog Area. As it says this where you can feature a few of your latest posts on the homepage. Head over to Whitelight>Homepage Options>Blog Area to setup the options here as you’d like. You can choose how many posts to show, as well as the option to show a page there instead.
![Blog Area Settings](http://woocommerce.test/wp-content/uploads/2012/02/Blog-Area-Settings-600x372.png)
![Blog Area](http://woocommerce.test/wp-content/uploads/2012/02/Blog-Area-600x332.png)
Theme & Image Dimensions
Below are the dimension of the theme layout. The layout is responsive and will change based on the browser resolution. The widths below are the maximum for these containers.
- Total site width: 960px
- Main content width: 710px
- Blog content width: 540px
- Sidebar width: 210px
These are the ideal image dimension to use for Whitelight. Larger images will be dynamically resized to fit, while smaller images will be stretched to fit. All widths stated are in pixels.
- Full width slider: 1600 x 400
- Normal width slider: 960 x 400
- Portfolio thumbnails: 215 x 220
- Portfolio single page gallery: 710 wide (Can be any height)
- WooCommerce Images: 720 x720
- Blog featured images: 710 x 180
Widgets
Custom Whitelight Widgets
The theme includes 9 custom widgets that you can add to any of your 5 widgetized regions – 1 sidebar and 4 footer widgetized regions.
The custom woo widgets included are:
- Woo âââ‰â¬Å Adspace
- Woo – Search
- Woo – Tabs
- Woo – Twitter Stream
- Woo – Flickr
- Woo – Blog Author Info
- Woo – Embed/Video
- Woo – Subscribe/Connect
- Woo – Component
[insert name=”adding-widgets”]
Page Templates
[insert name=”page-templates”]