We recently published an article called “How to make a photography portfolio website”. It describes everything you need to think about while building your personal portfolio.
Check it out here.

This chapter covers theme installation, sample content import, menu and front page assigning and theme options import. If you’re familiar with basic WordPress, you’re welcome to skip this part.

  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 talent.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 go to Appearance > Themes and activate your new theme.

After successful installation you will be presented with a set of plugins which were used in the live theme preview. (the message looks something like the screenshot below)

Untitled

Install these plugins by clicking on ‘Begin installing plugins’ link to get the full theme experience.

Talent comes with a demo sample content file (pages, menu, posts, portfolio entries, page content) exported directly from the live preview you saw on Theme Forest. Use it to help you get started with your site.

NOTE: The images from the demo are not included in this sample content due to licensing restrictions. They are replaced with black image holders.

  1. Go to Tools > Import
  2. Choose “WordPress”
  3. Click on “Choose File”, locate Talent.xml demo file that is in the Demo Content folder.
  4. Check the “Download and import file attachments” check-box and click the “Submit” button.
  5. Now go to Appearance > Menus and assign “Talent Demo Menu” as your Primary Menu and save.
  6. Finally, go to Settings > Reading, choose ‘A static page’, set your Front page to Portfolio (or Home, if you want the slider to be in your front page but then you need to import the slider first – read chapter “Slider“) and Posts page to Blog.

Untitled

Theme Options import file is the “style” of the demo theme (colors, sidebar, portfolio style, blog meta layout etc.) .
You can import it to make your site look like the one on Theme Forest or you can go to Theme Options in your admin panel and play with the controls yourself.

To import Theme Options:

  1. On your computer locate a folder called “Theme Options file” (inside the Talent folder). Inside this folder you’ll find Talent_Theme_Options.json,
  2. Select it and open the .json file in a text editing program (like TextEdit or similar)
  3. You’ll see lines of text/code, select it all and copy it.
  4. Now go to Theme Options > Import / Export, click on “Import from file” button and paste in the .json file. Then click “Import”

This chapter contains information about basic theme controls and their location so please read this chapter to avoid any confusion and get to know the theme better.

  1. Go to Pages > All Pages
  2. Select all of the pages that should not have a comment option
  3. Click on “Bulk Actions”, choose Edit, then click the “Apply” button
  4. Locate Comment and set it to “Do Not Allow”, then click the “Update” button.

To achieve a specific page look, you need to use Page Templates. They are located in each page you create, on the right side of your screen, in the Page Attributes box.

Untitled

Set your Page template to “Page Without Title” to remove the large page title.

You can upload a background image for regular pages.
To do that open up a page and upload the background image as a “Featured Image”.

Untitled

If you need to change the text color of the page:

  1. Select the text that needs to be in a different color
  2. Click on the “A” icon in your content toolbar
  3. Untitled

  4. Choose the color

If you change your text to white, you won’t be able to see it in the “Visual” mode. Switch to “Text” tab instead to see your text.

Talent can have the menu at the bottom of the screen or at the top. To change the menu position go to Theme Options > Branding.

If you chose to position your menu at the top of the screen, you can position your logo in the middle of your menu entries. To do that:

Step 1

  1. Go to Appearance > Menus
  2. Open the “Custom Links” tab
  3. In the URL field type in “#”
  4. In the “Text” field type in “Logo”
  5. Click the Add to Menu button.

Step 2

  1. Toggle open the newly created “Logo” item.
  2. Delete the “#” leaving the URL field empty.
  3. In the CSS Classes field type in logo-placeholderlogo placeholder

If you don’t see the CSS Classes field, click on the screen options tab in the right top corner of you screen and activate “CSS Classes”screen options

Now this menu link represents your logo image. Place it where you would like your logo to be (at the start of the items, in the middle of them or at the end)

This chapter explains how to create a working portfolio and customize it.

NOTE: If you imported the sample content you already have a 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) DO NOT write anything in the content area.
  3. On the right side of the screen locate “Page Attributes” and set the Template to Portfolio.
  4. Click the “Publish” button.

