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

Acid comes with 3 demo sample content files (Dark, Retro, Bright) exported directly from the live previews you saw on Theme Forest. Use them to help you get started with your site.

Step 1 – import

  1. Go to Tools > Import
  2. Choose “WordPress”
  3. Upload the Acid Demo Content.xml file with came with the theme when you purchased it. You can choose between:
  • Retro Acid Demo Content.xml
  • Dark Acid Demo Content.xml
  • Bright Acid Demo Content.xml

Step 2 – assign menu

  1. Go to Appearance > Menus
  2. Assign Acid Menu to Primary Menu and “Save”
  3. Assign Front Page to Acid One-Page Contents and “Save”

Step 3 – activate front page and blog

  1. Go to Settings > Reading
  2. Choose Front Page Displays – A static page
  3. Set Front page to Front page
  4. Set Posts page to Blog

Untitled

Since Acid 1.4.0 you can import Theme Options file. It 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 Acid folder). Inside this folder you’ll find Dark_Theme_Options.json, Retro_Theme_Options.json and Bright_Theme_Options.json. Choose one.
  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”.

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

To set up the blog from stratch, create a new page by going to Pages > Add New. Name this page ‘Blog’, you do not have to include any content. Click “Publish”.

Now that you have created your page, go to Settings > Reading and in the “Front Page Displays” setting select the static page option and choose the newly created page as your posts page. Your blog is now created. Go to Posts > Add New and start adding posts to your blog.

Acid posts are arranged horizontally with the most recent post displayed in the first, biggest square.

Acid gives you the ability to choose a color for each of your posts. This color will then appear above the users cursor when hovering over it, as a background color when opening up the post and also as the post preview IF you have no featured image assigned.

To assign a color to your post, open or create a new post and you will see a Post Color Options panel in the top right corner.

Untitled

If you do not assign a color to your post, a color will be assigned automatically and it will change each time you reload the post page.

If you want your post to have an image in your blog page, assign a featured image to it. To do this open or create a new post and in the bottom left corner you will see a Featured Image panel. Upload your image there, it should be 900x900px big

If you want to show or hide your post meta (author, tags, category, date), go to Theme Options > Blog Options.

If you want to show or hide a sidebar for your blog posts, go to Theme Options > Blog Options > Enable Blog Sidebar.

If you want to show or hide the sidebar in specific posts only, go to Posts > All Posts and open the post in question. Scroll to the bottom of the page and locate the “Sidebar” metabox. Enable or disable the sidebar there.

You have 2 ways to display your portfolio:

  1. Pop-up portfolio (items show up in a pop-up colorbox slider when clicked. See DarkAcid demo)
  2. Case Study Portfolio (item opens up in a separate page with description, date, client name etc. See BrightAcid demo)
  3. To choose with one you want to use, go to Theme Options > General Settings > Portfolio Style.

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

    To set up the portfolio page, create a new page by going to Pages > Add New. Give a name to this page, but do not include any content in the content area. Select the “Portfolio” template from the Page Attributes section and click “Publish”.

    Untitled

To add a new portfolio item, go to Portfolio > New Entry. Give a name to your entry and upload your image in the Featured Image section and click the “Publish” button.

You can assign a specific color to show above the users cursor when hovering over your work and at the sides if you use the Case Study Portfolio. If you do not assign a specific color it will be assigned automatically and it will change each time the browser window is reloaded.

You do this the same way as you do this for your posts. When creating a new portfolio entry, assign a color in the top right corner.

Untitled

Go to Theme Options > General Settings > Portfolio Style and set it to “Case Study” To add a new portfolio item, go to Portfolio > New Entry. Here you can do the following things:

  1. Add a name and a description of your project/item
  2. Assign Project Type (e.g. Print / Video / Logo / DIY / Drinks / )
  3. Assign Skills (e.g. SEO / Branding / Photoshop / HTML5 )
  4. Add Project Details

