Luka Theme Documentation

After purchasing this theme download your purchased theme file from Themeforest. To do that, go to your themeforest.net profile move your mouse cursor over your login name in the right top corner and then click “Download”.

Here you will find all the items that you have purchased.

Locate Luka, click the “Download” button and choose “All files & documentation” and save the package on your computer.

UNZIP the package you just downloaded.

Inside you will find a copy of this documentation, license, purchase code and a zipped Luka Portfolio file (luka-portfolio.zip) that you will need to install onto your WordPress.

1. Login into your WordPress Admin panel
2. Go to Appearance > Themes
3. Click on the “Add New Theme” > Upload Theme
4. Choose file and select luka-portfolio.zip (this file is INSIDE the zipped file you’ve downloaded from Theme Forest)
5. Hit “Install Now” and the theme will be uploaded and installed.
6. Then click on the Activate link.

Installing Plugins

• After successful theme installation you will be presented with a set of plugins which were used in the live theme preview.
• Clicking on ‘Begin installing plugins’ .
• Then select all of the plugins in the plugin list and bulk install them.

 

After you installed your theme and all required plugins, follow these steps:

1. Go to Appearance > Import Demo Data
2. Click on big “Import Demo Data” button and wait until the importing process is done.

After the import process is completed you get all pages, images, posts and portfolio items you saw in the ThemeForest demo before purchasing the theme. Now all you have to do is replace the demo images and sample content with your own.

You can upload your logo image by going to Theme Options > Branding

To make sure your logo image looks sharp on all devices, you will need 2 logo files (a smaller one and a bigger one).

• The small one should be around 60px high (upload it under “Site Logo”)
• The bigger one should be exactly 2x bigger. If your smaller logo was 150x60px then your bigger logo image should be 300x120px (upload it under “Site Logo @2x”)

You can add your copyright information by going to Theme Options > Branding. Scroll to the bottom of the Branding options panel and look for Footer: Copyright.

The “Call to action” banner, located just above the footer area was designed to help your prospect clients find a way to easily get to your contact (or any other) page.

To activate your Call to Action area, go to Theme Options > Branding and look for Footer: Call to action

When activated, your Call To Action banner will automatically show up in all vertical scroll pages.

Go to Theme Options > Style to change basic theme colors to better suit your personal brand.

By default when you create a new page (Pages >Add New) your page title will show up at the top of your page in a beautiful script font called Argentinian Nights by inkmethis.

And at this point you have 2 extra options to customize your page title area:

1. Turn OFF page title

If you do not want to have a page title in a page, set the page template to “Page Without Title”

2. Add a decorative element above title

To enhance your page layout, open the page and upload a graphic of your choice in the Featured Image area. 

If you imported the demo content, you already have a pre-made portfolio page and you do not need to create a new one.

1. Go to Pages > Add New
2. Give this page a name (ex., Portfolio) This page will contain all of your galleries.
3. In the content area you can write a couple of words about this page. (This text will show up if you activate Archive Titles & Descriptions in Portfolio > Portfolio Settings)
4. Click the “Publish” button.
5. Now go to Portfolio > Portfolio Settings and under Main Portfolio Page select the page you just created and click on the SAVE button.

Here you can set the layout for your portfolio page as well. You can choose between Modern Masonry and Masonry with hover in the Portfolio Archive Layout.

You can display your main portfolio page in 3 ways:

1. Galleries only

To disable the page title and any descriptions and create a page like in the image above, go to Portfolio > Portfolio Settings and turn OFF Show Archive Titles & Descriptions.

2. Galleries & Title

To enable the page title, go to Portfolio > Portfolio Settings and turn NO Show Archive Titles & Descriptions. Leave the content area empty in your Portfolio page (Pages > All Pages > Portfolio)

2. Galleries, Title & Description

To enable the page title, go to Portfolio > Portfolio Settings and turn NO Show Archive Titles & Descriptions. Then go to Pages > All pages, open your Portfolio and write your text in the main content area.

1. Go Portfolio > New Portfolio Entry.
2. Give this gallery a name (Anne & John, New York, People …) 
3. Add a subtitle (optional) to your gallery in the Sub Title area.
4. All of the images that will appear inside this gallery need to be uploaded in the Gallery meta box by clicking on the “Add Images” button. You can “drag” the image thumbnails around to change the image order
5. The cover image of each gallery is the Featured Image, so upload your cover image in the Featured Image area on the right side of your screen.
6.  You can write something about this gallery in the description area if you need to.
   

 

If you don’t want to show the description and title box in the gallery, scroll down and set “Title & Description” to Disable Description.

