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

Golden Sunday 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 one of the 3 demo files that are in the Demo Content folder. (Sunday_Demo.xml for Golden demo, NavySunday_Demo.xml for blue demo or PepperSunday_Demo.xml for the creme colored demo)
  4. Choose 1 of the demos, check the “Download and import file attachments” check-box and click the “Submit” button.
  5. Now go to Appearance > Menus and assign “Sunday Demo Menu” as your Primary Menu and save.
  6. Finally, go to Settings > Reading, choose ‘A static page’, set your Front page to Welcome 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 Sunday folder). Inside this folder you’ll find 3 files Sunday_Theme_Options.json, NavySunday_Theme_Options.json and PepperSunday_Theme_Options.json
  2. Choose 1 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

To upload a background image for your menu go to Theme Options > Menu, “Menu Background Image”.

To upload a logo image for your menu go to Theme Options > Menu, “Menu Logo”

Since Sunday 1.1.0 you can configure your site so that after the Welcome Slider your visitor goes directly to the fullscreen menu page (see example in http://navy.themevillage.net )

To activate this feature:

  1. Go to Pages > All Pages
  2. Open your Welcome Slider
  3. Locate “Link Type” area
  4. Set it to Open Menu

Untitled

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

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

Untitled

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

1. Set your page Template to “Page with Header”
2. Upload your header image in the “Featured Image” area.
3. Customize the color of the “title box” in Theme Options > Style > Page Header

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

First you need to choose whether you want your portfolio page to have descriptions or not.

Then go to Theme Options > Portfolio and set your portfolio to Masonry or Descriptions and Masonry.

NOTE: If you imported the sample content you already have a Portfolio page and you do not need to create a new one. You can locate your existing Portfolio page in Pages > All Pages and change its page template if needed (to enable/disable descriptions, for example).

  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. Click the “Publish” button.
  1. Go to Portfolio > New Portfolio Entry
  2. Give your gallery a name
  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.

To add descriptions and titles to your entries:

  1. Go to Theme Options > Portfolio and look for Default portfolio type. Set it to Descriptions and Masonry
  2. 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

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.

(see live here – http://golden.themevillage.net/portfolio/healthy-living/ )

To add a single portfolio entry with an option to navigate to the next/previous gallery follow these steps:

  1. Go to Portfolio > All Entries
  2. Choose a gallery (we recommend the latest one) and open it.
  3. Copy the last part of your gallery URL (… /portfolio/coffee-shop/ )
  4. Go to Appearance > Menus
  5. Click on ‘Links’
  6. In the URL field paste your link, in the Link Text field write the name that will show up in your menu.
  7. Add this Link to your menu and Save Menu

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, Weddings, Portraits, Travel)
  3. Go to Portfolio > All Entries, on the right side of the screen locate ”Portfolio Categories” and 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.

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

Untitled

If you don’t see it there, go to Appearance > Install Plugins and install Client Area.

Or if that doesn’t work, go to Plugins > Add New and search for and install “Village Client Area“.

  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.

Now you need to create a page for your client galleries and add this page to your menu. To do that, 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. Publish this page
  5. Go to Client Area > Settings and in the Client area archive locate your new page. 
  6. Now go to Appearance > Menus, locate your “Client Area” page in the Pages area and add it to your menu.

Smart tags are assigned to your images automatically. They can be used to show your client (or your client can show you) which image they are talking about. So instead of saying “them image with the girl and roses”, you would just write “#90” .

smart tags on hover

 

You can turn on smart tags by going to Client Area > Settings.

To comment with a smart tag simply write # and the number of the image. For example, #90

smart tags on hover

To disable the option to comment in your client gallery, go to Client Area > Settings and turn OFF “Enable Comments”.

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

Untitled

The “Welcome screen slider” is the one that shows up in the demo when you first
visit the page. It has a logo and “enter site” graphics on top of it.

NOTE: If you imported the sample content you already have a Welcome Slider. Go to Pages > All Pages > Welcome Slider to edit it.

To create a fresh, new welcome screen slider:

  1. Go to Pages > Add New
  2. Call this page “Welcome Slider” and in the “Page Attributes” metabox choose a template called Welcome Page

New options will automatically appear:

  1. Click on the blue “Add to gallery” button to add images to your slider
  2. Logo – upload your logo graphic
  3. “Enter Site” image – upload a custom graphic or leave it empty
  4. “Enter Site” text – write your something that will show up if you don’t have an “enter site” image
  5. Link Type – Will this slider open a wordpress page, menu or do you prefer your own custom link ? If you don’t select anything, the default “Theme Options > Home URL” is going to be used
  6. Logo Width – Set this to 50% for a responsive welcome slider graphics
  7. Enter Site width – Set this to 50% for a responsive welcome slider graphics
  8. Enter Site Position – This will affect your logo image as well. Choose between centered graphics or custom position.
  9. When that is done, it’s very important that you:

    1. Go to Theme Options > General Settings and “Select your Index Type”
    2. Untitled

      Choose which page will the user go to when she/he clicks on the logo that is in your
      header, otherwise each time a user clicks on the logo she/he will be led back to
      your fullscreen slider.

    3. Go to Settings > Reading and set your “Front page” to your new Welcome Screen.

    Untitled

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

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

If you ARE using a sidebar for your blog the width of the image should be 890px. 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.

Untitled

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

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

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

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

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

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:

In Golden Sunday 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., 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 title 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 (or multiple categories) for this testimonial.
  1. Assign all of the testimonials you want to display to a specific category
  2. Go to Testimonials > Testimonials and locate your testimonial group
  3. Copy the shortcode you see there
  4. Untitled

  5. Go to the page where you want to show these testimonials
  6. Paste your shortcode there.

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.

NOTE: This theme is only responsible for the visual aspects of your shop (image sizes, buttons, text layouts, etc.)

If you have any technical problems you should contact WooCommerce support instead – https://support.woothemes.com/hc/en-us

In order to be able to set up your shop, first you need to install the WooCommerce plugin.

  1. Go to Plugins > Add New
  2. In the “Search Plugins” field type in Woocommerce
  3. Make sure that the plugin you’re about to install is by WooThemes, install it and activate
  4. Untitled

    After successful installation you’ll see a “Welcome to WooCommerce” message. Click on the “Run the Setup Wizard” button to make the setup easier for you.

    Untitled

  1. Go to Products > Add Product
  2. In the Title area write your Product name
  3. In the main content area write a short description of your product
  4. In the “Featured Image” area upload your product cover image
  5. In the “Product Gallery” area add extra images (optional)
  6. Fill out the “Product data” with any additional info – price, attributes, etc.
  7. In the “Product Short Description” area write any extra info about your product
  8. Add Tags and Categories in needed
  9. Click the “Publish” button
  1. Go to Theme Options > WooCommerce
  2. Set “Enable WooCommerce Sidebar” to ON
  3. Click the “Save Changes” button
  4. Go to Appearance > Widgets
  5. Place any widgets in the “Woocommerce Sidebar” area

To make your product images better fit your shop page follow these instructions:

  1. Go to WooCommerce > Settings > Display
  2. Scroll down to Product Images
  3. In the “Catalog Images” area change the default settings to 631×1000 px
  4. Make sure “Hard Crop” is disabled if you don’t want your images cropped
  5. Click the “Save changes” button

After that is done, it is very important that you regenerate your thumbnails. Otherwise you won’t see any changes.

  1. Go to Plugins > Add New, search and install “Regenerate Thumbnails”
  2. Go to Tools > Regen. Thumbnails and click on the “Regenerate All Thumbnails” button.

Untitled

To make your single product images fit better, follow these instructions:

  1. Go to WooCommerce > Settings > Display
  2. Scroll down to Product Images
  3. In “Single Product Image” area change the default settings to 631×1000 px
  4. Make sure “Hard Crop” is disabled
  5. Click the “Save changes” button

After that is done, it is very important that you regenerate your thumbnails. Otherwise you won’t see any changes.

  1. Go to Plugins > Add New, search and install “Regenerate Thumbnails”
  2. Go to Tools > Regen. Thumbnails and click on the “Regenerate All Thumbnails” button.

“Breadcrumbs” are the page name trail that you see above your shop products. To set the like in the demo, follow these instructions:

  1. Go to Settings > Permalinks,
  2. Scroll down to “Product Permalink Base”,
  3. Activate “Shop Base” option,
  4. Click the “Save Changes” button.
  1. Go to Appearance > Menus
  2. In the “Pages” area locate Shop and place it in your menu
  3. Save Menu

If you feel like you need more help with your WooCommerce shop, go to WooCommerce > Settings and click on the “Help” button.

Untitled

Here you’ll find the official WooCommerce documentation and support forum.

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 Appearance > Widgets
  2. Drag-and-drop widgets from the Available Widgets area to the Sidebar area (for blog and regular page sidebar) or to the WooCommerce Sidebar area (for shop sidebar)

Untitled

  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

Sunday footer is the sticky area at the bottom of your screen. You should not place more that 1 footer widget in this area due to limited space.

  1. Go to Appearance > Widgets
  2. Locate “Simple Social Icons” widget in the available widgets area
  3. Place it in the “Footer Widgets” area
  4. Toggle open Simple Social Icons to personalize it.
  5. (to learn how to add social icons in page see chapter 14. Shortcodes)

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

Sunday 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
  3. Social Icons

This chapter will describe the use of village (our) short-codes and some of the most popular Ultimate short-codes as well as how to add social icons to the footer area and pages.

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.

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

Use this shortcake to create a button:

Untitled

Use this shortcode to create a separator:

To add social icons in a page (ex., Contact page):

  1. Go to Plugins > Add New
  2. Search for “Widget Shortcode” and install and activate it
  3. Go to Appearance > Widgets
  4. Locate “Simple Social Icons” and place it inside Arbitrary area
  5. Customize the widget to suit your needs
  6. Click the “Save button” and copy the shortcake that appeared (looks like this – [widget id=“simple-social-icons-2"] )
  7. Go to the page that should have social icons and paste this shortcake in the page.

(to learn how to add social icons in footer/border area, see chapter 13. Footer)