If you installed Gallery Metabox, you will see ‘Project Media’ below the description area.

Click the “Select or Upload Images” button to upload your images. To select multiple images hold the Shift or Command/Control button.

Drag around the image thumbnails to arrange the order of your items you want to display them in.

You can assign a custom thumbnail for each project. The thumbnail should be at least 900x900px.

Upload your thumbnail in the Featured Image metabox.

Untitled

NOTE: Featured images do not show up among the other project items when published, it is only your project thumbnail. If you chose one of your project images as the featured image and want this image to display also in the case study among your other images, simply upload the same image again in the image gallery.

When you have finished filling out your portfolio entry, click the “Publish” button and view your project live.

A video can be added only to Case Study portfolio. To add video to your portfolio, create a new entry, scroll down to “Project Media” and paste the video link in the Embed field.

Untitled

If you have work that falls into different categories (e.g. graphic design, logo, illustration). It’s a good idea to make a filterable portfolio so that your users can decide what they want to look at.

Untitled

To do this, follow there steps:

  1. Go to Portfolio > Skills (or Project Types, choose the one that makes more sense for you, they both work the same way).
  2. Untitled

  3. Create your filters (photography, illustration, logo, business cards…) and click “Add New Skill” button. (or Project Type if you chose that one)
  4. Go to Appearance > Menus and open up the Screen Options located in the top right corner. Tick the Skills checkbox (or Project Types if you chose that one) and close Screen Options.
  5. Untitled

  6. Locate the Skills box that you just activated. Tick all the skills (or Project Types), you want the portfolio to be filtered by and click the “Add to Menu” button.
  7. Untitled

  8. Place these Skills (or Project Types) under your portfolio navigation

Untitled

Now you have created your filters. To use them, you have to assign each skill to your work that falls in this category.

You do this by assigning a Skill tag (or Project Type tag) to your work when you create a new entry. It is located above the Featured Image box.

Untitled

There are no limits in regards to what you can display in front page (e.g. about me section, recent blog posts, random images, contact etc.)

Each of these elements are simple pages so first thing you should do is decide what you want to display on your front page and for each of these things create a separate page by going to Pages > Add New.

In this chapter you will learn how to create different types of sections for your horizontal front page layout.

NOTE: If you imported the sample content you already have a “Front Page” and you do not need to do this.

First you need to create the Front-page itself so that later you can make sections and place them inside your frontage layout.

To make your front page follow these steps:

  1. Create a new page Pages > Add New.
  2. Call it ‘Front Page’ and choose Template called Layout: One Page in your ‘Page Attributes’ meta box.
  3. Untitled

  4. Upload an image in the ‘Featured Image’ meta box if you want an image with a
    parallax effect
    at the start of your front page. (To add a blinking arrow that suggests scrolling, go to Theme Options > General Settings)
  5. Remember – specify the width of this image in the One Page Layout options – Page Width that is located under the main content area (e.g. if your image is 1024×900, you would write 1024).

  6. Go to Settings > Reading, and choose your newly created Front Page as ‘Front Page’
  7. Untitled

  8. Go to Appearance > Menus. Create a new menu and call it Front Page Layout
  9. Assign this “Menu” as your Acid One-Page Contents and click the “Save Menu” button.

Untitled

You just created the area where you will pace your “sections” so that they would show up in your Front Page Layout.

Continue reading to learn how to create the sections themselves.

In this tutorial we will style an ‘About me’ section for the front page.

Untitled

  1. Create a new page (Pages > Add New) and call it ‘About me’.
  2. Assign a Template called ‘One Page Child: Regular’ or ‘One Page Child: Vertically Centered’ (use the 2nd one if you don’t have a lot of text)
  3. In the main content area write the text you want to display, add images and social icons if needed (more info for social icons in chapter called “Simple Social Icons”)
  4. Below the content area you have One Page Layout options, here you control all the aspects on how this About Me content will display. (next screenshot shows how the Dark Acid “about me” section was set up)
  5. Untitled

  6. To add a pattern or an image in the background of this section, upload it as a featured image. Remember – You can upload a small peace of pattern there (e.g. 100×100 pixels) and it will tile in the background by itself.

