Designfolio Installation & Setup

Note to FREE theme users: the free theme does not include many of the features on this page. You can upgrade to Pro here.

Designfolio Responsive WordPress Portfolio Theme

Page Contents

Domains, hosting, and WordPress installation
Installing Designfolio
Setting up Designfolio (Front Page Slider and Theme Options)
Portfolio Setup
Rotating Testimonials
Responsive Images & Video
Designfolio custom widgets
Shortcodes
Page Templates
Sidebar Commander (Custom widget areas)
Installing a child theme
Custom Header

Getting Started

Here’s a step by step guide to install and setup Designfolio, and make sure you get up and running as quickly as possible.

Domain & Hosting

Before you can install Designfolio, you must have a hosted website domain.

Need hosting? Use our recommended host and get a special discount coupon here.

You can also use your own hosting, as long as your host supports WordPress (which is almost all hosts these days).

WordPress

The next step is to install WordPress. Most hosts allow you to do this in one click.

Every host is different, so if you have problems please contact your website host.

If your host does not offer a one-click install, please see this page at wordpress.org for manual installation instructions.

*Note – Do not install WordPress in your root directory on top of your old website! Instead, install in a sub directory (folder) like http://www.yoursite.com/wordpress. Build the site there, then you can move it into the root directory later.

Installing Designfolio

Ok, now for the good part. Let’s get Designfolio installed!

Installing Your Theme through WordPress (Recommended)

Download the theme’s .zip file
Log in to WordPress, go to Appearance > Themes
Click on the “Install Themes” tab, and click the blue “upload” link
Upload your theme’s .zip file, then activate the theme

Or…Install your theme through FTP

If you would like to upload your theme via FTP, follow these instructions.

Download the theme’s .zip file
Unzip the theme folder
Upload the unzipped folder to the wp-content/themes folder on your server
Log in to your WordPress admin area, go to Themes, and activate the Designfolio theme

After that, your theme should be ready to go. Now you will want to configure the theme through the theme options page.

Setting Up Designfolio Front Page Slider and Theme Options

Learn how to use the Flex Slider custom post type and set it up on your front page. This video also covers the Designfolio Options page.

Designfolio Options

Designfolio has an advanced theme options page that makes customizing and setting up your website incredibly easy. To access the theme options, log in to your WordPress admin area, and go to Appearance > Designfolio Options.

To upload your company logo, check the “use custom image” box. Browse for your logo file, and click “Insert into Designfolio theme.” If you don’t see “Insert into Designfolio theme,” copy the image url, close the upload box, and paste the url into the gray box.

Make sure to click “update logo” or the blue save button at the bottom, or else your changes will not be saved.

If you do not wish to display a custom logo, simply uncheck the box, and your site title will be displayed instead. You can edit what this text says in your WordPress admin area under Settings > General in the left side navigation.

To show or hide the site description text, simply check or uncheck the “Hide site description” checkbox. You can edit what this text says in your WordPress admin area under Settings > General in the left side navigation.

The theme appearance options allow you to change the colors and layout of your site.

To change the color scheme, layout, font, or sidebar location, use the drop down boxes. Make sure to save your changes, then view your site to see the different looks you can achieve.

The admin email is where the contact form email will be sent.

The header and footer insert boxes allow you to add code into the <head> and <footer> areas of each page and post. You can paste your Google Analytics script into one of these boxes.

Portfolio Setup

The portfolio uses a custom post type and a page template to display your items. Learn how to set it all up in this video.

Testimonials

Using the new testimonial custom post type feature, you can group and display your testimonials easily. Rotate them on each page, and use the shortcode to put them anywhere. This video explains how.

(The video uses a different theme, but Designfolio works in exactly the same way)

Responsive Troubleshooting

Designfolio is a responsive theme, which means that it scales for mobile devices and smaller screens. However, when you add content there are some things you have to do to make sure it all works right.

Responsive Images

When you insert an image in a post, page, or widget, an HTML image tag is generated with a height and width. You need to remove the height and width attributes from this tag to make the image scale.

To do this, switch to HTML mode in your page editor by clicking the HTML tab at the upper right. You will see the image tag that looks something like this:

Delete the height and width attributes while leaving everything else the same:

Responsive Video

Videos are a pain to make responsive. Designfolio includes the fitvids.js script to make Youtube and Vimeo videos responsive, for everything else you’re on your own.

To enable this, go to Appearance => Designfolio Options, and check the “Enable Fitvids” box, then save. Note: this will make all of your videos 100% width, which may not be desirable. Unfortunately, that’s the only way to get it to work.

Designfolio Custom Widgets

Designfolio comes packaged with several custom widgets that you cannot find anywhere else. To activate these widgets, login to your WordPress admin area, then go to Appearance > Widgets. Drag and drop the widgets into the different widget areas on the right, these will show up in different places on your site.

Twitter Feed Widget

The Designfolio Twitter Feed Widget displays the latest tweets from your timeline. To activate this widget, just drag and drop it into any widget area, and enter your twitter id. Do not enter the full url or @ symbol. For example, if your Twitter url is http://twitter.com/presscoders, simply enter presscoders.

Testimonials Widget

This widget allows you to display testimonials from the Testimonials custom post type. First, go to “Testimonials” and create a few new ones, then use the widget to display them anywhere on your site.

