Verb WordPress Theme

Created: 1/9/2013
By: Mike McAlister

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


Recommended Plugins

Verb uses a few plugins to provide extra functionality to the theme.

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

    1. Log in and navigate to Plugins → Add New.
    2. Type "Contact Form 7" into the Search input and click the "Search Widgets" button.
    3. Locate Contact Form 7 in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. There will now be a Contact menu item on the WordPress admin menu. See below for more instructions on using this plugin with the theme.
  • Okay Toolkit - This plugin provides the Portfolio section (via a custom post type) 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.

    1. Log in and navigate to Plugins → Add New.
    2. Type "Okay Toolkit" into the Search input and click the "Search Widgets" button.
    3. Locate the Okay Toolkit in the list of search results and click "Install Now".
    4. Click the "Activate Plugin" link at the bottom of the install screen.
    5. Navigate to Settings → Okay Toolkit to modify the plugin's settings. The widgets will be available in Appearance → Widgets.

Menu Setup

WordPress menus can be found under Appearence -> Menus.

  • You'll need to create at least one new menu for the header. Verb also supports a custom menu, which you could use in the widget area. 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.

  • Create a drop menu by dragging menu items under and to the right of another menu item.

  • 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. See installation instructions above. 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.

Blocks Page

Verb comes with a Blocks page template, which can be used as a portfolio page for images. I recommend using it on the Homepage, although you can use it on whichever page you like. Follow the steps below to setup the Blocks page. I'll go over how to populate the Blocks page below.

  • Create a new page called Blocks (or your own title).

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

  • The Blocks page doesn't output post content, so you won't need to add any content to this page.

  • Publish the page when finished.

  • If you would like to use your Blocks page as the homepage, you need to go to Settings -> Reading and set your Blocks page as the Front page. See this screenshot for an example.

Blog Page

By default, the blog will be your homepage and will show your latest posts. However, if you choose to use the Blocks page as the homepage (or any other page) instead, you need to tell WordPress which page to use as the blog.

  • Create a new page called Blog. You don't have to add any content or apply any templates to this page. You just need to create the page so we can utilize it in the next couple steps. Publish the page.

  • Go to Settings -> Reading on the admin menu. Set your newly created Blog page as the Posts page. See this screenshot for an example. Click Save Changes.

  • Finally you need to add this page to your menu so users can access the blog page. Just go to Appearance -> Menus and add your Blog page to the menu.

  • Moonwalk to the refrigerator and get a soda. You've earned it.

Archive Page

Verb comes with an 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

Verb 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 Verb, with the customizer on the left.
  • You can use the various menus to set the site title, description, and background color/image. Verb specific styling is in the Verb Styling menu. Here you can add a logo, set an accent color (which will be your link color and accent background color on various elements. You can also set the Blocks page title and subtitle.
  • When you're finished making changes, click Save & Publish to save the settings.
  • Check out your site to confirm your changes.

Widgets

Add widgets to the Sidebar Widgets pane to see them in the sidebar of the theme. You can add text widgets, the Twitter widget, custom menus, etc. here just like I did on the demo. Or don't, whatever. If you want to add Twitter, Flickr, or Dribbble widgets, you'll need to add the Okay Toolkit plugin first (see above).

Adding Portfolio Items

To activate the Portfolio Items section of the theme, you need to first install the Okay Toolkit plugin as outlined above. The plugin will provide the theme with the Portfolio post type, which populates the Portfolio (Blocks) page.

  • Install the Okay Toolkit plugin using the steps above in the Recommended Plugins section. Once installed, activate the plugin.

  • Go to Settings -> Okay Toolkit. At the bottom of the Okay Toolkit Options page, you'll see the Enable Portfolio Items section. Select Enable from the drop down and click Save Changes.

  • Once activated, you'll see there is now a Portfolio Items section on the admin menu.

Now that you've activated the Portfolio, you can start adding posts to it. It's very similar to adding images and video to the Blog section.

Featured Image 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.

If you have the latest version of Verb (v1.3), WordPress (3.5+) and the Okay Toolkit (v1.5), you can use the new Custom Image Galleries. Be sure to read the setup below 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 Portfolio 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.

  • Once you've added your images and content you can publish and preview your post.

Video Post

  • 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 video and the value will be your embed code. See this image for reference: Video Custom Field. 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&amp;byline=0&amp;portrait=0" frameborder="0" width="1200" height="600"></iframe>

  • Once you've added the custom field and content you can publish and preview your post.

Adding a Featured Image or Video to Blog Posts

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.

  • Once you've added the featured image 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 video and the value will be your embed code. See this image for reference: Video Custom Field. 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&amp;byline=0&amp;portrait=0" frameborder="0" width="1200" height="600"></iframe>

  • Once you've added the custom field and content you can publish and preview your post.

Post Styles

Verb 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 Styles Drop Down Menu 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.

  • Pull Quote - As seen on the demo, you can use this to pull small quotes or small blocks of text to the right of the page. It will be styled with the color you chose as your Accent Color in the Verb Styling, or it will be red by default.

  • Highlight Text - As seen on the demo, this adds a highlighted background to your inline text. Nothing fancy here, but it adds a nice touch.