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

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

NOTE: Images are not included in the demo import due to licensing restrictions. All images will be replaced with black image holders.

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

  1. Go to Tools > Import
  2. Choose “WordPress”
  3. Click on “Choose File”, locate Magpie.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.

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 Magpie folder). Inside this folder you’ll find Magpie_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”.
  1. Go to Appearance > Menus and assign “Magpie Demo Menu” as your Primary Menu and save.
  2. Then go to Settings > Reading, choose “A static page”, set your Front page to Portfolio and Posts page to Blog.

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.

Magpie Theme has main menu items and sub-menu items. The main ones are larger than sub-menu items.

Go to Appearance > Menus and add sub-menu items to your menu by nudging the child-pages under parent-pages.

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.

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

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

You can see an example of this layout in our demo site – the About and Contact page. To create such a layout:

  1. Go to Page > Add New
  2. In the main content area write all of the text that will appear in this page.
  3. The part that should be on the right side of the screen with a semi-transparent white background needs to be placed inside the following shortcode:

The final result should look like this:

NOTE: This layout is for accent only and is not suited for large amounts of content since it is not scrollable. If you have too much content in this area, it will automatically shift under the content that you have on the left side of the screen. If the screen you’re using is too small, the layout will shift into one column.

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.

  1. Go to Portfolio > New Portfolio Entry
  2. Give your gallery a name (ex. New York)
  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 “Publish” button to publish your gallery and it will show up in your Portfolio page (chapter 3.)

NOTE: As shown in our Magpie demo, only masonry style can have descriptions. Horizontal layout entries do not support descriptions.

To add a descriptions to a gallery, open your Portfolio Entry (Portfolio > All Entries) and write your description in the main content area.

  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.

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

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-regeneratethumbnails/ )

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 Title area) and set the Layout to Horizontal

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

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.

If your video does not fit the screen properly:

  1. Go to Plugins > Add New
  2. Download and install “FitVids for WordPress”
  3. Go to Appearance > FitVids and in the Enter jQuery Selector area write #page
  4. Click the “Save Changes” button

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

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

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 on 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. In the “Image CSS Class” area type in village-big
  6. 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, go to Theme Options > General Settings > Blog Post Meta.

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

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. Click on “Advanced Options
  4. 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.

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

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.

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 the Page or Post where you want to place a carousel slider
  2. In the main content area type in this shortcode:
    [village_carousel size="large"][/village_carousel]
  3. Place your gallery in between the 2 shortcode parts
  4. To create gallery click on the “Add Media” button
  5. Choose “Create Gallery” and select all of the images you’d like to use
  6. Click on the “Create a new gallery” button
  7. 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)
  8. Depending on what size you chose, you need to add a size value in the shortcake itself ( [village_carousel size=“x”] )
  9. 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 short-code size (step 8). Otherwise your images will be blurry. You can see the original gallery sizes in Settings > Media.

  10. Your final layout should look like this:

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

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:

[village_carousel size=“x” space=“y”]
*place gallery here*
[/village_carousel]

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:

[village_carousel size=“x” autoplay=“off”]
*place gallery here*
[/village_carousel]

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

  • snap=“yes”

Your carousel short-code should look like this now:

[village_carousel size="x" snap="yes"]
*place gallery here*
[/village_carousel]

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

[village_carousel size="large" space="none" autoplay="off" snap="yes"]
*place gallery here*
[/village_carousel]

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.

Magpie widget area is hidden off screen on the left side. To activate it first you need to place some widgets in this area.

You can change both the text and icon that appear in your navigation when widgets are placed in the Side Widgets area. To do that go to Theme Options > Widget Area.

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.
  1. Go to Appearance > Widgets
  2. Locate the “Image” widget and place it inside the Side Widgets area
  3. Open it and fill out the fields that you see there
  4. Click the “Save” button.

In our demo site you saw an Instagram widget in the side widgets area. To set up an Instagram widget of your own, follow these steps.

  1. Go to Plugins > Add New
  2. Search for and install “WP Instagram Widget
  3. Go to Appearance > Widgets
  4. Locate “Instagram” and place it in your Side Widgets area
  5. Fill out the required fields and Save.

In our demo site you saw Facebook like widget in the side widgets area. To set up a Facebook widget of your own, follow these steps.

  1. Go to Plugins > Add New
  2. Search for and install “Facebook Widget” by Milap Patel
  3. Go to Appearance > Widgets
  4. Locate “Facebook” and place it in your Side Widgets area
  5. Fill out the required fields and Save.

Use this shortcode to create a button: