Introduction

Features

This one page portfolio WordPress theme is built for graphic designers, photographers, video producers, illustrators, artists and other creative freelance pros who want a simple, elegant and effective way to showcase projects, share testimonials, promote services and even do a little blogging on the side. It is designed to immediately show the visitor the two most important things: your name and your work. The theme is also made to be easy to setup and manage using WordPress.

It has a gallery that is filterable and paginated — and its lightbox has space for project descriptions — so you can create a truly robust portfolio site. Add images and videos via your WordPress admin area and assign them to as many categories as you want. Clicking the menu zips the user down to information about you, your services, testimonials, blog and contact details. The contact section has social media icons, an optional map and AJAX contact form. Light and dark styles are included with this WordPress theme.

Full-featured Portfolio

The Zipfolio theme's main feature is a highly flexible, easy to use media portfolio.

  • Category filters with Quicksand transitions
  • Items can belong to multiple categories
  • Pagination (no running out of space)
  • Show Images and Videos (YouTube, Vimeo)
  • Lightbox with title, description and prev/next
  • Options for rows and ordering (newest, oldest or manual)
  • Easily managed with custom post type

Sections (Pages)

Pages added in the WordPress admin show on the homepage as sections. The section options for are what make them look like they do in the live preview. You can create sections such as these:

  • Portfolio with categories and pagination
  • About with portrait, skills and experiences (or other content)
  • Services with images
  • Testimonials with images, using jQuery Masonry
  • Blog with your latest posts linking to full archive
  • Contact with AJAX contact form, Google Map and social media icons
  • Custom Sections for other content (add as many as you want)

External Blog Archive

An external blog archive is included. While your latest posts are shown in a section on the "single page" (homepage), older posts are available in an archive (yourname.com/blog/). These can be searched for and browsed by category, tag or month. This external archive makes it possible for search engines to pick up on all of your blog content. It also means people can share, bookmark and comment on your posts.

Theme Options

Zipfolio will not overwhelm you with theme options, but it isn't going to leave you hanging either. There are just enough options in order for you to do what you want.

  • Color Scheme (Light or Dark)
  • Logo Upload
  • Custom Homepage <title> for SEO
  • Custom Subpage <title> (External Blog)
  • Footer Copyright
  • Social Media
  • Favicon
  • Google Analytics
  • Portfolio Rows
  • Portfolio Ordering
  • Blog Posts on Homepage
  • Google Map
  • reCAPTCHA

WordPress Goodness

Zipfolio leverages built-in WordPress functionality.

  • Uses Custom Post Types for portfolio items, services and testimonials
  • Automatic image resizing using native WordPress functionality
  • Custom Menu support (auto-configured on initial theme activation)
  • WordPress blogging capabilities available in external blog
  • Fully localized and Translation Ready (PO file included)
  • Editor styles (buttons, boxes, styled text) shown live in content editor
  • Compatible with WordPress multisite network
  • Required WordPress styles implemented (.alignright, .wp-caption, etc.)
  • Includes Child Theme for optional style and feature customization
  • A 404 File Not Dound template has been prepared

Minimalist Design

The theme's design is simple and interesting at the same time, keeping the emphasis on your portfolio.

  • Valid HTML5 with CSS3 styling
  • Single page with smooth Section Scrolling
  • Image Preloading with scroll-in loading effect
  • Fixed menu (always in view)
  • Custom font (Lato Black via @font-face)
  • Light and Dark styles
  • Common elements styled (headings, lists, blockquote, form inputs, etc.)

Installation

Activation, Sample Content

Installing Zipfolio

Follow these steps to install the theme and import sample data so that your site looks like the Live Preview. Once you have it setup like the live preview, you can modify it to your heart's content.

  1. Install WordPress
  2. Upload and Activate Theme
    • Log into your WordPress admin and navigate to Appearance > Themes > Install Themes > Upload.
    • Choose zipfolio.zip which is inside of the theme folder in the package you received.
    • Click the install button.
    • After installation, click Activate.
  3. Import Sample Content (recommended)
    • Go to Tools > Import > WordPress and install the Importer plugin.
    • Then, click the link to activate and run the importer.
    • Upload sample-content.xml which is inside of the same theme folder that you got the zip file from.
    • Follow the instructions to assign a user to the imported posts.
    • Check the box for Import Attachments in order to import sample images. Note that they are the same dimensions as the live preview images but "grayed out" because the originals cannot be distributed.
    • Continue and the sample content with images will be imported (it can take a couple minutes).
  4. Enable Theme Options
    • Go to Appearance > Theme Options
    • Click the Options Framework link to install and activate the plugin.
  5. Configure Permalinks (enables nicer External Blog URL's and "File Not Found" page)
    • Go to Settings > Permalinks
    • Choose your preferred URL format (other than "Default") then save

Now when you view your site, it should look like the Live Preview but with gray versions of the images. Use this setup as a starting point for your own content.

Note that after installation the contents of zipfolio.zip end up in the wp-content/themes/zipfolio directory of your WordPress installation. WordPress simply extracts the files from the zip archive.

Updating Zipfolio

This theme may be updated periodically in order to add new features and fix bugs. You can always check to see what the latest version is by viewing the latest changelog in the online documentation. As a customer, you can download the most current version from your ThemeForest account.

Important Notes

  1. If you have made changes to the theme, be sure to back up your changes before doing anything (language file, styles, etc.). It is always recommended to use a Child Theme for customizations so that you do not risk losing changes when updating.
  2. Updating a theme should not affect the content of your website but, as with updating WordPress itself, it is a good idea to make a backup of your website first.

Updating Automatically

Envato (makers of ThemeForest) have developed the Envato Toolkit Plugin for WordPress. You can use this to receive notification of updates to themes purchased from ThemeForest and to automatically update directly from within your WordPress admin area.

  1. Download the plugin zip file to your computer.
  2. In your WordPress admin area, go to Plugins > Add New then click Upload.
  3. Click Choose File, select the plugin zip file you downloaded and click Install Now.
  4. After installation, click Activate.
  5. Click the new Envato Toolkit link in the menu and follow the instructions to configure the plugin.

Updating Manually

  1. Download the most current version from ThemeForest in the "Downloads" area of your account.
  2. Unzip the package and locate zipfolio.zip in the theme folder.
  3. Go to Appearance > Themes and activate another theme such as the default WordPress theme.
  4. Delete the Zipfolio theme which is now inactive.
  5. Go to Install Themes > Upload then install and activate zipfolio.zip from the new package.

You can also update via FTP. Just replace wp-content/themes/zipfolio with the new theme (the contents of zipfolio.zip).

Theme Options

Logo, Color Scheme, More

Zipfolio's theme options are available under Appearance > Theme Options. Upon your first visit, you will be instructed to install the Options Framework plugin. The following options are available. Instructions are provided by each option in your WordPress admin.

  • Color Scheme (light or dark) - read Child Theme guide for making your own
  • Logo Upload
  • Custom Homepage <title> for SEO
  • Custom Subpage <title> (External Blog)
  • Footer copyright
  • Social Media (provide your URLs)
  • Favicon
  • Google Analytics
  • Portfolio Rows
  • Portfolio Ordering (new to old, old to new or manual order)
  • Posts on Homepage (for new blog posts)
  • Google Map on contact section (location, zoom level, map type)
  • reCAPTCHA (spam protection for contact form)

Sections

"Pages" on Homepage

The WordPress admin area lets you add pages to your website. Since Zipfolio shows all content on the homepage, your pages become "sections" on the homepage. We will refer to pages as sections in this guide.

Import Sample Sections

If you have not imported the sample-content.xml file, you may want to do that in order to have your Zipfolio themed site setup with the same sections in the Live Preview. This gives you a nice starting point for editing and adding your own content. Refer back to the Installation instructions for the step explaining how to do this.

Content Editor

WordPress provides an editor with Visual and HTML modes. The visual mode lets you edit content much like you do with desktop word processing software (no coding necessary).

Editor Styles

Zipfolio adds several custom styles to the editor. Look for the Styles dropdown. It's the first item in the second row of buttons. You can apply a style by highlighting text then choosing the style. These are the styles available.

  • Intro Text - Large, italic text between horizontal dotted lines. Used for section intro lines.
  • Link Button - Turns linked text into a stylized button.
  • Content Box - Places text within a box.

When you apply any of these styles or headings (custom font), blockquote, etc. you will see that they appear in the editor as they do on the site.

Section Options

When adding or editing a section, you will see the following meta boxes below the content editor.

Section Details

This meta box contains options that you can apply to a section.

  • Section - specify Portfolio, About, Services, Testimonials, Contact or Custom. You can have as many Custom sections as you would like. You can have one each of the more specific types.
  • Secondary Heading - When you use as secondary heading, both headings are centered on the same line. See the Live Preview's Portfolio section for an example ("Johnny Doe Web Designer").
  • Top Right - Choose to show a button, image or social media icons in the top-right area of a section.
  • Content Boxes - You can show additional content in boxes on the right or bottom of a section (read below)

Content Boxes

Beneath the Section Details meta box are three more meta boxes for additional content. These boxes can be shown to the right of your main content (see preview's Contact section) or beneath it (see About). Each box can have a heading and show regular content (refer again to preview's Contact section) or you can create a list with multiple columns (see "Skills" in preview's About section).

Ordering

You can set the order in which the sections show on your homepage by editing the Order value in the Page Attributes meta box while adding or editing a page. For example, a section with Order value of 1 will appear before one with Order value of 2.

Linking to Sections

Internal Linking

To link to a section from within another section on the homepage, use #sectionslug as the URL. You can find (and change) the slug of a section by logging into your WordPress admin and going to Pages > All Pages. Click Quick Edit to see a section's slug. For example, <a href="#services">Services</a> is the HTML code for a link that, when clicked, causes the page to scroll to the Services section.

If you want to link to the blog archive, you can use the [blog_url] shortcode.

External Linking

You can also link to a section externally (from somewhere other than the homepage). Use a URL like http://yourname.com/#services to cause a specific section to show upon page loading. See this in action on the live preview with this link.

Related Guides

There are custom post types for portfolio items, services and testimonials. Guides explaining how to add and show these items are provided. There is also a section on configuring the contact form and Google Map.

Managing Portfolio

Custom Post Type, Categories

Zipfolio provides a simple way for you to add images and videos to your site.

Add the Portfolio Section

  1. To add your "Portfolio" section, log into your WordPress admin area then go to Pages > Add New. Remember, pages show up on the homepage as Sections.
  2. Choose the Portfolio option in the dropdown under Section Details (this is important).
  3. Add the [portfolio] shortcode to the content editor.
  4. You may want to write a one line welcome message above the shortcode. Highlight it then choose Intro Text from the editor's Styles dropdown, then click the "Align Center" icon to make it look like the Live Preview.

If you imported the sample content as described in the Installation guide, your portfolio section already exists and you can simply edit it.

Categories

You can organize your images into categories that the visitor can filter through. This is optional.

Add a Category

  1. Go to Portfolio > Categories
  2. Enter a category name
  3. Click the Add Category button

Edit and Delete Categories

  1. Go to Portfolio > Categories
  2. Hover over a category to see the Edit and Delete options

Notice also that there is a Portfolio column with a number by each category. This shows you how many items are in each category. If you click the number, it will show you the items.

Custom Ordering

At the time of writing, WordPress does not provide a way to specify the order of taxonomies (categories) as you can with posts. However, there is a Custom Taxonomy Sort plugin by Zack Tollman that adds this functionality. Follow these steps if you want to use it. Otherwise, your categories will be shown alphabetically.

  1. Go to Plugins > Add New and search for "Custom Taxonomy Sort"
  2. Install the plugin with that exact name (author is Zack Tollman)
  3. Click Activate Plugin after it is installed
  4. Go to Settings > Custom Taxonomy Sort and make sure Automatic Sort is on.
  5. Return to Portfolio > Categories and you will see that there is now an Order field. Edit your categories to set the order value (for example, 1, 2, 3, etc.).

Images & Videos

Adding an Image

Zipfolio uses a custom post type that makes it easy for you to add portfolio items.

  1. Go to Portfolio > Add New
  2. Enter a title for the image.
  3. Write a short description to appear in the lightbox.
  4. Click Set featured image then Upload Files, upload an image, select it, then click Set featured image.
  5. Select the categories you want this image to appear in (if any).
  6. Click the Publish button to add it.

See the "Portfolio Options" section below to see how you can change the ordering of your items.

Adding a Video

You can easily add YouTube and Vimeo videos to your portfolio.

  1. Follow the same steps in "Adding an Image" above.
  2. Before publishing, provide the URL to a YouTube or Vimeo video in the Video Page URL field.

Note that you still must provide an image that will be used as a thumbnail for the user to click on.

Editing and Deleting Items

  1. Go to Portfolio > All Items
  2. Hover over a portfolio item to see the Edit and Trash options

Note that this will delete the posts but the actual image files will remain on your server. If you want to delete the image files, go to the WordPress Media Library (Media > Library).

Options

Go to Appearance > Theme Options > Portfolio to set these options.

  • Thumbnail Rows - You can choose how many rows of thumbnails are shown per page.
  • Order - Choose Newest First, Oldest First or Manual Order. After enabling manual ordering, an Order field will appear when adding and editing portfolio items.

Managing Services

Custom Post Type

It's simple to add services to your site. First you will need to prepare your services section to be able to show services then you can add your services.

Add the Services Section

  1. To add your "Services" section, log into your WordPress admin area then go to Pages > Add New. Remember, pages show up on the homepage as Sections.
  2. Choose the Services option in the dropdown under Section Details (this is important).
  3. Add the [services] shortcode to the content editor where you want services to appear.

If you imported the sample content as described in the Installation guide, your services page already exists and you can simply edit it.

Adding a Service

Zipfolio uses a service custom post type that makes it easy for you to add new services.

  1. Go to Services > Add New
  2. Enter a title for the service
  3. Describe the service in the content box.
  4. Optionally enter an Order value (for example, 1 if you want it to show first)
  5. Optionally click Set featured image then Upload Files, upload an image (auto-resized), select it, then click Set featured image.

In the live preview, four services are shown in one row. You can add more than four and a second row will be used.

Editing and Deleting Services

  1. Go to Services > All Services
  2. Hover over a service to see the Edit and Trash options

Managing Testimonials

Custom Post Type

Zipfolio makes managing your testimonials easy. First you will need to prepare your testimonials section to be able to show testimonials then you can add your testimonials.

Add the Testimonials Section

  1. To add your "Testimonials" section, log into your WordPress admin area then go to Pages > Add New. Remember, pages show up on the homepage as Sections.
  2. Choose the Testimonials option in the dropdown under Section Details (this is important).
  3. Add the [testimonials] shortcode to the content editor where you want testimonials to appear.

If you imported the sample content as described in the Installation guide, your testimonials page already exists and you can simply edit it.

Adding a Testimonial

Zipfolio uses a testimonial custom post type that makes it easy for you to add new testimonials.

  1. Go to Testimonials > Add New
  2. Enter a person's name as the post title
  3. Enter their testimonial (without quotes) as the post content
  4. Optionally provide their location or company for Below Name
  5. Optionally enter an Order value (for example, 1 if you want it to show first)
  6. Optionally click Set featured image then Upload Files, upload an image (auto-resized), select it, then click Set featured image.

Editing and Deleting Testimonials

  1. Go to Testimonials > All Testimonials
  2. Hover over a testimonial to see the Edit and Trash options

jQuery Masonry and Ordering

Note that since the testimonials are arranged using jQuery Masonry, the actual order in which they appear may be slightly different than what you specify. This is because jQuery Masonry does whatever it needs to make items fit nice and snug. If you desire an exact ordering rather than a rough one, you may need to play a little with the Order values for your testimonials.

Managing Blog

Section, External Archive

You can show your latest blog posts on the homepage and your older posts in an external archive (such as yourname.com/blog/). The external archive provides a way for search engines to index your content as well as for people to share, bookmark and comment on posts. First you will need to prepare your blog section to be able to show the latest posts on the homepage.

Add the Blog Section

  1. To add your "Blog" section, log into your WordPress admin area then go to Pages > Add New. Remember, pages show up on the homepage as Sections.
  2. Choose the Blog option in the dropdown under Section Details (this is very important).
  3. Add the [blog] shortcode to the content editor where you want your newest posts to appear.
  4. For Top Right choose "Button" then enter "All Posts" for button text and use the [blog_url] shortcode for the button URL. This creates a link to your external blog. See "External Blog Archive" below for more details.

If you imported the sample content as described in the Installation guide, your blog page already exists and you can simply edit it.

Adding a Post

This is the same as with any installation of WordPress.

  1. Go to Posts > Add New
  2. Enter a the post title
  3. Enter the post content
  4. Write a short excerpt (post summary) to show on the homepage. You may first need to click Screen Options (top right) and enable Excerpt).
  5. Choose the categories you want to add your post to (you can click Add New Category if necessary).
  6. Optionally enter some tags (keywords) for your post.
  7. Optionally click Set featured image then Upload Files, upload an image (auto-resized), select it, then click Set featured image. You can use Image Options to decide where you want that image to appear (post summary and/or full post).

Editing and Deleting Posts

  1. Go to Posts > All Posts
  2. Hover over a post to see the Edit and Trash options

Editing and Deleting Categories and Tags

  1. Go to Posts then Categories or Tags
  2. Hover over an item to see the Edit and Delete options

External Blog Archive

Once you have the Blog section (page) added and configured, your external blog is ready to configure. This archive provides a way for people to search and browse your old posts.

Archive URL

To make your blog archive accessible with a nice URL (usually yourname.com/blog/), you can configure permalinks.

  1. Go to Settings > Permalinks
  2. Choose your preferred URL format (other than "Default") then save
  3. Go to Pages > All Pages
  4. Hover over your blog page and click Edit
  5. Look for "Permalink" at the top and click Edit
  6. Optionally change this URL then click OK and Update the page
  7. Now click View by "Permalink" to access your external blog archive

Blog Options

You can change the number of the newest posts shown in the blog section on the homepage.

  1. Go to Appearance > Theme Options > Blog
  2. Change "Posts on Homepage" then save

Other blog settings are handled natively in the WordPress settings. Go to the Settings menu to change date formats, posts per page (in archive), comments, etc.

Social Sharing Icons

If you want to add social sharing icons to your blog posts to encourage people to share on Twitter, Facebook, Google+, etc., use a plugin such as AddThis. When using the AddThis plugin, be sure to adjust its settings (Settings > AddThis) so that "Show on homepage" and "Show on pages" are both disabled in order for the best experiene with this theme.

Feedburner

If you use the Feedburner service, install a plugin such as FeedBurner FeedSmith Extend to cause WordPress to redirect your RSS feed URL to your Feedburner URL.

Contact Form & Map

Contact Section

Add Contact Section

To add your "Contact" section, log into your WordPress admin area then go to Pages > Add New. Remember, pages show up on the homepage as Sections. Choose the Contact option in the dropdown under Section Details.

If you imported the sample content as described in the Installation guide, your contact page already exists and you can simply edit it.

Google Map

Configuration

To show a Google Map with your location at the top of your contact section, go to Appearance > Theme Options > Google Map. You will see fields for your location, map type (road, satellite, hybrid or terrain) and zoom level. Instructions are provided alongside these theme options. You may also provide a Google Maps API key, but with version 3 of Google Maps this is not required.

Map Removal

If you do not want to show a map at all, set Longitude and Latitude to nothing in the Theme Options.

Troubleshooting

  • If no map is showing, make sure you selected the Contact option for Section under Section Details when adding/editing your contact page.
  • If the map appears but does not show your location, check your latitude and longitude coordinates.
  • If a message pops up saying there is a problem with your key or referrer, log into the API Console and make sure your domain is in your list of allowed referrers.

Contact Form

Add the Contact Form

Edit your contact page then add the shortcode [contact_form] to your page content.

Receiving E-mail Address

Messages sent via your contact form are sent to the e-mail address used in Settings > General.

reCAPTCHA Spam Protection

You can add a reCAPTCHA box to the contact form.

  1. Sign up for a reCAPTCHA Key.
  2. Go to Appearance > Theme Options > reCAPTCHA to enter your public and private keys.

Social Media Icons

  1. Go to Appearance > Theme Options to enter the URLs of your social media profiles.
  2. Edit your contact page and under Section Details choose Social Media Icons from the Top Right drop down.

Address & Phone Boxes

The live preview's Contact section uses two content boxes on the right. The Sections guide explains how to accomplish this when editing a page.

If you imported the sample content, be sure to edit your address, phone number and driving directions link.

Translation

Localization

Zipfolio has been fully localized and is translation-ready. A PO file is included in the theme's languages folder. You can use this file to translate all text in the theme into your own language. The resulting translated file is an MO file.

Translation Tools

The Codestyling Localization plugin makes translation easy and is highly recommended. There is another popular tool but it is not recommended. That tool is POEdit and its current version (as of writing) can cause problems (for more info, read this).

Installing Codestyling Localization Plugin

  1. Log into your WordPress admin and navigate to Plugins > Add New
  2. Search for "Codestyling Localization" then click Install Now next to the plugin
  3. Click Activate Plugin after installation

Making Your Translating

  1. Navigate to Tools > Localization (Codestyling Localization plugin adds this)
  2. Scroll down to Zipfolio and click Add New Language. Choose your language then click create po-file. This makes a PO file for your language in the theme's languages directory.
  3. Now your language shows in the list by "English/United States". Click Rescan by your language then Scan Now. This adds English text from the theme to your PO file so it can then be translated into your language.
  4. Click Edit by your language and you will see lines of text in English.
  5. Now click Edit by one of those lines of text.
  6. Enter your translation for that particular text then click Save. Repeat this for every line of text.
  7. After translating every line of text, click the generate mo-file button at the top. This makes an MO file with your complete translation in the theme's languages directory.
  8. Now look at the top of the page for something like "File: languages/pt_BR.po". Write down the "pt_BR" part. Your code will be different. In this example, the language file is for Brazillian Portuguese (pt for Portuguese and BR for Brazil). You will need this code when activating your translation.

Activating Your Translation

  1. FTP into your web server and navigate to your WordPress installation's directory.
  2. Download the wp-config.php file and open it in a text editor (Notepad).
  3. Change define('WPLANG', ''); to define('WPLANG', 'pt_BR'); where pt_BR is the language code you wrote down in the last step of the "Making Your Translating" instructions above. You can also determine this code by looking into the theme's languages folder where your PO and MO files were created.
  4. Save wp-config.php then upload it to your web server.

Now view your website and WordPress admin area to make sure your translation has been applied. Note that most of the translated text appears in the admin area such as the Theme Options and areas for managing pages (sections), portfolio items, services and testimonials.

Complete WordPress Translation

What you have done translates the Zipfolio theme, but WordPress has a bunch of text in the admin area that you will probably also want in your own language. Thankfully, many translations are already available. Using one of these translations will make the entire WordPress admin area appear in your language.

Read Installing WordPress in Your Language for a guide. Basically you will download an MO file (such as pt_BR.mo) then upload it to wp-content/languages (you may have to create the languages directory). Since you already modified wp-config.php, that's all you have to do.

Child Theme Note

You can also store your MO language file in a child theme. Read the Child Theme guide for information. The advantage of this is that if you ever update Zipfolio and forget to save your MO file, you won't lose it (because it's kept in the child theme).

