Getting Started

To install "Troika" theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex -

Update WordPress: To ensure a positive user experience, we highly recommend you update your WordPress to the latest stable version 3.8+. This will help to ensure that you are able to utilize all of the latest features of WordPress.

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find file.

You can install the theme in two ways:

  • via FTP: Extract file and upload the extracted folder to /wp-content/themes/ folder on your server.
  • via WordPress:
    1. Login to admin panel.
    2. Go to Appearance - Themes and click on the tab Install Themes. Choose upload.
    3. Click on Browse..., select the "" and click in Install Now.
    4. After successfull installation click on Activate or go to Appearance - Themes and click on Activate to activate the newly installed theme.
    5. Next you will see a new menu item Appearance - Theme Options.

Theme Update

IMPORTANT: Backup your old theme folder. Download it to your computer locally.

You can upgrade the theme in a couple of ways:

Overwrite the entire theme folder

Extract file and upload the extracted folder via FTP to /wp-content/themes/ folder on your server.

Re-upload via WordPress admin panel

Navigate to Appereance - Themes page. Activate a different theme. Delete previous version of Troika and re-upload the file (refer to basic installation) downloaded from package.

What you start from

Now, you have installed and activated the theme 'Troika'. What's next?

The first thing you need to do is configure the parametres required, in the menu Appearance - Theme Options. There are quite a lot of them, but almost all of the parameters have default settings that will suit most of the users. Therefore, you can start with uploading a logo and favicon for your website, entering your personal data and saving the settings. All other parameters can be set up later on.


Let's get to work with the homepage. If you want to get a page like on demo, you need to add the following set of shotcodes into page body:

[parallax id="24"]
	[next_event title='Next event in:' style='1' font_color='#fff']
	[line color='rgba(255,255,255,.4)' top='12' bottom='0' style='solid']
	[features cat='features']
[events count='6' masonry="true" cols='3' switcher="true" title='Events']
[parallax id="72"][text_slider category='slider2'][/parallax]
[headline style='2']Free this weekend? Join us in church![/headline]
[headline style='4']We welcome visitors on Our Church and would
love to have you join us in church this weekend.[/headline] [thumbs] [thumb_item img_url='thumb_url' caption='Australia' link='#'] [thumb_item img_url='thumb_url' caption='London' link='#'] [thumb_item img_url='thumb_url' caption='South Africa' link='#'] [thumb_item img_url='thumb_url' caption='New York' link='#'] [thumb_item img_url='thumb_url' caption='Copenhagen' link='#'] [thumb_item img_url='thumb_url' caption='Germany' link='#'] [thumb_item img_url='thumb_url' caption='Amsterdam' link='#'] [thumb_item img_url='thumb_url' caption='Paris' link='#'] [thumb_item img_url='thumb_url' caption='Los Angeles' link='#'] [thumb_item img_url='thumb_url' caption='Barcelona' link='#'] [thumb_item img_url='thumb_url' caption='Stockholm' link='#'] [thumb_item img_url='thumb_url' caption='Moscow' link='#'] [/thumbs] [social]

Add the following code into Post Header:

[slider category="slider1" controls='pagination']
[gap][post_downloads cats='sermons'][/gap]						


Now, you have finished up the appearance of the homepage of your website. It is time to start a blog.

To use the blog's functionality in our theme, you need create the blog stream page. To do this, you need to:

  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Blog streampage" for example)
  • Choose "Blog streampage" as the page's template

  • Publish this page.

Now assign the newly created page as "Posts page" (blog streampage). To do this:

  • Select the menu item Settings - Readings

  • In the field Front page displays select "A static page (select below)" , and in the list "Posts page:"choose the page you have created.

Blog Items

