Shoutbox WordPress Theme” Documentation by “Kriesi” v1.0

“Shoutbox WordPress Theme”

Created: 18/07/2011
By: Christian "Kriesi" Budschedl
Email: Kriesi

Informations about Updates and New Themes are always announced on Twitter and Facebook. Twitter updates are usually more up to date, Facebook updates are more detailed and easier to follow :)

Hello! First of all I would like to thank you for purchasing my theme! :)
If you have any questions that are beyond the scope of this help file, please feel free to ask your question at the support forum at

This file will teach you how to set up and use the “Shoutbox” WordPress Theme.
This file is rather extensive so you might think the theme is hard to use,
actually its not, you probably just might jump to the options page and explore everything yourself, this file is more of a reference work if you do not know what to do, or if you are not familiar to WordPress.

Have fun with your new theme! best regards

Table of Contents

  1. Folder Structure
  2. Installation
    1. Setting up the Theme Options
    2. Setting up Layout and Styling
    3. Setting up your Footer
    4. Setting up the Main News Page
    5. Setting up the Contact form and Social Network Informations
    6. Setting up the Sidebar
    7. Setting up the Menus on your site
    8. Using custom Widgets
    9. Adding Blog, Page and Portfolio (how to create entries and use preview images)
    10. The power of shortcodes
    11. Building your own dynamic Templates
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. PSD Files
  7. Image Sizes
  8. Sources and Credits

A) Folder Structure of Shoutbox and the Avia Framework - top

The Theme is built with WordPress best practices in mind, therefore it makes heavy use of the WordPress template engine. What exactly does that mean?

Whenever you see a php function call like this within your php files (get_template_part(), get_header(), get_footer() or get_sidebar() ) the theme retrieves a reusable code snippet, most of the time a chunk of code that is used in many different files.

Folder structure:


B) Installation - top

You can either choose to upload the theme to your server via ftp (only upload the unzipped folder „Shoutbox“ into the folder wp-content/themes/ ) or via WordPress upload function. to use the upload function of the WordPress admin panel make sure to ONLY upload the “Shoutbox” folder and not the whole archive file that you received by themeforest.

Notice: if you are new to WordPress and have problems installing it you might want to check out this link: Solving broken theme issues
After that is done activate the theme as you would activate any other theme at Appearance->Themes.
Shoutbox is now the active theme and you will be sent to the Themes Option Panel immediately.

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file that comes with the theme. You can import this file by clicking the "Import dummy data" Button of the Shoutbox Theme options. The theme will then import some dummy posts and pages from the live preview. However you will still need to set some options on your own, like menus and widgets. A quick demonstration video can be found here. (its really more a demonstration than a tutorial but it might be helpfull nevertheless. the video was recorded using the Brigtbox Theme but the options are the same for Shoutbox since the themes share a framework)

B 1) Setting up the Theme Options - top

If you want to change the general Options of the Theme open the “Shoutbox” Theme Options Panel (located in your admin sidebar) and click it, you will notice several tabs with options, which we will discuss now one by one.

Front page & Blog page
First of all you have to choose which content your front page should contain. You can either choose to display a page of your choice, or if you dont select a page the blog will be displayed. If you choose to select a page you can then pick another page that will display your blog instead of the default page content. If you want to make the front page look like the one in the theme demo make sure you select a page and then create a unqiue dynamic page template.

Next you can choose to upload your own logo. Make sure that the logo has the correct dimensions. If you need to embed a logo of different size you might need to edit the CSS files directly. We will talk about CSS best practices for the theme in a second after we talked about the last input field on the Theme Options page:

Google Analytics Tracking Code
Enter your Google analytics tracking Code here. It will automatically be added to the themes footer so google can track your visitors behaviour.

B 2) Setting up Layout and Styling - top

General Color scheme and CSS best practices
The theme has various default color schemes that serve as canvas for all further customization. All CSS files for those skins are located in your CSS folder, (one for each skin) )however if you want to edit some of the styles it is recommended to not edit those files directly.

