Toranj ThemeDocumentation

Thank you for purchasing Toranj, this documentation will help you get familiar with theme and it’s features

lets get to work

Installing theme and plugins

In this section we are going to cover installing theme and plugins using different possible ways including WordPress admin panel and FTP.

First things first, to install Toranj theme you need a WordPress website up and running either on your local machine or your online host. If you need help for that please check Installing WordPress article

Extract the zipped package downloaded from ThemeForest to your desktop and find toranj-theme*.zip file which is located in “toranj theme” folder. You can install theme using admin panel or FTP.

Installing theme using WordPress admin panel

Please go to WordPress admin panel -> appearance -> themes and then Add new ->upload theme and upload the theme zip file. After installation, you must activate the theme as well.

Installing theme using FTP

For any reason if you failed to upload theme with WordPress admin panel, you can also do it using FTP. Unzip the theme zip file and upload “toranj” folder to WordPress root -> wp-content->themes then go to admin panel -> appearance -> themes and activate Toranj theme.

Activating theme

Import sample data

The best way to get familiar with theme is to import our sample data and create a copy of our demo in your server. That way you can check and see how things works or even use it as an initial platform to build your website.

Each demo sample file is an xml file and you can find them in download package->sample data. Full demo XMl file is toranj-sample-data-all__with_images.xml and is located in download package->sample data->Full Demo folder.

Go to Admin panel->tools->import and select WordPress from the list. If this is your first time using this tool, you will be redirected to a page for install and activating WordPress importer. You need to select the xml file and click on "upload file & import". in Next step we should set admin user also there is an option for importing media attachment of demo as well.

Import XML sample data

Important FAQ

why I get those “Could not import…” ?

In our full demo xml file (toranj-sample-data-all__with_images.xml) we have included WooCommerce sample data inside it. In case you haven’t installed WooCommerce plugin, the importer won’t import those data and will notify you that could not import those pages or files. It is not an error and it is normal.

Import sample data failed

Importing XML file is related to many parameters like (guest and host server configuration, time out, media file sizes, etc.). You should repeat the procedure couple times and you will get the media files eventually. In Worth case scenario if you couldn't import the media files do not select the "Download and import file attachments" so you can get the content without images.

Required settings for sample demo

After importing demo content, you need to set some basic settings.

Home page and blog page

Go to Admin panel->settings->reading and follow the screenshot:

Reading settings

Permalinks

Permalinks are the permanent URLs to your individual weblog posts, as well as categories and other lists of weblog postings. If you are not familiar with it please check Using Permalinks article. In order to set permalink go to admin panel ->settings->permalinks and set the permalinks to "Post name".

Menu location setting

We must assign the menu to a location. Go to admin panel->appearance->menus and scroll down the page and find "Menu Settings" section and select "Main menu" as menu location then save the menu.

Setting menu location

Theme option & basic configurations

The purpose of this section is to help you get familiar with some basic settings like add logo, social icons, add menu, etc.

Pretty much every configurable option in Toranj theme is located in theme options. For example logo, social sharing, blog layout, coloring options and etc. The theme options that we will use here is available in Admin panel->appearance->theme options Specific tabs like gallery, portfolio and etc will be discussed in related sections

Basic settings of site in theme options

Adding logo

Admin panel->apperance->theme option->General tab

We have two logo option. The main logo will be shown in sidebar and the mini logo in closed menu bar.

Set copyright text

Admin panel->apperance->theme option->General tab

Social icons

Admin panel->appearance->theme option->Social icons

Each social icon needs a url and type. You can also re-order them with drag and drop.

Contact page settings

Admin panel->appearance->theme option->contact tab

The setting in contact tab will be used in page that has "Contact" page template. Contact detail is for adding contact details like phone or email. Each one can have a title, content and icon.

Contact description is the text that will be shown in contact page sidebar after contact details

Google map address will be shown in right side of the contact page, you need to enter your address here.

Adding menu

Admin panel->apperance->menus

The location of our menu is in sidebar and the location name is "Main Menu". You must set the location after adding your menus. In current version 1.3.0, menu only accept one level of sub-menu.

Set home page

Admin panel->settings->reading

You must set a frontpage for your website, otherwise the home page will be index of blog. Just set thee " Front page displays" to "static" and select one of available pages.

Setup your Blog

Here we are going to take look into available post types, different blog layouts and required settings.

