Switch - Responsive WordPress Theme

Created: May 17th, 2012 / Author: Adrian Diaconescu

Thank you for purchasing my theme! If you have any questions that are beyond the scope of this help file or even suggestions on how to improve the theme, the best way to get in touch is via my ThemeForest profile page contact form (right sidebar, at the bottom).

I take feedback very seriously and I always do my best to help out everyone, so you can be sure you'll hear from me sooner or later, depending on my availability and the nature of your issue.

Note: I'm subscribed to the comments section via RSS, so you can leave a message there as well, but please don't ask for support via Twitter or directly on my website, as I try to keep support requests centralized. Thank you!


Table of Contents


1. Introduction

Switch is a clean, responsive WordPress theme, that allows you to build a professional looking website in minutes. The theme comes with 6 custom widgets and the homepage template is entirely powered by widget ready areas. No complex settings, no coding skills required, just the ability to drag and drop. You know how to drag and drop, right?

Oh, and did I mention there are 4 custom post types for you to use and abuse? You got Slides for the homepage slider, then you got People, Projects and Testimonials to build up your content in style. The last three each come with a corresponding page template, custom widget and shortcode, so you can go nuts and create any type of website. Corporate website? Of course! Events website? You bet! Design agency website? Absolutely! Just a plain old blog? Why not?


2. Theme Setup

Before installing the theme and setting up the content, please make sure you have the latest version of WordPress installed (3.3.2 at the time of this writing). The theme should work with previous versions (although WordPress 3 is required), but my advice is to update as soon as possible. Ideally you should also start with a clean installation, with no plugins installed and build your website from there.

Once you're ready, login into the WordPress admin and follow the steps below:

2.1. Installation

In the ZIP file you downloaded from ThemeForest there should be a folder called switch and a file called switch.zip. There are two ways to install the theme:

  1. WordPress Upload - Go to Appearance > Themes, click the Install Themes tab, then click Upload. Choose the ZIP file from your hard drive and click Install Now. Wait for a few seconds for the file to upload, then click Activate.
  2. FTP Upload - If you're familiar with using an FTP client, all you have to do is upload the switch folder into /wp-content/themes/, then go to Appearance > Themes and click Activate for Switch.

Note: Do not use the main ZIP file you downloaded (use the theme ZIP only), otherwise the whole process will fail.

Note: As soon as the theme is installed, go to Appearance > Theme Options and follow the instruction there to install the Options Framework Plugin. This plugin is required by the theme, as it enabled the theme options for the theme.

Once you have a few pages created, you can go to Appearance > Menus and start creating some custom menus for your website. Click the Create Menu button on the right, then start adding posts or pages from the left panels.

Once you create and save your first menu, a new panel will show up on the left, called Theme Locations. Switch has 3 theme locations: Main Menu, Header Link and Footer Links and they are all optional. If you don't want to assign a menu for Main Menu, one will be dinamically generated using your existing page structure.

2.3. Theme Options

Switch comes with an intuitive, easy to use Theme Options panel. You can access it by navigating to Appearance > Theme Options. The theme options are conveniently grouped under a series of tabs and each tab contains the options that pertain to a particular area of the theme.

General

Pages

Blog

Styling

Custom Posts


3. Theme Features

The theme comes with 4 custom post types (Slides, People, Projects and Testimonials), 4 custom page templates, 6 custom widgets and a variety of shortcodes.

3.1. Custom Post Types

Once you activate the theme, you will notice there are 4 new menu items on the left, one for each custom post type. Except the Testimonials post type, all the others also have custom taxonomies: Sliders for Slides, Departments for People and Folders for Projects. You can think of them as way to group your custom posts, just like Categories work for Posts.

Adding, deleting and editing any of these post types works the same way as it does for regular Posts, so you can edit the content and add headings, quotes, etc. and you can also set a featured image. And on the right side you will have categories relevant to each one. There are only a few additional options for each one, as described below:

3.2. Custom Widgets

Switch comes with 7 widget ready areas: 4 widget ready areas to manage your homepage content, 1 for the pages, 1 or the blog and 1 for the footer. There are also 6 custom widgets, as described below:

3.3. Page Templates

Switch comes with 4 page templates: one for the homepage, one for a full width page, one to show testimonials from the Testimonials custom post type and one to show content from subpages or from the People and Projects custom post types. Some of these page templates have additional options, as follows:

