Clubber WordPress Theme Documentation

1. About

Hello! Thank you for purchasing Clubber theme, the greatest clubber's wordpress theme! If you have any questions you can get in contact with me, please send a message via my contact form.

This theme is compatible with the next browsers : ie8, ie9, ie10, google chrome, mozilla firefox, opera, safari.


EVENTS

Clubber can display your upcoming events in a really nice manner. You can display each event on their own map, the lenght of the event and also the availability of the tickets.


AUDIO

What this chapter offers you is that you can post a full album from an artist using self hosted audio files or embedded sounds from SoundCloud. You can also post the genre of music, release date, and if you want you can purchase the album.


VIDEO

If you want to share any kind of videos from YouTube or Vimeo you are in the right place.


PHOTO

Clubber also allows you to have how manny photo albums you like. Once you create the desired album, in there you can post any gallery that pleasures you.


THEME OPTIONS

This theme allows you to easily upload a background image OR you can choose a background pattern from the Style of the theme. The logo, favicon, menu and link colors, sliders images and anything else is completely adjustable in the Theme Options.


Images, videos or songs are not included in the download of the template.

Songs are purchased from beatport.com. You must purchase them separately.

Also the font that is used in the theme belongs to Google Web Fonts.

2. Installation

Please make sure that you are using the latest version of Wordpress before you install CLUBBER. Information on how to install Wordpress you can find here.

2.1 - Upload CLUBBER tou your server via ftp

Unpack the Theme's zip file you have downloaded.

Upload the /clubber folder to the /wp-content/themes directory in your WordPress installaion on your server.

Login to your WordPress admin.

Click Appearance >Themes

Look for the CLUBBER theme and click Activate.

2.2 - Upload CLUBBER via the wordpress

Login to your WordPress admin.

Click Appearance >Themes and go to Install Themes.

