“CoPilot WordPress Theme” Documentation by “Mike McAlister”


“CoPilot WordPress”

Created: 1/1/2012
By: Mike McAlister
Version 3.0

Thank you for purchasing my theme! If you have any questions that are beyond the scope of this help file, please feel free to check out the .


Installation Screencast

I have provided several installation screencasts to get you started with the CoPilot theme. Be sure to pay attention, as this will help you get the theme installed with ease!

Theme Setup:

CoPilot Installation

  • First of all, you should have WordPress installed and ready to roll. It's always recommended that you start with a fresh install of WordPress to prevent a conflict of settings from old themes, etc. Make sure you backup your old theme and database in case of a catastrophe!

  • Unzip the theme package. In the folder you'll find the CoPilot docs and a zip titled UploadToWP.zip. This is the theme that you need to upload into WordPress.

  • In the WordPress admin, go to Appearance -> Themes. Click on the big Install Themes tab at the top of the page. Next, click the Upload link and navigate to the UploadToWP.zip file. Install and activate the theme.

  • CoPilot needs the Options Framework plugin to add the theme options. You can either click the install prompt at the top of the screen, or go to Plugins -> Add New and search for Options Framework. Install and activate the plugin.

  • Next you need to grab the Contact Form 7 plugin. Once again, go to Plugins -> Add new. Search for "Contact Form 7". Install this plugin. To use this plugin, you'll need to go to the Contact menu (now on the left menu) and create a form. Once you're done, it will give you a shortcode you can use in your contact page. If you've used the dummy data, this should already be in there for you.

  • If you want to add audio posts, you will also need the Audio Player plugin by Martin Laine. Go to Plugins -> Add New. Search for "audio player" and add the plugin by Martin. Install and activate this plugin.

Theme Options Setup

Theme options are crucial to the CoPilot theme. If you didn't watch the screencasts, you can read the directions below. You must go through the theme options setup before the theme will work properly.

  • You'll notice under the Appearence menu, there is a Theme Options menu. Click this link.

  • Under Basic Settings you can upload your logo, set the link color, enable the post sorter (and limit categories to sort) and Google Analytics code. Save Changes

  • Under the Social Media Links tab, you just need to enter your social media links for the icons you want to show up in the toggle box under the header. Save Changes.

Widgets

I've included a few custom widgets and styled several other widgets to help sexify your theme.

  • The Header Twitter widget area uses the Okay Twitter widget. Drag the widget over to the widget sidebar and fill out the settings. You won't need a title for this widget, since the hidden area will hide it anyway.

  • The Sidebar widget area can use any widget, really. On the demo site, I used the Okay Flickr widget, a text widget, and the Okay Twitter widget.

  • The remaining widget areas are for the footer. There is a left, center, and right widget area. You can add whatever widgets you want here. I used a text widget, an Envato marketplace widget, and the Okay Twitter widget again. It's up to you!

WordPress 3.0 Menus

CoPilot takes advantage of the new Wordpress 3.0 menu manager. Menus can be found under Appearence -> Menus. For more detailed usage of the menu manager, see this tutorial here.

  • You'll need to create two different menus; one for the header, one for the footer. Start with the header menu. Create a menu and name it whatever you want.

  • Now, on the left hand side, select the pages you would like to have added to the menu. You can then click "Add to Menu" and they will show up on the right side of the page. You can drag the pages around to arrange them the way you'd like.

  • Save the menu.

  • Now let's create the footer menu. At the top of the page you'll see a new menu button (has a + on it). Create a new menu and call it Footer. Add pages and arrange them the same way you did before. When you're finished, save the menu.

  • Now that you have both menus created, you need to assign them in the Theme Locations window located on the left. From the drop down menu, select the appropriate menu for the header and footer.

Post Styles and Sorting

You'll notice in the demo, there are different kinds of posts, such as photos, videos, articles, etc. Below you'll find tips on how to create posts like you see in the demo site.

Photos

  • Create a new post and add a title and description.

  • On the right hand side of the page, you'll see the Format box. Select Image.

  • Next, look for the Featured Image box which should be somewhere below the Format box. Click Set Featured Image.

  • Upload your image from the web or from your computer and when it finished uploading scroll down a bit and click Use as Featured Image and Save Changes.

  • Finally, make sure to mark the post in the proper category (Images or Photos) and some descriptive tags if you want.

  • Publish the post when you're finished.