After you have chosen your default skin, if you want to make any further changes we highly recommend copying the style you want to edit and then paste it into the empty custom.css file. Here you can edit the style and it will overwrite the original rule. If you modify your theme that way you can later easily update to newer versions without being in danger of overwriting your changes, since we will never edit the custom.css file.

Theme Colors:
With only two different color inputs (and the skin selection above) you can easily create new layouts in seconds. You just need to select a primary color for your links and as background color for footer and some other elements, as well as a font color for text placed on those elements.

As you can see the theme generates the color scheme on the fly: In this example we have choosen a dark blue background and white text on that blue background. The white gets applied to the heading and for the text the theme generates a slightly "darker" by adding a little of the blue background.

Stretched or boxed layout
The stretched layout expands from the left side of the viewport to the right. The boxed layout will create a box around your content area that is approx. 1000px wide. if you select boxed you will get additional options for background color and image.

Heading Fonts
You can choose several fonts that will add a unique feeling to your site. The fonts you can choose are a selection of some of the google free web font archive and applied via cufon, so that windows and mac browsers will display them the same way.

Quick CSS
If you want to do minor changes to the css you can enter them here and they will be added to the css. If you want to do major changes we recommend you to use the custom.css file.

B 3) Setting up yourheader & footer top

There is only one option in this section for the header: a textarea which allows you to paste a code snippet or an iamge that can be used as advertising image. You can also just write some text in here and it will be displayd as a framed place holding text for an image.

To set up your footer you need to select how many columns it should be displayed. Once that is done head over to the themes widget page (appearance-> widgets) and add widgets to the footer widget areas displayed here. The default widgets that are displayed in your footer will be removed once you apply any other widgets :)

Once that is done feel free to add text to the footer textarea to display a personal note or a welcome message to the footer bottom, just like seen in the theme demo

B 4) Setting up your Main News Page top

The default News page is split up in two sections: at the top you can find a featured post slider that can display any number of interesting posts. The slider displays only posts of the categories of your choice, got an autorotation setting as well as a max number of posts to display.

The second part of the News page is the actual blog. Here you can choose which posts to display, again by category, and how many you want to display. The posts are always arranged in the following order:

  1. a number of full size posts
  2. a number of small sized posts
  3. a number of small sized posts without preview image

B 5) Setting up the Contact form and Social Network Informations - top

Setting up contact form and social information is a rather quick task: just select the page that should display the contact form and also select the email address that should receive the mails.

If you add your twitter account name or the link to your Facebook page or profile a social icon will be displayed at the top of your page and at the footer for either of them. As for your worpdress feed: if you dont add anything to the url the default RSS feed will be applied automatically. If you got a feedburner RSS adress you can also enter it here. For example:

B 6) Setting up the Sidebar - top

Next step is to select those categories and pages that should get a unique set of sidebars. For every category or page choosen here the theme will add a new Sidebar Widget area at appearance/widgets. Once you have choosen the pages and categories press save and head over to the widget section of WordPress.

You will see that the new areas just got appended to the predefined ones.
So adding these areas is easy.

However be very careful when removing widget areas that already got widgets applied to them.
WordPress doesn't remember where it stores widgets by name, it stores this information by number. So if I would add a text widget to Contact (widgetarea Nr6 in the screenshot), and then delete the Contact widget area, the widgets would then be in Jobs. (previously in 7, now the new 6)

B 7) Setting up the Menus on your site - top

The Theme comes with support for the new WordPress 3.0 Menu feature. Just open Appearance->Menu in your backends Sidebar and add a New Menu called "Main", then add to this menu whatever menu items you need. If no menu is created a fallback menu will get displayed that shows all pages and a home link.

You can also create additional menus and display them within your sidebar by adding the menu widget to one of your sidebars

B 8) Using custom Widgets - top

The Theme comes with several custom widgets that let you display latest blog posts, latest portfolio entries or your latest tweets either in your sidebar or if used in conjunction with shortcodes also within your content area. It also has a combo widget with 4 tabs taht includes latest comments, latest entries, most popular entries and post tags, as well as an advertising widget, and a social media count widget.

