Typable WordPress Theme

Created: 4/8/2020
By: Mike McAlister
Version 1.0

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


Getting Started

Setting up Typable is as simple as the theme itself. Here are a few tips to get you started.

  • Unzip the theme files you downloaded from Okay Themes. Do not upload the entire zip into WordPress. You only need to install the Typable-UploadToWP.zip file. You can upload and install this theme in Appearance → Themes → Upload.
  • Once activated, you can visit Appearance → Customize → Typable Styling to customize the theme with a logo and accent color and more.

Menu Setup

WordPress menus can be found under Appearence → Menus.

  • You'll need to create at least one new menu for the header. Click the + to add a new menu.

  • 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 when finished.

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

Contact Page

The Contact Page uses the Contact Form 7 plugin, which can grab for free on the WordPress plugin repository. Once installed, you'll see there is a Contact link in the left hand sidebar of your WordPress admin.

  • If you haven't already, create a new page called Contact.

  • 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 page.

  • Now head back to your Contact page. Paste the Contact 7 shortcode that you copied into the body of the post. Update the post. You should now see the form on the contact page.

Archive Page

Typable comes with a custom archive page template which displays all of your latest posts, pages and categories.

  • Create a page called Archives (or whatever title you'd like).

  • On the right hand side of the page under the Page Attributes window, apply the Custom Archive page template.

  • Once finished, publish the page.

  • You'll also need to add this page to your menu so users can access the Archive page. Just go to Appearance → Menus and add your archive page to the menu.

Using the Theme Customizer

Typable is customizable via the WordPress customizer. Here, you can set a custom background image, upload a logo and set your link/accent color.

  • To access the theme customizer, click Appearance → Customize in the WordPress admin menu.
  • You should now be in a live preview of Typable, with the customizer on the left.
  • Use the Typable Styling menu to set a logo, choose an accent/link color and add custom CSS.
  • When you're finished making changes, click Save & Publish to save the settings.
  • Check out your site to confirm your changes.

Featured Image Post

Follow the instructions below to add a featured image to your post.

  • 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.

  • Once you've added the featured image and content you can publish and preview your post.

Embedded Video Post

Follow the instructions below to embed video to your post.

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

  • Copy the embed code for your video (from Vimeo, YouTube, etc). Paste the code into the text tab of your theme. See an example here: Embedded Video

  • Note: If you would like your video to show on the blog page and not just the single page, you need to also add your video embed code to the Excerpt. The blog page shows excerpts of your posts, so placing the embed code here will ensure the video shows on blog and archive pages. See an example here.

Post Styles

Typable 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.

  • Intro Title - As seen on the demo, this is a nicely styled block of text to introduce your page. Similar to blockquote styling.

  • Highlight - As seen on the demo, this style will simply add a highlight background color to your text.