Child Theme

Custom Styles, Functionality

If you are going to modify Zipfolio (changing styles or adding features, for example), it is strongly recommended that you use a child theme to do it. The reason this is recommended is that by making modifications using a child theme, the original (parent) theme is untouched. By keeping your modifications separate, you will be able to update the parent theme (if ever needed) without having to remake (or worse, lose) your changes. For these reasons, Zipfolio supports child theming and includes one with examples showing how to do certain things.

Keep in mind that there is more to child theming than can be provided in this guide. You should familiarize yourself with WordPress Theme Development and read about child themes on WordPress.org.

Install Example Child Theme

The package you received has a theme folder with a zipfolio-child.zip file in it. This is the sample child theme. You install it like you installed the parent theme (note that the parent theme must remain installed for the child to work). Go to Appearance > Themes > Install Themes > Upload to upload the zip. Be sure to activate it after installation.

The child theme will have been installed into the wp-content/themes/zipfolio-child directory. Note that your content, menu and Theme Options will remain the same and you can uninstall the child theme at any time without ill effect.

Overriding Styles

You can override specific styles with a child theme without editing the parent theme's original stylesheet. Go to wp-content/themes/zipfolio-child and open style.css for editing and you will see that it imports all of the styles from the parent theme's style.css file.

@import url("../zipfolio/style.css");