When the section is created, add it to your “Front-Page Layout”. To do that:

  1. Go to Appearance > Menus
  2. Make sure you are in the “Front Page Layout” menu. (created in previous chapter, step 5.-6.)
  3. Locate your “About me” page you just created and place it inside the “Front-Page Layout.”
  4. Save Menu.

Untitled

  1. Create a new page (Pages > Add New) and call it ‘image’.
  2. Assign a Template called ‘One Page Child: Cover Image
  3. Leave the main content area empty
  4. Upload the image in the Featured Image metabox.
  5. Below the content area you have One Page Layout options, here you control all the aspects of this image. Do not enter any width values in this case.

When the section is created, add it to your “Front-Page Layout”. To do that:

  1. Go to Appearance > Menus
  2. Make sure you are in the “Front Page Layout” menu. (created in the main chapter, step 5.-6.)
  3. Locate your “image” page you just created and place it inside the “Front-Page Layout.”
  4. Save Menu

DO NOT add your main portfolio to the Front-page layout.

To add recent portfolio items to your front page do the following:

  1. Create a new page – Pages > Add New
  2. Choose a Template for the page called One Page Child: Blank
  3. Copy in the content area the Recent Portfolio Shortcode

    (change the number “8” to any number you’d like to have)
  4. Save the page and add it to your Front Page Layout menu

If you have a portfolio with specific categories, like architecture photography, portrait photography and weddings, and you want to show in your front page layout only your recent wedding photography you would use this shortcode:

  1. Create a new page – Pages > Add New
  2. Choose a Template for the page called One Page Child: Blank
  3. Copy in the content area the modified Recent Portfolio Shortcode
  4. (change the taxonomy and number “8” to any value you need)

  5. Save the page and add it to your Front Page Layout menu

DO NOT add your main blog to the Front-page layout.

To add recent portfolio items to your front page do the following:

  1. Create a new page – Pages > Add New
  2. Choose a Template for the page called One Page Child: Blank
  3. Copy in the content area the Recent Posts Shortcode
  4. [pure_items posts_per_page=”8″ /]
    (change the number “8” to any number you’d like to have)

  5. Save the page and add it to your Front Page Layout menu

Acid lets you create pages that show up by sliding out of the header area. In the demo this technique was used for the About and Contact pages.

Untitled

To create such page, Follow these steps:

  1. Create a new page by going to Pages > Add New.
  2. Name this page for example ‘About’ and add your text in the content area. Click “Publish”.
  3. Go to Appearance > Menus (make sure you are in the Main Menu) and add your new page to the main navigation.
  4. Click on the “Screen Options” button in the top right corner to reveal menu options.
  5. Tick the ‘CSS classes’ checkbox and close the ‘Screen Options’
  6. Untitled

  7. Now toggle open your new page which you want to slide out from the navigation.
  8. You will see a new field appear there called ‘CSS Classes (optional)’. Write with-ajax in this field.
  9. Untitled

  10. Click the “Save Menu” and you’re done.

Go to Theme Options > Color, to change the theme colors.

You can change the following colors:

  1. Primary Color – the main color of the site. It shows up as header background, footer background sidebar labels, post date
  2. Primary Color Variant – should be a darker of lighter version of the primary color. It shows up in menu drop-down
  3. Brand color – your special accent color. It shows up all over as small decor elements, like tags, footer triangle etc.
  4. Brand color Variant (lighter) – assign a lighter tone of your brand color
  5. Brand color Variant (darker) – assign a darker tone of your brand color
  6. Font – the color of your font (if left to default, it will be black)
  7. Light Font – the color of the font on non-white backgrounds
  8. Font on primary color background
  9. Links – the color of menu navigation link color
  10. Links on hover – previous link color when hovered over with a mouse cursor
  11. Light links – tag, category, author link color
  12. Light Links on Hover – Previous link color when hovered over with a mouse cursor