The options are pretty much self explaining, the widgets are named "Shoutbox Latest News", "Shoutbox Latest Portfolio" and "Shoutbox Twitter Widget"

The only widget which might need a little bit of explanation is the social media count widget: it displays the number of twitter follower as well as the number of your rss feed subscribers in the sidebar. The feed subscribers can only be shown if you enter a valid feedburner feed url (this will not work with your default wordpress feed url) Also make sure that the awarness API of your feedburner account is active, otherwise your wordpress installation will not be able to access your feed data.


B 9) Adding Content (how to create gallery entry and preview images) - - top

Writing a post, page or portfolio entry doesn't really differ from doing so when using other themes. You add a title, add some content, and categories and thats about it. In Shoutbox you need to do a few more things:

If you want to create a blog entry, or a new page single featured image or multiple images that get converted to a slideshow. If you have never worked with a slidehsow of one of my latest themes this short demo video might be interesting for you.

When writing the post, scroll down; bellow the text-area you will notice a few extra fields: First you can choose which slideshow type you want to use and if autorotation for this post should be active. Once that is done you can add one or multiple Images


First of all just click the upload button and add upload your image to your web-server. Click the "Use image as Feature Image" button and a thumbnail will be inserted. You then can add a caption title and a caption text if you want to. When uploading a picture all different thumbnail sizes needed for the theme are generated by WordPress. However this only happens if you add new pictures. if you are using pictures that were already uploaded before the Shoutbox theme was activated, WordPress cannot resize them.

Next you can add a caption or caption title.

Proabbly the best way to understand these settings is to set 3 or 4 images and then fool arround with the settings until you know what each one does :)
Clicking the small plus and minus icons at the right bottom of the page will let you add new feature images or remove old ones.

Using Video:
When working with the image slider you can choose to display videos in 3 ways:

  1. You omit the preview picture and display the video directly
  2. You display a preview image that disapears when clicked and shows the video, directly embeded into the slideshow
  3. You display a preview image which can be clicked. Once clicked a lightbox will open and display your video.

1.) When omitting the preview picture simply dont set any picutre, but set the field "apply link to image" to: "embed video when image is clicked"

2.) If you want to display a preview image that disapears when clicked and shows the video embedded do the same step as above, but simply also set a preview picture.

3.) If you want to open the video within a lightbox set the field "apply link to image" to: "Link Manually" and enter the video url into the input field that appears.

Which video files are supported?
Vimeo, Youtube and any other video service that works with Wordpress oembed. Self hosted videos are also supported and used the same way: just add the link to the video url into the input field.

If you want to display self hosted videos: that works as well, but only for HTML 5 compatible data types. The slideshow will automatically embed the movies as HTML5 movies with a fallback flash slider. Supported formats are .mp4, .webm and .ogv.

If you want to upload different formats for different browsers (some browsers support mp4, some ogv, some webm) feel free to do so by just linking to one of these files and uploading the others with the same name but different file format. The Slideshow will automatically check if the browser used to display the video is capable of displaying the content as HTML5 video, and if thats not the case serve a flash fallback. It is recommended to always at least provide a h264 encoded mp4 file.


B 10) Using shortcodes - top

What is a shortcode and how do i use it?
Shortcodes are small text snippets that get converted by WordPress. As an example:

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets, such as:

[quote]This is a pull-quote.[/quote] 

to generate a pull-quote. Other example would be the use of shortcodes to create columns within your post:

[one_half first]Content here.[/one_half] [one_half]Content here.[/one_half] 
[one_third first]Content here.[/one_third] [one_third]Content here.[/one_third] [one_third]Content here.[/one_third] 
[one_fourth first]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] [one_fourth]Content[/one_fourth] 
[one_fourth first]Content here.[/one_fourth] [three_fourth]Content here.[/three_fourth]
[one_third first]Content here.[/one_third] [two_third]Content here.[/two_third]

