First of all, thank you for buying this theme. To make your experience pleasant, we've added as much info as needed in this documentation.

While we have tried to keep an easy-to-use user interface, we understand that you might have some questions about installing and using our theme. Following is a detailed step-by-step guide to help you with most of the questions or issues that you may be experiencing.

How to Use This Document

To help you quickly locate what you are looking for, we have created an extensive menu for this document at your left side. Please use it to navigate to the desired section.

Can't find what you need? Contact us via Support Forum. We will respond in the shortest time possible.

There are two methods to install the theme. If the normal installation method (a) is not supported by your web host, you will have to use the alternate option (b).

a. Normal Installation

  1. Log into your WordPress admin panel and go to Appearance » Themes
  2. Click the Add New button at the top.
  3. Click the Upload Theme button at the top.
  4. Click the Choose File button and navigate to the location of the theme zip file roku.zip.
  5. Click Install Now to begin the installation.
  6. Wait for the success message, then click Activate.

b. FTP Installation (alternate method)

  1. Unzip the theme zip file roku.zip.
  2. Using an FTP client to access your host web server. Go to /wp-content/themes/ and place the theme folder inside it.
  3. Log in to your WordPress admin panel and go to Appearance » Themes
  4. Locate the theme thumbnail and click the Activate link.

Important After activation, you will be presented with several plugins that you have to activate. Do not forget to activate them all or not all of the theme features will be available.

We have included Roku with one-click demo importer feature. You can easily to import content from our demo then you can edit it with your content. But first please install the One-Click Demo Import plugin. Please take a look the Installing Recommended Plugins section to read how to install the plugin.

After that please go to Appearance → Import Demo Data, then click the Import Demo Data button. Depending upon the number of content, images and server speed, the process may take long to complete.

ImportantIn some themes you need to install some of the recommended plugins before importing the demo content such as Jetpack, TJ Team Content, Advanced Custom Fields Pro, WooCommerce, etc.

Predefined skins is an alternative color you can use for the theme. Roku comes with 5 predefined skins you choose.

  1. Default 
  2. Green 
  3. Black 
  4. Cyan 
  5. Magenta 

How to Choose it?

  • Select Appearance > Customizer
  • Choose Color > Predefined Skins
  • You will see the option to choose the skins.

WordPress child theme allows you change the functionality of the theme without having to edit the original/parent theme template files. If you plan to making any customization, we recommend to create a child theme instead of editing the theme template files. Since the child theme is stored separately, you don't need to redo the changes next time you upgrade the theme.

Creating a Child Theme

There's a plugin you can use that will create a child theme from within the WordPress dashboard: http://wordpress.org/plugins/child-theme-configurator/or you can download Roku blank child theme.

Download it here.

More About Child Theme

You can read more about Child theme on WordPress Codex →

If you are migrating from another theme, then upon activating Roku you may find previously added images display strangely with weird aspect ratios and sizes. Don't worry. It is normal. The image thumbnails are required to be recreated using Roku's presets.

There is a very easy fix to this issue. Just install Force Regenerate Thumbnails plugin.

How To Use It?

  1. After you install it, go to Tools > Force Regenerate Thumbnails
  2. Click the Regenerate All Thumbnails button
  3. Depending upon the number of images and server speed, the process may take long to complete.
  4. After it done, you can deactivate and delete the plugin.

Roku recommends a few free plugins to extend it's functionality. These plugins can be installed automatically from the notification in WordPress Administration Panel (Dashboard). Although, Roku will work perfectly without any of these plugins, you may want to extend the theme's features with them.

Recommended Plugins

  • One-Click Demo Import

    To import content from our demo!

  • Page Builder by SiteOrigin
    Strongly Recommended

    This plugin allows you to build a custom page with drag and drop feature.

  • WooCommerce
    Strongly Recommended

    This is the main plugin to run your online store. We recomment you to install this plugin.

  • WooCommerce Wishlist

    Adds custom wisthlist functionality to your online store.

  • Layer Slider
    Strongly Recommended

    Build awesome and powerful slider.

  • Contact Form 7

    Create a contact form with the easiest way.

  • TJ Shortcodes

    If you need some custom content like columns, button or tabbed content, please install this plugin.

  • TJ Custom CSS

    If you need to add custom styles to your website, you can use this plugin.

  • TJ Team Content

    Add custom post type 'Team' to display your site or team members.

How to Install the Plugins

  1. Log into your Dashboard page.
  2. Go to Appearance » Install Plugins.
  3. Click install link below the plugin you want to install.

Tagline is a short message at the top, you can use it to show your store tagline or a welcome message to your visitor.

How to edit it?

  • Select Appearance > Customizer
  • Choose Header > Site Title
  • You will see the Tagline input box.

The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.

How to Upload your Icon?

  • Select Appearance > Customizer
  • Choose Header > Site Title
  • You will see the Site Icon uploader.
  • Upload your icon at least 512px x 512px

By default, Roku uses Work Sans font as default theme font family. But Roku provides an option to change it if you dont like Work Sans font family. It is easy to change it, please follow the steps below.

  • Select Appearance > Customizer
  • Choose Typography > Global
  • You will see the Typography switcher.
  • You can choose the body text or heading text font family.

Container layouts is a variation of the theme container. Roku provides 3 option to choose:

  1. Full Width
  2. Boxed
  3. Framed

How to Choose it?

  • Select Appearance > Customizer
  • Choose Layouts > Container
  • You will see the option to choose the container layouts.

Roku offers 4 layouts for the blog home page.

  1. Full Width: Display the content in a full width mode or without sidebar.
  2. Full Width Narrow: Display the content in a full width mode or without sidebar.
  3. Right Sidebar: Display the content with sidebar on the right.
  4. Left Sidebar: Display the content with sidebar on the left.

Setup the Layouts

  • Select Appearance > Customizer
  • Choose Layouts > Blog
  • You will see the option to choose the Blog Layouts.

Roku offers 2 list layouts for the blog home page.

  1. Standard: Display the content in standard list.
  2. Grid: Display the content in grid list.

Setup the Layouts

  • Select Appearance > Customizer
  • Choose Layouts > Blog
  • You will see the option to choose the Blog List Layouts.

Post formats is a custom presentation of a post and Roku offers 8 post formats you can choose.

  1. Standard
  2. Aside
  3. Image
  4. Gallery
  5. Video
  6. Audio
  7. Quote
  8. Link

WooCommerce is the main plugin you need to install to run your online store.

To Install WooCommerce

  • Log in to your WordPress Admin panel.
  • Go to: Plugins > Add New.
  • Type WooCommerce into the Search Plugins field and hit Enter. Once found, you can view details on the point release, rating and description.
  • Click Install Now. After clicking the link, you’ll be asked to confirm this action.
  • Click Yes, and WordPress completes the installation.

Info
You can read more detail about it on their official documentation.

Roku offers 4 layouts for the Shop page.

  1. Full Width: Display the content in a full width mode or without sidebar.
  2. Full Width Narrow: Display the content in a full width mode or without sidebar.
  3. Right Sidebar: Display the content with sidebar on the right.
  4. Left Sidebar: Display the content with sidebar on the left.

Setup the Layouts

  • Select Appearance > Customizer
  • Choose Layouts > Shop
  • You will see the option to choose the Shop Layouts.

Shop filters basically just a custom sidebar you can use to display custom widgets to filter the result of your shop. These filters will help your customers to find the best product for them. We also included one custom widget to filter products based on their availability.

Display the Filters

  • Go to Appearance > Widgets
  • Drag and drop any filter widgets to the Shop Filter sidebar.

Important There are 3 widgets you can use in this sidebar. Stock Filter, WooCommerce Layered Nav , WooCommerce Price Filter.

Roku offers 4 layouts for the single product page.

  1. Full Width: Display the content in a full width mode or without sidebar.
  2. Full Width Narrow: Display the content in a full width mode or without sidebar.
  3. Right Sidebar: Display the content with sidebar on the right.
  4. Left Sidebar: Display the content with sidebar on the left.

Setup the Layouts

  • Go to Products > Add Product
  • Scroll to the bottom and take a look at your left
  • You will see the metabox to choose the Layout.

We integrate Roku with Page Builder by SiteOrigin plugin to build a custom pages. It makes easier to build complex page such as home page or contact page. Before you create custom page with this plugin, please familiarize yourself with it by reading their official documentation.

Page Builder Documentation →

Built-in Widgets

Roku comes with 11 custom widgets for the page builder, we include it to help you to build your custom pages. If you already read the Page Builder documentation, to add block or content to the page builder you need to click the + Add Widget button.

When the pop up modal appear, please click the Roku Widgets to see Roku's built-in widgets.

Info if you need more custom widgets for the page builder, you can install SiteOrigin Widgets Bundle.

Page Template

Please remember, everytime you build a custom page using Page Builder, you must use the Block Template.

For the home page we created a prebuilt builder layout to get you quickly learn how the page builder works.

Creating the Home Page

  • Assuming you're at new page screen (Pages > Add New)
  • Add the title with Home Page or anything.
  • Under Page Attributes switch the Template to Block Template.
  • Continue by adding the prebuilt layout below.

Prebuilt Layout

  • Click Page Builder next to Visual and Text tab, above the post editor.
  • Click prebuilt layout button.
  • You will see a popup page, click Theme Defined on the left menu then click Default Home box on the right.
  • Click ok when you see a popup window.
  • Viola! The prebuild layout is ready to use! but you have to edit each widget option.

Home Page Setup

Display the Page

Once you have created a page that you would like to use as your home page, please follow the next steps below:

  • Go to Settings > Reading
  • Choose A static page option for Front page displays
  • Next to Front Page, select the page you wish to used as the home page.
  • Save Changes.

Roku comes with optional About page template to display your website description and team. Please check the demo to see it in action. But, to display the team data you need to install our Team plugin.

To install Team Plugin

  1. To display the team data, first you need to install our Team content plugin.
  2. Please download on http://wordpress.org/plugins/theme-junkie-team-content/
  3. Or you can go to Appearance » Install Plugins. Click install under Theme Junkie Team Content.
  4. You will see a new Teams menu on the left.
  5. To add new member data, just go to Teams » Add New.

Displaying The Page

  1. Assuming you're at new page screen (Pages > Add New)
  2. Add the title with Teams or About Us or anything.
  3. Add the description in the Editor.
  4. Under Page Attributes switch the Template to Teams template
  5. Use the Featured Image to display your whole team photo.
  6. Click publish button.

To build this page you need the page builder, check out the demo to see it in action. Please follow the video below to setup the contact page.

Displaying The Page

  1. Assuming you're at new page screen (Pages > Add New)
  2. Add the title.
  3. Under Page Attributes switch the Template to Block template
  4. Click publish button.

It is easy to create the FAQ page. But you need to install out Shortcodes plugin, please read the Shortcodes Section first. After that, you only need to display the FAQ using the Toggle shortcode like below.

[junkie-toggle title="This is Title 1" state="open"] This is content 1 [/junkie-toggle]
[junkie-toggle title="This is Title 2" state="closed"] This is content 2 [/junkie-toggle]

You can setup the layout per post or page. This is done when you add or edit the post or page. There are 3 types layout you can choose:

Layouts Type

  1. Full Width: Display the content in a full width mode or without sidebar.
  2. Full Width Narrow: Display the content in a full width mode or without sidebar.
  3. Right Sidebar: Display the content with sidebar on the right.
  4. Left Sidebar: Display the content with sidebar on the left.

Per Page/Post Basis Layout

  1. Assuming you're at the new post or page screen (Posts > Add New) or (Pages > Add New)
  2. After you create the post or page, scroll down and find Layout meta box.
  3. Choose the layout.

You can use these shortcodes by installing our Shortcodes plugin which available for free! You can see the shortcodes in action here.

  1. Please download on http://wordpress.org/plugins/theme-junkie-shortcodes/
  2. Or you can go to Appearance » Install Plugins. Click install under TJ Shortcodes.
  3. Then go to the post or page editing screen.
  4. You should see Add Shortcode button(see image below) beside the Add Media button.
  5. Click on it, then you will see a selectbox to choose the shortcodes you wish to use.
  6. Finally, click the Insert Shortcode button.

All of our themes include a language file to make translating to a different language easy. Inside the theme folder /wp-content/themes/themename/languages, you'll find a language file named themename.pot. Or in this theme file named roku.pot

Configure WordPress

Before translating the theme, you'll need to make sure WordPress is setup correctly with your locale. Open wp-config.php and modify the line below.

  
/**
 * WordPress Localized Language, defaults to English.
 *
 * Change this to localize WordPress. A corresponding MO file for the chosen
 * language must be installed to wp-content/languages. For example, install
 * de_DE.mo to wp-content/languages and set WPLANG to "de_DE" to enable German
 * language support.
 */
define( 'WPLANG', '' );

Translating the Theme

  1. Download and install Poedit.
  2. Open roku.pot in Poedit. Translate as needed.
  3. Save the file with the locale. For example, if you translate the theme to German language then you would save your files as de_DE.po.
  4. Copy both these files(de_DE.po and de_DE.mo) under the languages folder of roku.