Created: 9/5/2020
By: Mike McAlister
Thank you for purchasing Sketch! If you have any questions that are beyond the scope of this help file, please feel free to check out the Support Forum.
This theme uses a few plugins to provide extra functionality to the theme. Install these before proceeding.
Contact Form 7 - This plugin creates a fully functional contact form for your site. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.
Okay Toolkit - This plugin provides gallery features and several social media widgets including Twitter, Dribbble, Flickr and social media icons. Once installed and enabled, you can find the social media widgets in your Widgets section. You can install it directly from your dashboard in the Plugins menu, or grab it from the WordPress.org plugin repository.
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 Sketch docs and a zip titled Sketch-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.
Install the dummy data which is included. (You can also get it here: sketch.xml) This will ensure the posts/pages get laid out properly with the correct categories. Go to Tools → Import → WordPress. Browse to the Sketch download folder and locate the Dummy Data folder. Select the XML file and upload it.
The About section consists of three different elements: an avatar, a text block, and a styled text block. Once you've setup the About page, you can assign it to the About section in the theme customizer.
Create a new page called About. Add whatever text you would like. In the demo, I used an H3 title for the large text and a few paragraphs of text under the title.
To add your avatar, use the Featured Image box on the right side of the page. Click Set Featured Image and upload your image. Once uploaded click Use This Image.
To add the blue note box, add a Custom Field with the name of "note". The value will be whatever text you want to appear in the 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.. See an example.
When finished publish the page.
The Contact section uses the Contact Form 7 plugin, which you should have installed earlier. Once installed, you'll see there is a Contact menu item in the admin menu.
Go to the Contact menu on the left admin menu to configure your contact form. By default they give you a simple form with Name, Email, Subject and Message. To keep things simple, I suggest using the default form. Otherwise, to customize this form even further, check out the Contact Form 7 docs page here.
After you've configured and saved your contact form in the Contact menu, you will be given a small shortcode like this: [contact-form 1 "Contact form 1"]. Copy this shortcode. We'll use this to add the form to our Contact section.
Go back to your Contact page. If you don't have one already, create one.
We're going to place the contact form shortcode into a custom field. 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..
Add a new Custom Field. The Name is going to be contactform and the value will be the shortcode you just copied: [contact-form 1 "Contact form 1"]. Note that the shortcode may be different, depending on how many forms you've created. Click Add Custom Field. See an example.
The Contact section also uses an optional contact block, which highlights your contact information with a colored block and icons. The code to achieve that is below. If you used the dummy data, this will already be in your Contact page.
Simply copy and paste this code into the HTML view of your contact page. From there, you can change the text to your contact information.
<div class="contact-details"> <span
class="name-icon">Mike McAlister / Designer +
Developer</span> <span
class="phone-icon">815.242.5823</span>
<span
class="email-icon">me@example.com</span>
<span class="website-icon"><a
href="http://okaythemes.com">okaythemes.com</a></span></div>
Sketch is customizable via the WordPress customizer. Here, you can set a custom background image, upload a logo and set your link/accent color.
Sketch utilizes several widgetized areas. Because this is a one page theme, several of the default WordPress widgets will not work. Some of those widgets will try to link to posts or pages that do not exist with this theme. Make sure you have the Okay Toolkit plugin installed to get the widgets you see below.
Okay Twitter Widget - Use this widget to pull in your latest tweets. Just enter your title, username and number of tweets to show. If the widget does not pull in your tweets, make sure they are not protected. This is usually the case if the widget isn't working.
Okay Dribbble Widget - Use this widget to show your latest shots from Dribbble.
Okay Flickr Widget - Use this widget to show your latest shots from Flickr.
Okay Social Media Icons Widget - Use this widget in the Social Media Icons section to add various links to your social sites. See an example.
Footer Widget Section - There is also a Footer Widget section. You can add text widgets, the Twitter widget, and a custom menu here just like I did on the demo. Or don't, whatever.
Sketch is great for showing off beautiful, full-width images. Simply upload your images to the post and Sketch will turn them into a gallery, and size them accordingly. You can also choose to set a fixed width (960px) on your images. Follow the steps below to setup image, gallery, and video posts.
Featured Image Posts
Create a new post and add a title and description.
On the right hand side of your page, you'll see the Format pane. Click Gallery to set the post format and activate the gallery options.
Under your post editor, you'll see the Okay Gallery pane. Click the Edit Gallery button. Once the Edit Featured Gallery dialog opens, upload the image you'd like to use as your featured image, or select an image from images you've already uploaded with the Add to Gallery link. Once your image is selected, click Add to Gallery. You also need to choose an image to use as the thumbnail. Click Set Featured Image and select an image for the thumbnail. (Hint: you can just use the same image.)
By default, Sketch will display these images full-width, and stretch them across the page. If you'd rather not have full-width images, and would prefer to have them centered, you can constrain your images to only display at 960px. To do this, you need to add a Custom Field. The Name is going to be fixed-width and the value will be true. Click Add Custom Field. See an example.
Once you've added your image and content you can publish and preview your post.
Gallery Image Posts
To use the gallery feature, you must have the latest version of the Okay Toolkit plugin and WordPress 3.5 or newer. Be sure to read the Toolkit setup above and also check out this quick video I made showing how it works.
To use the awesome new WordPress galleries, you first need to be running WordPress 3.5. Secondly you need to install the Okay Toolkit. See instructions above.
Once you have the Okay Toolkit installed, go to Settings -> Okay Toolkit. Enable the Enable Gallery Feature towards the bottom of the page and Save your settings.
Create a new post and add a title and description.
On the right hand side of your page, you'll see the Format pane. Click Gallery to set the post format and activate the gallery options.
Under your post editor, you'll see the Okay Gallery pane. Click the Edit Gallery button. Once the Edit Featured Gallery dialog opens, upload the images you'd like in your gallery, or select them from images you've already uploaded with the Add to Gallery link. Once your images are selected, click Add to Gallery. When finished, you can arrange your images by selecting and dragging them into position. If the theme supports image captions, you can add one in the Edit Featured Gallery page.
By default, Sketch will display these images full-width, and stretch them across the page. If you'd rather not have full-width images, and would prefer to have them centered, you can constrain your images to only display at 960px. To do this, you need to add a Custom Field. The Name is going to be fixed-width and the value will be true. Click Add Custom Field. See an example.
Once you've added your images and content you can publish and preview your post.
Video Posts
Create a new post and add a title and post content.
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. Click Add Custom Field.
Sample embed code: <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. If the post is meant to be in the Portfolio or Blog section, make sure you assign it to one of those categories.
Publish the post when you're finished.
Plain Ol' 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. If the post is meant to be in the Portfolio or Blog section, make sure you assign it to one of those categories.
Publish the post when you're finished.
Sketch 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 hell out of some text.
Intro Title - As seen on the demo, this is a nicely styled block of text to introduce your page.
Because this is a modal theme, posts load into a modal window. As of version 1.2, you can now link directly to these posts. Sketch will open the page and then open the modal directly to the post.
To load a post directly, simply go to your site and open a post modal. The URL should now look something like this: http://themes.okaythemes.com/sketch/#modal=472&menu;=. You can use that link directly to the post. Be warned, loading post modals can take a bit to load, see #2 below.
Potential caveats
1. Currently you can’t modify the URL structure.
2. It can take a long time to load modal posts. The modal loading happens after page load, so the bigger the site, the longer it takes. I will continue to work on optimizing this for faster loading.
3. Caching sometimes does not play friendly with this kind of post loading.