The theme comes with quite a few shortcodes that are easily accessible thanks to a visual self-explanatory user interface that is accessible by clicking the magic wand button when you write a post

Most shortcodes require you to enter additional information and then get generated by the theme on its own, starting from columns to content slider. You can also choose to nest various shortcodes. For example create 3 columns, and within each of them display a small slideshow. Or do it the other way round: create a single slideshow that slides multiple columns. The sky is the limit :)

Attention: Please make sure to always start new shortcodes on new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the html sometimes. This is true for all shortcodes but the inline ones like drop-caps buttons and icon links, those are the only ones that don't need a new paragraph.

In case you encounter odd behavior always make sure that all shortcodes are closed as expected. Also when trying to nest shortcodes please be aware that you cant wrap a shortcode with the same name around another one with that name: For example: [one_third first] [one_third first]Content here.[/one_third] [/one_third] would result in messed up html code since WordPress is not able to identify which opening tag belongs to which close tag. However what you can do is nest shortcodes within each other if they don't share a name. for example you could easily place a slideshow within a 3rd column tag. Just make sure to add new paragraphs between them ;)

Icon Box shortcodes: The theme comes with iconbox shortocdes (see at the bottom of this page). The Icons used are from the iconset "Iconsweets2" which has a lot more icons then we used. if you want to add some of them, or any other just upload your icons to the image/icons/iconbox/ folder. Once that is done, they will appear in the dropdown box of the visual shortcode generator if you create a new iconbox

B 11) Building your own dynamic Templates - top

Probably the best way to create stunning and complex pages is the Wordpress Template Builder that comes with the theme. Allthough you can of course choose to edit template files the old fashioned way, (by editing them in your HTML editor of choice) the dynamic template generator is a much more flexible solution. So how does that editor work? Before reading the how to you might want to check this short demo video which already describes a little how it is done.


First of all open the editor at Shoutbox-> Template Builder. You then get asked to enter a name for your new dynamic template. Do so by entering one without any special characters and at least 3 chars long. Hit the "Create Template" button and a blank default template is created.


It doesnt contain any elements yet but we will add some in a second, first lets apply the template to a post, page or portfolio entry of your choice. Simply open the entry you want the template to be applied to and look out for the "Dynamic Template" Sidebar. Here you can now select the template you have just created.

Once selected save the entry. If you look at it in the frontend now it should simply display a blank content area.

To change that we need to start elements to the dynamic template. So head back to the new Dynamic Template you just created and start adding elements. Once an element is added you can easily change the position via drag and drop. To make it as easy as possible we tried to reduce the elements available to the absolute necessary minmum. We ended up with7 "modules":

Horizontal Ruler
adds a horizontal ruler to the page to seperate content. Choose between several styles to fit your needs

Simple Text area
adds text to your page. This module is most often used to create a nice looking quote but you can also jsut fill in any html or even shortcodes to displaywhatever content you want.

adds the slideshow of the entry the template gets applied to. This way if you apply the template to different posts and pages it will still display the featured images of each individual entry.

Post/Page Content
This module behaves similar to the slidehsow: it will by default output the content of the entry the template got applied to. You can also choose to display a different post or page. If you choose to display a different post or page the content of that entry will be displayed instead. If the entry you have choosen is cut by the wordpress "read more" tag the module will output only the part before the read more tag and add a read more button.

adds a blog with sidebar to the template. You can choose which categories should be displayed, as well as how many entries and if a pagination should be displayed as well.

adds one row with either 2,3,4 or 5 Columns to the Page. You can choose the width for each column as well as the content. The available options are:

Page: add page content of a single page
Post: add the latest post from a category. if you choose the same category a second, third, fourth or fifth time in another column the offset will be generated automatically so that you dont display the same post twice
Widget: Enter the name of a widget. the widget can then be used at appearance > widgets. Please be carefull when deleting widgets since the contents of a widget is stored by widget number and not by name. You can read more about it here.
Text:Add some text. html and wordpress shortcodes are allowed.

