Created: 1/16/2012
By: Mike McAlister
Thank you for purchasing Rewrite! If you have any questions that are beyond the scope of this help file, please feel free to check out the Support Forum.
I have provided several installation screencasts to get you started with the Rewrite theme. Be sure to pay attention, as this will help you get the theme installed with ease!
Theme Setup:
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 your posts, pages, etc. in case of a catastrophe!
Unzip the theme package. In the folder you'll find the Rewrite docs and a zip titled UploadToWP.zip. This is the theme zip 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.
Optional but recommended - Install the dummy data which is included. (You can also get it here: rewrite.xml) This will ensure the posts/pages get laid out properly with the correct page templates. Go to Tools -> Import -> Wordpress. Browse to the Rewrite download folder and locate the Dummy Data folder. Select the XML file and upload it. Be sure to click "download and import all attachments".
Options Framework Plugin - Rewrite 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.
Contact Form 7 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.
Okay Toolkit Plugin - If you would like to use Twitter, Flickr, Dribbble or Social Media icons widgets, you need to also install the Okay Toolkit plugin. Go to Plugins -> Add new. Search for "Okay Toolkit". Install the plugin and activate it. Once activated there will be an Okay Toolkit settings page under Settings. Visit the Okay Toolkit Settings page and activate the plugins you'd like to use. Then, in your Widgets section, to add a Twitter, Flickr, Dribbble or icons widget, simply drag them onto the respective widgetized area. Once you've dragged the widget over, you'll have to fill out a few settings for each widget.
Theme options are crucial to the Rewrite 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, select a background style and insert your Google Analytics code. Save Changes
Rewrite 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 and save.
Add extra widgets to your theme with the Okay Toolkit. It will add Twitter, Dribbble, Flickr and Retina Social Icons widgets to your theme.
Sidebar - You can put whatever you want in the sidebar. If you would like to add Twitter, Flickr or Dribbble to this section, be sure you have the Okay Toolkit plugin installed. Once installed, visit the Okay Toolkit settings page in Settings -> Okay Toolkit. You can enable and disable the widgets you'd like to use in your theme.
Sticky Sidebar - This is the small sidebar that sticks on the page as users scroll. On the demo site I used the Twitter widget and the Social Icons widget (via the Okay Toolkit). You can put whatever you want here as well, but be warned that if you put too many items in the sticky footer the screen will cut off the sidebar. Since it's position is fixed, it will not scroll to show many widgets.
Footer Columns: The footer is divided up into three columns. On the demo site, I used a text widget on the left, popular tags in the center, and the Okay Twitter widget on the right.
Videos
Create a new post and add a title and description.
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 okvideo 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 690px to fit nicely in the theme. Click Add Custom Field.
<iframe
src="http://player.vimeo.com/video/4143170?title=0&byline=0&portrait=0"
frameborder="0" width="565"
height="229"></iframe>
Once you've added the custom field, you need to be sure to add a category or any descriptive tags if you want.
Publish the post when you're finished.
Text Posts
Create a new post and add a title and description.
Write your content and add whatever styling you want. If you want to have a nice big quote like on the demo site, just use the Blockquote button on the WordPress post editor.
When you're finished, be sure to add a category or any descriptive tags if you want.
Publish the post when you're finished.
Featured Image 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 your page, you'll see the Featured Image Pane. Click Set Featured Image and upload your image. Once uploaded, scroll down and click "Use as featured image". Once set, you can close the image upload window.
Publish the post when you're finished.
Gallery Image Posts
Create a new post and add a title and description.
Write your content and add whatever styling you want.
Click the Upload/Insert Media button. Once the window pops-up, drag your images onto the uploader and WordPress will upload them.
When the images are done uploading, you can drag and drop them in the order you'd like them to appear in your gallery. Save all changes when you're done.
The post will use any images you have attached for the gallery images. I suggest keeping your image width at 690px and keeping your images proportional as to not look like shit.
Publish the post when you're finished.
This theme comes with several shortcodes that will make customizing your content easier. I have simplified the use of shortcodes by including a Shortcode Manager. On your posts and pages, on the editor, you'll see a small cog icon. Click this and a small pop-up window will appear. Using the various links across the top, you can add buttons, columns, tooltips, and messages. Check out the install video (towards the end) for a more detailed look at this feature.
Rewrite comes with a few custom element styles, which are used to easily add extra styling to your WordPress posts.
To use the post styles, simply select your text and then select from the drop down which style you would like to apply. You'll be able to see the changes live, in your editor.
Highlight - This will highlight the f**k out of some text.
Quote Aside - This style is an alternative to the blockquote. It grabs the text, and throws it to the right of the post, and gives it a nice light background. Nice for highlight important bits of information or quotes.
Page Title - As seen on the demo, this is a nicely styled block of text to introduce your page.
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
class="lightbox" to the link.
<a href="large-image.jpg" class="lightbox"><img
src="thumb-image.jpg" alt="lightbox image"
/></a>
To create a gallery of images to open in your lightbox, you need
to instead use class="lightbox[gallerytitle]".
<a href="large-image.jpg" class="lightbox"
rel="[gallery]"><img src="thumb-image.jpg" alt="lightbox
image" /></a>
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.