To display social icons somewhere in your site, go to Appearance > Widgets. Locate the ‘Simple Social Icons’ in the Available Widget area and drag-and-drop it into the Arbitrary area.

Click on ‘Simple Social Icons’ tab to access its options and add your social network links.

Click the “Save” button at the bottom and you will get a custom shortcode. It will look something like this:

Copy that shortcode and paste it anywhere you want the icons appear.

To make the icons rounded like in the demo sites, fill in the values showed in the next image.

Untitled

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

NOTE: Simple Social Icon hover color is set by default to its brand color so “Background Hover Color” will not work in most cases.

To upload a logo image onto your site, go to Theme Options > General Settings > Site Logo.

For best result, the logo should not be more that 100px high.

Since Acid 1.4.0 you are able to position your header logo from enter to anyplace in the header area.

To do that follow these steps:

  1. Go to Appearance > Menus and make sure you are in the “Primary menu
  2. Open the “Custom Links” tab
  3. In the URL field type your sites URL address and in the “Text” field write “Logo”
  4. Click the “Add to menu” button
  5. Click on “Screen Options” button at the top right corner of your screen and activate “CSS classes”
  6. Open your new “Logo” element and in the CSS Classes area type in logo-placeholder

Untitled

This element now represents your logo image. Place it anywhere you would like your logo to appear by moving it around.

The footer in Acid is hidden behind a large “+” icon.

Untitled

To Enable / Disable the footer, go to Theme Options > General Settings > Enable Footer.

To add widgets to your footer (no more than 3 widgets), enable the footer, then go to Appearance > Widgets and place your widgets in the Footer area.

The theme comes with a set of custom shortcodes, which you can use to create columns, messages, buttons, use the font icons and other stuff – just keep reading.

To arrange something in sets of columns use this shortcode:

Available sizes that you can place in the # area:

  • one-whole
  • one-half
  • one-third
  • two-thirds
  • one-fourth
  • two-fourths
  • three-fourths
  • one-fifth
  • two-fifths
  • three-fifths
  • four-fifths
  • one-sixth
  • two-sixths
  • three-sixths
  • four-sixths
  • five-sixths
  • one-eighth
  • two-eighths
  • three-eighths
  • four-eighths
  • five-eighths
  • six-eighths
  • seven-eighths
  • one-tenth
  • two-tenths
  • three-tenths
  • four-tenths
  • five-tenths
  • six-tenths
  • seven-tenths
  • eight-tenths
  • nine-tenths
  • one-twelfth
  • two-twelfths
  • three-twelfths
  • four-twelfths
  • five-twelfths
  • six-twelfths
  • seven-twelfths
  • eight-twelfths
  • nine-twelfths
  • ten-twelfths
  • eleven-twelfths

Untitled

Untitled

Untitled

Untitled

Replace # with the icon code that is located in the 343 Font Icons.pdf file, in the Documentation folder on your computer.

Available sizes (place them in the x area):

  • size=”small”
  • size=”medium”
  • size=”large”

Apply column shortcodes to your buttons to change the width (e.g [pure_button size=”large one-half” link=”#”] Your text [/pure_button] ).

Display an icon:

Change size:

Sizes:

  • xs
  • s
  • m
  • l
  • xl
  • xxl
  • xxxl
  • nuts

To view the names of the icons open the 343-Font-Icons.pdf file in your located in the Documentation folder.

This theme comes with 13 different horizontal rules for you to use.

Highlight parts of your text using a marker-like effect.

Write down a color name for your text and for the background (bg) surrounding this text.

Colors you can use:

  • Red
  • Pink
  • Purple
  • Violet
  • Blue
  • Green
  • Yellow
  • Orange
  • Brown
  • Gray
  • Black
  • White