Header Info Box

This widget helps you make sure your customers can find your contact info on every page, and connect with you on social media. Just fill in your phone number and social media id’s.

Shortcodes

Shortcodes allow you to easily add pre-designed elements to your website.

Testimonial

Usage: [testimonial name="David Gwyer" company="Press Coders" image="http://www.mysite.com/imageurl.jpg"]Put testimonial text here. Don't forget the closing shortcode![/testimonial]

The image url field accepts either an image url or a valid gravatar.com email address.

Button

Usage: [button color="green" link="https://www.presscoders.com"]Button Text Here[/button]
Acceptable colors: Gray, Black, White, Green, Blue, Yellow, Red, (no color specified reverts to default)

Box

Usage: [box color="blue"]Box text and media goes here. Shortcodes inside box ok.[/box]
Acceptable colors: Green, Blue, Yellow, Red, (no color specified reverts to default)

Columns

To create columns easily, use these shortcodes. Don’t forget any closing shortcodes, and make sure your columns add up to 100%!

2 Column layout:

[one_half]
First of 2 columns
[/one_half]
 
[one_half_last]
Second of 2 columns
[/one_half_last]

3 Column layout:

[one_third]
First of 3 columns
[/one_third]
 
[one_third]
Second of 3 columns
[/one_third]
 
[one_third_last]
Third of 3 columns
[/one_third_last]

4 Column layout:

[one_fourth]
First of 4 columns
[/one_fourth]
 
[one_fourth]
Second of 4 columns
[/one_fourth]
 
[one_fourth]
Third of 4 columns
[/one_fourth]
 
[one_fourth_last]
Fourth of 4 columns
[/one_fourth_last]

Mix and match for complex column structures:

[one_third]
1/3 width
[/one_third]
 
[two_thirds_last]
2/3 width
[/two_thirds_last]

[three_fourths]
3/4 width
[/three_fourths]
 
[one_fourth_last]
1/4 width
[/one_fourth_last]

[one_half]
1/2 width
[/one_half]
 
[one_fourth]
1/4 width
[/one_fourth]
 
[one_fourth_last]
1/4 width
[/one_fourth_last]

You get the idea, use any combination of columns you want, as long as they add up to 100%, and you use _last for the last column. Have fun!

Page Templates

To use a page template, go Pages > Edit, and on the right side of the screen you will see “Page Attributes.” Choose a template from the drop down box called “Templates,” and save your changes.

Default

Displays the main content and sidebar according to your chosen layout.

Full Width

Removes the sidebar and displays the main content full width.

Blog Page

Displays your blog posts in reverse chronological order.

Contact Form

Displays a contact form. Email will be sent to the admin, this can be changed on the Designfolio options page.

Portfolio

Displays your portfolio items. Includes options for small, medium, or large images, plus a choice of portfolio group display.

Sitemap

Displays a sitemap of your pages in a single list.

Widgetized Page

Allows widgets to be displayed on the page.

The Sidebar Commander

This is the most advanced way to control your widgets and widget areas ever created.

Create new widget areas, fill them with widgets, and place them on any post/page you want. To make things easier here’s a project based example of what you can do with the Sidebar Commander.

(The video uses the Big Shot theme, but Designfolio works in exactly the same way)

Video Tutorial

Add the Slider to a different page

(This tutorial uses the Nivo Slider which is not in Designfolio, but the same process applies to any widget.)

You know how to add the slider to your homepage, but how do you get it on a different page?

1. Go to Appearance => Widgets, and create a new widget area

Give it a name, and click the blue +options text. Select “Main Content” widget area type, then click add new.

2. Drag the Nivo Slider widget into your new widget area, then set your options

3. Go to Pages => Add New, and create the page you want the slider on

4. On the page edit screen, select Template: Widgetized Page (on the right sidebar). Publish or save your page.

5. Scroll to the bottom of the page to the Sidebar Commander box, click the “Main Content Area” tab, and click your new widget area. Save or update your page.

If you view this page live, you will see that your Nivo Slider is now there! If you want to make this a full width slider, go back to your page edit screen and choose “Full Width” under Column Layout on the right sidebar.

You can add text and other things to your page by going back to Appearance => Widgets, and dragging another widget underneath your new slider.

Installing a Child Theme

If you want to make a lot of customizations to your site, you will want to install a child theme and make your changes there.

A child theme is simply a different folder to store your changes. In its simplest form, it’s a folder with a single style.css file in it. The point of a child theme is to keep your changes in a separate place so they don’t get overwritten when you update your parent theme (Designfolio).

Child Theme Download

Designfolio Pro Child Theme

Install and activate your child theme

After downloading your child theme, login to your WordPress admin area. Go to Appearance => Themes.
Click on the “Install themes” tab at the top, then click the blue text that says “Upload.”
Find the child theme .zip file, upload it, and activate it.

That’s it! Now you can make any CSS customizations you want in the style.css, and add any custom functions in functions.php. To overwrite a theme template file, just copy the file from the parent theme to the child theme, and make your edits to the file in the child theme.

For more on theme customization, please see our WordPress theme customization guide.

To add a custom header to Designfolio, you’ll need to use custom CSS. Here is an example:

body #header-container {
background: url(http://www.mysite.com/pathtoimage.jpg) no-repeat center;
}