CheerApp - App WordPress + bbPress Theme - Documentation

Knowledgebase, FAQs, support forum based on bbPress, flexible pricing tables, video slider on home page, live search and many more!

Item Support Theme demo

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via contact form on my ThemeForest profile page. Thanks so much!

This section covers some basic WordPress concepts like theme and plugin installation, menu management etc. If this is your first time working with WordPress please read it carefully!


Theme installation

  • Once you download a CheerApp package from ThemeForest, the file you've downloaded needs to be unzipped. Inside you will find some folders that contain PSDs, this very help file and a file named cheerapp.zip. The last one is the one you will be uploading to WordPress.
  • With WordPress installed on your web server log in to your WP Dashboard and head to the Appearance / Themes section.
  • Choose Install Themes section and then Upload.
  • Click the Choose File button and browse your computer for the cheerapp.zip file. Click Install Now button.
  • Wait a few moments for the theme to upload. Once it install successfully click on the Activate link.

bbPress installation

    Follow these steps only if you are going to make use of bbPress forums
  • Navigate to Plugins / Add New.
  • In the search box type "bbpress" and click Search Plugins button.
  • The very first search result should be a main bbPress plugin.
  • Click the Install link net to it and wait a few moments for the plugin to be installed.

Setting up the home page

As you can see, when you visit your home page right now there is not much going on there and it looks nothing like the demo. Don't worry, we are now going to make things right here.

  • Navigate to Pages / Add New section.
  • Fill the title of the page and it's content.
  • On the right-hand side you will see Page Attributes box.
  • Choose Home from the Template select menu.
  • Click the big, blue Publish button.

You have successfully created your first page, and even assigned it to a template. We are now going to set this page as a front page of your website:

  • Navigate to Settings / Reading section.
  • In the Front page displays setting choose the A static page (select below) option.
  • Select the page you have just created from Front page select menu.

That's it. Now head on to add some posts to the slider, or continue reading this section to learn how to set featured images on a post. This skill will come in handy too!



Setting up menus

The next step is to set up menus. CheerApp has two navigation areas - primary navigation in header, and secondary navigation in footer.

Header menu supports drop-down sub-menus that are one level deep. Footer menu only supports top level menu items (no drop-downs).

You can manage your navigation menus in Appearance / Menus section:

  • Enter a menu name of your likings and click the Create Menu button.
  • Once you create a menu the Theme Locations box will appear. Here you will be able to select, which menu goes to header (Top Menu) and which one to footer (Footer Menu).
  • The rest is pretty straight forward - just add some pages or categories to menu, drag them around to order them to you likings and save the menu.

You can also create more menus for use in widgets. If you are wondering how I did the Quick links on the demo's home page now you have your answer - it was with custom menu widget.


Theme options

CheerApp offers multiple settings that can be managed in Appearance / Theme Options section. All settings are pretty much descriptive so there's no need to duplicate the descriptions here.

In the Color Settings tab you will be able to completely customize all CheerApp colors like background colors, button gradients, link colors etc.


Adding featured images to a post

You will notice that some post types (like Featured posts, or Blog posts) have a Featured image box to the right. This means that the post type supports featured images. Featured image will appear as the main post image (like the one that is displayed on a slider).

  • Click the Set featured image link, a pop up will appear.
  • Upload an image of your choice. Once the image is uploaded and resized you will be presented with the image info.
  • Scroll down and click the Use as Featured image link.
  • Publish or update the post. It will now have it's featured image set.

CheerApp offers multiple page templates that have very specific roles. To choose a template simply select it in the Page Attributes section when creating new or updating existing page.

Available templates (not including bbPress templates):

  • Home - a home page with slider, "call to action" panel, content area, quick links and bottom widgets
  • Default template - a regular page with sidebar
  • Page - Full-width - a regular page without sidebar; supports displaying images with Large setting
  • Blog page - page with sidebar that displays most recent blog entries
  • Knowledgebase page - displays most recently updated knowledgebase articles and a category browser
  • FAQ page (all FAQs) - displays all FAQs, divided into groups, as well as category browser
  • Pricing page - displays pricing table and content; without sidebar
  • Contact - contains AJAX contact form; displays content and sidebar