Untitled

  1. Go to Portfolio > New Portfolio Entry
  2. Give your gallery a name (ex., New York)
  3. Choose the gallery layout (masonry, pop-up gallery, pop-up vertical, case study) under “Layout”
  4. Add a sub-title (optional) to your entry in the Sub Title area.
  5. Click the blue “Add Image” button to add images to your gallery (if you chose Case Study, read chapter “Case Study Portfolio Layout”)
  6. NOTE: Hold down control/command key on your keyboard to select multiple images at the same time.

  7. You can drag the image thumbnails around to change their order.
  8. Upload the gallery cover image in the “Featured Image” metabox
  9. Click the “Publish” button to publish your gallery and it will show up in your Portfolio page (chapter 3.)

A masonry layout is a grid of images arranged in 3 columns.

If you want all of your entries to be masonry go to Theme Options > Portfolio and set the global layout to Masonry.

If you want some of your entries to be masonry style, open a portfolio entry, set it’s layout to Masonry.

To add a description to your masonry gallery, open your portfolio entry, scroll down to the main content area and write your description there.

If you want all of your entries to be in a vertical, fullscreen layout, go to Theme Options > Portfolio and set the global layout to Pop-up: Vertical Scroll.

If you want some of your entries to have this layout, open a portfolio entry, set it’s layout to Pop-up: Vertical Scroll.

To add a descriptions to each image, open your portfolio entry, click on the image that needs a description and write it un the “Description” field.

Untitled

If you want all of your entries to be in a vertical, fullscreen layout, go to Theme Options > Portfolio and set the global layout to Pop-up: gallery.

If you want some of your entries to have this layout, open a portfolio entry, set it’s layout to Pop-up: Gallery.

The Case Study layout disables the Gallery area and leaves you with the main content area letting you can create your own portfolio layouts. Case Study is especially useful if you want to embed videos into your portfolio (read more about videos in chapter 3.3 )

If you want all of your entries to be Case Study, go to Theme Options > Portfolio and set the global layout to Case Study.

If you want some of your entries to have this layout, open a portfolio entry, set it’s layout to Case Study.

If you want to place a Vimeo or Youtube video in your portfolio:

  1. Create a new portfolio entry – Portfolio > New Portfolio Entry
  2. Give it a name
  3. Under the title area locate “Layout” and set it to Case Study
  4. The Gallery area will automatically disappear
  5. Work in the main content area – paste your video link there just like you would in a regular post.

There are a number of customization options for Talent horizontal portfolio page. To customize your portfolio go to Theme Options > Portfolio > Horizontal Layout.

Here you will be able to:

  • Add spaces between portfolio entries
  • Change inactive entry opacity
  • Align active entries to center, left or right
  • Enable looping, dragging, autoplay and more!

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

  1. Go to Portfolio > Portfolio Categories
  2. Create your portfolio categories (for example, Editorial, Animals, Nature)
  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
  5. NOTE: If you don’t see “Portfolio categories”, click on “Screen Options” at the top of the screen and activate “Portfolio categories”.

  6. When that’s done, go to Appearance > Menus locate “Portfolio Categories”, and add them to your menu.

NOTE: Again, if you don’t see “portfolio categories” in Menus, click on “Screen Options” at the top of the screen and activate “Portfolio categories”.

  1. Go to Appearance > Menus
  2. Locate your portfolio in Pages
  3. Select your portfolio and add to menu
  4. Click the “Save Menu” button

Talent WordPress theme comes with a premium slider called Revolution Slider. This particular slider is very powerful – you can animate layers, add videos and customize the look of the slider.

In our theme demos we used the sliders basic features since that is how we envisioned it. In this chapter you’ll learn how to set up the slider so that it looks like in the demo sites. If you need more info on the slider, please read the “Revolution Slider documentation” that was included in your Theme Forest download.

The easiest way to set up your slider is by importing the slider settings.

  1. Go to Revolution Slider in your admin panel
  2. Click on the green “Import Slider” button
  3. Locate slidersettings.zip file on your computer (in the Talent folder) and import it
  4. NOTE: If you imported the sample content you already have a “Home” page and you don’t need to do steps 5-8.

  5. The slider you imported is called “Home Slider” – click on it to access the slider settings
  6. Copy the Slider Shortcode – [rev_slider homeslider]
  7. Go to Pages > Add New and call this page “Home”
  8. Set the page template to “Page with Slider”
  9. Go to Settings > Reading and set your front page to “Home”

Now you have set up the your slider. The next step is to add some slides to your slider.