You can copy specific styles from the parent style.css file into the child style.css file, then change their properties. You can also add new styles here. Keep in mind that Zipfolio's color and image related styles are not in this file but rather contained within a color scheme stylesheet. Read the next section for details.

Note that even if you don't override styles, the style.css file must exist in order for the child theme to work. The header portion of the stylesheet must also remain intact, although you can change the details.

Color Schemes

Editing a Color Scheme

You can modify the light and dark color schemes in the same way that you modify styles for the main stylesheet (read previous section). For example, you can go to zipfolio-child/colors/light and open style.css in order to override or add styles to the light color scheme.

Adding a Color Scheme

To add your own color scheme, go to the parent theme's colors directory then copy and rename either the light or dark folder (with style.css, images and all) into the colors directory in the child theme. You will end up with something like zipfolio-child/colors/my-new-color. Next, edit the style.css file and images that you copied in a way that makes it a completely new color scheme.

After you have created the new color scheme's directory inside of the child theme's colors directory, it will be available for selection in Theme Options. You will of course want to select your new color scheme so you can see what you are working on. If you ever switch back to the parent theme, your color scheme will not be available, because it is part of the child theme.

Overriding Files

You can override most of the parent theme files. Simply copy a file from the parent theme to the child theme. When a file exists in the child theme, that version will be used. The following files can be overridden in this manner.

  • colors/*/style.css - color schemes are covered in the section above
  • js/* - you can override any of the JavaScript files
  • *.php - any PHP file in the parent theme's root directory (index.php, functions.php, etc.)
  • *.css - any CSS file in the parent theme's root directory (style.css, for example)
  • screenshot.png - you may want to give your child theme a cover image

Note that files in the theme's includes/functions directory cannot be overridden. Instead, specific parts of these files can be changed (there is no point in replacing a whole file when you only need to change one function). Read the next section for information.

functions.php

If you look at the parent theme's functions.php file, you will see that a lot of magic happens in there. Mainly what it does is set WordPress theme features and assign functions (from includes/functions/*.php) to action and filter hooks. The example child theme's functions.php is setup to fire hooks after the parent theme's functions.php has set its hooks. This means you can use the child theme to remove and replace existing actions and filters.

Removing and Adding Hooks

Most of Zipfolio's functions are assigned to hooks (either actions or filters). The example child theme's functions.php shows you how you can change these (you can also add totally new ones). For example, the parent theme sets an action that calls a zipfolio_admin_menu function to manipulate the WordPress admin menu. You can remove that action then re-add it to use a different function such as zipfolio_child_admin_menu in order to manipulate the admin menu in a different way.

Instead of repeating the example code here, take a look inside the child theme's functions.php file to see the real thing (it is well-commented).

Pluggable Functions

Most of the theme's functions are used by action and filter hooks and can be changed as described above. The functions that are not used by hooks are pluggable. You can tell which functions are pluggable by looking through the files in includes/functions. If a function has this piece of code before it then it is pluggable.

if ( ! function_exists( 'function_name ' ) ) {

You override a pluggable function simply by adding a function with the same name to the bottom of the child theme's functions.php file (see for example). The child theme's function will be used in place of the parent theme's function.

Adding Stylesheets and JavaScript

The preferred way to add a stylesheet or JavaScript file with WordPress is to enqueue it (versus modifying <head> in header.php). You can do this by adding one line of code to the functions.php file. Again, look inside of the child theme's functions.php file for actual examples with code comments.

Localization

If you completed the Translation guide, your result was an MO file. You may if you wish store that file inside of the child theme for safer keeping. This way you don't risk losing it if you ever forget to back it up before updating the parent theme. You can use an MO file in the child theme in two steps.

  1. Copy the parent theme's languages directory to the child theme.
  2. Add this line to the zipfolio_child_setup function in the example child theme's functions.php file:

    load_child_theme_textdomain( 'zipfolio', ZIPFOLIO_CHILD_DIR . '/languages' );

The second step tells WordPress that you want it to load the MO file from the child theme's languages folder.

File Descriptions

PHP, CSS, JS

The files listed below are in the theme folder of the package you received. Installation places the contents of zipfolio.zip inside of your /wp-content/themes/zipfolio directory. If you plan on making modifications, this list should help you understand what is what. It is strongly recommended you make customizations using a Child Theme (example included).

  • sample-data.xml - importable pages, posts and menu to make your install like the Zipfolio Live Preview
  • zipfolio.zip - contains theme files, can be uploaded via WordPress admin in order to install theme
    • colors - light and dark color scheme stylesheets and images
    • fonts/lato - Lato Black font (SIL Open Font License) embedded with @font-face
    • images - images not specific to a color scheme
    • includes
      • functions
        • admin.php - general admin functions
        • blog.php - functions for blog section and external blog
        • comments.php - functions relating to comment posting and display
        • contact-form.php - display and process contact form via AJAX, reCAPTCHA optional
        • customizations.php - functions to apply logo, favicon, Google Analytics, social icons
        • enqueue.php - inject stylesheet calls into header.php's <head>
        • helper-functions.php - various helper functions
        • media.php - custom image sizes
        • menu.php - register top menu, manipulate menu output to work with scrolling sections
        • meta-boxes.php - functions related to meta boxes
        • options.php - functions relating to Options Framework plugin, default option values
        • portfolio.php - post type, taxonomy, meta boxes, admin columns and display
        • sections.php - manipulate the built-in page post type (used for sections on homepage)
        • services.php - register post type, add Order column, display services
        • shortcodes.php - register various shortcodes
        • testimonials.php - post type, meta boxes, admin columns and testimonials display
      • meta-box - Meta Box Plugin by Rilwis (included directly)
      • recaptcha - reCAPTCHA PHP library providing optional contact form spam protection
    • js
      • admin.js - loaded in WordPress admin in order to make user experience better
      • demo.js - not used by default, enables front-end color scheme switcher seen in live preview
      • ie6.js - prompts Internet Explorer 6 users to install Chrome Frame
      • jquery.easing.js - jQuery Easing helps with the section scrolling effect
      • jquery.masonry.min.js - jQuery Masonry assists with the testimonials layout
      • jquery.prettyPhoto.modified.js - prettyPhoto powers the portfolio lightbox
      • jquery.quicksand.js - Quicksand helps with portfolio category filtering
      • jquery.smooth-scroll.min.js - jQuery Smooth Scroll makes the scrolling possible
      • main.js - the theme's main JavaScript file, heavily commented (loading, portfolio, etc.)
      • modernizr.custom.js - Modernizr provides feature detection and HTML5 support for old browsers
    • languages/en_US.po - PO file for translation into other languages
    • 404.php - "File Not Found" template
    • archive.php - template for blog archive by date
    • author.php - template showing blog posts for specific author
    • blog.php - template for index of external blog archive
    • blog-header.php - template for top section of external blog pages
    • category.php - template for displaying blog posts by category
    • comments.php - template for comment list and form appearing beneath posts
    • contact-form.php - template for contact form
    • footer.php - template for footer content
    • functions.php - constants, includes, feature enablement, action and filter hooks
    • header.php - template for footer content
    • index.php - loops through sections/pages in order to create homepage
    • loop-blog.php - template for showing blog post summaries
    • loop-portfolio.php - template for displaying portfolio thumbnails and controls
    • loop-services.php - template for looping services
    • loop-testimonials.php - template for looping testimonials
    • options.php - backward compatibility with older versions of Options Framework
    • page.php - redirect page permalinks to homepage
    • screenshot.png - screenshot thumbnail for theme
    • search.php - template for showing blog search results
    • searchform.php - template for blog search form
    • single.php - template for displaying single blog post
    • single-zipfolio_portfolio.php - redirect portfolio item permalinks to homepage
    • single-zipfolio_service.php - redirect service permalinks to homepage
    • single-zipfolio_testimonial.php - redirect testimonial permalinks to homepage
    • style.css - main stylesheet, contains theme info in header (also see colors directory)
    • style-admin.css - stylesheet loaded in admin area (helps with custom meta boxes)
    • style-editor.css - stylesheet loaded by WYSIWYG editor in admin
    • style-ie7.css - stylesheet loaded for Internet Explorer 7 only, corrects minor issues
    • tag.php - template for showing blog posts by tag
    • taxonomy-zipfolio_portfolio_category.php - redirect portfolio category permalinks to homepage
  • zipfolio-child.zip - optional child theme example for making custom colors and functionality

Support

I'm Here to Help

If you have a question that is not answered in this documentation or if you discover a problem, you can submit a support request via the form on my Profile Page (must be logged in to see form) and I will respond by e-mail. Please provide a URL to your website if there is a problem for me to see. My goal is to answer questions within 24 hours on weekdays (excluding US holidays and the rare period of travel).

Please Note: Support is limited to questions regarding the theme's features or problems with the theme. I am not able to provide support for code customizations or third-party plugins.

Please Rate Zipfolio

Ratings & Testimonials

I hope you are finding Zipfolio to be a good solution. If that's the case, please share your experience with others by rating it or by providing a testimonial. Also know that if you have encountered a problem or need some help, you can Ask for Support. It's my pleasure to help my customers.

Rate It on ThemeForest

You can give Zipfolio a rating up to five stars by logging into ThemeForest then going to the Downloads area in your account. Thank you for doing this.

Write a Testimonial

I like to share what others have said about my themes by posting their testimonials on ThemeForest. If you would like to submit one, please use the contact form on my Profile Page (must be logged in to see form). Here's an example testimonial from one of Zipfolio's users.

"Zipfolio is just was I was looking for — I'm so happy with my new resume site. This theme was easy for me, a design newbie, to customize and make my own. The speedy and friendly support was a delightful surprise. Highly recommended!" Amanda Krueger

Sources & Credits

Thank You

Appreciation is given to the people behind these helpful projects and resources.

PHP & WordPress

JavaScript

CSS, Fonts & Graphics

Preview Photos

  • Paul Bica provided many of the photos seen in Zipfolio's live preview (not included with template). He has generously shared his work on Flickr under the CC BY 2.0 license.
  • PhotoDune is the source of About and Services photos.

Changelog

Improvements

v1.1.3 (December 16, 2013)

  • Fix loading issue with #! hash, relating to LinkedIn. (js/main.js).
  • Fix double "Theme Options" menu issue after Options Framework 1.7
  • Update screenshot.png for Retina and WordPress 3.8 size.

v1.1.2 (March 25, 2013)

  • Fix "Save Draft" not showing when adding/editing post. (style-admin.css).

v1.1.1 (February 26, 2013)

  • Enqueued jQuery Migrate to ensure compatibility with jQuery 1.9 in upcoming WordPress 3.6 (includes/functions/media.php).
  • Fixed issue in Chrome 25 with first portfolio and service thumbnail being elevated (style.css).

v1.1.0 (December 10, 2012)

  • Adjusted option field widths to work best with latest Options Framework (includes/options.php).
  • Improved documentation (adjusted for WordPress 3.5 interface).

v1.0.9 (October 9, 2012)

  • Improved theme update security (to prevent this) (functions.php, admin.php).
  • Corrected zipfolio_customize_register prefix.

v1.0.8 (September 10, 2012)

  • Updated jQuery Smooth Scroll to fix issue with Safari 6 on Mountain Lion and iOS (js/jquery.smooth-scroll.min.js)

v1.0.7 (August 2, 2012)

  • Replaced Lato Black font using English subset with Lato Black font having no subset for better compatibility with non-English languages. Refer to FontSquirrel @font-face Kit. (fonts/lato/*)

v1.0.6 (July 13, 2012)

  • Fixed "zipfolio_page_meta_update_form is not defined" issue in admin area with Firefox (js/main.js, includes/functions/admin.php)

v1.0.5 (July 9, 2012)

  • Permalink structure is generated automatically upon activation (includes/functions/admin.php)
  • Admin JavaScript is now only enqueued in areas that need it (includes/functions/admin.php)
  • Password-protected posts now work for WordPress 3.4 (functions.php, includes/functions/blog.php)
  • Removed "Static Front Page" (not used by Zipfolio) from WordPress 3.4 Theme Customizer (functions.php, includes/functions/admin.php)

v1.0.4 (June 11, 2012)

  • Replaced calls to deprecated get_theme() and get_current_theme() functions with wp_get_theme() for better WordPress 3.4+ support (functions.php)

v1.0.3 (March 20, 2012)

  • Added seven video guides to documentation
  • Added [blog_url] shortcode for easier use of "Top Right" button on blog section (includes/functions/shortcodes.php, includes/functions/sections.php, index.php)
  • Blog categories archive now works when default permalink structure used (category.php)
  • Improved coding in includes/functions/options.php

v1.0.2 (March 8, 2012)

  • Added homepage blog section and complete external archive

v1.0.1 (February 16, 2012)

  • Testimonials can now include images
  • Additional details added to design

v1.0 (February 14, 2012)

  • First release