Toranj ThemeDocumentation

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.

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:

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.

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

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.

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.

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.

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

• 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 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 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.

  

• 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.

  

• 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.

  

• 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

  

• WooCommerce page

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

  

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 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:

• 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.

Toranj VC elements

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

Adding new photo to gallery plugin

If you have installed and activated the gallery plugin, you should see a gallery menu in sidebar of WordPress admin panel. Go ahead and hit the add new

After that we will see following window.

• 1This is the image title it will be shown in lightbox and also image single page
• 2You can select which album this image belongs. We will discuss about albums in next section
• 3Here you can upload the image file or just select it from media library
• 4Short description
• 5This is the content of image page
• 6Refer "Image's ratio and grid-sizer in Grid layouts" section
• 7Refer " Image's ratio and grid-sizer in Grid layouts" section

Ok so go ahead and give it a title and set the featured image for now and publish it same as you do for posts and pages. I just repeated the whole procedure couple times and here is what I have in gallery plugin now:

Gallery archive page

As you already know in this gallery plugin each post is an image so the gallery archive page is list of available images. we have added some images to gallery plugin in previous section now we can view them in gallery archive page. If you have set the permalinks to post-name (refer to permalinks section) then the url of gallery archive page would be: wordpress website/gallery (eg : http://demo.owwwlab.com/wp-toranj/gallery). Here is a screenshot of our gallery archive page:

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

Albums in gallery plugin

Album is our taxonomy in this gallery plugin and it is a group of images. You can create an album in gallery menu->albums

• 1 Album title (eg:Fashion)
• 2 Album slug. It will be auto generated from the title (eg:fashion)
• 3 Album parent. In case you need sub-albums you can select a previously created album as the parent here.
• 4 Album Description. This will be shown in layouts with sidebar under album title
• 5 This is the thumbnail of album and will be used in list of album pages
• 6 Album front-end layout. Each album has a front-end like gallery archive. here you can select between grid and horizontall scroll layout.
• 7 Refer to "Image's ratio and grid-sizer in Grid layouts" section

I've created two album "Fashion" and "macro" . Fashion gallery has "horizontal scrolling" layout and Macro has grid layout. Now we can start assigning our gallery images to these albums. Following screenshot is the editing page of one of gallery images

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

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

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

Working with gallery sub albums

Albums can have sub albums as well and this hierarchy can go in unlimited levels. This would give you the ability to organize your gallery in one hand and create special pages like filterable grid gallery in other hand.

OK back to our created albums in previous section. We had two Macro and Fashion album, now I am going to create a new album (let's call it Photography) and set it as the parent of Macro and Fashion. Just add in same way we did those albums. The screenshot is my albums page:

Now we are going to set the parent album:

And do the same for Macro album as well and now if we see the album section again we should have a "-" mark before Macro and Fashion that represent being sub album of photography.

We are all good to got and check the front-end page of photography albu. We will have a filterable grid by default like following screenshot

• 1Album name
• 2Grid filters
• 3sub-album name and count of images in each

Gallery Settings

Ok now we are familiar with gallery plugin, adding photos, albums and working with sub-albums. Let's take a look in to available options for them.

gallery settings:Admin panel->apperance->theme options->gallery tab

Here is the list of all available settings:

Archive layout

This is the layout for gallery archive page. As you see there are four available different layout. Here is the screenshot of each one of them.

Archive page title line 1

This is first part of gallery archive page title. The title will be shown if the archive page has side bar (eg:Browse our)

Archive page title line 2

This is second part of gallery archive page title. The title will be shown if the archive page has side bar (eg:Gallery)

Archive page side content

This can be a description or generally the sidebar content (below title) of gallery archive page

Archive Page Same Ratio Thumbs on Grid?

refer "Image's ratio and grid-sizer in Grid layouts" section

Image Hover type

Hover effect in archive and album pages

Grid - Layout Type

With that dark sidebar or full with no sidebar.

Grid - Show filters?

Show/Hide grid filters

Grid - Filter title(default is "Filter")

If you choose grid layout without sidebar, then this the text for filter drop-down title.

Grid - Remove spaces between images?

Enable/Disable spacing between thumbnails in grid layout

Grid - Large Screen column count

Number of grid columns in large screens (width of container > 1200)

Grid - Medium Screen column count

Number of grid columns in medium screens (width of container > 800)

Grid - Small Screen column count

Number of grid columns in small screens (width of container > 500)

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:

• 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:

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

• 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

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

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.

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

Add new gallery

If you have installed and activated the bulk gallery plugin, you should see the "Bulk gallery" menu in admin panel. Lets jump in to creating a new gallery. Here is what we see after clicking on "Add new".

• 1 Gallery title
• 2 Import images from media library using the "import from media library" button
• 3 Gallery category, we will discuss categories in next section
• 4 Gallery cover image for archive and groups pages
• 5 Gallery images hover effect
• 6 Hover icon class in case you select the "Simple icon" for hover type
• 7 Show/hide sidebar in gallery page
• 8 Gallery layout, at the moment bulk galleries can have two grid and horizontal scroll layout
• 9 Number of columns in grid layout
• 10 Remove padding between images in grid layout
• 11Refer to "Image's ratio and grid-sizer in Grid layouts" section
• 12Gallery description for archive and groups pages
• 13Refer to "Image's ratio and grid-sizer in Grid layouts" section

I've added some images and fill the fields. Here is what I have now:

Notice that there is two icon on each image, delete and edit. You can also change the order of images by using drag and drop. Each image has some meta-data like title and alt text that can be edited by clicking on edit icon. In editing meta-data page you will see two field for "Grid sizer" and "image ratio" that you can find more about these in What is same ratio and grid sizer section

Now we are ready to publish our gallery. I've made two gallery one named "Fashion" and the other is "Macro". Here is my bulk gallery page in admin panel now:

If you mouse over one of them you will see a "View" link that you can use for viewing gallery front-end. Also Gallery ID is available that you will need if you want to insert this gallery in to a page.

My Fashion gallery has "horizontal scroll" layout with sidebar and Macro gallery has grid layout without sidebar. Here is the front-end page of my galleries

Working with bulk gallery categories

Categories in bulk gallery are groups of galleries. Each category front-end page is list of all available galleries in that roup and also in archive page of bulk gallery you can filter all alleries based on their categories. We will discuss the archiv page in next section.

You can add, edit and manage the bulk gallery categories from the "Bulk gallery categories" menu in admin panel. Here is what we have after clicking on "add new"

• 1Category name
• 1Category slug, will be generated from the name
• 1Category parent in case you want this group to be a sub-category of another category
• 1Category description that will be shown in layouts with sidebar
• 1Category layout that in current version (V1.3) can be Grid or Horizontal scrolling

I've added a new category "photography" and assigned those "Fasion" and "Macro" galleries that we added in previous section to this category. Here is the screenshot of admin-panel, notice you can still use the view link to view category front-end page.

There are some options in theme option->bulk galery tab that you can use for customizing category pages. We will take a look at them in bulk gallery settings section.

Bulk gallery archive page

Archive page of bulk gallery is the page that we list all available galleries. If you have groups as well then the galleries in archive page can be filtered based on those groups. Here we have created 4 gallery. Fashion, Macro, Models and People and two category "2013" and "2014". Here is what we see in the front page of our bulk gallery which if you did set the permalinks to "post-name" should be wordpress site/bulk-gallery

Settings for the layout and content of this page can be done in theme option->bulk gallery tab. Refer to "Image's ratio and grid-sizer in Grid layouts" section

Bulk gallery settings

Options for bulk gallery can be found in Admin panel-> appearance->theme-option->bulk gallery tab. Here we are going to take a look at them

Bulk Gallery Archive Layout

Either Grid or horizontal scroll at the moment

Archive page title line 1

This is first part of gallery archive page title. The title will be shown if the archive page has side bar (eg:Browse our)

Archive page title line 2

This is second part of gallery archive page title. The title will be shown if the archive page has side bar (eg:Gallery)

Archive page side content

This can be a description or generally the sidebar content (below title) of gallery archive page

Category page upper title

The upper title of category pages, the main title would be the category name

Grid - Layout Type

With that dark sidebar or full with no sidebar.

Grid - Show filters?

Show/Hide grid filters

Grid - Filter title(default is "Filter")

If you choose grid layout without sidebar, then this the text for filter drop-down title.

Grid hover style

Hover effect in archive and category pages

Grid - Same Ratio Thumbs?

refer to "Image's ratio and grid-sizer in Grid layouts" section

Grid - Remove spaces between images?

Enable/Disable spacing between thumbnails in grid layout

Grid - Large Screen column count

Number of grid columns in large screens (width of container > 1200)

Grid - Medium Screen column count

Number of grid columns in medium screens (width of container > 800)

Grid - Small Screen column count

Number of grid columns in small screens (width of container > 500)

Grid - Extra small Screen column count

Number of grid columns in extra small screens (width of container > 300)

Enable social sharing for bulk gallery

You can enable the social sharin for bulk gallery and have sharing icon in all bulk gallery related pages (archive, single and category). This an be done in admin panel->appearance->theme option->Social sharing. Just turn on the enable social sharing field and add your social websites.

Adding bulk galleries 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 galleries and categories. Here we are going to see how we can add a link to galleries and categories in menu. If you go to Admin panel ->appearance->menus You should see the "Bulk Gallery" and "Bulk Gallery Categories" in left side that you can use for adding links to galleries and categories. Notice: If you don't see them in left side then click on "Screen options" (check the following fiure) and make sure that "Bulk Gallery" and "Bulk gallery categories" are checked and active in screen options.

Password protected and private galleries

One of the advantages of Bulk gallery over the Normal Gallery plugin is that you can have password protected galleries here. All you need is changing the visibility of gallery to "Password protected" or "private" when you are add/edit your gallery. Here is a screenshot of our Model gallery, As you see these options are available in publish box

I've made the Models gallery password protected and here is a screenshot of the front-end page.

Notice:If you set a gallery to private, it won't be available in front-end but you can still use it in other pages for example using the bulk gallery elements in Visual Composer. Refer to next section for Bulk Gallery VC elements.

Visual Composer elements for Bulk Gallery

In current version 1.3, there are two available element for Bulk Gallery. "Bulk Gallery Slider" and "Bulk Gallery Grid". The elements are available in "Bulk Gallery" tab of Visual Composer.

Bulk gallery Slider

As it can be predicted from the name, using this element you can create a simple slider from images that are in one of your galleries. Here we are going to explain the available fields and see an example of the result in front-end

Bulk Gallery Grid

Same as slider, using this element we can generate a grid layout from images that are in a bulk gallery

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".

• 1 Portfolio item title
• 2 Visual Composer editors for portfolio page content. Notice If you don't see Visual Composer in portfolio go to admin panel->setting->Visual Composer and make sure "owlabpfl" is selected under "content" section.
• 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.

And here is what we have next

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

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.

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

Left sidebar parallax title

Regular light

Regular dark

Full light & dark

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:

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:

• 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

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.

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

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

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

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.

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 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

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

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

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

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.

Double carousel element has been originally developed for team member page but it is also capable of having any other HTML markup as slide content as well. The double carousel element contains a wrapper element which is "Double Carousel" and after adding the wrapper element and set the settings, you can then add each slide as a new element. Let's take a look at the wrapper settings

Here is what we see after adding the wrapper element. Notice that the wrapper setting is still editable using the edit icon and also we have a plus icon in center of wrapper that can be used for adding slides.

After clicking on plus icon we will have the VC popup with only one available element which is "Double Carousel Slide". Go ahead and add a new slide

Creating demo home page double carousel

In our main demo we have a double carousel in home page that is different from team member style. This is a custom style and markup and because we wanted to show tat you can do something beyond default layout as well we choosed to handle the whole HTML markup and page CSS is this speccifi page and not n theme main syle. It is highly recommended that you import our sample demo and use the page that we built if you exactly need the demo page but if you want to know how things works follow this secton. First step is using the "Let me do my own" option in content field and adding following markup to each slide

<h2 class="section-title double-title">
<span>Professional</span>Photography
</h2>
<p>Your task is not to seek for love, but merely to seek and find all the barriers within yourself that you have built against it.</p>
<a href="http://demo.owwwlab.com/wp-toranj/portfoliogroup/videography/" class="btn btn-transparent">Our Works</a>    

The next step is adding some custom CSS to the page. Check following article from our knowledge base for information on adding CSS to a specific page:

The style that we need to add is:

    .my-carousel{
    
}
.my-carousel .vcarousel-counter,
.my-carousel .vcarousel-prev a,
.my-carousel .vcarousel-next a{
    color:#fff;    
}

.my-carousel{
    padding:0 10%;
    text-align:left;    
}
.my-carousel h2{
    font-size: 40px;
    margin-bottom: 20px;
}
.my-carousel h2 span{
    font-size:18px;
}
.my-carousel p{
    
}

.slide1 h2{
    font-size: 45px;
    color: #5E7D5F;
}
.slide1 h2 span{
   
}
.slide1 h2:after{
    background-color: #9A9A9A;
}
.slide1 p {
    color: #717173;
}
.slide1 btn{
    
}
.slide1 btn:hover{
    
}

.slide2 h2{
    font-size: 45px;
    color: #886656;
}
.slide2 h2 span{
   
}
.slide2 h2:after{
    background-color: #D5D2CE;
}
.slide2 p {
    color: #717173;
}
.slide2 .btn{
    color: #fff;
    background: #D6CAC3;
}
.slide2 .btn:hover{
    background: #A8A18E;
}




.slide3 h2{
    font-size: 60px;
    color: #aa303d;
}
.slide3 h2 span{
   
}
.slide3 h2:after{
    background-color: #f16070;
}
.slide3 p {
    color: #808080;
}
.slide3 .btn{
    color: #fff;
    background: #a72a38;
}
.slide3 .btn:hover{
    background: #cd4958;
}

@media (max-width: 480px) {
    .slide1 h2,
    .slide2 h2,
    .slide3 h2,
    .my-carousel h2 {
        font-size: 30px;
        margin-bottom: 20px;
        color:#fff;
    }
    .slide1 p,
    .slide2 p,
    .slide3 p,
    .my-carousel p{
        color:#fff;
    }

}

The last step is adding class my-carousel to wrapper row of double carousel. Click on edit icon in right hand side of row and enter ".my-carousel" in "Extra class name" field

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

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.

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

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.

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:

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:

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:

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