Pocket WordPress Theme

Created: 9/7/2013
By: Mike McAlister

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


Installing Jetpack

Jetpack is a WordPress plugin by Automattic, the folks who make WordPress. It's a toolkit that provides various features and enhancements to your WordPress site. Pocket utilizes several features (infinite scroll, carousel, etc.) of Jetpack, and must be installed for the theme to work as you see in the demo.

Install Jetpack by going to Plugins → Add New and search for "Jetpack". Install and activate the plugin. Once installed, you can enable Jetpack by

  • After activating Jetpack by WordPress.com, you will be asked to connect to WordPress.com to enable the Jetpack features.

  • Click the connect button and log in to a WordPress.com account to authorize the Jetpack connection.

  • If you don't yet have a WordPress.com account, you can quickly create one after clicking the connect button.

Once installed, activated, and connected to WordPress.com, you can visit the Jetpack settings page, which is now available at the top of your admin menu. You will need to activate the following Jetpack features by clicking the Activate button on each feature box.

  • Carousel
    The Carousel adds a beautiful lightbox carousel to your gallery images. This can be seen on the gallery posts on the homepage of the demo. Learn more about the Carousel.

  • Infinite Scroll
    Infinite Scroll is a feature that loads the next set of posts automatically when visitors approach the bottom of the home page or posts page. Pocket's homepage template utilizes Infinite Scroll to load posts. Once activated, your blog page will have a button to load more posts. Learn more about Infinite Scroll.

    Note: By default, Pocket uses the click-to-load method of Infinite Scroll. To change this to load posts on scroll instead of click, open functions.php and look for Infinite Scroll Support. Change the type value from click to scroll

Menu Setup

WordPress menus can be found under Appearence -> Menus.

  • You'll need to create at least one new menu for the header. Pocket 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.

  • Once the menu is created, assign it to the Header Menu location.

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.

Using the Theme Customizer

Pocket 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 in the WordPress admin menu.
  • Under the Current Theme at the top of the page, click Customize. You should now be in a live preview of Pocket, with the customizer on the left.
  • Visit the Pocket Styling menu to customize the theme with a logo, accent color, and custom CSS.
  • When you're finished making changes, click Save & Publish to save the settings. Check out your site to confirm your changes.

Widgets

The sidebar/widget section of Pocket is in the footer. Add widgets to the Footer Widgets window to see them in the footer of the theme. You can add text widgets, custom menus, etc. here just like I did on the demo. Keep it simple and classy.

Creating Image and Video Posts

Pocket makes it easy to share your images and videos. Follow the instructions below to add a variety of media 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.

Quote Post

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

  • To add the large quote, simply write or paste the quote in the editor window. The text will auto format to large block letters with a dark background.

  • To add a cite name, write the name below your text and set the font in bold. This will tell the theme that it's the cite and will size and style it smaller. See this image for a sample of how to add a quote properly. Adding A Quote

  • On the right hand side of your page, you'll see the Format pane. Click Quote to set the post format.

  • Once you've added your quote and selected the Quote format you can publish and preview your post.

Post Styles

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