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 emily.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. (see screenshot below)

Untitled

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

Emily 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 Emily.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 “Emily Demo Menu” as your Primary Menu and save.
  6. Finally, go to Settings > Reading, choose ‘A static page’, set your Front page to Portfolio 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 Emily folder). Inside this folder you’ll find Emily_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. Untitled

  5. Locate Comment and set it to “Do Not Allow”, then click the “Update” button.

Emily Theme has main menu items and sub-menu items. The main ones are All Caps, sub-menu is in lowercase letters.

Untitled

Add sub-menu items to your menu by nudging the child-pages under parent-pages.

Untitled

To rename any menu item go to Appearance > Menus, toggle open the item you want to rename and change the “Navigation Label”.

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.

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., Dogs)
  3. Click the blue “Add Image” button to add images to your gallery.
  4. NOTE: Hold down control/command key on your keyboard to select multiple images at the same time.

  5. You can drag the image thumbnails around to change their order.
  6. Click the “Set featured image” link from the right sidebar to set a featured image for this gallery.
  7. Click the “Publish” button to publish your gallery and it will show up in your Portfolio page (chapter 3.)

NOTE: As shown in our Emily demo, only masonry style entries can have descriptions. Entries that have a horizontal layout can’t have a description area.

To add a descriptions to a gallery:

  • Open your Portfolio Entry (Portfolio > All Entries) and write your description in the main content area

When it comes to the portfolio image site, we believe that bigger is better. If you can, upload images that are 1920px wide, but remember that the bigger the image, the heavier it is, the longer it loads, so you need to find the middle ground.

We suggest that you:

  1. make sure you have a quality hosting provider
  2. optimize your images before uploading them onto WordPress – check out www.jpegmini.com
  3. NOTE: These image size suggestions are based on our personal experience after testing the theme on a 1920x1200px large monitor.

  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

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.

A) If you want ALL of your portfolio entries to show up in horizontal layout:

  1. Go to Theme Options > Portfolio
  2. Set “Portfolio Layout” to Horizontal
  3. Regenerate your thumbnails to make the images fit the screen properly (read how to do that here – http://help.themevillage.net/knowledgebase/how-to-regenerate-thumbnails/ )

B) If you want SOME of your portfolio entries to show up in horizontal layout:

  1. Go to Portfolio > All Entries
  2. Open the entry/entries that should be horizontal
  3. Locate “Portfolio Options” (under Gallery) and set the Layout to Horizontal

NOTE: Entries that have a horizontal layout can’t have a description area.

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.

  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.

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.

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

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

  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. Click on the “Advanced Options”
  5. Untitled14

  6. In the “Image CSS Class” area type in village-big
  7. Click the Update button.
  8. Untitled15-1024x548

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:

Go to Theme Options > General Settings, Blog Post Meta

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

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.

You can place widgets (Social Icons, some text etc.) in the side navigation area under the menu.

To add social icons to your side navigation:

  1. Go to Appearance > Widgets
  2. Locate “Simple Social Icons”
  3. Place it in the Side Widgets area
  4. Open it up and add your social links

To add social icons in a page (like in the Contact page):

  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

Emily has a small footer area designed for your copyright info.

  1. Go to Theme Options > General Settings
  2. Locate “Site Footer Text” and change the info
  3. Click the “Save Changes” button

Emily uses two types of short-codes:

  1. Shortcodes Ultimate” plugin. You can add a number of short-codes by clicking on the “Insert Shortcode” button next to the “Add Media” button.
  2. Village shortcodes.

This chapter will describe the use of village (our) short-codes and some of the most popular Ultimate short-codes.

The easiest way to divide your text into columns is this:

  1. Go to Shortcodes > Examples
  2. Click on “Column layouts”
  3. Choose your preferred layout and click on the “Get the code” button
  4. Copy the code you see there and paste it in the page where you want your columns to be.
  5. Replace the sample text with your own.

Use this shortcake to create a button:

If you want to learn more about the Ultimate Shortcodes, please go to Shortcodes > Settings or Shortcodes > Examples.