Now you can create blog posts.

  • Go to Posts under the WordPress menu and then click on Add New.
  • Put your Title as usual.
  • Put Content if needed.
  • Select one or more categories to the Categories.

  • Select desired Post Format.

  1. Standard - just set the featured image or without featured image.
  2. Gallery - In the field Custom Post Format, please, add links to the pictures (or use Media manager). Every link must be inserted on the new line.
  3. Video - Insert link to the video (Youtube or Vimeo) in the field Custom Post Format.
  4. Audio - Insert link to the audio file in the field Custom Post Format.
  5. Quote - Add text of the quotes. In the field Title you can specify author of the quote. You can add link to the author's page by adding URL in the field Post Format URL.
  6. Link - Add a link to the Custom Post Format field.
  7. Status - Allows to use post as a status-message of the blog's author.
  8. Image - Displays only featured image and title of the post.
  9. Chat - Displays a quote from chat, e.g.:
    	<li><a href="#">user 1</a>
    			<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, magna aliqua.</li>
    	<li><a href="#">user 2</a>
    			<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</li>
  10. Aside - Displays text of the post.
  • For every post item it is needed to upload an image and to set it as a featured image. Click Set featured image on the right in the Featured Image section.

  • Click Select Files button and select image to upload (the full size image).

  • After image was uploaded you need to set this image as featured. Click Use as featured image.
  • Publish this post.


Post type Parallax is used to create fullwidth-block, with parallax-effect. Upon saving Parallax post, you receive a shortcode. Just copy it and paste it in any place on your website. Between opening tag [parallax id=''] and closing one [/parallax] you may place any contents.

Parallax Options

  1. Post Format URL - A field to insert gallery in parallax-block.
  2. Upload or select media - Use media manager to add pictures in parallax-block.
  3. Image Change Frequency - Selection of frequency of background image change.
  4. Parallax shortcode - copy and paste the shortcode generated in this field; add any contents between opening and closing tags.

Also, image gallery for background can be added in the field Post Content using Add Media -> Gallery.

If you want to design fullwidth-parallax block with one background image, you can use shortcode [gap][/gap]


Please, install the plugin Events Calendar. After that, a new post type 'Events' will be available. This post type is used by shortcodes [events] and [next_event] .

Custom pages

Now we can prepare the other pages of our blog. This is not required, but if you want to change the display settings on Page 404, Archive pages or Search results - you have to create separate pages and customize them.

Consider the example of the Page 404. For pages Archive pages or Search results (if needed) configuration should be done the same way.

Page 404

Let's set up an error 404 page. To do this, you need to:

  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Page 404" for example)
  • Choose "Page 404" as the page's template

  • In "Page Options" area we set up the display of this page:
    • Select Sidebar
    • Show Sidebar
  • Publish this page.


Archives Page Setup is similar to "Page 404"(see above)

Theme Options


Now, let's talk about the theme's settings: Appearance - Theme Options. Here you will get full control over display and functionality of the web-site.

In this section you can set the following settings:

  • Site Logo - in this field you can upload your logo.
  • Select the type of logo - select the type of logo display - image or text.
  • Favicon - In this field you can upload the icon to your website.
  • Footer copyright text - In this field you need to enter any text to be displayed in footer.
  • Analytics tracking code - In this field you can insert the code to monitor activity on your website.
  • Image dimensions - Allows to choose quality of the pictures displayed on the website. Select High Resolution for correct image display on displays with high pixel density. To do this, you need to upload pictures twice bigger.
  • Show "back to top" button: - Show or hide back to top button.
  • Options block - Show or hide block with options.
  • Submenu width - using this option you will be able to choose width of drop-down menu.
  • Main theme color - set main accent color of the theme.


Here you can add and remove sidebars. You will be able to configure the widgets for the newly created sidebars in the menu Appearance - Widgets


  • Events background -- upload of the mage to be used as background on pages Events.


In this section you can switch display of the author's block and related posts on single page on and off.


Pick and download any social network icon, and specify URL of your profile. The list of your accounts in social networks can be displayed using shortcode [social].


Contacts - section of Theme Options, where you can specify contact information. To display contact info, please use widget ThemeRex Contacts.


  1. ThemeRex - Flickr photos -- used to display your pictures from Flickr.
  2. ThemeRex - Contacts -- used to display your contact info.
  3. Follow Me -- used to display the list of your accounts in social networks.
  4. Popular -- used to display popular posts. The first tab puts out posts in order by number of views, the second tab - by number of comments.