You can choose between Horizontal layout or Masonry layout for your portfolio galleries.

To do that, follow these steps:

1. Go to Portfolio > Portfolio Settings
2. Locate “Single Portfolio Layout” and set it to either Horizontal or Masonry

You can add Vimeo and Youtube videos to your portfolio entries.

 

To do that, follow these steps:

1. Go to Portfolio > Portfolio Settings and change Pop-up Gallery to LightGallery
2. Open a portfolio entry where you want to add a video
3. Click on the “Add Images” button in the Photography Portfolio box
4. Choose an image that will serve as your video cover image.
5. On the right side of the popup screen you will see a Video URL field where you can paste your video link.
6. Drag and drop the video placeholder image to rearrange the order.

Go to Settings > Reading and set your portfolio page as your Front page.

To create multiple portfolio pages with different galleries in each portfolio page follow these steps:

1. Go to Portfolio > Categories
2. Create your portfolio categories (for example, Weddings, Engagement, Nature etc.)
3. Go to Portfolio > All Entries,
4. Open an entry and on the right side of the screen locate ”Portfolio Categories” and assign it to a specific category/categories

To see your new category portfolio page, add it to your menu (continue reading to learn how.)

Adding Categories To Menu

Now that the categories are created and galleries assigned to it, add your categories page to your menu. To do that:

1. Go to Appearance > Menus
2. On the right side of your screen click the “Screen Options” button and activate “Portfolio Categories”
3. Toggle open “Portfolio Categories”, select the ones you want to use and add them to your menu.
4. Click the “Save Menu” button

If you split your portfolio into multiple portfolio pages using categories (read Multiple Portfolio Pages chapter), you can add a custom description for each of your category portfolio pages.

To go that:

1. Go to Portfolio > Categories
2. Click on any category that needs a description
3. Write your description in the Description area.

Let’s say you have 4 portfolio entries – Weddings, Children, Portraits, Couples. You want to change the order to – Couples, Weddings, Portraits, Children.

 

Here’s what you do:

Step 1

1. Go to Settings > Intuitive CPO (if you don’t see this option in Settings, install a plugin called “Intuitive Custom Post Order”)
2. Under “Sortable Post Types” choose what you would like to reorder
3. Click the “Update” button

Step 2

1. Go to Portfolio > All Entries
2. Place your mouse cursor over the entry that you would like to move until you see the “move arrow” icon showed in the image below
3. Drag and drop the entries in your preferred order.

If you don’t want to display your whole portfolio page as a Front page, you can set a single, open portfolio entry to be your Front page.

To do that, follow these steps:

1. Create your portfolio entry (Portfolio > New Portfolio Entry)
2. Then go to Pages > Add New
3. Give this page a name – example, “Front Page Entry”.
4. Set the Page Template to “Single Portfolio Entry“
5. A new dropdown will show up. Choose the entry that you created in step 1
6. Click on the “Publish” button
7. Go to Settings > Reading
8. Set your Front page to “Front Page Entry” (the page you created in step 3)

If you imported the demo content, you already have a pre-made blog page and you do not need to create a new one.

1. Create a new page Pages > Add New and give the blog a name (for example “Blog”), DO NOT write anything in the content area.
2. Go to Settings > Reading and set the Posts page to your new blog page.

You choose between 2 blog layout styles:

1. Modern 50/50 
2. Masonry blog layout

You can test and choose a layout for yourself by going to Theme Options > Blog.

After you have assigned your Posts page as your Blog you can start creating posts for your blog and they will automatically show up in your blog page.

To create a post:

1. Go to Posts > Add New
2. Give your post a name
3. The main text goes into the main content area.
4. Upload a cover image for your post inside the Featured Image area. (just like in your portfolio)

You can create beautiful galleries inside your post. This is especially useful if you need no showcase a particular photo session (such as “Jane and John” wedding).

Creating a simple gallery inside a post

See example of a simple gallery.

1. Open a post in which you need a gallery
2. Click on the “Add Media” button
3. Click on “Create gallery” link
4. Select the images that should be in the gallery (for best results, these images should be the same height.)
5. Click on the “Create a new gallery” button
6. In the GALLERY SETTINGS area set the column count, set “Link to” None (if you don’t want them to be clickable) or “Link to” Media File (if you want them to open up in a fullscreen slider), and set the size to what’s appropriate
7. Click on the “Insert gallery” button

When creating a galley, all images will show up in 1; 2; 3; 4 …. or 9 columns. If you want your images to show up in a more complex layout, you will need to create multiple galleries – 1 for eash column. Keep reading to find out how.