After you set up your slider (chapter 4.1) do the following:

  1. Go to Revolution Slider and click on “Edit Slides” button
  2. Untitled

  3. You have 4 slides. You can either delete them or edit the existing ones. We suggest deleting them and starting fresh.
  4. After you deleted the existing slides, click on the blue “New Slide” button
  5. Choose your image (preferable size is 1920x1080px) and click “Insert”
  6. Click the green “Edit Slide” button
  7. To add another slide, click on the “Add Slide” tab
  8. To add a background image scroll down to “Slider Main Image / Background” and choose “image BG”
  9. Remember to always save after you change anything indoor slides by clicking on the green “Update Slide” button

NOTE: If you need more info about the slider and its functionality please read the “Revolution Slider Documentation” that came with this theme. This documentation was written by the original slider author.

Go to Revolution Slider and click on the green “Settings” button to access slider settings.

This chapter explains how to create a working blog page and customize it.

NOTE: If you imported the sample content you already have a Blog page (called “Blog”) and you do not need to do this.

  1. Go to Pages > Add New
  2. Give this page a name (ex., Blog), DO NOT write anything in the content area.
  3. Click the “Publish” button.
  4. Go to Settings > Reading and set the Posts page to your new blog page

NOTE: Your latest post will be shown as the biggest one and all other posts will show up below it in two columns. This can not be changed by default. If you wish to modify this we suggest hiring a 3rd party developer 🙂

  1. Go to Posts > Add New
  2. Write your post exactly like in a default WordPress theme
  3. Upload a post header image (optional) as a “Featured Image” on the right side of the screen
  4. Click the “Publish” button

The width of the image should be 1200px. This will ensure quality blog look large screens.

NOTE: This works only if you are using the standard Blog style.

  1. Go to Theme Options > Blog
  2. Turn OFF “Use WordPress Excerpts”
  3. Click the “Save Changes” button
  1. Go to the blog post in which you want to place the full-width image
  2. Add your image in your post (by clicking on the “Add Media” button)
  3. After the image is inserted in post, click on the image and then click on the pencil icon
  4. Untitled

  5. Click on the “Advanced Options”
  6. In the “Image CSS Class” area type in village-big
  7. Click the Update button.

Blog post meta is the information shown below your post. It includes:

  • post date,
  • post category,
  • post tags,
  • comment count.

To add, remove and rearrange your post meta:

  1. Go to Theme Options > Blog, – Blog Post Meta

We suggest using two (max three) post metas for best aesthetic look.

Your client area is located in your admin dashboard > Client Area.

Untitled

If you do not see it there, go to Plugins > All plugins and make sure that “Village Client Area” plugin is installed and activated.

  1. Go to Client Area > Add New
  2. Give your gallery a name (ex., Jane&John )
  3. Click on the blue “Add to gallery” button to add all of the images
  4. In the “Featured Image” area on the right side of the screen add one image that will serve as a cover image for this gallery AND as background image when entering the galleries password.
  5. Click on the “Publish” button to make it public.

If you want to password protect this gallery, continue reading this documentation.

Follow these steps:

  1. Go to Pages > Add New
  2. Give this page a name (ex., Client Area)
  3. In the content area you can write a few lines of text for your users (optional)
  4. Click the “Publish” button
  5. Go to Client Area > Settings > General, click on the “Client area archive page” drop-down and select your Client Area page.select-client-area-page
  6. All of your client galleries will show up in this page.

  7. Now go to Appearance > Menus, locate your “Client Area” page in the Pages area and add it to your menu.
  1. Choose the gallery that needs to be password protected (Client Area > All Galleries)
  2. Click on the Edit link next to “Visibility” and choose Password Protected
  3. Type your chosen password in the password field and click OK
  4. Untitled

  5. Click the Update (or Publish) button.

You can skip creating a public Client Area page by sending private links to your clients instead.

  1. Go to Client Area > All Galleries
  2. Open the gallery that you want to share
  3. Copy the URL link of the gallery
  4. Untitled

  5. Send this link with your client

When he/she uses the link they’ll see their gallery (if it’s not password protected) or the password area where they need to enter their password (if it’s password protected).

There are a couple of strict steps you need to follow in order to create a services page, so please read carefully.

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