Various available post types

There is 8 different post type available in Toranj. Each one of theme has it's own settings and meta field that must be field in "Post settings" section.

Toranj has 8 different blog post type

List of all available post types and meta fields

  • Standard

    This is standard post without any header

  • Image

    Post with image header. image must be set in "Featured image" box.

  • Video

    post with embed video header. The video must be entered as iframe in "Embed Video" filed of "post settings". An example would be:

    <iframe width="560" height="315" src="//www.youtube.com/embed/Z3MohNj9eVo?list=PL3ZirNbhn49wa6pjSiemUv9ZF_ZIUPpk8" frameborder="0" allowfullscreen></iframe>/
    

  • Audio

    Post with embed audio header. The audio can be either self hosted or embeded. Embed audio must be enetered as iframe in "Embed Audio" field of "post settings". An example would be:

    <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/104920340&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
    

    Self hosted file address must be have two Mp3 and Ogg format and entered in "HTML5 Audio / Mp3" and "HTML5 Audio / Ogg" field of "post settings". File address is absolute address of file an example would be:

    http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.mp3
    

  • Link

    Post with link header. The link must be entered in "Link" field of "post settings"

  • Quote

    Post with quote text header. The quote text and quote author must be entered in "Quote" and "Quote Author" fields of "post settings"

  • Status

    Post with Embed twitter status. Tweet must be entered in "Embed Twitter Status" field of "post settings"

    <blockquote class="twitter-tweet" lang="en"><p>Toranj HTML Template Rocks, Two weeks in a row at the popular items list. Thanks all. <a href="http://t.co/X8JkjNeR7r">http://t.co/X8JkjNeR7r</a> <a href="http://t.co/e2a9h9Suhs">pic.twitter.com/e2a9h9Suhs</a></p>— owwwlab (@owwwlab) <a href="https://twitter.com/owwwlab/status/490941010059730944">July 20, 2014</a></blockquote>
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  • Gallery

    Post with slider gallery header. The images can be import from media library using "Create Gallery" field of "post settings"

Blog Layouts

There are four different blog list layouts and two single post layout available in Toranj. You can set your blog layout in Admin panel->apperance->theme option->blog settings tab.

Available Blog list layouts in Toranj

There are four type of blog list layout. The only one that has sidebar is "List with sidebar" layout. So if you need to have a sidebar, this is the one that you should select.

  • Grid layout

    Grid layout is default layout n full demo and has a dark fixed sidebar in left side. The sidebar content can be entered in "Grid blog sidebar content" field of "blog setting" tab.

  • Simple list

    It's a list of all post below each other and it is suitable for small blogs. This layout has no sidebar

  • List with sidebar

    Same as simple list but with sidebar in right side. The sidebar widget can be assigned in admin panel->appearance->widgets in "Main widget area"

  • Minimal

Additionally there are two type of single post layout.

  • Full width cover

    This is a default layout. If the post has any "Futured Image" it will be shown in top of post as cover image.

  • Regular

    This layout is conventional blog post layout with sidebar at right.

Blog Settings and options

First setting is blog page, You need to create a page and set it as the blog index page. Let's create a page and name it "Latest news". Go to admin panel->Pages->add new and create the page.

Notice: If you want the page title in two line as it is in our demo you must enter a "|" between words. So our blog page title will be "Latest | News"

After adding the page we must set it as blog index. Go to admin panel ->settings->reading and set the "Front page displays" to "Static page" and select "Latest news" in "Post page" field. Now you are good to go, just add a link to that "Latest news" page in menu and enjoy your blog.

Blog options in theme option

There are other option beside layouts for customizing the blog index and single post page. You can find theme in admin panel->apperance->theme option->blog settings tab. The options are:

  • Blog Read More button
  • Blog Read more button style
  • Blog Read More button size
  • Show/Hide author biography
  • Show/Hide Related Posts
  • Number of posts per page
  • Query type (Category or tags)
  • Show/Hide Prev and Next links at single post
  • Show/hide Sharings
  • Sharing icons

Page templates

Page template is responsible for generated layout of page. We have 8 template in Toranj. In this section we are going to explain them and their purpose. Additionally we will have one example of output layout of page for each template.