Creating a mixed gallery inside a post

To create a gallery where some of the images appear in 1 column, some in 2 or 3 columns, each column will need its own gallery. See an example here.

To do that follow the steps 1- 7. that are described above, but:

• If the first image (or a couple of the first ones) should be in one column, you select only these images and set the column count to 1.
• If the next 2 images should be next to each other, create a new gallery under the first one, select these two images and set the column count to 2
• continue in this way until you’re done.

You can access blog settings by going to Theme Options > Blog. There you can:

• Choose your blog layout –  Modern 50/50 or Masonry
  
• Activate or disable your blog meta data – Category, tags, comment count, post author, date.

To upload a single Background Image:

• Go to Theme Options > Welcome Page
• Look fo Welcome Screen: and set it to “Image”
• Upload an image under Background image

Since the image will be covering the whose screen, it should be landscape oriented and around 1920x1080px big. To ensure speedy loading the image should be well under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.

• Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background. You can see the image we used in the demo below. (the “Enter Site” is added to the logo to make sure users know what to do)

• Select an appropriate background color. This color will show up while your image is loading in the background. The closer the color to your image overall color the smoother the transition will be.

To upload multiple images (a slider gallery):

• Go to Theme Options > Welcome Page
• Look fo Welcome Screen: and set it to “Gallery”
• Upload your images under Gallery.

For fast load speed use no more that 3 images.

Since the image will be covering the whose screen, it should be landscape oriented and around 1920x1080px big. To ensure speedy loading the image should be well under 1MB. Use JPEGmini or a similar program to optimize your image before uploading it.

• Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background. You can see the image we used in the demo below. (the “Enter Site” is added to the logo to make sure users know what to do)

• Select an appropriate background color. This color will show up while your image is loading in the background. The closer the color to your image overall color the smoother the transition will be.

Video background rules:

• Video backgrounds (autoplay videos) will only show up on desktop devices. Tablets and mobile devices will not show the video background, instead these devices will show a Background Image that you need to upload as well. If you are wondering why it works this way – you can read detailed explanations here and here.
• The video background should be as short as possible (about 10 sec long) since the shorter the video the faster it will load
• There should be no sound
• Minimum size should be 852 x 480 but if possible you can use 1920×1080
• You will need 2 file formats for the video background – MP4 and WebM

There are a lot of tools to convert videos to WebM format. Check out FireFogg (works ONLY in FireFox) or Miro Converter

To upload a video background, follow these steps:

1. Go to Theme Options > Welcome Page
2. Choose Video as your Welcome Screen.
3. Upload both WebM and MP4 video file formats in their designated places.
4. Upload a Background Image under “Background Image”.
5. Click on the “Save Changes” button.
6. Upload a logo graphic under Logo Image

Your Logo Image should be a .png file with a transparent background.

To get a large footer with widgets inside it, go to Appearance > Widgets and place any of the available widgets in the Footer area. Your Footer can hold 3 widgets.

To add your copyright information, go to Theme Options > Branding.

To create your services, follow these steps:

1. Go to Pages > Add New
2. Give your page a name (ex., Services)

Creating a service block

1. In your new service page, click on the “Add Post Element” button, right next to the Add Media button.
   
2. Choose Services Block
3. Fill out the form presented to you there and then click on the INSERT ELEMENT button
4. To add another services element, just repeat steps 1 – 3.

If you wish to use columns in any of your pages, go to the page that needs columns and click on the little brackets button located above the main content area.

• Choose any column layout available there and click on it. (each column needs its own column shortcode)
• You will see that you get a little shortcode in your content – for example [one_half][/one_half]
• Place your 1st column text in between the shortcode.

• The,n in a new line, click on the bracket button again, choose your second column to generate another shortcode and place your second column text in between that and so on!

To bring attention to some part of your content you can style it as a “Callout text”. Such text will appear in a slightly larger type size.

To create such text style in a post or page, click on the Add Post Element button and choose “Callout Text”.

 

If you need to place a button somewhere in the content, click on the Add Post Element located above the main content area, next to Add Media button and choose the Button element.

Prevent people from stealing your work. They do that by right-clicking on your images and choosing the “Save Image As…” option.

We created a plugin specially for this, it works great with all our themes and its free!

Follow these steps:

1. Go to Plugins > Add New
2. Search and install “Photection” by Colormelon
3. After you installed it, go to Settings > Photection and add a custom message that shows up when someone Right-clicks on an image! 

The easiest way to keep your theme up to date is by using Envato Market plugin. Here is a short video tutorial on how to setup the plugin:

You can read more about the plugin in our Knowledge Base Article