Documentation - Cinematix

Please visit the online theme documentation. It's usually more up to date than the offline documentation.

I. Theme & BuddyPress installation
II. How to install WP ULike plugin? (IMPORTANT)
III. How to install GamiPress plugin?
IV. How to install forums?
V. Contact form installation
VI. How to display menu on the header?
VII. Frontpage customization using Elementor
VIII. How to translate theme?
IX. How to add subtitle and thumbnail caption to a blog post?
X. Profile Fields
XI. How to install Events?
XII. How to configure a Paid Membership Pro plugin?
XIII. How to install WooCommerce plugin?
XIV. How to customize theme?
XV. All shortcodes list
XVI. How to increase speed of your website?

I. Theme & BuddyPress installation - top

1. Go to WP Dashboard → Appearance → Themes → Add New and upload cinematix-theme.zip file with a theme and activate it.

2. Go to Tools → Import and install WordPress importer. Now run importer and import pages (save as). Check out the Download and import file attachments option.

Optionally you can import blog posts too or all possible content. If you want to import 100% of demo content then you should follow instructions in the Demo content folder.

TIP: If you activate plugins before pages import then importer will duplicate pages, you should go to Pages → All Pages and delete duplicated pages with the *-2 slug permanently because there will be problem with the not found error.

3. Install and activate all required plugins by the installation wizard (you can install recommended plugins too or do it later, you should activate plugins after pages import).

4. Go to Settings → BuddyPress → Activate all components:

5. Go to Settings → Permalinks select Post name and SAVE

6. Go to Settings → Reading and select Homepage (not customisable by Elementor) or Frontpage 1 Elementor page as your frontpage.

7. If you selected the Frontpage 1 Elementor page as your frontpage then go to Pages → Frontpage 1 Elementor click on the Edit with >Elementor button and delete everything:

Now click on the Add Template button -> Import Template, upload the Elementor/frontpage-1.json file from the zip file downloaded from Themeforest and click on the Insert button.

Go to Elementor → Settings and setup everything like on the screenshots:

Now you should follow the II and III chapter.

TIP: You can edit theme settings under Appearance → Customize (for example enable footer columns).

TIP: Make sure you do not use 2 login forms on the single page including pop up window with login. You can enable the login popup window under custimizer options.

TIP: You can setup all widgets like on the screenshot. List of all shortcodes can be found under the XV. All shortcodes list chapter. Some shortcodes are cached, you should use the Transients Manager plugin and remove transients if you want to see instant changes, some transients can be disabled under customizer.

II. How to install WP ULike plugin? - top

1. Activate WP ULike plugin.
2. Go to WP ULike -> Settings -> Content Types and make settings like on the following screenshot:

III. How to install GamiPress plugin? - top

1. Go to GamiPress → Tools → Import/Export and under the Setup section click on import, load this file (save as) and click on the Import Setup button.

Important! If you want to use a different name for points then you should change type parameter of the cinematix-gamipress-leaderboard, cinematix-gamipress-leaderboard-big, cinematix-gamipress-leaderboard-small shortcodes.
For example if you want to use 1 name for points type then you should replace _gamipress_points_points for _gamipress_points_1. You should edit shortcode already used in theme in the leaderboard.php files.

Rank Type should have the general-rank slug and plural name. If you want to change it then you should open wp-content/themes/cinematix/buddypress/members/single/cover-image-header.php and change the type="general-rank".

cinematix-gamipress-leaderboard-big and cinematix-gamipress-leaderboard-small shortcodes are cached (transients) so they will look the same on every page.

IV. How to install forums? - top

1. Go to Forums → New Forum and create new forum called Group Forums
2. Now go to Settings → Forums and select Group Forums Parent: Group Forums ans SAVE.

V. Contact form installation - top

1. Go to Contact → Contact Forms → Copy shortcode with contact form.
2. Go to Pages → All Pages → Contact Us and paste copied shortcode.
3. Select the Contact Form template under Page Attributes.

Go to Appearance → Menus, create new menu called (for example) Header Menu. Select everything like on the following screenshot:

Compact menu will be displayed on the mobile devices too. If you wan hide some menu item on desktop then put the mobile-only css class:

VII. Frontpage customization using Elementor - top

Elementor Documentation can be found here - https://docs.elementor.com

First of all you can't customize the Homepage page with Elementor, you can customize the Frontpage 1 Elementor page with selected the Frontpage Page Builder page template (not Frontpage 1).
While creating a new section you should put the responsive-wrapper class to the inner columns so it will nicely fit the tablet and mobile screens:

Also you can just simply duplicate existing section.

If you want to display some block for logged in users then put the for-logged-in-users class.
If you want to hide some block for logged in users then put the for-logged-out-users.

TIP: If you don't want to customize a front page or customization isn't significant or you know HTML basics then there is no reason to use a page builder.

You can just create a new page with selected Frontpage 1 page template, setup created page as your frontpage and that's all.

