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 watson.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.
  7. After successful installation you will be presented with a set of plugins which where 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.

Watson comes with a demo sample content file (pages, menu, posts, portfolio entries, page content) exported directly form 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 Watson Demo.xml file that is in the Demo Content folder.
  4. Check the “Download and import file attachments” checkbox and click the “Submit” button.
  5. Now go to Appearance > Menus and assign ‘Watson 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 (sidebar, logo, 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 Watson folder). Inside this folder you’ll find Watson Theme Options.json
  2. Open the .json file in a text editing program (like TextEdit or similar)
  3. You will see lines and lines 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.

To add or change the tagline and title of your site go to Appearance > Customize > Site Title & Tagline

NOTE: If you have a logo image uploaded (see chapter 2.1) your title and tagline will not be visible in the header.

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

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

Go to Theme Options > Colors to change all of the basic theme colors. This excludes the portfolio gallery background color, you can read about that in chapter “Adding A Background Color To A Gallery“.

A page title is the one that shows up on the right side of the page when you create it.

Untitled

To remove locate Page Attributes metabox on the right side of your screen and change the page template to Page Without Title or Fullwidth Page Without Title.

Untitled

To customize the loading screen your site go to Theme Options > Loading Screen.

NOTE: This feature is available in Watson 1.2.5+ , so if you don’t see this option, you need to update your theme to the latest theme version.

Here you will be able to:

  1. Enable / partially enable / disable the loading screen animation
  2. Add a Site Loading Logo
  3. Change the background color of your loading screen
  4. Change the color of the loading bar.

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

  1. Go to Pages > Add New
  2. Give this page a name (ex., Portfolio or Work) 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. In the “Featured Image” area you can upload an image that will show up above all your portfolio galleries. Read more about this in chapter 7. “Kenburns Header Image”
  5. Click the “Publish” button.
  6. Go to Settings > Reading and set the Front page to your new portfolio page
  1. Go to Portfolio > New Entry
  2. Give your gallery a name (this name will appear in the filters of your portfolio page)
  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.

Since Watson 1.4.0 you have an option to choose between a Continuous portfolio layout and  Separated by titles.

Continuous portfolio shows all of your portfolio entries together in a masonry layout while Separated by titles separates each of your entries with a gallery title.

We suggest using Continuous style if you have more than 6 images in each entry and Separated if you have less than 6 images in some or all galleries.

You can find Portfolio Style by going to Theme Options > Portfolio.

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

NOTE: These image size suggestions are based on personal experience after testing the theme on a 1920x1200px large monitor.

Each gallery that you create will show up listed in the portfolio filters.filters

Changing the word “Filters” to something else

If you would like to change the word “Filters” to for example “Work” do the following:

  1. Go to Theme Options > Portfolio
  2. Y will see a field called “Portfolio Filters Label”
  3. Change the word “Filters” to your preferred word

Activate dynamic backgrounds for filters

Since Watson 1.3.3 you can activate Dynamic background for your filters. By doing so, the first image of each portfolio entry will show up when you place your mouse cursor over a specific filter name.

dynamic filters

To activate dynamic filters:

  1. Go to Theme Options > Portfolio
  2. Turn ON “Enable dynamic backgrounds for filters”

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, Portraits, Travel)
  3. Go to Portfolio > All Entries, open an entry and on the right side of the screen locate ”Portfolio Categories”. Assign each of your galleries to a specific category (ex., Anne&John to “Weddings”, Los Angeles to “Travel” etc.)
  4. Go to Appearance > Menus locate “Portfolio Categories”, and add them to your menu.

Untitled

To add a caption (and/or a short description) to your gallery image:

  1. Open up your gallery (Portfolio > All Entries > your gallery)
  2. Click on an image
  3. Untitled

  4. Add your caption in the Caption field.
  5. Add your description in the Description field.

Untitled

  1. Open up the gallery that should have a background color (Portfolio > All Entries > your gallery)
  2. Under the Gallery metabox locate Background color.
  3. Use the color-picker to choose a background color for this gallery

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 to 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. Click the “Publish” button

If you ARE NOT using a sidebar for your blog the width of the image should be 1700px. This will ensure quality blog look large screens.

If you ARE using a sidebar for your blog the width of the image should be 1200px. This will ensure quality blog look large screens.

NOTE: These image size suggestions are based on personal experience after testing the theme on a 1920x1200px large monitor.

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

NOTE: The first meta in this list will be the one that’s always visible under your posts.