3.4. Shortcodes

Switch comes with 9 additional shortcodes and also provides styling for the default [gallery] shortcode. Here are the shortcodes and some examples for each one:

Column

In order for you to understand the shortcode for columns, think of the page width as the sum of 12 individual narrow strips. This mean that if you would like to create a 3 column layout with equal widths, each column would basically be 4 strips wide. For a two column layout with equal widths each column would be 6 strips wide, etc. You can also have unequel column widths, the only rule is that the sum of all strips is 12.

3 Equal Columns

[column size="three" first="true"]
Add column 1 content here ...
[/column]

[column size="three"]
Add column 2 content here ...
[/column]

[column size="three" last="true"]
Add column 3 content here ...
[/column]

Got it? Now all you have to do is change the width parameter to and add the correct number of column shortcodes. And don't forget the first="true" and last="true" parameter for the first and last column.

2 Columns - Wide + Narrow

[column size="8" first="true"]
This column will be wide ...
[/column]

[column size="4" last="true"]
This column will be narrow ...
[/column]

See how the sum of 8 + 4 = 12? You can mix these numbers and create any number of columns you like. Let's see one more:

4 Equal Columns

[column size="four" first="true"]
Add column 1 content here ...
[/column]

[column size="four"]
Add column 2 content here ...
[/column]

[column size="four"]
Add column 3 content here ...
[/column]

[column size="four" last="true"]
Add column 4 content here ...
[/column]

Button

This is an easy one: all you have to set is the url and you can also addd color="accent" if you would like to use the accent color defined under Theme Options > Styling.

[button url="http://google.com"]Default Button[/button]
	
[button url="http://twitter.com" color="accent"]Colored Button[/button]

Video

This allows you to embed a responsive Vimeo or YouTube video. All you need to know is the video ID. Examples: for http://www.youtube.com/watch?v=t5X2PxtvMsU the ID is t5X2PxtvMsU, for http://vimeo.com/23237102 is 23237102.

[video id="t5X2PxtvMsU"]

[video id="23237102"]

Notification Box

You can put a bit more emphasis on some content by wrapping it in a notification box. You can choose between various types: info, error, tip and success.

[box type="info"]
Add your box content here.
[/box]

Snippets

In case the Snippets page template isn't enough for you, you can use the snippets shortcode with the same parameters. So you can specify what posts / pages to show and there are also a few attributes that control the look and feel. Below is a list of all available values for the attributes, then I listed a couple of examples:

This will show snippets of subpages of the current page:

[snippets]

This will show snippets of projects, with a filtered and a polaroid look and feel:

[snippets type="projects" layout="polaroid" display="filter"]

This will show snippets of people from the Board of Directors category, with a paged navigation (8 items per page) and a hover look and feel:

[snippets type="person" layout="hover" display="8"]

Testimonials

This will display a list of posts from the Testimonials custom post type. Has the following attributes:

[testimonials exclude="37" separator="off"]

Tabs

This is pretty similar to the columns shortcode and there's no easier way to explain it other than showing an example:

[tabs]

[tab title="Tab 1 Title"]
Add tab 1 content here ...
[/tab]

[tab title="Tab 2 Title"]
Add tab 2 content here ...
[/tab]

[tab title="Tab 3 Title"]
Add tab 3 content here ...
[/tab]

[/tabs]

Accordion

Same thing for the accordion, so here goes:

[accordion]

[section title="Tab 1 Title"]
Add section 1 content here ...
[/section]

[section title="Tab 2 Title"]
Add section 2 content here ...
[/section]

[section title="Tab 3 Title"]
Add section 3 content here ...
[/section]

[/accordion]

Post List

You can include a list of your recent posts. The attributes are title, count, category, include and exclude. We discussed all these for the other shortcodes, they work the same way.

[postlist title="Recent News" count="5" category="news" exclude="67,312"]

As I mentioned before, you will need Options Framework if you want to take advantage of theme options. Of course you can use any other plugins you find relevant, but here are some that I highly recommend and why:

This is just a list of plugin I actually used when working on this theme and it's something to get you started. You can find more useful plugins in the Plugin Directory, just don't overdo it. Just because a plugin exists, doesn't mean you have to install it. ;)