Shortcodes are a cool feature in WordPress that essentially allows you to do some pretty incredible things by just inserting a shortcode into a page or post. Using Shortcodes is a breeze, just insert one where you want the relevant content to show up.

The theme comes pre-packed with a number of shortcodes allowing you to add the info easier.

IMPORTANT: 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 highlight, those are the only ones that don't need a new paragraph.

Here's a list of the shortcodes included in troika theme:


Shortcode [headline] is used to create headings (h1-h6).

The shortcode has the following set of parameters:

  • style --Heading style. Available options - from 1 to 6.
  • top -- top margin.
  • bottom -- bottom margin.


[headline style='1' top='50' bottom='30']Section title[/hedline]


Shortcode [events] puts out events from isotpe-filter.

Shortcode parameter:

  • count -- number of posts to be displayed. If the number of posts displayed is less than general number of events, under the block there will be a button Load More. Value by default is 2..
  • cat --slug or id of the category gallery
  • cols -- number of columns. Available variants from 2 to 4. Value by default is 3.
  • switcher --switches the display of drop-down list with the number of columns on. Set 'true', if you want to display switcher of number of columns.
  • masonry -- If you set "true", posts will be put out in the layout masonry. Value by default is "true". To display posts with pictures of the same height, you need to set 'false' in the parameter masonry.
  • title -- title of the block.
  • upcoming -- show only upcoming events.


[events masonry='false' count='3' switcher='true' title='Latest events' cols='3' cat='church_events']


Shortcode [line] is used to create horizontal lines of different styles, color, and width.

Parameters available:

  • id -- sets id, in case in you need it, e.g. to use in JS.
  • style -- sets the line's style:dotted, dashed, solid, double, groove, ridge, inset, outset.
  • color -- hex-code of the line's color (#ff0000).
  • width -- the length of the line in pixels. If you want the line stretched to the entire width, do not specify this parameter or specify -1.
  • height -- Line height in pixels. Default - 1px.
  • top -- top margin.
  • bottom -- bottom margin.


[line style='solid' height='2' color='#000000' top='30' bottom='30']


Shortcode [infobox] is used to create information blocks.

Parameters available:

  • id -- allows to set block's id if needed.
  • style -- style (type) of the informational block. available variants: regular, info, success, error.
  • static -- if it's set "0" in the parameter, infobox will be closing by click.


[infobox static='1' style='regular'][/infobox]


Shortcode [highlight] is used to highlight text's fragments in order to draw attention.

Parameters available:

  • id -- sets ID for the cover (optional).
  • color -- color of the text
  • bg -- color of the background


[highlight id='any_id' color='#000000' bg='#ffc000']


Shortocode [image] is used to put out a picture with parameters of wrapping.

Parameters available:

  • id -- sets ID for the cover (optional).
  • src -- address for the picture
  • title -- title (caption)
  • align -- which side the text will wrap the image from: 'left' or 'right'
  • width -- width of the picture
  • height -- height of the picture


[image align='left' src='img_url.jpg' width='300' height='150' align='left']


Shortcode [quote] is used to insert a block with a quote.

Parameters available:

  • id -- sets ID for the cover (optional).
  • fontsize -- font size in pxls.


[quote id='quote_id' fontsize='22']


Shortcode [tooltip] is used for pop-up tips in the text.

Parameters available

  • id -- sets ID for the cover (optional)..
  • title -- the text in the pop-up tip.


[tooltip title='tooltip example']Lorem ipsum site dolor amet[/tooltip]


Shortcode [dropcap] is used to create drop cap.

Parameters available:

  • id -- sets ID for the cover (optional).
  • style --drop cap style. Variants available - 1 и 2.
  • letters -- if you need to allocate more than one letter, you can set number of letters in this parameter.


[dropcap style='2']Lorem ipsum sit dolor amet.[/dropcap]