Slider appears only on home page (follow the Getting started guide to learn how to set up a home page. You can manage your slides in the Featured Posts section.

Each slide is a separate Featured Post. The actual slide image is made of post's Featured image. The slide heading is made of it's title, the following paragraphs are made of post's content.


Ordering slides

Slides can be ordered by adjusting Order in Attributes box on the right-hand side. Slide with the lowest number comes first, while slide with the highest comes last.


Slide settings

Below the slide's post content field you will find a Slide Settings field. All the fields are pretty descriptive. There are, however, few important quirks to note:

  • Slide tagline will not appear on the centered slides.
  • If you choose your slide to be a video slide you have several options to pick from. For the second and third option you will be required to paste a video embed code (from any service or your own video player) into the Video embed code box. If you, however, decide to choose the option of showing the video in lightbox, you have to supply the video's YouTube or Vimeo URL (only these services are supported here), that is copy the video address from browser's address bar.
  • Second and last video options will be a combo of video embed code and Featured image.

Slide image and video sizes

  • The centered slide supports images and videos that have width up to 840 px. Wider images will be resized.
  • Slides with text on the left or right side will support images and videos up to 520 px in width. Wider images will be resized.
  • Please note that the videos will not be automatically resized so you will have to manually set their sizes when generating embed code.

Setting up Knowledgebase is pretty straight-forward. The easiest way to get started is to create a page with Knowledgebase page template and adding it to your menu.

The next step is to add some Knowledgebase Categories in Knowledgebase section of your WordPress admin area.

The knowledgebase page will show the most recently updated knowledgebase articles as well as the list of all knowledgebase categories on the left. Users can then navigate through the categories to quickly find the content they are looking for.

Now it's time to add some articles. Go to Knowledgebase / Add New to add some articles.

You can attach a FAQ section to each knowledgebase article. Once you add some FAQs and create some FAQ categories, you will be able to select a category you wish to attach to knowledgebase article by selecting it from select menu in Article Options box.

The knowledgebase page and knowledgebase category archives will display only the article excerpt, so it's good to fill the Excerpt field too. If you leave it blank the excerpt will be created automatically from article's content.


Knowledgebase image sizes

The layout of knowledgebase article supports images (and embedded videos) up to 615 px wide. When inserting images into knowledgebase articles it's best to choose the Medium image size.


Setting up a FAQ is very similar to setting up Knowledgebase. First create a page with FAQ page template.

You then manage your FAQ categories and posts in FAQ section. The FAQ page will show all FAQ posts divided into categories (Groups), as well as category browser. Clicking on the FAQ post will reveal it's content.

Once you create some FAQ categories and posts you will be able to attach such categories to knowledgebase posts, on a per post basis.


To set up blog simply create a page with Blog page template. You can then start adding categories or posts, all managed in Posts section of you WP admin area.

Blog posts support user comments nested one level deep.

You can add a Featured image to each blog post. The featured image will be up to 615 px wide.

There are some settings in Appearance / Theme Options section that will let you control the position of sidebar on blog pages as well as size and behavior of post thumbnails, so be sure to check them out!


Blog image and video sizes

All blog pages, blog category and single post pages support images and videos up to 615 px wide.

When placing images or videos into blog articles it's best to use the Medium size. Images look best when wrapped in [frame] [/frame] shortcode.


Pricing tables can be managed in Pricing Plans section. Each pricing plan is a separate post and can have following characteristics:

  • Price
  • Pricing info - example: monthly
  • Button URL - a URL to which the user is directed when choosing a plan, for example payment page in some kind of e-commerce system
  • Button text - a label for button
  • Up to 10 features, each consisting of Value, Key and Detail

Pricing table can be displayed by using the Pricing page page template, as well as using [pricing-table] shortcode on any other page.


bbPress forum walkthrough

If you are new to bbPress I recommend watching this YouTube video walkthrough made by Dev4Press. The video is a great tutorial and it's super easy to start working with bbPress after watching it.

bbPress page templates

In addition to regular bbPress pages (like topic pages, forum etc.) CheerApp offers following page templates for bbPress:

  • bbPress - Create Topic - displays a topic creation form
  • bbPress - Forums (Index) - displays all forums with sub-forums, description and topic/reply/freshness stats
  • bbPress - Topics (Newest) - displays most recent topics
  • bbPress - Topics (No Replies) - displays topics that have no replies yet
  • bbPress - User Login - displays page content with user login form
  • bbPress - User Register - displays page content with user registration form
  • bbPress - User Lost Password - displays page content with user lost password form

Topic statuses

I have made a small addition to bbPress when developing CheerApp so that the bbPress forum have some support forum flavor. What I am speaking of are post statuses. Each post can have a status of General Quiestion, Announcement, Resolved or Not Resolved.

Only administrators/moderators can create announcement topic types. Moderators/administrators and original thread authors have the ability to mark topic as resolved (or unresolved). Once the topic has been closed, only mods/admins can mark it again. Support questions have a unresolved status by default.

I hope you'll find this feature a nice addition to usual bbPress experience!

Login and Register widget

Once you install bbPress plugin you will see a login widget appearing in the page header. If you create a page with bbPress - User Register page template the register button will appear there also.

Please do not use the default bbPress login widget in the sidebar as to avoid conflicts between these two.

What are shortcodes and how to use them?

Shortcodes are a very powerful WordPress tool that allows you to format your content in some specific way or display dynamic content inside your post, page or widget. The best examples of shortcodes available in CheerApp are column shortcodes, that will let you split your content into columns. Other shortcodes will let you display dynamic pricing tables, quick links.

To use a shortcode it's best to switch to HTML editor (opposing to the Visual one) in when adding or editing post or page. Shortcodes are a bit similar to HTML or XML tags but with one exception - they are wrapped with a square brackets, for example [shortcode], or [divider]. In fact, the [divider] shortcode is the most basic shortcode in CheerApp, so try typing it exactly as you see it here into your post content - it will add a horizontal divider to you post once you publish it.

There are two main types of shortcodes - self-enclosing ones and not-self-enclosing ones.

The former doesn't have any content in it; examples of self-enclosing shortcodes are [divider] or [pricing-table].

The latter require you to put content inside them. In other words, a chunk of your post content must be wrapped with two shortcode tags, opening and closing one. A quick example: [center] Centered content [/center]. Please not that the closing tag has to have a slash in it.

Another feature of shortcodes are attributes - they are like additional options for your shortcode. Here's a pattern for adding attributes to shortcodes: [shortcode attribute="value"] Content [/shortcode]. Now, here's a real world example on how you would construct an info box in CheerApp: [box type="info"] Content [/box]. It's as simple as that.

Please refer to the shortcode table to learn about all shortcodes available in CheerApp.

One important thing to note about column shortcodes, like [half] [/half] - all columns have to be wrapped with yet another shortcode, the [columns] [/columns] shortcode.

Another important thing is that the size is calculated relatively to the width of whole layout. That means, that if you wanted to divide a knowledgebase article (which is already 2/3 of the entire layout's width) into two columns you cannot use the [half] [/half] shortcodes in this case. You would, instead, use the [third] [/third] shortcodes.


Available shortcodes

Shortcode Description Attributes Usage example
[center] [/center]

Center the content placed inside this shortcode

No attributes

[center] <p>Centered paragraph</p> [/center]
[frame] [/frame]

Places the content into a frame. For best presentation of your images and videos always use this shortcode for placing images or video embed codes.

align - "none", "center", "left", "right" - alignment of the frame

caption - a caption text, best utilized on image frames

lightbox - 1 for use lightbox for all images linking to full-size image placed inside the frame; 0 for no lightbox - this is the default.

[frame align=left lightbox=1 caption="Caption text"] <a href="http://example.com/wp-content/uploads/2012/01/image.jpeg"><img src="http://example.com/wp-content/uploads/2012/01/image-615x409.jpg" width="615" height="409" /></a> [/frame]

[divider]

[hr]

Prints a divider line No atributes [divider]
[columns] [/columns] Column wrapper. If you want to use any of the column shortcodes below you have to wrap them with this shortcode. No Attributes [columns] [half] 1/2 Column [/half] [half] 1/2 Column [/half] [/columns]

[third] [/third]

[one-third] [/one-third]

Creates a column with the width of 1/3 of the total layout width. The column size equals to 294px. No attributes [columns] [third] 1/3 Column [/third] [third] 1/3 Column [/third] [third] 1/3 Column [/third] [/columns]

[two-thirds] [/two-thirds]

Creates a column with the width of 2/3 of the total layout width. The column size equals to 627px. No attributes [columns] [two-thirds] 2/3 Column [/two-thirds] [third] 1/3 Column [/third] [/columns]

[half] [/half]

Creates a column with the width of 1/2 of the total layout width. The column size equals to 460px. No attributes [columns] [half] 1/2 Column [/half] [half] 1/2 Column [/half] [/columns]

[fourth] [/fourth]

[one-fourth] [/one-fourth]

Creates a column with the width of 1/4 of the total layout width. The column size equals to 210px. No attributes [columns] [fourth] 1/4 Column [/fourth] [fourth] 1/4 Column [/fourth] [half] 1/2 Column [/half] [/columns]

[three-fourths] [/three-fourths]

Creates a column with the width of 3/4 of the total layout width. The column size equals to 710px. No attributes [columns] [three-fourths] 3/4 Column [/three-fourths] [fourth] 1/4 Column [/fourth] [/columns]

[fifth] [/fifth]

[one-fifth] [/one-fifth]

Creates a column with the width of 1/5 of the total layout width. The column size equals to 160px. No attributes [columns] [fifth] 1/5 Column [/fifth] [four-fifths] 4/5 Column [/four-fifths] [/columns]

[two-fifths] [/two-fifths]

Creates a column with the width of 2/5 of the total layout width. The column size equals to 360px. No attributes [columns] [two-fifths] 2/5 Column [/two-fifths] [three-fifths] 3/5 Column [/three-fifths] [/columns]

[three-fifths] [/three-fifths]

Creates a column with the width of 3/5 of the total layout width. The column size equals to 560px. No attributes [columns] [three-fifths] 3/5 Column [/three-fifths] [two-fifths] 2/5 Column [/two-fifths] [/columns]

[four-fifths] [/four-fifths]

Creates a column with the width of 4/5 of the total layout width. The column size equals to 760px. No attributes [columns] [four-fifths] 4/5 Column [/four-fifths] [fifth] 1/5 Column [/fifth] [/columns]
[quick-links] Prints your Quick Links No attributes [quick-links]
[pricing-table] Prints your Pricing Table

highlight - and index of plan to be initially highlighted, for example 2 to highlight second displayed item. Default: 2

category - optional category ID. The table shows all pricing plans by default. By specifying this parameter you can print only plans from chosen category.

[pricing-table highlight=2 category=10]
[box] [/box] Prints an alert box containing the contents of this shortcode. You can choose between three types of box: info, warning and resource.

type - info, warning or resource - changes the box style

[box type=resource] <h2><small>Recommended FTP software</small><a href="#">FileZilla - Open Source FTP Client</a></h2> <ul class="info clearfix"><li><small>Source:</small> <a href="#">http://filezilla-project.org/</a></li><li><small>Size:</small> 4.9 MB</li></ul> [/box]
[button] [/button] Prints button, You can choose the icon and url using attributes.

icon - download, like, heart, mail, padlock, search, rss, subscribe, info, info-alt, sticky, comment, merge, split, edit, trash, stop, warning, replay, restore, revert, approve, ok, close, question, twitter, subitem, tag, category

url - a URL the button links to

class - additional custom class

id - custom element ID attribute

[button icon="twitter" url="http://twitter.com"] Follow us on Twitter [/button]

Available bbPress shortcodes (only when bbPress is installed)

Shortcode Description Attributes Usage example
[login-link] [/login-link] Prints a link to login page (if one has been previously created) No attributes [login-link] Login here [/login-link]
[register-link] [/register-link] Prints a link to register page (if one has been previously created) No attributes [register-link] Register here [/register-link]

1.0.6

Files affected:

  • functions.php
  • options.php

Changes / fixes

  • Fixed: An issue with theme options not saving

1.0.5

Files affected:

  • All files

Changes / fixes

  • Fixed: Support for WordPress 3.4.2+ and bbPress 2.1+

1.0.4

Files affected:

  • header.php
  • options.php
  • slider.php
  • style.css
  • js/scripts.js

Changes / fixes

  • Added: Option to put slider into autoplay mode in theme options panel
  • Added: Sample data in theme package. Please note that sample data doesn't include menus and widgets, as well as WordPress and theme settings. You will have to set them yourself once you install CheerApp.
  • Fixed: Bullets on FAQ list elements

1.0.3

Files affected:

  • All files - all files should be updated to fix the previous translation mess with multiple textdomains

Changes / fixes

  • Fixed: Theme translations were not working as they should; it's fixed now
  • Added: 'languages' directory; place your translated files here
  • Added: 'languages/cheerapp.pot' - use this .pot file in your translations

1.0.2

Files affected:

  • style.css
  • template-faq.php
  • template-knowledgebase.php
  • bbpress/loop-topics.php
  • bbpress/loop-single-topic.php
  • functions/common-functions.php
  • functions/theme-shortcodes.php
  • functions/bbp-shortcodes.php
  • functions/modules/module-pricing.php

Changes / fixes

  • Added: Button shortcodes please see theme documentation for more info

  • Added: You can now choose, which category of pricing plans to show when using [pricing-table] shortcode

  • Added: New shortcodes: [login-link] and [register-link]

  • Changed: Slight change to the appearance of topic list in forums; should improve readability and aesthetics

  • Changed: Display of list elements in post and page content; they now have square bullets

  • Fixed: PHP warning when using printing contact form

  • Fixed: Knowledgebase and FAQ page templates now display the actual page content correctly (above articles loop)


Creating CheerApp was possible thanks to following great assets:

  1. jQuery
  2. jQuery Easing
  3. Modernizr
  4. prettyPhoto by Stephane Caron
  5. Tipsy by Jason Frame
  6. Uniform JS by Josh Pyles / Pixelmatrix Design LLC
  7. MacBook Air PSD by Orman Clark from PremiumPixels and Jonathan Olsen
  8. Thanks to Ivor Padilla for great template for this very documentation!

Once again, thank you so much for purchasing this theme, I hope you'll have much fun working with CheerApp. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to WordPress please visit official WordPress website for WordPress documentation, tutorials and forums. If you want to learn more about using bbPress please visit official bbPress website.