Various page templates
  • Default template

    This is the default template for your pages. The whole page content will be wrapped inside a container and also this type will show title of page and breadcrumb. If you want the title of page in two line, you must enter a "|" between words. For example "About | Toranj".

    Default page template which has container, title and breadcrumb of page.
  • Default with sidebar

    This is same as default template but with a sidebar in right side of page. You can put widgets in this sidebar from admin panel->apperance->widgets->Main Widget Area

    Default page with sidebar in right.
  • Default template dark

    This one is same as default template but the background is dark. The background color can be set in admin panel->apperance->theme option->apperance tab.

    Default page template with a dark background.
  • Fullwidth Light

    We learned about the default teplate. The fullwidth templates have no container no title and basicly nothing. It gives you full controll over the page layout and you can create anything you need with Visual Composer. We will catch that in Visual Composer section but for reference the full width light has no container and the background is light.

    Full-width page template
  • Fullwidth Dark

    Same as full width light but with a dark background. Again no container no nothing.

  • Dark absolute page

    This one is little bit different. Although it is basically same as full width dark template but there is a difference in height of the page. In absolute page height of the page is same as height of the browser and the page won't have any scroll. An example of it's application is in Kenburn slider page where we do need to have full-height of page and nothing more. Here we have no container and page title again.

    Dark absolute page will have the height of window and the page won't scroll
  • Contact page

    We have finished the general layouts. This contact page layout is only and onl for generating contat page. It will give you a page with a dark sidebar at left for contact details and also a google map in right. The contact details and map address can be set in admin panel->apperance->theme option->contacts tab

    contact page template
  • WooCommerce page

    This one is another specific page template and is only for index page of your shop in WooCommerce plugin.

    WooCommerce page template

Visual Composer &Toranj elements

Now that we are familiar with different available page templates, it's time to jump in and create pages using our page builder. We are using Visual Composer page builder in Toranj. Our focus on this section is on basic usage pf Visual Composer and elements and options that we have added to Visual Composer. For more information about Visual Composer, please refer to it's documentation which is available in downloaded package->documentation->Visual Composer

If you have installed and activate the Visual Composer you will see it's editor when you are creating/editing a page. It has two mode of editing and you can edit the content of page either from backend or frontpage. The benefit of frontpage mode is that you can also see the generated output in same page that you are making edits

Visual composer editing modes

Visual Composer has a responsive 12 column grid based on bootstrap. You can add rows and different column sizes and change the layout. Let's take a look in to available options. Here is what you will see after adding a row element:

Row element in Visual Composer and available editing tools
  • 1Move the row in page
  • 2Change the columns number
  • 3Add column to row
  • 4Edit row
  • 5Duplicate row
  • 6Delete row
  • 7Add element to column

Visual Composer templates

The purpose of VC template is that you can create it once and use it in other pages. We have made some complicated pages of our demo as template so you can create a page like them with just one click.

Available templates for visual composer

Toranj VC elements

Toranj general VC elements can be found in Toranj tab. Following screenshot shows the list of available items in current version

Toranj VC ele ments

Kenburn slider

Kenburn slider is another native plugins of Toranj theme. Here we are going to cover creating, using and customizing your kenburn sideshow.

Add new kenburn slider

If you have installed and activated the kenburn slider plugin, you should see the "Kenburn slider" in WordPress dashboard menu. The only available option is "add new" and here is what we deal with in adding new kenburn slider:

Adding a new kenburn slider
  • 1 Title of slider
  • 2 Uploading images directly
  • 3 Insert images from media library
  • 2 Transition duration
  • 1 Transition zoom
  • 2 The ID of slider, you will need this ID wherever you want to use this slider

Ok first step is adding images, I've just added some and here is what we have now:

Editing kenburn slider images

Notice that there are two icon on each image, edit and delete. Also you can change the order of them using drag and drop. Each slide has some meta-data like Captions that must be edited.

Following figure is a screenshot ofKenburn slides meta-data editing page

Kenburn slides meta data
  • 1 Image title
  • 2 Image alt text for SEO
  • 3 Image hyper-link, if you need the slide click-able add your link here
  • 4 Caption start point
  • 5 Caption content. You can insert any HTML markup here but the default one is:
    <span class="sub-title">UPPER TITLE HERE</span><span class="title">TITLE HERE</span>
    

    Which you can enter the caption to line text, If you don't need any caption on your slides the delete the caption content and leave it blank.

Adding Kenburn slider to pages

Ok now that we have created our kenburn slideshow, we need to insert it in a page. There are two ways to do that with or withouth Visual Composer.

When you are creating a page using the WordPress editor you should see the "Add slide" button right above the editor area. using this button, you can simply select your slider from available kenburn sliders and insert it in to page.Notice that the page template must be set to Dark Absolute Page

Adding slider to WordPress editor

Another way of adding kenburn slider to page is using the kenburn slider element in Visual composer. All you need to do is adding the element and give it the ID of kenburn slider that you just built.

Notice that you must set the page template to "Dark Absolute page" to have fullscreen slider

Adding kenburn slider to a page

That's it just go ahead and publish & view the page.

Kenburn slider with fixed caption

There is a kenburn slider with fixed caption page in our demo. Here we are going to build that page. We already have created a kenburn slider but we don't need caption on each slides so just go to each slide's meta and delete the caption content.

What we need to do is adding two element to the page. "Caption for media" and "Kenburn slider" but You must add theme both in one row. You can prepend or append elements to a row and columns using the plus icons in above and below parts of row. Additionally we need to add "Caption for media" element before the "kenburn slider" element In that row

Let's start with adding caption for media element. The type that we are working here is "Big title with Desc" insert the title and description. If you need the title in two part, you can add a
tag
between words. Another important setting is Media type which must be set to none since we don't want any media from the caption element.

Now use the plus icon ( Check the screenshot) and add another element which is our kenburn slider element.

Append element to a column

Here is the screenshot of final result. Notice that the page template should be "Dark absolute page"

Kenburn slider with fixed caption

Portfolio Plugin

Using this plugin you can manage your works and projects. Portfolio had different layouts or both single page and listing page. In this section we are going to cover all available variations and features, we will additionally create some example projects step by step.

Adding new portfolio item

If you have installed and activated the portfolio plugin, you should see portfolio menu in admin panel. In this plugin each post is suppose to be a project so basiclly it is same as main gallery plugin. There is a "Add New" link in portfolio plugin and also as a sub-menu of portfolio menu. Here is what we see after clicking on "Add New".

Add new portfolio item
  • 1 Portfolio item title
  • 2 Visual Composer editors for portfolio page content. Notice If you don't see Visual Composer in portfolio go to dashboard-> Visual Composer menu->Role Managerem> and put the "post types" option to "custom" for administrator (or any other user group you need) after that you should see owlabpfl in options just check it along with page and post and save changes.
  • 3 WordPress editor for for portfolio page content
  • 4 Portfolios can be grouped together, here you can select/add a group that this project belongs to. We will discuss portfolio groups in next sections
  • 5 Cover image of this portfolio, will be used in both portfolio list pages like archive page and groups page and in this project single page(in Right Sidebar and Left Sidebar layouts)
  • 6 Date meta-field, will be shown in single page sidebar
  • 7 Short description, will be shown in hover effect of the project thumbnail in listing pages(like archive page)
  • 8 Sidebar description, content of sidebar in this project page in all layout except fullwidth
  • 9 Whether or not you want to use a video cover instead of image
  • 10 Video cover MP4 file. Can be uploaded directly or select from media library
  • 11 Video cover WEBM file. Can be uploaded directly or select from media library
  • 12 Video cover OGV file. Can be uploaded directly or select from media library
  • 13 Layout of project front-end page. Check next section for details of each layout
  • 14 Refer to "Image's ratio and grid-sizer in Grid layouts" section

That was the basic and short description of available fields, in following section we will go through important parts ne by one.

Portfolio page content

Each portfolio content must be build using Visual Composer. If you are not familiar with Visual Composer, refer to Visual Composer section. Basically there is no restriction for the content, you can use all available element in Visual Composer but we have made our demo main portfolio layout as template so you can just create same one with one click.

Click on "BACKEND EDITOR" , you will notice that the WordPress editor is gone and instead the Visual Composer editor is available at the end of page. Notice that you can bring it up using drag and drop, If you move your mouse near the title of "Visual Composer".

Following figure shows the portfolio single item VC template. Just lick on it and the page will be filled with some VC elements.

Add portfolio template to the page-step 1

And here is what we have next

Add portfolio template to the page-step 2

As you see it's just some "Single Image" VC elements. You should edit each one and add your own images. I've made one portfolio with this layout and filled the images and some basic field like title and description and featured image. Following figure is from portfolio plugin in admin panel

Portfolio plugin after adding one project