Shortcode [audio] is used to insert audio to the page or post.

Parameters available:

  • id -- sets ID for the cover (optional).
  • url -- the link to the video file.
  • title -- title of the audiofile
  • author -- name of the author/performer of the audiofile


[audio url='audio_url.mp3' author='Artist' title='Song Name']


Shortcode [video] -- is used to insert video to the page or text of the post.

Parameters available:

  • id -- sets ID for the cover (optional).
  • url -- the link to the video (youtube or vimeo)
  • width -- width of the video
  • height -- height of the video
  • bg_img -- preview image clicking on which the video starts reproducing
  • title --title that is put out under the block with the video.


[video url='' width='620' height='350' bg_img='img_url.jpg' title='video example']


Shortcode [columns] is used to build column layouts.

Parameters available:

  • id -- sets ID for the cover (optional).
  • count -- general number of columns.
  • top --top margin
  • bottom -- bottom margin
  • left -- left margin
  • right -- right margin


[columns count='2'] [column_item]Aenean quis enim et felis malesuada faucibus egestas sit amet nulla.[/column_item] [column_item]Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.[/column_item] [/columns]


Shortcode [list] is used to create lists.

Parameters available:

  • id -- sets ID for the cover (optional).
  • type -- list type: icon - next to each item in the list an icon will be displayed , default - to display standard list.
  • icon -- icon class. Full list of icons with classes available here.
  • top -- top margin
  • bottom -- left margin

The class will be unique for each item in the list, for example:

[list_item icon='icon-class']


[list type='icon' icon='icon-right-open'] [list_item]Lorem ipsum[/list_item] [list_item icon='icon-left-open']Sit Dolor[/list_item] [/list]


Shortcode [tabs] is used to create block with tabs:

Parameters available:

  • id -- sets ID for the cover (optional).
  • tab_names -- names of tabs, separated by "|", e.g.: "tab1|tab2|tab3"
  • initial -- which of the tabs will be displayed by default. The number should be less than total of number of tabs.


[tabs tab_names='tab1|tab2|tab3'] [tab]Tab 1 Content[/tab] [tab]Tab 2 Content[/tab] [tab]Tab 3 Content[/tab] [tabs]


Shortcode [accordion] creates blocks of the "accordion" type . Attention: at the same time only one of the blocks can be open.

Parameters available:

  • id -- sets ID for the cover (optional).
  • initial - (number). The number of the initially open block (from 1 to the number of blocks). Attention: if you want make so, that all accordion item are closed initially - write parameter initial greatest, than items count!


[accordion initial='2'] [accordion_item]Lorem ipsum[/accordion_item] [accordion_item]Sit Dolor[/accordion_item] [/accordion]


Shortcode [toggles] creates blocks of the "toggles" type . Comparing to the "accordion" you can close all the blocks or open more than one.

parameters available:

  • id -- sets ID for the cover (optional).
  • initial - (number). The number of the initially open block (from 1 to the number of blocks). Attention: if you want make so, that all toggle items are closed initially - write parameter initial greatest, than items count!


[toggles initial='2'] [toggles_item]Lorem ipsum[/toggles_item] [toggles_item]Sit Dolor[/toggles_item] [/toggles]


Displays the table

[table] Paste here table content, generated on one of many public internet resources, for example: or or [/table]


Shortcode [googlemap] displays Google map at the address you specified.

Parameters available:

  • id -- mandatory parameter, it is required to specify a unique ID.
  • widht -- (number). Map frame width (in pixels or percents)
  • height -- (number). Map frame height (in pixels)
  • address -- address of the place that you want to place in the center of the map


[googlemap width='360px' height='100' address='NY, USA' id='unique_id']


Adds fullwidth-page gap, for pages without sidebar.

Parameters available:

  • id -- unique ID of the block.
  • bg_img -- URL of background picture.
  • parallax -- true, if you want to use Parallax effect int he background block.


[gap bg_img='bg_img_url.jpg' parallax='true' id='gap_id']Any Content[/gap]


Shortcode [title] is used to display title of the current page.




