“Huddle - BuddyPress & WordPress Theme” Documentation by “Maximus” v1.0

Huddle - BuddyPress & WordPress Theme

Maximus
Nov 16th, 2011
Visit Our Support Forums →

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me via our support forum. Visit Our Support Forums →

Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. WordPress

A) HTML Structure - top

This theme is a fixed layout with two columns. Here is an overview of the main html structure of the site (Due to the complex nature of this theme the structure changes with most pages):

B) CSS Files and Structure - top

I'm using one CSS file in this theme. The main overall structure is as follows:

	
 TABLE OF CONTENTS
 
    0. RESET
    1. GLOBAL
    	- 1.1. BUTTON
    	- 1.2. COLORBOX
    2. HEADER
        - 2.1. LOGO
        - 2.2. LOGIN
        - 2.3. NAV
        - 2.4. DROPDOWN
    3. BILLBOARD
    4. CONTENT
        - 4.1. PAGINATION
        - 4.2. AUTHOR INFO
        - 4.3. RELATED POSTS
        - 4.4. COMMENTS
        - 4.5. RESPOND FORM
        - 4.6. MEMBERS
        - 4.7. GROUPS
        - 4.8. PROFILE
        - 4.9. FORUMS
    5. SIDEBARS
    	- 5.1. SIDEBAR BLOG & SIDEBAR PAGE
    	- 5.2. SIDEBAR HOME & SIDEBAR FOOTER
    6. WIDGETS
    	- 6.1. WIDGET MEMBERS
    	- 6.2. WIDGET SEARCH
    	- 6.3. WIDGET TABBED ARCHIVE
    	- 6.4. WIDGET TABBED POSTS
    	- 6.5. WIDGET TWITTER
    	- 6.6. WIDGET ENEWS
    	- 6.7. WIDGET FLICKR
    	- 6.8. WIDGET GROUPS
    	- 6.9. WIDGET RECENT POSTS
    7. FOOTER
        - 7.1. COPYRIGHT
        - 7.2. LINKS
    8. PAGE TEMPLATES
    	- 8.1. ARCHIVES
    	- 8.2. FULL WIDTH
    	- 8.3. IMAGE GALLERY
    	- 8.4. SIDEBAR LFET
    	- 8.5. SITEMAP
    9. SHORTCODES
    	- 9.1. COLUMNS
	10. COLOR STYLES
		- 10.1. GREEN
		- 10.2. ORANGE
		- 10.3. RED
		- 10.4. BROWN
		- 10.5. YELLOW
		- 10.6. GRAY
		- 10.7. MAGENTO
		- 10.8. PURPLE
		- 10.9. CYAN
    11. BROWSER HACKS
    	- 11.1. IE9
		- 11.2. IE8
		- 11.3. IE7
		- 11.4. FIREFOX

C) JavaScript - top

This theme imports 5 to 6 Javascript files (depending on widgets installed).

  1. jQuery (This is a remotely hosted version of jQuery version 1.6, and is located on the Google CDN)
  2. buddypress (Needed for buddypress)
  3. ColorBox (needed for lightbox popup)
  4. Superfish (Used for the sub nav drop-down menu in the main navigation)
  5. JQuery Tweet (Gets the contents of your latest tweets and displays them when the widget is called)
  6. Custom Scripts (Calls the superfish drop-down, homepage slideshow, widget tabbed areas, along with some presentation scripting)

D) PSD Files - top

I've included 11 main PSDs with this theme, with some various slices you may need.

E) WordPress, BuddyPress, & bbPress - top

This theme is designed to run on the latest version of WordPress 3.2.1, the latest version at time of publishing. Please make sure you have installed and are using the most recent version of WordPress. You can find the most recent stable release of WordPress here - http://wordpress.org/download/

Assuming you now have the latest version installed, proceed to the steps below.

Now you may proceed to download and install bbPress. You can find the latest version of bbPress plugin here - http://wordpress.org/extend/plugins/bbpress/

Now you will need to down and install BuddyPress. You can find the latest version of BuddyPress here - http://buddypress.org/download/

E.1) WordPress / Installation - top

Located within your download files from ThemeForest is a folder named 'Theme', please upload the folder that is inside here named 'huddle', to the themes folder on your WordPress install, located in /wp-content/themes/. Your folder structure should resemble something like this now - /wp-content/themes/huddle/

NOTE: DO NOT UPLOAD ENTIRE ZIP FILE YOU DOWNLOADED FROM THEMEFOREST TO YOUR SERVER, ONLY THE FOLDER JUST MENTIONED.

Now that you have the theme files uploaded. You will need to login to your WordPress admin area and activate the theme. Once the the theme is activated, then proceed to the remaining steps below.

E.1.1) Notes On Properly Configuring BuddyPress & bbPress- top

Now that you have the WordPress, the Huddle theme, BuddyPress plugin, and bbPress plugin all installed, there are a couple things to note regarding properly configuring both bbPress and BuddyPress.

Make sure the theme and both plugins are activated in WP admin.

For bbPress make certain you select the option to install forums for groups and not sitewide. BuddyPress and bbPress in general will just work better this way.