Attention: Since the Template Manager makes heavy use of Javascript it is recommended to use a modern browser, like IE9+, Firefox4+, Safari or Chrome. It will still work with older browsers but you will notice dropping performance if you add many templates.

C) HTML Structure - top

The Theme uses valid HTML 5 and comes with predefined classes for common elements needed in web design.
All templates share basic elements like header, footer, main, and entry so be carefull when editing those or adding/changing the CSS for those ids and classes :)


D) CSS Files and Structure - top

The CSS for the theme is split into various files: one that holds the basic markup for layout which is called style.css. We then got one file for the light and the dark sin in your css folder, as well as a shortcode css file. Last but not least we got an empty custom.css file which should be used by you to add your own modifications. Since we never touch the custom.css file when making updates you can easily update to later theme versions without beeing in danger of loosing stylesheet modifications.

E) JavaScript - top

The theme uses advanced jQuery functions. You do not need to know how to use jQuery to activate them, almost everything is controlled by WordPress. All the function calls as well as as the custom created jQuery plugins like the slideshows are located in the avia.js file.

Lightbox: a custom pretty photo skin

the lightbox gets automatically applied to links that contain images, youtube videos, vimeo videos, mov files and swf files. if you don't want to activate the lightbox on any of those links add the class 'noLightbox'. if you manually want to apply the lightbox to a link you can add the rel='lightbox' attribute to the <a> tag.

Better documentation can be found here:

F) PSD Files - top

Among with the theme come all psd files needed to edit the different skins. With these psds you can even create your own unique Shoutbox skin.

F) Image Sizes- top

This is the image array used in functions.php to tell wordpress which image sizes to use. The preview images for dynamic templates at the bottom can be delted if you dont want to use dynamic template files of that size. that will save some performance while uploading and also some webspace on your server.

$avia_config['imgSize']['widget'] = array('width'=>36, 'height'=>36 ); // small preview pics eg sidebar news
$avia_config['imgSize']['related'] = array('width'=>130, 'height'=>95 ); // small images for related items
$avia_config['imgSize']['column2'] = array('width'=>460, 'height'=>300); // medium preview pic for 2 column portfolio and small 3d slider
$avia_config['imgSize']['column3'] = array('width'=>300, 'height'=>200); // medium preview pic for 3 column portfolio
$avia_config['imgSize']['column4'] = array('width'=>220, 'height'=>160); // medium preview pic for 4 column portfolio
$avia_config['imgSize']['feature_thumb']= array('width'=>184, 'height'=>90 ); // small preview pic for feature thumbnails
$avia_config['imgSize']['page'] = array('width'=>620, 'height'=>200); // image for pages
$avia_config['imgSize']['page_big'] = array('width'=>620, 'height'=>350); // image for pages (slightly bigger version)
$avia_config['imgSize']['full'] = array('width'=>940, 'height'=>390); // big images for fullsize pages and fullsize 2D & 3D slider

/*preview images for special column sizes of the dynamic template. you can remove those if you dont use them, it will save performance while uploading images and will also save ftp storage*/
$avia_config['imgSize']['grid6'] = array('width'=>460, 'height'=>160); // half sized images when using 4 columns
$avia_config['imgSize']['grid8'] = array('width'=>620, 'height'=>200); // two/third image
$avia_config['imgSize']['grid9'] = array('width'=>700, 'height'=>160); // three/fourth image
$avia_config['imgSize']['grid_fifth1'] = array('width'=>172, 'height'=>150); // one fifth
$avia_config['imgSize']['grid_fifth2'] = array('width'=>364, 'height'=>150); // two fifth
$avia_config['imgSize']['grid_fifth3'] = array('width'=>556, 'height'=>150); // three fifth
$avia_config['imgSize']['grid_fifth4'] = array('width'=>748, 'height'=>150); // four fifth


you can change these settings in functions.php. the theme will then create different thumbnail sizes according to your changes on upload. You might need to reflect those changes within your CSS file, depending on what you have changed ;)

G) Sources and Credits - top

Once again, thank you so much for purchasing this theme. 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 the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.


Go To Table of Contents