Shortcode [button] is used to create buttons and links.

Parameters available:

  • id -- sets ID for the cover (optional).
  • style -- style of the button: border or regular.
  • size -- size of the button: small or large.
  • link -- The URL where the link from the button leads to.


[button link='#' size='small' style='regular']Button[/button]

Contact Form

Shortcode [contact_form] is used to put out contact form.

Parameters available:

  • id -- sets ID for the cover (optional).
  • title -- title for the contact form.


[contact_form id='site_contact_form' title='Contacts']


Shortcode [slider] is used to put out slider block.

  • category --category of posts to display in the slider.
  • count --number of displayed slides.
  • ids -- optionally you can specify id's of slides separated by a comma. If you use the ids, parameters category will be ignored.
  • gallery -- switches the mode 'gallery': it is only a pitcture that is displayed, text on the slide is not putout.
  • controls -- switches on / off and lets you choose the type of slider controls.
    • 'true' -- swithces the display of direction navigation and pagination on.
    • 'arrows' -- only direction navigation
    • 'pagination' -- only pagination
    • 'false' -- skip slider controls.
  • slide_width -- width of slides.
  • slide_height -- height of slides.
  • title -- title of the slider. Displayed under the slider block.


[slider category='slider1' slide_width='960' slide_height='500' controls='true']

You can also use nested shortcodes [slider_item].

Parameters available:

  • src -- src of the picture.


[slider slide_width='500' slide_height='300'] [slider_item src='image1_url.jpg'] [slider_item src='image2_url.jpg'] [/slider]


Shortcode [features] is used to display features-block and post groups of the specified category.

Parameters available:

  • cat -- category of posts.
  • count -- number of posts.
  • title -- title of block.
  • ids -- optionally you can specify id's of posts separated by a comma. If you use the ids, parameters cat will be ignored.


[features ids='192,193,202' title='Features']

Text Slider

Shortcode [text_slider] used to display text slider.Images attached to the post will not be displayed. If you want to create a slider with pictures - you may use shortcode[slider].

Parameters available:

  • category -- category of posts to be displayed in the slider.
  • title -- title of the block displayed above the slider.
  • ids -- optionally you can specify id's of slides separated by a comma. If you use the ids, parameters 'category' will be ignored.
  • count -- кол-во слайдов.


[text_slider category='slider2' count='3']


Shortcode [social]used to display social icons with links to accounts in social networks. Links and icons can be edited in the section Social in Theme Options.




Shortcode [team] displays the members of your team (photo with description).

Parameters available:

  • id -- sets ID for the cover (optional).


[team id='our_team'] [team_item user='user_login1'] [team_item user='user_login2'] [team_item user='user_login3'] [/team]


Shortcode [skills] blocks used to build blocks with list of skills. There are two display options: radial chart with legend and a bar chart.

Parameters available:

  • style -- diagram type: radial or bar.
  • title -- block's title
  • size -- used for the pie chart - diameter of the circle in pixels.

To buildt the chart elements, you must use the shortcode [skills_item].

Available options of nested shortcode:

  • title -- the name of the chart element
  • level --skill level as a percentage
  • color -- color of the column of diagram sector


[skills style='radial' title='Language Skills' size='256'] [skills_item title='Item Title' level='30' color='#ff0000'] [skills_item title='Item Title 2' level='40' color='#ffC000'] [skills_item title='Item Title 3' level='30' color='#C0C3C0'] [/skills]

Next Event

Shortcode [next_event] is used to put out the the countdown to the last event.

Parameters available:

  • font_color -- color of the text.
  • title -- title of the counter block.
  • style -- style of the counter: 1 or 2.
  • cat -- slug or id of the category.


[next_event title='Next Event:' font_color='#fff' style='2' cat='any_cat_slug_or_id']

Post Downloads

Shortcode [post_downloads] used to put out the latest post of the category you have set with the links for download of attached files.

Parameters used:

  • id -- sets ID for the cover (optional).
  • cats -- slug or id of the category.


