Flix Documentation

docu_image_flix

This is the Documentation (Help File) for the Flix WordPress Theme (Buddypress enabled). If you are searching for another Theme’s Documentation, please go back to the Theme Documentation Overview

This Documentation is mostly text based. We have created a few videos that will guide you through some points of the theme, though. Please take care to watch these videos, too. They are embedded or linked to.

Documentation updated for version: 1.3

Table of Contents

  1. Introduction
  2. Installation
  3. Importing the Demo Data (xml) v
  4. Overview of the Admin Panel Feature
    1. The Theme Panel
      1. The Theme Configuration Panel
      2. The Styles Panel
      3. Sidebar Generator
      4. Help & Support
      5. Branding & Whitelabeling v
      6. Email Panel
      7. Installation / Reset
    2. The Post Options
  5. Setting up the…
    1. Main Page v
    2. Menu v
    3. Posts v
    4. Pages v
    5. Portfolio v
    6. Gallery v
    7. Contact Page v
    8. Team Page v
  6. The Mailing System
    1. Setting it up
    2. Managing the Email Templates
  7. Mailchimp
    1. Activating Mailchimp v
    2. Managing the Templates v
    3. The Mailchimp Widget v
  8. The Author Subscription System
    1. Configuring the Users v
    2. The Main Page User Tabs
  9. Using Shortcodes v
  10. Setting up Buddypress / BBPress v
  11. How To correctly modify the Theme
    1. Adding / Modifying CSS
    2. Adding PHP
    3. Adding Icons for Shortcodes
    4. Advanced Developer Features
  12. Credits
  13. Documentation Changelog
  14. Theme Update Changelog

Legend: v: Video


1. Introduction

Flix is a WordPress Theme that supports the popular Plugins Buddypress and BBPress. If installed, the Theme can be enhanced with their features. Build a community around your writers blog, get feedback from your users, or simply build your own social network.


2. Installation

The theme’s requirements:

  • PHP Version 5.1 or higher
  • WordPress Version 3 or higher (we recommend always using the highest Version supported by this theme)
  • A Mailchimp Account. If you want to embrace the Newsletter functionality of this theme, you require a Mailchimp Account.

Installing the Theme

You have two ways of installing the theme. You can upload it throug the wordpress theme uploader, which is the most simple solution, or you can upload it via ftp.

The WordPress Way

There is a great tutorial on how do to that on the wordpress site. Click here to access it (redirecting to wordpress.org)

Using FTP

For this, there is a great tutorial on wordpress.org, too. Access it here.

Common Installation Errors

If you experience any errors during the installation, please read this short section before contacting us:

  1. I get the error: “Unexpected T_OLD_FUNCTION” or something similar: Please upgrade to php5.1. We don’t support any prior versions.
    To update, refer to your host’s documentation.
  2. WordPress tells me the stylesheet is broken.
    This error comes often, when you upload the files via ftp, but the upload somehow was not completed. Remove all the theme’s files from your server and upload again.
  3. I get the error: “Undefined function xyz”.
    As above, this is an indicator that the files might not be completely uploaded. Reupload to be sure!

3. Importing the Demo Data (xml)

After installing the theme and activating it, you will be redirected to the Theme’s One Click Installation page. You will get the choice if you want to import the demo data (with some restrictions), or skip this step and start with a blank theme.

With Demo Data

If you proceed importing the demo data, you will get all the content our demo page has. There are only a few restrictions: You will not get the images you see there. The reason is simple: We use Stock Photos on the Demo we mostly bought on Photodune. As we do not have the distributional rights for these images, we can not give you access to those. Another restriction are the sidebar widgets. WordPress has no sidebar export feature, that is why you are required to install these on your own. It is mind blowing simple – we have set up a video in the video library for you.
Once you imported the content, you are almost done. Read on for more information on the theme’s features and how to create new content.

Alternatively you can import the xml file that can be found in the zip file you downloaded from themeforest. You will have to set up some settings manually, though. (Watch the videos in part Setting up…)

Without Demo Data

If you do not want to import any demo data (only recommended for pro users), you will have to create every content on your own. Please read the following documentation carefully.

However, if at a later point you begin to think it would have been better to import the Demo Data, you can do that at any point, by accessing the Flix -> Installation / Reset menu point in your wordpress navigation.


4. Overview of the Admin Panel Features

Bebel Powered Themes have an amazingly easy to use Admin Panel. There are three different sections we introduce features into the WordPress Admin Panel.

1. The Theme Panel

The Flix Theme Panel consists of 7 Pages. It groups every general functionality of the theme. In this section, we will explain what the different pages are used for and how you can manage them the best.

The Flix Theme Panel Consists of 7 Pages

The Flix Theme Panel Consists of 7 Pages

1. The Theme Configuration Panel

The Theme Configuration Panel will be probably the section you will use the most – at first. It is the place where you can configure any part of the theme. If you want to change your logo, configure the blog page, set up the default page layout, set up the portfolios or galleries, configure mailchimp or the main page slider. All can be done in one place, in a very comprehensive Theme Configuration Panel.

Manage all the theme's global settings in one place

Manage all the theme’s global settings in one place

The Panel is divided in a top tab bar and a left tab bar. While the top tabs consist of the modules of the Theme, the side tabs contain sub-categories of these modules. Apart from the Theme’s “Basic” tab, you will find links, such as Slider, Portfolio, Mailchimp and more. Read more about each section in the related section.

2. The Styles Panel

In the Theme Configuration Panel, you can change almost every setting. In the Styles Panel, you get an introduction of how to change the styles of the theme. And not only that. You can change the base layout (color style) of the theme and you can directly change the colors of some selected texts, headers, links and backgrounds in a easy-as-hell colorpicker style panel. Also, you can use the pre defined CSS text box to input your custom css. As of version 1.3, you can also change the font using a list of fonts available on google fonts.

The Style Panel lets you master the Theme's Looks

The Style Panel lets you master the Theme’s Looks

We have a 5 way system with the theme to give you the utmost flexibility. You are not require to follow all of them, you can just choose the one that gives you the most satisfaction. Here is a list of the possibilities:

  1. Layouts
    Choose between a few predefined layout files. Each layout has a different color set predefined. They are also based on css files, and can be found in the css folder with the “layout-” prefix. This system makes it even possible for you to create your own layout css files. Copy one of the existing files and name it layout-yourname.css, upload it, and it will appear magically in your layouts section of the Style Panel.
  2. custom.css
    The very traditional way. You put your custom styling in a css file we prepared for you. You upload it through your ftp folder and your changes override the default css files.The changes to the custom.css will override the layout settings.
  3. Color Pickers
    We have prepared a bunch of color pickers for you lazy people out there. If you do not want to go into the css just to change a font color or a background color, just head over to the color picker department.
    Changes here will override the custom.css changes.
  4. CSS Box
    Another great entry point for quick prototyping and try’n error development. We have placed a css box in the Style Panel as well. It gets loaded after the color pickers, in case you want to override a background with a pattern or similar.
    We do not recommend to use this box for large chunks of css, as the browser will not cache it. If you put the css code after testing in the custom.css or in your layout css file, it will be cached and your website will speed up.
  5. Post / Page
    The last step is custom css for each Post or Page you create. Even galleries and more can have a custom css. The input location is the Post Options beneith the text area on the edit pages of a Post or Page.
    This CSS will override every change you made before, as it comes last. However, if you use custom colors in (some) short codes, it might require the !important attribute.

3. Sidebar Generator

The Sidebar Generator does exactly as the name says. You can generate new sidebars here, which you can use through out the whole theme. Once you created a sidebar, it will appear in the Appearance -> Widgets page and you can populate it with your favorite widgets.

You also can define a set of default sidebars for posts / pages / categories / buddypress / misc (search, tags..) and more. You can override these defaults in each blog / post manually through the Post Options beneith the text field.

Create unlimited sidebars for your posts, pages, ...

Create unlimited sidebars for your posts, pages, …

4. Help & Support

This section contains a useful collection of links to get help. For once, there is this very documentation linked to as pdf. Furthermore you will find quick links to the support forums, the theme’s page on themeforest and to our profile, if you ever need to get in touch with us privately.

5. Branding & Whitelabeling

This section is interesting for non end users of the theme. If you are developing a website for a client, you probably do not want the theme to get identified as a bebel made theme. For these purposes, we have included an admin panel, that will only be visible to the super admin – as long as it has not been hidden through some code modification in the functions.php.

You can of course update the Logo for the Theme Configuration Panel, the icon next to the theme name in the wp-admin sidebar. You can change the wordpress logo in the wordpress header (both front and backend will be updated) and you can even change the theme’s name. And finally, you can select the links you want to show the user.

Whitelabel Overview

Change the Theme’s Name

Whitelabel Graphics

Change the Graphics and Icons

Whitelabel Links

Select what Links shoud be displayed

6. Email Panel

Flix comes with a Author Subscription Feature. This means, if your users sign up to get notifications of a specific author, you are able to send them the emails here. This process is based on a per post solution, which gives you the control over each set of mails that will be sent to your users.

The Overview of your Posts in the Email Panel

The Overview of your Posts in the Email Panel

The send process has been simlified as much as possible. Once you wrote a post and published its final version, it will be shown in the Email Panel. You then are able to send out the mails to the subscribers.

Check the relevant Informations to a Post

Check the relevant Informations to a Post

If your author does have subscribers, you can send out the mails. The mails will all be sent out at once. You can of course resend the mail as often as you want, but it would be a pretty big disturbance for your users, if you did so.

The Emails have been sent successfully

The Emails have been sent successfully

You have to set up the mail settings correctly in order to be able to send the mails. Read more.

On the user’s side, it will look similar to this:

The User will get a Mail similar to this.

The User will get a Mail similar to this.

7. Installation / Reset

This page contains the one click installation feature of the theme. If you haven’t installed it yet, you can do this here. This is also the page you will be redirected to when you install the theme for the first time.

2. The Post Options

When creating a new Post, Page, Gallery, Portfolio Item or Slide, there are (almost) always Post Options beneith the main content area (mostly the text content area). The settings may vary, each post type comes with its own set of options.

The Post Options for a new (Blog) Post

The Post Options for a new (Blog) Post

Look here for advanced features, such as the post layout, a post specific sidebar selection, custom logo, custom title, sliders, gallery connection, post specific css and much much more.


5. Setting up …

The following help sections are video only. These things can better be explained while seeing somebody do it.

1. The Main Page

2. The Menu

3. Posts

4. Pages

5. Portfolio

6. Gallery

7. Contact Page

7. Team Page



6. The Mailing System

1. Setting it up

We utilize a custom mailing system for our themes, as it brings much more flexibility and features as the default wordpress mailing system. It makes it possible to send dual mails (html / txt), and lets you configure the submission process to be more secure by using mail, sendmail or smtp.

You will find the Mailing System in the Theme Configuration Panel. Go to Basic -> Mail to find the mail configuration.

An Overview of a few options of the Mail Configuration Section

An Overview of a few options of the Mail Configuration Section

The most important options are the first two. Make sure these are filled out before you open your theme to the public.

  • Send From (name)
    This option is, as the name says, the name that the user will see in his mail programm
  • Send From (email)
    This is very important. Enter the email you want to send the mails from. If you do not set this option, the mailing settings won’t work!

The following options are for advanced users. You can leave the mail() setting, if you do not know how to handle them.

2. Managing the Email Templates

The Email templates are embeded in the Theme Configuration Panel. Go there and you will find all the options in the Mail Templates section. You will find there three option categories:

  1. general
    You can upload a mail logo here. It will be used in the html version of all the mails you send (except for mailchimp, of course.). Also, you can change some general placeholder values, such as the %TITLE%, %SENDERINFORMATION% and %REMOVALTEXT%. These will also be used in all templates.
  2. confirmation mail
    These settings are for the automatically sent confirmation mail, when somebody is signing up for notifications of a given author. You can change the Subject of the notification mail here. Also, you can change the text behind the %BODY% placeholder, that will be used in the templates. Please note you can use %AUTHORNAME% in the subject, and %AUTHORNAME% and %LINK% in the body part. %LINK% will be replaced with the automatically generated confirmation link.
    There are two template variations. One for the html mail – and one for the txt mail (for mobile phones and older email clients / web based clients). The easiest way of modifying the html template is copying the code in your favorite html editor, make the changes and paste it back in the textarea.
    Placeholders you can use here:
    %TITLE%
    %BODY%
    %SENDERINFORMATION%
    %REMOVALTEXT%
    %REOMVALLINK%
  3. notification mail
    Same goes for the notification mail. This one is sent when you manually activate it in the Email Panel. You have a few more placeholders, but the way of editing is the same as for the confirmation mail.Placeholders you can use here:
    %TITLE%
    %ARTICLE_TITLE%
    %ARTICLE_CONTENT%
    %SENDERINFORMATION%
    %REMOVALTEXT%
    %REOMVALLINK%