Videos

  • Create a new post and add a title and description.

  • On the right hand side of the page, you'll see the Format box. Select Video.

  • Next, scroll down the page a bit and look for the Custom Fields box. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked..

  • Now you can add the Custom Field. The Name is going to be video and the value will be your embed code. The embed code should look something like the code below. Be sure to keep your video width around 525px to fit nicely in the theme. Click Add Custom Field.

<iframe src="http://player.vimeo.com/video/4143170?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="526" height="229"></iframe>

  • Once you've added the custom field, you need to be sure to apply the category (Video), and any descriptive tags if you want.

  • Publish the post when you're finished.

Standard Text Posts

  • Create a new post and add a title and description.

  • Write your content and add whatever styling you want.

  • On the right hand side of the page, you'll see the Format box. Select Standard.

  • When you're finished, be sure to put it in an Articles category and add some descriptive tags if you want.

  • Publish the post when you're finished.

Chat Posts

  • Create a new post and add a title.

  • To create the chat styling, you simply need to alternate the conversation with line breaks. For example:

     Mandi: I disagree. This conversation is terrible!
     
     Mike: I don't even know who you are anymore.
     
     Mike: We are having an amazing conversation!
     
  • Once you've added the conversation, you need to be sure to select the Chat post format from the Format box on the right hand sidebar.

  • Publish the post when you're finished.

Gallery

  • Create a new post and add a title and optional description.

  • In the post editor, click the Add an Image button to upload photos. You can choose to bring in photos from your computer or a url.

  • Anything you upload as a post attachment will be automatically attached to the gallery and formatted for the slider. So all you need to do is upload!

  • You can also arrange the order of the photos by going into your gallery and dragging the images around.

  • Once you've added the gallery images, you need to be sure to select the Gallery post format from the Format box on the right hand sidebar.

  • Publish the post when you're finished.

Link

  • Create a new post and add a title.

  • Create a link and place it in the editor.

  • Once you've added the link, you need to be sure to select the Link post format from the Format box on the right hand sidebar.

  • Publish the post when you're finished.

Quote

  • Create a new post and add a title.

  • Type or paste your quote into the editor.

  • To add the name, or cite, you need to add a Custom Field. The Name is going to be cite and the value will be the authors name. Click Add Custom Field. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked..

  • Once you've added the quote and cite, you need to be sure to select the Quote post format from the Format box on the right hand sidebar.

  • Publish the post when you're finished.

Audio

  • Make sure you have the Audio Player plugin by Martin Laine installed. You can configure it's settings in Settings -> Audio Player but it will work with the default settings.

  • Create a new post and add a title.

  • Using the Media Uploader in the post editor, upload your mp3 to WordPress. Once uploaded, it will give you the full URL to your audio file. Copy the full URL and save the changes.

  • You can now add the following shortcode to your post with the URL you copied in the last step. The plugin will detect the shortcode and automatically add the audio player. [audio:http://themes.okaythemes.com/copilot/files/2011/12/banjo.mp3]

  • Once you've added the quote and cite, you need to be sure to select the Audio post format from the Format box on the right hand sidebar.

  • Publish the post when you're finished.

Lightbox Gallery

This theme is setup to automatically use the lightbox gallery feature on certain portfolio images. If you would like to use it on your own images, simply follow the example below. You're basically linking a thumbnail photo to a larger photo and adding the rel="lightbox" attribute to the link.

<a href="large-image.jpg" rel="lightbox"><img src="thumb-image.jpg" alt="lightbox image" /></a>

Contact Page

The contact page uses the Contact Form 7 plugin, which you should have installed earlier. Once installed, you'll see there is a Contact link in the left hand sidebar of your WordPress admin.

Let's start with displaying a form on your page. First, open the Contact -> Edit menu on your WordPress administration panel. You can manage multiple contact forms there.

Just after installing the Contact Form 7 plugin, you'll see a default form named "Contact form 1", and a code like this:

[contact-form 1 "Contact form 1"]

Copy this code. Then, open the edit menu of the page (Pages -> Edit) into which you wish to place the contact form. A popular practice is creating a page named "Contact" for the contact form page. Paste the code you copied into the contents of the page.

Now your contact form setup is complete. Visitors to your site can now find the form and start submitting messages to you.

To customize this form even further, check out the Contact Form 7 docs page here.