Front page file (frontpage-1.php) contains easy to understand code structure with rows and columns which you can duplicate and edit very easy. Style of frontpages is inside the style.css (9.2 - Frontpage). Style of all shortcodes is inside the wp-content\plugins\cinematix-addons\styles.css file.

VIII. How to translate theme? - top

1. Go to Settings → General and choose Site Language.
2. Install and activate the Loco Translate plugin.
3. Go to Loco Translate → Themes → Cinematix → New Language → Choose a language → Choose a location → Start translating
4. Go to Loco Translate → Plugins → Cinematix Addons and translate this plugin too.

After successful translation you can disable the Loco Translate plugin.

IX. How to add subtitle and thumbnail caption to a blog post? - top

While creating post click on the Add block → Paragraph and add the new class subtitle under Advanced tab.

If you want do add short text below thumbnail then while adding thumbnail put some text into Caption field.

X. Profile Fields - top

You can create new custom fields under WP Dashboard → Users → Profile Fields.
If you want to display a custom fields on the user profile page please put the User Profile Fields Widget into the Left Sidebar - Member Profile or Right Sidebar - Member Profile.

XI. How to install events? - top

1. Install the Events Manager plugin.
2. Go to WP Dashboard → Events → Settings → Pages → Event Pages and make sure there is selected Display events as Posts.

You can use following shortcode in page builder, if you want to display recent events:

<div class="shortcode-events">
[events_list]
	<div class="shortcode-events-row">
	<div class="shortcode-events-left"><span>#d</span> #M</div>
	<div class="shortcode-events-right">
	<div class="shortcode-event-title">#_EVENTLINK</div>
	<div class="shortcode-event-location">#_LOCATIONTOWN · #_LOCATIONNAME</div></div>
	</div>
[/events_list]
</div>

If you want to show featured event then use and customise following code:

<div class="dd_single-event">

	<a class="dd_single-event-image" href="">
		<img src="http://localhost:8080/cinematix-new/event.jpg">
		<span>Free<small>Entrance</small></span>
	</a>

	<div class="dd_single-event-cat">Night Party</div> <div class="dd_single-event-time">4:00 pm - 10:45 pm, Feb 14</div>
	<h4><a href="">Evenings & weekends in the city in New York</a></h4>
	<div class="shortcode-event-location">Plaza de Toros de La Misericordia, Silver Street, Spain</div>

</div>

XII. How to configure a Paid Membership Pro plugin? - top

First of all please read the plugin's documentation - https://www.paidmembershipspro.com/documentation/

1. Install and activate Paid Memberships Pro and Paid Memberships Pro - BuddyPress Add On plugins.
2. Go to Memberships → Settings → Add New Level.
3. You can go to Memberships → PMPro BuddyPress and configure access settings.

If you need more advanced solutions then you can use a pmpro_hasMembershipLevel() function. Examples:

<?php 
if(pmpro_hasMembershipLevel('1'))
{
?>
//Place your HTML or PHP code here if the user is in the required membership level
...
<?php 
}
?>

<?php 
if(pmpro_hasMembershipLevel('Gold'))
{
?>
//Place your HTML or PHP code here if the user is in the required membership level
...
<?php 
}
?>

<?php 
if(pmpro_hasMembershipLevel('1','2','Gold'))
{
?>
//Place your HTML or PHP code here if the user is in the required membership level
...
<?php 
}
?>

For example if you want to show messages tab for 1, 2, 3 level members then paste follwoing code in the header.php of theme:

<style type="text/css">
#messages-personal-li { display:none; }
</style>
<?php 
if(pmpro_hasMembershipLevel('1','2','3'))
{
?>
<style type="text/css">
#messages-personal-li { display:inline-block; }
</style>
<?php 
}
?>

XIII. How to install WooCommerce plugin? - top

1. Install and activate the WooCommerce plugin.
2. Go to Appearance → Customise → WooCommerce → Product Images and setup following settings:
Main image width: 800
Thumbnail width: 500
Thumbnail cropping (custom): 50:40

XIV. How to customize theme? - top

You can customize theme under Appearance → Customizer.

Styling of this theme is inside the style.css file, style of forums is inside wp-content/themes/cinematix/css/bbpress.min.css, style of buddypress is in the wp-content/themes/cinematix/buddypress/css/buddypress.css file.
Custom style you can keep under Appearance → Customize → Additional CSS.

Style of all shortcodes is grouped in the wp-content/plugins/cinematix-addons/styles.css file.

Here is a trick how to easy find styling of each theme element using web browser. For examply you want to find where is defined the border color around avatar. You should make right click on this border and select Inspect.

On the right bottom window is displayed the style of this element and file where this code is placed (buddypress.min.css in this case):

.buddypress-wrap #members-list li .item-avatar {
    width: 50%;
    margin: 0 auto;
    border: 3px solid #ffffff;
    border-radius: 6px;
}

As you can see there is border: 3px solid #ffffff; parameter. Now you can copy this style into your child theme or Additional CSS field under the Customizer and customize it.