Untitled

  1. Go to Pages > Add New
  2. Locate Page Attributes metabox on the right side of the screen and set its Template to Services.
  3. In the Title area write the name of the Service
  4. In the content area write the description of the service.
  5. NOTE: To replicate the Watson theme demo look, use column, column border and button shortcodes in this area as well. Read more about them in the chapter called “Shortcodes”.

  6. In the “Service Details” area add a starting price and choose portfolio galleries to display under the service description
  7. In the Testimonials area choose which testimonial group you’d like to display in this service. You must create the testimonial category first. Read more about that in chapter 7. “Testimonials”
  8. In the Featured Image metabox upload a header image. Read more about that in the chapter called “Kenburns Header Image”

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 mail information in the Mail area
  4. Click the “Save” button at the top of the page
  5. Copy the shortcode from the Contact Form area
  6. Paste this shortcode in the page where you want your contact form to show up.

In Watson theme you can create multiple testimonial categories and display these categories in both regular and services pages.

  1. Go to Testimonials > Categories
  2. In the Name field write the name of your testimonial category (ex., About Weddings or Studio Sessions)

This is important because by doing so you’ll be able to assign each client testimonial to a specific category (or multiple categories) and later easily link each category to a specific services page.

  1. Go to Testimonials > Add New
  2. In the title area write the tile of this testimonial
  3. In the content area paste in your client testimonial
  4. In the “Client Details” area fill in the clients name etc.
  5. Upload your clients image as a featured image in the Featured Image metabox. It should be square shaped and no bigger than 500x500px
  6. In the Testimonials Categories metabox, located on the right side of the screen, choose a category for this testimonial.

The Ken Burns (kenburns) effect is a type of panning and zooming effect on a still image. In this chapter you’ll learn how to correctly implement it in this theme.

You CAN add a kenburns header image to:

  • Any regular page (Pages > Add New),
  • Portfolio page,
  • Services page

You CAN NOT add a kenburns header image to:

  • Blog posts,
  • Blog page,
  • Portfolio entries.

You can find Kenburns Options panel in each page in which you have uploaded a header image. It’s located below the main content area. These options include:

  1. Scale (by default set to 110%)
    The amount of zoom on the image. The image itself is shown in 100% and the kenburns effect zooms in 10% more, therefore the total scale is 110%.
  2. Rotate degrees (by default 2 degrees)
    How many degrees the image will rotate while zooming in.
  3. Duration (by default 30 seconds)
    How much time passes until the image is zoomed in completely. The same time it takes for it to zoom back out.
  4. Parallax Speed (by default 98%)
    How fast / slow is the parallax effect. To disable parallax enter 0 in this field.
  5. Kenburns Fluid Height (by default 75%)
    The height of the header image (how much screen space it takes up). This percentage is relative to the users screen size, that means that no matter if a user is using a computer or a smartphone, the image will take up 75% of the screen.
  6. Max Height (by default 0px)
    Set the maximum height for “Kenburns Fluid Height” (see above). 0px disables this function.

The theme will never squish your images to fit them in the rectangular header area therefore you must upload an image that is appropriately sized. Since the header image area is rectangular, your images should be landscape oriented.

If we assume that you are using default “kenburns options” settings the best size for the header image would be 1920x800px . This size works well on large monitors as well as small.

You should not go below 1200px in width because this will make your images pixelated.

If enabled the sidebar appears in your blog page and regular pages. In this chapter you’ll learn how to enable/disable the sidebar and how to add widgets to it.

  1. Go to the page that has an unwanted sidebar
  2. On the right side of the screen locate Page Attributes metabox
  3. Change the Template from “Default Template” to “Fullwidth
  1. Go to Appearance > Widgets
  2. Drag-and-drop widgets from the Available Widgets area to the Sidebar area
  1. Go to Appearance > Widgets
  2. Locate the “Image” widget and place it inside the Sidebar area
  3. Open it and fill out the fields that you see there
  4. Click the “Save” button

Watson theme comes with Shortcodes Ultimate plugin pre-installed, but as you saw in the theme demo we used of few of these shortcodes:

  • Columns
  • Column borders
  • Buttons

This chapter will explain the use of these three shortcodes. If you want to learn more about the Ultimate Shortcodes, please go to Shortcodes > Settings and Shortcodes > Examples.

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.

You can see the column borders in the next page of this documentation.

Untitled

First follow the instructions on how to create columns (chapter “Columns”)

  1. After you pasted your shortcode in your page locate [su_row]
  2. Add class="bordered bbottom" to that piece of code :
    [su_row class="bordered bbottom"]

The easiest way to add a button anywhere to your content is this:

  1. Click in the area in which you want to place a button
  2. Click on the “Insert shortcode” button located next to the “Add Media” button
  3. Choose “Button”
  4. Style it to your liking and click the “Insert shortcode” button.