If you mouse over the title, you will see the view link that you can use for viewing the front-end of our created project.

Front-end page of a sample project

You can create whatever you need using Visual Composer, like adding Video, slider and etc. The rest of content is same as creating a page with Visual Composer

Portfolio single layouts

In current version 1.3, there are 6 different porfolio single layouts available. The difference is in generated layout in front-end. We are going to take a look at each one.

Right sidebar parallax title

It has a main area and dark sidebar at right. Sidebar includes:

  • Project title
  • Project meta-data (eg:date)
  • Project Sidebar description

Main content area includes:

  • Cover image or video
  • Parralax title
  • Project description
  • Content that has been built with Visual Composer, this content comes after the cover image or video

Left sidebar parallax title

Same as previous one in content, except the sidebar is in left and the design is little bit different. It is more suited for projects with short title and data

Regular light

This one has a layout similar to default page template and it has no cover image or cover video at all. The main content should be build with visual composer.

Regular dark

Same as previous one except the background of page which is dark

Full light & dark

These templates are blank fullwidth in case you want to do something special and beyond our basic portfolios. Check the demo 5 for examples.

Portfolio Archive page

As you already know in portfolio plugin each post is an project so the portfolio archive page is list of available projects. I've added some sample projects to my portfolio and now we are going to see our archive page. If you have set the permalinks to post-name (refer to permalinks section) then the url of portfolio archive page would be: wordpress website/portfolio (eg : http://demo.owwwlab.com/wp-toranj/portfolio). Here is a screenshot of our portfolio archive page:

Archive page of portfolio

Portfolio archive page has various customization options in theme option->portfolio tab like different layouts, hide/show sidebar, hide/show filters and etc. We will discuss this in portfolio settings section

Groups in portfolio plugin

Porfolio items can be grouped together using our taxonomy "Group". Groups have fron-end page like single items and the front-end page will be list of all available projects in that category with one of our 3 available layouts. You can create a group in portfolio menu->Groups

Lets create a group together, go to portfolio menu->Groups and here is what we are dealing with:

Adding a group to portfolio plugin
  • 1 Group title (eg:Web Design)
  • 2 Group slug. It will be auto generated from the title (eg:web-design)
  • 3 Group parent. In case you need sub-Groups you can select a previously created group as the parent here.
  • 4 Group Description. This will be shown in layouts with sidebar under Group title
  • 5 This is the thumbnail of Group and will be used in list of Group pages
  • 6 Group front-end layout. Each Group has a front-end like portfolio archive. here you can select between grid, horizontal scroll and vertical scroll layout.
  • 7 Refer to "Image's ratio and grid-sizer in Grid layouts" section

I've created three Group "web design", "poster" and typography . web design has "vertical scrolling" layout. Poster has grid layout and typography has horizontal scroll layouts. Now we can start assigning our portfolio projects to these groups. Following screenshot is the editing page of one of portfolio projects

Set the group for portfolio items

I randomly assigned some projects to each group, no we are going to see each group page in front-end. Following screenshot is my groups. Notice: If you move your mouse near album title, you will see a "View" link below the name that can be used for viewing group page.

Group list and view link

Here is a the front-end page of our created groups:

Horizontal scroll layout for group page
Vertical scroll layout for group page
Grid layout for group page

Group front-end page has various customization options in theme option->portfolio tab which we will discuss this in portfolio settings section

Working with portfolio sub groups

Portfolio groups can have sub groups as well and this hierarchy can go in unlimited levels. This would give you the ability to organize your works and projects in one hand and create special pages like filterable grid portfolio in other hand.

OK back to our created groups in previous section. We had three web design, poster and typography group, now I am going to create a new group (let's call it Digital Arts) and set it as the parent of those groups. Just add it in same way we added those groups. Now we should to edit each group and set the parent to "Digital Arts". Here is my groups page after doing that

List of subgroups

we have a "-" mark before groups that represent being sub group of Digital Arts. Now we are all good to got and check the front-end page of Digital Arts group. We will have a filterable grid by default like following screenshot

Front-end page of a group with sub-groups

portfolio labels

There is another taxonomy beside groups available for portfolio and it is label. Comparing to WordPress blog, groups are same as ategories and label is same as tag. You can create/edit labels like groups and then assign each portfolio to a label if you needed.

Assign a label to a portfolio item

Adding portfolios and groups to menu

If you were following this section, we used the view link in back-end to see the front-end of our portfolio and groups. Here we are going to see how we can add a link to them in menu. Go to Admin panel ->appearance->menus click on "Screen options" (check the following figure) and make sure that "Portfolio" and "Groups" are checked and active in screen options. If they are active you shouls see them in left hand side:

Adding link for portfolio to menu

Adding extra meta-deta to portfolio

You probably have noticed that by default we only have one meta for portfolio and it is date. The reason is that these metas are highly related to your projects type. It can be project URL, Customer or anything else. You can add extra meta-field in appearance->theme-option->portfolio tab

Adding new meta-field to portfolio-step1

All you need to do is giving a title. I've added two extra meta field for Customer and URL and here is my theme-option

Adding new meta-field to portfolio-step2

Now if we go to one of our portfolios or just create a new one, we will see those meta fields before the date:

Adding new meta-field to portfolio-step3

Portfolio settings

There are several available option for customizing the portfolio list pages(Archive & Groups) and also single pages that are available in admin panel->appearance->theme-option->portfolio tab. Here we are going to provide a short description for each one of them

Field Description
Enable Ajax for portfolio pages? Whether or not you want to load portfolio pages with ajax using that sliding loading. If you need advanced JavaScript plugins in your portfolio pages like MasterSlider. You must set this to off
Create Portfolio fields Refer to "Adding extra meta-deta to portfolio" section
Show date? Show/Hide date meta in project pages
Show Groups list ( categories ) Show/Hide groups in project pages
Show tags Show/Hide labels in project pages
Portfolio Archive layout Can be Grid, Horizontal scroll or vertical scroll
Animation on scroll Enable/Disable the left-in effect of images in vertical scroll list pages
Archive page title line 1 In case you have sidebar in your archive page, this will be the first line of title
Archive page title line 2 In case you have sidebar in your archive page, this will be the second line of title
Archive page title line 2 In case you have sidebar in your archive page, this will be the content after title
Same Ratio Thumbs for Archive page grid? Refer to "Image's ratio and grid-sizer in Grid layouts" section
Group page upper title In case you have sidebar in your archive page, this will be the first line of title (Browse Group) after title
Show filters for Grid layout Show/Hide filter by category in grid layouts
Grid - Filter title The filter text, defalt is "Filter" in case you have filter in grid layouts
Grid - Show sidebar? Show/Hide sidebar in grid layout
Grid Hover style Hover style of project thumbnails in grid layout
Grid - Remove spaces between images ( no padding ) Enable/Disable spacing between portfolio items thumbnail in grid layout
Grid - Large Screen column count Number of column of grid layout in large screen(width of container>1200)
Grid - Medium Screen column count Number of column of grid layout in medium screen(width of container>800)
Grid - Small Screen column count Number of column of grid layout in small screen(width of container>500)

Visual Composer elements for portfolio

In current version 1.3, there are three element in Visual Composer for portfolio plugin. They are available in portfolio tab if you click on add element in Visual Composer

Available VC elements for portfolio

Portfolio Groups vertical scroll

This element will give you a list of your portfolio groups in three different layout. You can either speccify groups by slug or just get them all. Group slugs can be seperated by comma as well

Portfolio Groups horizontal scroll

Exatly same as vertical scroll, only the layout is different. Again you can specify groups by comma seperated slugs. If you used this element make sure the page template is "Dark Absolute Page"

Portfolio Grid

Unlike the other two, this element can create a grid of your projects from different groups. This is useful for creating homepage for your website where you can add some of your featured project as a grid in to a page. Groups slugs can be seperated with comma or just left blank for getting all available projects.

Image's ratio and grid-sizer in Grid layouts

Pretty much everywhere that we have a grid layout, you will see these options and fields. This is an original concept in Toranj theme in order to give you ability of creating complex grid layouts. Here we will explain the meaning of these terms and using them.

Toranj grid layouts logic

The logic of Toranj grid layout is based on number of columns, you probably have seen those Number of column in large or medium screen size option in theme opton and grid layouts elements. basically every grid can have 4 different number of columns based on screen size, precisely based on container width. This way you can have for example 5 column in large devices, 3 column in iPad and 1 or 2 column in iPhone.

Suppose that we have a grid with 4 column, and in each column one image thumbnail. Then the height of multiple of grid sizer height. This will give you the perfectly aligned grid even when your images are not in same size.

What is same ratio items and grid sizer

So the height of each item is based on the image ratio but what if we do have item's with similar ratio but not exactly same? For example one of my images is 1280*800 and the other is 1190*768. If you put these two in the grid it will create a little mis alignment that is not so eye pleasing so using the same ratio option you can correct the issue of each item based on a refrence item which is the grid sizer. That's it we will round the height of each item to the near

What is thumbnail width ratio

Up to this point all items had same width based on number of columns but what if we need a eatured item that is larger than others? Here you can use thumbnail width ratio. It can be a number like 1 or 2 and the meaning is that set the width of this item X* width of grid sizer. You can create following layout using this option

Complex grid with different item's size

Updating theme and plugins

In this section we are going to cover different updates way and beng notified about theme updates.

How to get notified about updates

Each time that we release a new update, an email notification will be send to customers that are in notifying list.

Please go to your Themeforest account download page and make sure the “Get notified by email if this item is updated” is selected for Toranj theme.

Updating theme using built-in auto updater

From v1.7 we have added automatic update notifier which is similar to Wordpress native theme updater but it connects to Envato Market to check for updates. So it needs your Envato Username and API key.

Where you can find your API key

If you’re using an app that requires your API key, you can find it by visiting your Account page then clicking the My Settings tab. At the bottom of the page you’ll find your account’s API key and a button to regenerate it as needed.

Once you have got your username and API key, go to admin panel > appearance > Auto Update and insert them.

adding your api key

Once an update for theme is released you will get notified at your amin panel

Update notification
update notification

Follow the steps to update the theme no the latest version.

After that you need to update bundeled plugins

In order to update the plugins you just need to go to plugins page of admin panel, then deactivate and delete the plugins. As soon as you delete them you will see a notice which is telling you to install the required plugins. Follow the notification and istall and activate MasterSlider and Visual Composer plugins.

update notification
update notification
update notification

Updating theme using Envato toolkit plugin

If you have installed and activated the Envato toolkit plugin you can update your theme directly from Envato server. When the plugin is activated you should see ” Envato Toolkit” in your admin panel menu. If it is not there then you need to install and activate it. the latest version of plugin can be found in package folder-> plugins-latest versions.

After activating the plugin, you need to know your ThemeForest username and API key to set up the connection.

Where you can find your API key

If you’re using an app that requires your API key, you can find it by visiting your Account page then clicking the My Settings tab. At the bottom of the page you’ll find your account’s API key and a button to regenerate it as needed.

Here is a screenshot of setup up page:

Enavato toolkit setting page

After setup you should see your purchased themes has been added at the end and there is a notification about updates, if there is any update available:

Enavato toolkit purchase themes

All you need to do is click on update automatically and theme will be updated.

Updating theme and plugins from WordPress admin panel

You can update the theme using “Envato toolkit” but still you will need to updates packaged plugins manually.

The latest version of theme and plugins are always available in your themeforest account download page. You need to re-download the package and unzip it somewhere on your computer.

After unzipping the package you can find the latest version of theme in “toranj theme” folder but before updating you must deactivate and delete the old verison of theme.

In order to do that please go to your admin panel -> appearance-> Themes and activate any other available theme other than Toranj (Twenty Fourteen for example) and then click on Toranj theme details.

As you can see in following figure, there is a delete link at the right bottom corner of pop up:

Deleting the theme old version

Ok now we need to install the latest version which is available in “toranj theme” folder inside downloaded package. If you forgot the installation process refer to "installing theme and plugins" section

Updating plugins:

We have some plugins in Toranj theme like Gallery, Portfolio and etc that might need updating as well. After installing the new version of theme you will a notification in admin panel about the plugins which needs updating.

You can find latest version of plugins in “plugins – latest versions” folder but first you need to deactivate and delete the old ones. In order to do that go to admin panel -> plugins and dectivate and delete all plugins that needs updating. After that you should install those plugins again by uploading the zip file. If you forgot installing plugins refer to "installing theme and plugins" section

Updating theme and plugins using FTP

This one is little advanced, if you do have access to your server FTP you can overwrite the theme and plugins files directly. For uploading theme, unzip the theme file (toranj-theme-v*.zip) and upload the toranj folder to following address on your server:

WordPress root-> wp-content-> themes

For uploading plugins, unzip the plugin zip file and upload the folder to following path:

WordPress root-> wp-content-> plugins