Even though we provide a large enough text area for quick modifications of the templates, we do recommend copy pasting them in an html editor with syntax highlighting. HTML emails are not as robust as HTML websites, as most email programms have very basic and overly old HTML parsers. Also be warned that not all standard html syntax is comprehensive to every email client. Do some testing if you want to massively change the layout.


7. Mailchimp

1. Activating Mailchimp

What is Mailchimp?
It’s one of the best and easiest ways to send newsletter campaigns over the internet these days. It’s free to sign up for and very cheap even for bigger campaigns (check out there free plan, which is incredible)

Follow these steps to activate and use Mailchimp.

  1. Go to Mailchimp.com and create an account
  2. In the Mailchimp backend menu – go to „Account Api Keys & Authorized Apps“
  3. Click on „add a key“ to create an API Key
  4. Copy that key and go back to your WP Backend.
  5. Go to your WordPress backend and to the Theme Configuration Panel and to the Mailchimp Tab.
  6. You can now paste your API Key in the appropriate box and ckeck if then key is correct. Click on save changes and the big part is already done.
  7. Choose a default list from mailchimp in the field below. Check the Mailchimp documentation if you do not know what a mailchimp list is, or how to set one up.

2. Managing the Templates

Now you activated mailchimp. You might want to use the mailchimp email template we provide for your newsletter campaigns. Watch the following video to get an idea on how to use it.

This video is made with our guest list event theme in mind, but the way to set up is the same. If you have problems following the video, shoot us a mail!

3. The Mailchimp Widget

Using Mailchimp means using our custom Mailchimp Widget. Its setup is pretty easy, too. Go to Appearances -> Widgets in the WordPress Admin Panel. You will have to use the Flix Mailchimp Newsletter Widget. Just drag it in one of your sidebars. All you have to set up is a title, if wanted and the desired Mailchimp List.


8. The Author Subscription System

In point 6 The Mailing System, we set up the system behind the one we are going to explain now. The Author Subscription System is an exiting feature that will let you users sign up to their favorite authors to be kept in the loop, when they publish new articles. Usually, you have one newsletter for a blog. But think about it. Your authors are the rockstars of your blog. They should get the fame they deserve. Nothing better than a notification system to make sure your users read all of the posts!

1. Configuring the Users

The users can be configured in the Users Panel of the WordPress Admin Panel. When editing an user, make sure you fill out these default WordPress fields:

  • First Name
  • Last Name
  • Biographical Info

Having a first and last name available gets the users nearer to the authors and gives the feeling they know who writes. The biographical info will be used for the Subscription Panels of the users.

Furthermore, there are some fileds we added.

  • Main Author Section
    This will be shown on the team page, as well as on the user’s main page tab and posts. Read more below
  • Author Profile Image (small)
    This image will be used for the user tab list and the posts.
  • Author Profile Image (big)
    This image will only be used on the team page. It should be 200x270px big.
  • Default Author Background Image
    This image will be the background image, when accessing the user’s main page tab.
The Options used by the Team Bloggin System

The Options used by the Team Bloggin System

The Author Subscription Panel when all Fields are filled out (with custom background)

The Author Subscription Panel when all Fields are filled out (with custom background)

2. The Main Page User Tabs

The Main Page User Tabs system is one of the keys of the Flix Theme. It grants easy access to filter the content by one of your authors. You can activate it in the Theme Configuration Panel in General -> Main Page. You can not only control the user tab here, but also change it to display a category tab menu, if you do not use the Author Subscription Feature. Read more here on Setting Up The .. Main Page.

Change the way the Main Page Tab behaves

Change the way the Main Page Tab behaves

First of all, you have to activate the Top Tabs. In the Tab Type, you choose Author. Finally, you choose the authors you want to show on the Tab and you save the changes. When done, your Main Page Tab might look like this:

Your Author Tabs might look like this

Your Author Tabs might look like this


9. Using Shortcodes


10. Setting Up Buddypress / BBPress


11. How To correctly modify the Theme

You probably want to extend the theme or change some of its css design, or even change some template files. Here are a few points, you should remember when modifying the theme:

  • Do never modify any css file we deliver (except custom.css and adding new layout files)
  • Do never modify any php file we deliver (except functions-custom.php)

Why that? Because of possible updates in the future. We do not give support for custom modified files.

However, all template files (header-*.php, footer-*.php, comments.php and the files in the templates/ folder) and images can of course be modified. The restrictions are only valid for the bebelCp2 folder, and the functions.php.

1. Adding / Modifying CSS

If you want to add or modify any style related things, read more here about The Styles Panel.

2. Adding PHP

If you want to add php, you can do that in two ways. Either you use the WordPress Plugin System to enhance your theme. If you prefer to do some custom coding and want to enhance the theme with the help of your own programming skills, a great point of entry would be the functions-custom.php file. It will be loaded at the very end of the functions.php and give you the freedom to do whatever you would like.

3. Adding Icons for Shortcodes

This is very exciting. We have made our icon based shortcodes as flexible as possible for you to enhance. We figured that you probably have your own set of icons, or found a stylish commercial one you bought the license for. Adding new icons is as easy as uploading files to your server in a specific folder.

We will cover in this section only the adaption of 32x32px big icons. For smaller or bigger icons, you will additionally have to override some CSS classes.

1. The “Split Text Icon” Shortcode

The Split Text Icon shortcode can be found in the shortcode generator in Content -> Split Text Icon. This shortcode makes use of a sub set system, which means it parses the subfolders of a given directory. This directory can be found in images/icons. Simply put: You can seperate the sets by folders you put in this directory. Create a new directory and insert your new icons in there and they will be automatically recognized by the system. Please note that only one level of folders will be parsed.

2. The “Message Box” Shortcode

The Message Box Shortcode can be found in the shortcode generator in Basic -> Message Box. This shortcode does not make use of the sub set system, it only parses the contents of one directory. This directory can be found in images/shortcodes/messagebox. Just copy the icons you want to use for the boxes in there. You can also override the existing ones.
Make sure your icons are named in lower case only, and they should for the sake of consistency be a .png file.

When adding a new icon, there are two ways for you to proceed. You can upload a icon only and use the default box styling of the theme, or you can add some custom CSS to truely adapt the box the way you want it to.

The three default Message Box Icons and two custom added ones.

The three default Message Box Icons and two custom added ones.

As you can see the default box works great for decent messages and icons in a grey tone. However, when adding the arrow, we felt like this message should really stick out. To do that, you need to add in the custom.css some CSS code. (Read more about custom.css and other css insertion possibilities in The Styles Panel.)

Our icon is named arrow.png.

.bebel_shortcode-messagebox_arrow {
    background-color: #8ff57a;
    border: 1px solid #529214;
    color:  #060;
}

The CSS class you have do add prefixes with .bebel_shortcode-messagebox_ and ends with the name of your icon, but without the file extension. blubb.png would end up in .bebel_shortcode-messagebox_blubb, etc. You can override the three colors with colors of your choice. Once all of it is on the server you can use your new Icons in the shortcode generator.

The new Icons being added to the Shortcode Generator

The new Icons being added to the Shortcode Generator

4. Advanced Developer Features

If you are an advanced developer, you might want to change more than just a few icons and add more complex, layout and functionality changing functions to the theme. As of version 1.3, we have included several custom WordPress Filters into the theme. They are not numerous right now, because we need to know what features might be useful to change. If you have a request, please ask in the support forum section, and we try our best to include the filter or action you need.

Existing Filters:

  • Image Size Filters
    • bebel_single_image_size_mobile
    • bebel_single_image_size
    • bebel_page_image_size_mobile
    • bebel_page_image_size
    • bebel_loop_image_size
  • Template Filters
    • bebel_page_template_include
    • bebel_single_template_include

You can use the default WordPress way to add filters to these functions inside the functions-custom.php. Here is a simple example.


//Include custom page template for a given id
add_filter('bebel_single_post_template_include', 'my_test');

function my_test()
{
if(get_the_ID() == 25)
{
return 'test.php';
}
}


12. Credits

Slides on Homepage Variation 2 features images from pixeden.com. Check out their amazing site for great great content! We also feature a background slider with icons from AppVolt.

The awesome New York images in the preview background are from Layered Pixels and can be found here. All other images are purchased from istock and PhotoDune.


12. Documentation Changelog


13. Theme Update Changelog

For a detailed changelog for the updates of the theme files, please visit this page.