XV. All shortcodes list - top

Some shortcodes are cached, you should use the Transients Manager plugin and remove transients if you want to see instant changes, some transients can be disabled under customizer.

Here is the list of all shortcodes:


[cinematix-login] 
You can use only one login form including pop up login. 
You can disable pop up window on specific page in footer.php. 
This shortcode is already in the footer.php

[cinematix-recent-forum-topics number_of_topics="3" col="1"]

[cinematix-tag-recent-posts number_of_blog_posts="2" tag="Featured" col="1"]

[cinematix-recent-blog-comments number_of_comments="3" col="1"]

[cinematix-bp-groups-carousel number_of_groups='9' col='3' desc='Lorem ipsum...']

[cinematix-blog-tags]

[cinematix-popular-blog-posts number_of_posts="4"]

[cinematix-gamipress-leaderboard limit="10" name="points" layout="small" type="_gamipress_points_points"] NOT CACHED
[cinematix-gamipress-leaderboard-small limit="10" name="points" type="_gamipress_points_points"] CACHED
[cinematix-gamipress-leaderboard-big limit="10" name="points" type="_gamipress_points_points"] CACHED

[cinematix-cat-posts cat_id="15,21,19,20,7,5"]

[cinematix-featured-products]

[cinematix-blog-categories taxonomy="category"]

[highlight]Praesent bibendum, libero faucibus vehicula vulputate.[/highlight]

[go href="http://code.google.com"]Take a look on it![/go]

[leftpullquote]Sed sagittis, justo quis sollicitudin viverra...[/leftpullquote]
[rightpullquote]Sed sagittis, justo quis sollicitudin viverra...[/rightpullquote]

[quote]Donec fringilla, urna sit amet euismod congue[/quote]
[quoteby by="Nicole said:"]Donec fringilla, urna sit amet euismod congue.[/quoteby]

[notice]Aenean molestie pharetra facilisis. Duis sem quam, hendrerit nec commodo quis, cursus eget elit.[/notice]

[member]You are a member so you can see this message.[/member]


[h6]2 columns[/h6]
[one_half]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_half]
[one_half_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_half_last]



[h6]3 columns[/h6]
[one_third]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_third]
[one_third]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_third]
[one_third_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_third_last]



[h6]4 columns[/h6]
[one_fourth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth]
[one_fourth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth]
[one_fourth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth]
[one_fourth_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fourth_last]



[h6]5 columns[/h6]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth]
[one_fifth_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_fifth_last]



[h6]6 columns[/h6]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth]
[one_sixth_last]
	Vivamus ut lectus vitae sapien bibendum mollis. Nam ac risus in urna accumsan ornare nec a sapien.
[/one_sixth_last]

XVI. How to increase speed of your website? - top

1. Enable transients (fragment cache) under Appearance → Customize → Transients (fragmement cache).

2. Install the LiteSpeed Cache plugin. Go to WP Dashboard → LiteSpeed Cache → Import / Export and import settings from this file

IMPORTANT! If your hosting isn't on LiteSpeed server then additionally you should install some simpe caching plugin, for example WP Super Cache or deinstall LiteSpeed Cache plugin and install for example W3 Total Cache and enable lazy loading for images, combine css/js files, setup long expiration headers.

You can use any other cache plugin but when you combine javascript files in one file then exclude following files:

		login.js
		quicktags.min.js
		tinymce.min.js
		accounting.min.js
		jquery-ui-touch-punch.min.js
		price-slider.min.js
		slider.min.js

Also do not keep cached pages more than 18 hours because it can cause problems with BuddyPress content loader.

3. Use at least 7.1 version of PHP. It's always recommended to use the latest version but not all plugins are compatible yet.

4. Enable OPCache on your server, it's very important. You can enable it under hosting panel.

This is how to check out does the OPCache is enabled on your server. Create a new file called phpinfo.php in ROOT of your WP installation with following code:

<?php phpinfo(); ?>

Now open the http://www.yourdomainname.com/phpinfo.php in web browser. There should be following value displayed:

opcache.enable On

5. Setup 512M per process memory_limit, usually it can be adjusted in .htaccess file adding following code at the bottom:

php_value memory_limit 512M

Be careful because on some servers it can cause 500 internal server error.

Theme with all plugins used on the live demo shouldn't consume more than 450 MB of RAM.

If you installed some other plugins then it's possible your website will need more RAM limit per process, but don't setup it too high because one process will consume too much server resources. Also make sure your hosting account offers at least 1 GB of RAM.

6. Make sure there is no broken links to images on the website. It can slow down the website significantly.

7. Disable all unused plugins (for example WooCommerce, Learnpress). More plugins active - more server resources will be used.

Once again, thank you so much for purchasing this theme. 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.

Diabolique Design

Go To Table of Contents

“Cinematix” Documentation by “Diabolique Design”

Cinematix - BuddyPress Theme