Click Upload, browse your files and find CLUBBER.zip (Make sure you are not uploading the whole zip file that you've downloaded from Themeforest but only the clubber.zip file).

Click Install Now

After CLUBBER is uploaded, click Appearance >Themes > Install Theme

Look for the CLUBBER theme and click Activate.

img

3. Pages

3.1 - Setting up the Homepage

Click Pages > Add New.

You can give this page a title, eg. "Home". You don't have to include any content.

Before you want to publish the page you can select if you want to have the sidebar layout on the left or the right side.(the full width home page is inaccessible)

Click Publish.

Now you can add the new page to your menu.

Now click Settings > Reading and select Front page displays a static page. Select the page you just created, eg. "Home" as your Front page and click Save Changes.

img

The Homepage displays posts in the center has a left or a right sidebar, in which you can drag and drop widgets. Simply go to Appearance > Widgets and add any widgets to "sidebar page".

3.2 - Adding a slideshow to the homepage

Click Slider > Add New

To add a image go to : Featured image > Set featured image (the image must be 970x380 px)

Slide descrition, slide URL (not obligatory).

Click Publish

To activate the slide Click Options > Template Settings > Homepage slide (check the box)

3.3 - Setting up the Blog Page

Click Pages > Add New.

Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Blog Style 1" or "Blog Style 2" template.

You can give this page a title, eg. "Blog". You don't have to include any content.

Click Publish

Now you can add the new page to your menu.

Click Events > Add New

To set a photo as a cover : Featured image > Set featured image

Click Publish

3.4 - Setting up the Event Page

Click Pages > Add New.

Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Event Style 1" or "Event Style 2" or "Event Style 3" template.

You can give this page a title, eg. "Events". You don't have to include any content.

Click Publish

Now you can add the new page to your menu.

Click Events > Add New

To set a photo as a cover : Featured image > Set featured image

Enter title, date, location, venue, zoom map and Ticket URL.

Click Publish

3.5 - Setting up the Audio Page

Click Pages > Add New.

Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Audio" template.

You can give this page a title, eg. "Audio". You don't have to include any content.

Click Publish

Now you can add the new page to your menu.

Click Audio > Add New

To set a photo as cover: Featured image > Set featured image

Enter title, release date, buy link, genre.

For uploading songs on the Audio Single Page you must Click Add Media > Select Files (only .mp3 files) or use SoundCloud shortcode.

Click Publish

3.6 - Setting up the Photo Page

Click Pages > Add New

Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Photo" template.

You can give this page a title, eg. "Photos". You don't have to include any content.

Click Publish

Now you can add the new page to your menu.

Click Photos > Add New

To set a photo as cover : Featured image > Set featured image

To upload more photos Click Upload Photo > Select Files.

Click Publish

3.7 - Setting up the Video Page

Click Pages > Add New

Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Video" template.

You can give this page a title, eg. "Videos". You don't have to include any content.

Click Publish

Now you can add the new page to your menu.

Click Videos > Add New

To set a photo as cover : Featured image > Set featured image

Enter title, link (YouTube or Vimeo).

Click Publish

3.8 - Setting up the Contact Page

Click Pages > Add New

Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Contact" template.

You can give this page a title, eg. "Contact". You don't have to include any content.

Click Publish

Now you can add the new page to your menu.

4. Menu

If you are using Wordpress 3.0 or higher you can make use of the built in Menu functionality.


This is how you create your Menu:

Click Appearance > Menus

On the top right side enter any name for your new Menu and click Create Menu.


Add Menu Items to your Menu by dropping custom links, pages or categories into your custom menubar.

5. Theme Option Panel

5.1 - General

Logo

Favicon

Advertising Banner in Header

Google Analytics CODE

5.2 - Template Settings

Homepage slide

Number of slides

Slide delay

Player: AutoPlay

Sidebar Layout for Single Page Blog

Sidebar Layout for Single Page Events

Number of Videos per page

Number of Audio per page

Number of Photos per page

Number of Events per page

5.3 - Style

Style: Dark - Light

Theme Color

Fonts

Background

Background Pattern

Background Image

5.4 - Social Media

Facebook

Twitter

Digg

YouTube

Vimeo

RSS

Flickr

LastFM

Pinterest

5.5 - Custom CSS

5.6 - Contact

Email Address

Subject

6. Sidebars and Widgets

6.1 - Sidebars

CLUBBER comes with 5 sidebars:

Sidebar page

Footer Widget 1

Footer Widget 2

Footer Widget 3

Footer Widget 4


Simply go to Appearance > Widgets to drag and drop any widgets to your sidebars.

6.2 - General

I added 8 custom widgets to this theme:

You find the following widgets in Appearance > Widgets.

CLUBBER - Recent Posts (Recent posts on your blog site)

CLUBBER - Upcoming Events (Display your latest Events)

CLUBBER - Latest Videos (Display your latest Videos)

CLUBBER - Photos (Display your latest Photos)

CLUBBER - Audio Player (Display your Audio Player)

CLUBBER - SoundCloud (Display your SoundCloud)

CLUBBER - Flickr (Display pictures from a flickr acount)

CLUBBER - Twitter (Display your latest tweets)

7. Footer

CLUBBER's footer is fully widgetized, which means your can insert whatever widgets you like in there.

There are 4 different columns in the footer and each of them supports multiple widgets.

Go to Appearance > Widgets

Drag and drop the desired widgets into the sections "Footer Widget 1", "Footer Widget 2", "Footer Widget 3" and "Footer Widget 4".

If you would like to add links to your social profiles to the footer area, go to the Theme Options Panel and in the tab SOCIAL MEDIA enter the full URL to your social profiles.

8. Shortcodes and columns

8.1 - Shortcodes


If you made the update for the theme and shortcode doesn't work please enter the Theme Options > Save Options img

Blog

If you write this shortcode "[blog]" it will apear the latest posts from the blog.

Arguments: eg. [blog items=4 sort=desc]

-items=(numbers of posts) eg. items=4

-sort=(tipe of sortation asc/desc) eg. sort=asc

Category

Write on slug the category ID. eg. [blog cat=3]



Events

If you write this shortcode "[event]" it will apear the latest posts from the blog.

If you write this shortcode "[eventup]" it will apear sorted by date.

Arguments: eg. [event items=4 sort=desc]

-items=(numbers of posts) eg. items=4

-sort=(tipe of sortation asc/desc) eg. sort=asc

Category* use [event cat=slug]

If you want to make the category sort work please check the box from Theme Options > Template Settings > Shortcode Events Category

Write on slug the category name. eg. [event cat=clubs]

*The sort doesn't work



Audio

If you write this shortcode "[audio]" it will apear the latest posts from the blog.

Arguments: eg. [audio items=4 sort=desc]

-items=(numbers of posts) eg. items=4

-sort=(tipe of sortation asc/desc) eg. sort=asc

Category* use [audio cat=slug]

If you want to make the category sort work please check the box from Theme Options > Template Settings > Shortcode Audio Category

Write on slug the category name. eg. [audio cat=clubs]

*The sort doesn't work



Photos

If you write this shortcode "[photo]" it will apear the latest posts from the blog.

Arguments: eg. [photo items=4 sort=desc]

-items=(numbers of posts) eg. items=4

-sort=(tipe of sortation asc/desc) eg. sort=asc

Category* use [photo cat=slug]

If you want to make the category sort work please check the box from Theme Options > Template Settings > Shortcode Photos Category

Write on slug the category name. eg. [photo cat=clubs]

*The sort doesn't work



Videos

If you write this shortcode "[video]" it will apear the latest posts from the blog.

Arguments: eg. [video items=4 sort=desc]

-items=(numbers of posts) eg. items=4

-sort=(tipe of sortation asc/desc) eg. sort=asc

Category* use [video cat=slug]

If you want to make the category sort work please check the box from Theme Options > Template Settings > Shortcode Videos Category

Write on slug the category name. eg. [video cat=clubs]

*The sort doesn't work



Title

[title]Title[/title]

img

Player

For one song:

[player]http://mydomain/my-audio-file.mp3[/player]

- if you want you can enlarge player's lenght write : [player width="500px"]http://mydomain/my-audio-file.mp3[/player]


For more songs:

[player_more width="500px"][/player_more] [ol] [song url="http://mydomain/my-audio-file.mp3"]Track 1[/song] [song url="http://mydomain/my-audio-file.mp3"]Track 2[/song] [song url="http://mydomain/my-audio-file.mp3"]Track 3[/song] [/ol]


SoundCloud

HTML 5

[soundcloud url="http://api.soundcloud.com/tracks/65379517" params="auto_play=false&show_artwork=true&color=ff7700" width="100%" height="166" iframe="true" /]


Flash

[soundcloud]http://soundcloud.com/djkozak/dj-kozak-lets-swing[/soundcloud]


Button

[button link="http://www.mydomain"]Click me![/button]


Tabs

[tabs] [tab title="Tab 1"] Tab 1 content [/tab] [tab title="Tab 2"] Tab 2 content [/tab] [tab title="Tab 3"] Tab 3 content [/tab] [/tabs]


Toggle

[toggle title="Toggle title"] Hidden content [/toggle]


Highlight

[highlight] highlighted text [/highlight] - the color is predefined by the theme

[highlight2] highlighted text [/highlight2] - the color #333333


Dropcap (it's a shortcode that enlarge's the first letter from a paragraph)

[dropcap]First letter [/dropcap]


Quotes

[quote_left]Quotes [/quote_left]

[quote_right]Quotes [/quote_right]


Photo Pretty

[photo_pretty width="250" height="150"]http://mydomain/my-audio-file.jpg[/photo_pretty]


Video Pretty

[video_pretty img="http://mydomain/my-audio-file.jpg" width="250" height="150"]http://youtu.be/Bk_TmVnghao[/video_pretty]


Bar

[bar][/bar] - dashed lines

Space

[space][/space]

8.2 - Columns

One Half

[one_half] ... [/one_half] [one_half_last] ... [/one_half_last]


One Third

[one_third] ... [/one_third] [one_third] ... [/one_third][one_third_last] ... [/one_third_last]


Two Third

[two_third] ... [/two_third] [one_third_last] ... [/one_third_last]


One Fourth

[one_fourth] ... [/one_fourth] [one_fourth] ... [/one_fourth] [one_fourth] ... [/one_fourth] [one_fourth_last] ... [/one_fourth_last]


One Fifth

[one_fifth] ... [/one_fifth] [one_fifth] ... [/one_fifth] [one_fifth] ... [/one_fifth] [one_fifth] ... [/one_fifth] [one_fifth_last] ... [/one_fifth_last]


Two Third

[two_third] ... [/two_third] [one_third_last] ... [/one_third_last]


Four Fifth

[four_fifth] ... [/four_fifth] [one_fifth_last] ... [/one_fifth_last]


Two Fifth

[two_fifth] ... [/two_fifth] [three_fifth_last] ... [/three_fifth_last]


Three Fifth

[three_fifth] ... [/three_fifth] [two_fifth_last] ... [/two_fifth_last]


One Sixth

[one_sixth] ... [/one_sixth] [one_sixth] ... [/one_sixth] [one_sixth] ... [/one_sixth] [one_sixth] ... [/one_sixth] [one_sixth] ... [/one_sixth] [one_sixth_last] ... [/one_sixth_last]


Five Sixth

[five_sixth] ... [/five_sixth] [one_sixth_last] ... [/one_sixth_last]


One Sixth

[one_sixth] ... [/one_sixth] [five_sixth_last] ... [/five_sixth_last]


9. Credits

I've used the following scripts, files, and other files in this theme:

Cycle2

jQuery

prettyPhoto

SoundCloud Shortcode

Mosaic Sliding Boxes

Options Framework

idTabs

Backstretch

audio.js

Patterns

Icons - Brankic1979

10. Changelog

Version 1.8 - Released: 01/24/2013

  • Add new style: Event Style 3

  • added: taxonomy-events-style3.php

Version 1.7 - Released: 01/18/2013

  • Player: AutoPlay

  • Shortcodes: Sort Category

  • added: audioauto.js

  • modified: script.js

  • modified: functions-setup.php

  • modified: shortcode-posts.php

  • modified: style.css

Version 1.6 - Released: 01/04/2013

  • Style: Dark - Light

  • added: dark.css

  • added: light.css

  • added: dark.js

  • added: light.js

  • added: images for style light

  • modified: script.js - problem solved to player

  • modified: style.css

  • modified: header.php

  • modified: functions-setup.php

  • modified: options.php

Version 1.5 - Released: 12/13/2012

  • Ready for WordPress 3.5

  • added: social icons - LastFM and Pinterest

  • modified: ui-custom.js

  • modified: options.php

  • modified: footer.php

  • modified: taxonomy-photos.php

  • modified: style.css


Version 1.4 - Released: 12/06/2012

  • modified: shortcode-posts.php

  • modified: widget-events.php

  • modified: taxonomy-events-style1.php

  • modified: taxonomy-events-style2.php

  • modified: taxonomy-photos.php

  • modified: taxonomy-videos.php

  • modified: taxonomy-audios.php

  • modified: event.php

  • modified: setup.js

  • modified: script.js


Version 1.3 - Released: 12/05/2012

  • modified: shortcode-posts.php - Added: new style for shortcode (events are sorted by date)

  • modified: style.css - Fix: logo

  • added: dummy content


Version 1.2 - Released: 12/04/2012

  • modified: script.js - Fix: backgrounds and prettyPhoto for IE8 and IE9


Version 1.1 - Released: 11/28/2012

  • added: blog-style2.php - A new style for blog.

  • added: taxonomy-events-style2.php - A new style for events.

  • modified: event.php - Added: two new options "All day" and "Check if show is free".

  • modified: photo.php

  • modified: widget-events.php

  • modified: widget-videos.php

  • modified: widget-photos.php

  • modified: widget-audio.php

  • modified: single-event.php

  • modified: search.php

  • modified: functions.php

  • modified: taxonomy-photos.php

  • modified: taxonomy-audios.php

  • modified: taxonomy-videos.php

  • modified: css_options.php

  • modified: shortcodes.css

  • modified: style.css


Version 1.0 - Released: 11/21/2012

  • Initial release.