a

Make sure you have bbPress settings configure in this way for best performance with buddypress and theme:

b

And a couple things to note for the settings on the buddypress plugin, to use these settings:

c

d

e

Now proceed are ready to proceed to the remaining steps of setting up WordPress.

E.2) WordPress / Setup - top

Now that you have your theme installed and activated, please proceed with the remaining steps to get things in working order on your site.

E.2.2) WordPress / Setup / WordPress Settings- top

Create a new page without any content. Give it the name Welcome. Then from from the page attributes menu in the right hand side of the screen select the page template of 'Homepage'. Then publish.

Now repeat this step, but this time create a page named 'Blog' and assign it the template of 'Default', then publish.

Once, you have created both pages and have assigned the proper templates to them. You will need to navigate to WP Admin / Settings / Reading from here you can properly set the Welcome page you just created as you static front page for the theme, and the Blog page as the posts page, then click the save changes button.

Now proceed to the next step.

Create a new menu. Then save the menu. Now you can assign this menu to one of the menu locations. There are two menu locations in this theme, the main menu at the top, and the footer menu at the bottom. You can read more about this WordPress feature here.

Repeat this same step for both the top menu and also the footer menu, then save.

E.3) WordPress / Creating Posts - top

Writing A Post
I'm not going to explain this basic step other then to refer you to the documentation on WordPress.

TROUBLESHOOT: We get many support requests because it seems most people aren't aware that WordPress has hidden many post options by default. You can turn these features on by clicking the screen options link in the upper right of your post page. Read more about that here.

Featured Images
This theme uses a feature in WordPress that allows you to assign an image to your post. This is called 'featured image'. This theme relies heavily on the fact that you will assign images to each of your posts. You can read more about how to do that here.

E.4) WordPress / Theme Options Panel - top

Setting Up
This theme comes with a handful of theme options pertaining to your theme. Most of which are explained in the options panel itself. Below are some screenshots of my current setup on the live demo:

f

g

h

Setting Up
This theme comes with 9 custom widgets useful throughout your theme. There are 4 sidebar locations, the homepage, pages, footer and the blog. Below is a screenshot of my current setup on the live demo:

i

E.6) WordPress / Custom Widgets - top

Widget - Members
Displays the members box seen on the homepage of the demo. Lists members and sorts them.

j

Widget - Latest Posts
Displays most recent posts from the blog including images and post meta information.

k

Widget - Groups
Similar to the members widget, the groups widget displays a list of groups, including their avatar, and allows sorting.

l

Widget - Tabbed Archive
Display links to your post archives in tabbed arrangements.

m

Widget - Tabbed Posts
Displays links to posts in tabbed arrangements.

n

Widget - Latest Tweets
Add your twitter ID (or username). The number of recent tweets you would like to display, and the text for the follow link.

o

Widget - Flickr Photos
Display your photos from flickr for user or group photos.

p

Widget - eNews Sign Up
Add feed burner email sign notifications.

q

Widget - Featured Video
Paste in the embed code of the video you would like to feature, as well as any description.

r

E.7) WordPress / Custom Page Templates - top

Setting Up
This theme comes with a handful of custom page templates, archives, sitemap, image gallery, full width, links, sidebar left, etc. To use these, create a page and give it a name, then select the 'template' drop-down from the 'Page Attributes' box in the right, then save. Just as you did previously here:

E.8) WordPress / Using The Shortcodes - top

We've tried to simplify the shortcodes and only include crucial column shortcodes by default. You can wrap shortcodes around chunks of text image, etc, to create content columns. For example if I wanted to have 3 columns in my post text I would enter in the following, be sure to add 'last' at the end of the last shortcode to close out the column:

[one_third]
	Dummy content text here.
[/one_third]

[one_third]
	Dummy content text here.
[/one_third]

[one_third_last]
	Dummy content text here.
[/one_third_last]

Column sizes that are available are the following:

[one_half]Dummy content text here.[/one_half]

[one_third]Dummy content text here.[/one_third]

[two_third]Dummy content text here.[/two_third]

[one_fourth]Dummy content text here.[/one_fourth]

[three_fourth]Dummy content text here.[/three_fourth]

[one_fifth]Dummy content text here.[/one_fifth]

[four_fifth]Dummy content text here.[/four_fifth]

[two_fifth]Dummy content text here.[/two_fifth]

[three_fifth]Dummy content text here.[/three_fifth]

[one_sixth]Dummy content text here.[/one_sixth]

[five_sixth]Dummy content text here.[/five_sixth]

E.9) WordPress / Optional Plugins - top

WP-PageNavi
The only third-party WordPress plugin that has been tested with this theme is WP-PageNavi. This plugin creates the numeric post pagination you see on many sites. To utilize this feature, download and install this theme from the WordPress Plugin Directory, then set up the configurations exactly as follows:

Once again, thank you for purchasing this theme. I'd be glad to help you if you have any questions relating to this theme. Only questions posted in our support forum will be answered. Please direct any support related questions there, and we'll look to answer as soon as possible. Visit Our Support Forums →

Maximus

Go To Table of Contents