[post_downloads id='sermon_id' cats='sermons']


Shortcode [thumbs] is used to putout picture with caption.

Embedded shortcode [thumb_item] has following set of parameters:

  • img_url -- a link to the picture.
  • caption -- text of the caption, HTML-tags can be used.
  • link -- url of the link.


[thumbs] [thumb_item img_url='img_url.jpg' caption='Caption text' link='#'] [thumb_item img_url='img_url2.jpg' caption='Caption text 2' link='#'] [/thumbs]

Search Form

Shortcode [search_form] is used to put out search from.




Shortcode [banner] is used to display texxt with the link. E.g it can be use to put out an advertising content.

Parameters available:

  • link -- url of the link.
  • link_text -- text of the link.
  • title -- title of the block.
  • width -- witdth of the block.


[banner title='Loving God. Loving People.' link_text='Michael & Laura' link='#']


Shortcode [wrapper] is used to create sections with margins and titles, where any content can be placed.

Parameters available:

  • indents -- size of margins in pxls.
  • title -- title of the block.
  • min_height -- minimum height of the block in pxls.


[wrapper title='Wrapper Title' indents='30' min_height='500']Any block content[/wrapper]


Please, download the plugin Woocommerce from the official website repository and upload it to the folder ' wp-content/plugins' using FTP-client. Or, you may use WordPress menu to install plugins (Plugins -> Add New).

Author Image Plugin

After the installation of the plugin, a field Author Image will be available on the page of editing of user's profile. To put the user's picture out, the file uploaded into this field will be used. If you want ot use avatars from the website 'gravatar', you need to deactivate the plugin.

PSD Files

We've included 21 PSD files with this theme. All PSD files you can find in the folder PSD

Demo Content

IMPORTANT: Please, note! Before you install demo-content, Woocommerce must be installed.

We've included 3 XML files for different topics: demo_content_church.xml, demo_content_charity.xml and demo_content_politics.xml with content from our demo site that you can find in DemoContent folder inside the archive that you have downloaded from ThemeForest.

To import this information into a WordPress site follow these steps:

  1. Log in to that site as an administrator.
  2. Go to Tools: Import in the WordPress admin panel.
  3. Install the "WordPress" importer from the list.
  4. Activate & Run Importer.
  5. Upload the file "Content.xml" file using the form provided on that page.
  6. You will first be asked to map the authors in this export file to users on the site. For each author, you may choose to map to an existing user on the site or to create a new user.
  7. WordPress will then import each of the posts, pages, comments, categories, etc. contained in this file into your site.

Sources and Credits

This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.

  • Fonts:
    • Raleway (non standard)
    • Fontello (non standard, icons set)
    • Arial (standard)

All non standard fonts are from Google Web Fonts and Fontello icons set

We have used the pictures from:

All images are copyrighted to their respective owners and not available for download with this theme.

Additional information from ThemeREX:

“Theme Rex” support team is happy to greet you here! Our operators and developers are always glad to help our customers. Should you have any questions, you may contact us for support:

10.00 – 19.00 (CET), Monday till Friday.

What is important to know about ThemeREX Support Policy

  • To get a pre-purchase advice, you may post in the theme’s forum
  • To get a response more promptly, you are recommended to use our Ticket-system (just click on banner “Support Sys” on the item page)
  • Important! For correct work of Ticket-system, you mustn’t switch cookies in your browser off
  • We try to answer your questions within 5-10 hours. However, if any delay occurs it doesn’t mean that we forgot about you. Some of the issues require testing and analyzing, so we could help you more profoundly

We love to intercommunicate with our customers from all over the world. We always love to explain how our themes work. However, sometimes we have to say No:

  • Please, note! We do not support queries if you do not have a purchase code
  • Item support does not include:
    • Customization and installation services
    • Support for third party software and plug-ins

How to find a purchase key (see the screenshot):

  • open the ‘downloads’ tab in your account on ThemeForest
  • find our theme in the list of products
  • click ‘download’ button, and in the drop down meny select “license sertificate & purchase code”
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 any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!