Design Portfolio
Design Portfolio WordPress Theme Documentation by TeslaThemes
Design Portfolio - WordPress Theme

Created: 25-February-2013
By: TeslaThemes

Table of Contents

  1. Installation GO
  2. Front Page : GO
    • 2.1 Main Slider GO
    • 2.2 Recent Work GO
    • 2.3 Feature section GO
  3. Portfolio page GO
  4. Blog page GO
  5. Contact page GO
  6. Single Project page GO
  7. The GRID GO
  8. Shortcodes GO
  9. Customizations GO

Thank you for purchasing our product! We are very glad that you have decided on our WordPress theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation and if you have further questions write us a email This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built.

1 . InstallationTOP

To install the Design Portfolio Theme you will need WordPress v3.4 or newer.

Upload the Design file through the WordPress admin backend:


Then, when prompted activate the theme:


Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

If everything went well, the theme should appear under Appearance --> Themes like shown below:


2 . Front PageTOP

2.1 . Slider TOP
  1. The slider will appear on the page if is selected from Page options section, Slider option from "Plugins for this section"!

    • To add slider items is possible from Media: Upload new image, after that you need show what kind of Type is this image. It eassy to do it just select Slider in Type drop down menu. Also you can display in slider the Title and the caption.

      image upload

      Note : For best practice we advice to use large images for slider, by defaul is (1920px x 621px)

2.2 . Recent Work / Related Projects TOP

For each page you can show latest portfolio items. When you have added items in portfolio, you can display it on page just click on checkbox in Page option to Show portfolio items

Below it shown 3 steps for create portfolio item

  1. Upload thumbnail for project

  2. Select Portfolio from Attachment details -> Type field

  3. Show in page use Page options meta field shown in Theme page constructor

  4. portfolio image
2.3 . Feature section TOP

For best usage of theme we create few types of feature section.

For main page you can use 3 types of section (colored, gray and normal).

Also we created special template for services:

Or, you can use in About Us template -> Page option Normal section for Feature section

3 . Portfolio page TOP

Portfolio page is great way to illustrate you work. We understand that is very important part for any kind of project. To become more efficient usage we incorportae greate script "Isotope", it allow you to make your portfolio items filtrabile.

To create portfolio page you need to fallow below steps:

  1. Create new page with selected template - "Portfolio template"

  2. Add Portfolio items use Media upload

  3. Select your postrfolio items and add Type - Portfolio

  4. Add info for each portfolio item

  5. Add filter tag

  6. Done!

Note: For create the Gallery page you need to falow the same steps, just use template for Gallery and choose gallery Items

4 .Blog page TOP

The Blog template page is ment to show the posts feed. To set up the Blog page:

  1. First create a page with the "Design Portfolio BLOG Page" Template.
  2. Then go to Settings → Reading , and choose the title of the page created above from the Posts Page option, and optionally choose the "Summary" radio button .

    image gallery

    Note : Here also you can set how many posts should be displayed on one blog page.

  3. Design Portfolio theme come with 3 page template for blog, by default is set full size blog page.

  4. If you use blog with sidebar, our theme come with couple of great widgets

    image gallery
5 . Contact page TOP

Contact page is eassy to create, use our constructor, select form aviabile plugin the map and use our shortcodes

  1. Get the address embedding code from :
    • First Navigate to
    • Go to the place you want to be shown on the map
    • Press the link button and copy the embedding code to the respective widget option. image aboutus
    • Fill all fields in Contact info shown in step 1 and done
6 . Single Project Page TOP

Single project is created automated, you need to add proper add portfolio items.

7 . The Grid TOP

Design Portfolio template grid is based on the Bootsrap framework. To start working in the GRID you must put all your content in columns : [span size="your_size"][/span] shortcode.

Note: All your columns must be wrapt in the row shortcode [row]your_content[/row]

Import the XML provided with theme package and go to "Features" page to see an example of how to use the grid.
[span size="1"]1/12[/span]
[span size="2"]1/6[/span]
[span size="3"]1/4[/span]
[span size="4"]1/3[/span]
[span size="5"]5/12[/span]
[span size="6"]1/2[/span]
[span size="7"]7/12[/span]
[span size="8"]2/3[/span]
[span size="9"]3/4[/span]
[span size="10"]5/6[/span]
[span size="11"]11/12[/span]
[span size="12"]1/1[/span]


The code above will split the page in different columns. Visit our Feature Demo Page , or import XML to see what it looks like.

8 . Shortcodes TOP

Design Portfolio Template has the following features/shortcodes , you can use in the Contents and Design Portfolio admin panel :

Import our XML and visit Shortcodes page to see examples of each shortcode.
9 . Customizations TOP

There are more customization options in the Customizer.

There you can change the :

  1. Logo
  2. Change base color
  3. Fav icon