Creating the first service block:

  1. Click on the “Add Media” button and choose an image for your 1st service
  2. After the image is placed in the main content area, click on it and click on the pencil icon
  3. services1

  4. Click on “Advanced Options”
  5. In the Image CSS Class field type in village-split-left (for image on the left side, text on the right) or village-split-right (for image on the right side, text on the left). Then click the Update button.Under the image write your service description.
  6. services2

  7. Write your Service description UNDER the image.
  8. IMPORTANT – After your text is written, click on the “Horizontal line” button to mark your service end.

services3

Now your 1st service is created.

To add another service, follow the same steps again (step 1-6). It’s important that your layout would always be – Image; Text; Horizontal line – Image; Text; Horizontal line – etc.

Untitled

Carousel Slider (called Flickity) is a sliding image strip that you can place in your pages and blog posts.

This slider is “activated” by combining a simple shortcode with WordPress default gallery option.

  1. Go to Page or Post where you want to place a carousel slider
  2. In the main content area type in this shortcode:
  3. Place your gallery in between the 2 short-code parts
  4. To create gallery click on the “Add Media” button
  5. Untitled

  6. Choose “Create Gallery” and select all of the images you’d like to use
  7. Untitled

  8. Click on the “Create a new gallery” button
  9. In the Gallery Settings area set the Link to None and Size to large, thumbnail, medium or full size (depending on how big the slider should be)
  10. Untitled

  11. Depending on what size you chose, you need to add a size value in the shortcake itself ( [village_carousel size=“x”] )
  12. Your options are:

    • size=”large” (750px height) ;
    • size=”medium” (300px height) ;
    • size=”small” (150px height)

    NOTE: The rule is that the gallery size (step 7) has to be equal or bigger than the shortcode size (step 8). Otherwise your images will be blurry. You can see the original gallery sizes in Settings > Media.

  13. Your final layout should look like this:

Untitled

Short-code starts, gallery, short-code ends.

By default you have a space between your slider images. You can make this space bigger, smaller or remove it completely. To do that you need to add one of the following pieces of code to your carousel short-code:

  • space="tiny" (to make the gap smaller)
  • space="huge" (to make the gap bigger)
  • space="none" (to remove the gap)

Your carousel short-code should look like this now:

NOTE: (Instead of “y” you should write “tiny” or “huge” or “none”)

If you want to disable the autoplay option, you need to add the following code to your short-code:

  • autoplay=”off”

Your carousel short-code should look like this now:

If you want your images to snap (each image centers itself on the screen when browsing) your short-code:

  • snap=”yes”

Your carousel short-code should look like this now:

NOTE: You can of course use all options described above in one shortcode. For example:

This chapter covers the setup of the contact page.

  1. Go to Contact > Add New
  2. Delete the code that you see in the Form area and in its place paste in this:
  3. Fill in your email information in the “Mail” area
  4. Click the “Save” button at the top of the page
  5. Copy the shortcode generated of you at the top of the page
  6. Paste this shortcode in the page where you want your contact form to show up.

To add text in the information area, follow these steps:

  1. Go to Theme Options > Information Area and urn it ON
  2. Write and style your text in the Information Text area
  3. Customize the open and close link text and icons

To add social icons to the info area:

  1. Go to Plugins > Add New
  2. Search and install “Widget Shortcode”
  3. Go to Appearance > Widgets
  4. Locate “Simple Social Icons”
  5. Place it in the Arbitrary area
  6. Open it up and add your social links
  7. Click the Save button
  8. Copy the shortcode (looks like [widget id=”simple-social-icons-2″] )
  9. Paste it in the Information area where the icons should appear

If you want want your icons to be round, read the next chapter

Talent uses “Simple Social Icons” plugin.

To add social icons to a regular page (like contact or about), or information area:

  1. Go to Plugins > Add New
  2. Search and install “Widget Shortcode”
  3. Go to Appearance > Widgets
  4. Locate “Simple Social Icons”
  5. Place it in the Arbitrary area
  6. Open it up and add your social links
  7. Click the Save button
  8. Copy the shortcode (looks like [widget id=”simple-social-icons-2″] )
  9. Paste it in the where the icons should appear

To make the icons round like in the demo site, go to Widgets, open Simple Social Icons and fill in the values showed in the next image:

Untitled

Icon Size: 48
Icon Border Radius: 27
Border Width: 3

Use this shortcake to create a button: