Dziś będzie trochę po angielsku więc od razu przepraszam wszystkich którzy mówią only in polish;)
Today I’m  glad to release a beautiful and I quess simple and nice portfolio WordPress theme for all kind of web publishers is a clean and modern theme that is perfect for contrasting images, and colorful designs or imagery.

GridFolio, is a portfolio theme that includes a blog. Theme was based of Draggable Image Boxes Grid which I found on codrops site (by the way thanku so much Mary Lou for this tutorial).

The beautiful images in the demo are by my very talented friend Kasia Drąg aka. april182. Check out her amazing gallery on deviantArt >> april182.deviantart.com

At the beginning – theme preview.

So, let’s begin, I’ll try to explain what’s it all about:

1. Home Page

Home page contains three places, that can be set from option page.

1. Big slogan
2. Small headline
3. Smallest text:)

Here You can also describe your big button and set link. Background is displayed 6 last photos from portfolio with cool blurry effect.

2. Portfolio Page

Here that we can see a grid effect. On this page we move with the “move cursor”. We can move grid in all directions, to enlarge the image just click on it. Once clicked, the thumbnail will expand to the full size image. Here we can slide images by arrows. To close the picture preview just click on the right top corner [ X ]

If you used a child category, on the bottom you find yellow bar from which to choose an interesting subcategory.

3. Blog Page

Blog page similarly as portfolio is based on the grid effect. To open box with post just click on the tile, box will expand to a fullscreen content area. In this page, you must use tag called „more” into your post at your desired „cut-off” point.

To go to the entry you can click “read more”  In this page, on the right you find dynamic sidebar. You can place it there some widget.

4. Sample Page

You can see how different elements behave in this theme. Also, you can see sliding footer with dynamic sidebar (area for 3 widgets).

5. GridFolio option page

In the wordpress dashboard you will find GridFolio theme tab, there you can change:

GridFolio basic options

• Logo
• Favicon
• RSS feed
• Facebook link
• Twitter link

Portfolio page options

• Portfolio category
• Exclude portfolio from blog
• Subcategory navigation

Home slogan options

• Slogan text
• Small headline text
• Small text
• Button text
• Button link

Home slider

• Number of items in slider

6. Tips & Tricks

1. To correctly display vertical images you must, change a little your javascript and css file.
First, we change a little aspect ratio, just open your custom.js file located in gridfolio js folder and find something like this (below the line 408) and,

change this:

to this:

Next, we need add background to the popup image, open your style.css located in your gridfolio folder and change (line 499)

change this:

to this:

And that’s it!

2. How to add couple of portfolio pages with different set of images (different categories).

• First we must create new Portfolio page template. Here you can download pre-edited file >> template-portfolio_1
• In wordpress Dashboard go to Post >> Categories.
• Add new category eg. photos (in our case, portfolio page 1)
• Add new category eg. designs (in our case, portfolio page 2)
• Now click on photos category (that you have added in step 3). In address bar in your browser you saw something like this:
  
  =category&tag_ID=5&post_type=post
  we will need the ID of this category (ID=5) So remember this number.

• open Portfolio page template. Change name at the top:
  

  1 2 3 4 5

  <?php /* Template Name: Here past new template name */ ?>

  Now paste category number, just replace this:

  21 22

  <div class="ib-main"> <?php $category = gf_get_category_id(get_option('gf_portfolio_category'));

  to this:

  21 22

  <div class="ib-main"> <?php $category = 5;

  repeat this same for another page template with another category number. eg.

  21 22

  <div class="ib-main"> <?php $category = 24;

  Save this file and upload on the server into gridfolio directory, if you create another template you must also change file name. like
  template-portfolio_1.php
  template-portfolio_2.php
  …etc.

• Now add new page eg. Portfolio 1, 2, …etc. and select page template which you previously created eg.
  

  1 2 3 4 5

  <?php /* Template Name: Photos */ ?>

• Now add new post, select a category (eg. photos)
• This same repeat with another cateory and page template.
  

6.1. How to upgrade to Gridfolio v 1.2.2

Before I release new version of gridfolio 2.0 i added new cool feature to gridfolio 1.2
(not included in demo!) so if you want add some descriptions to your pic in portfolio page, just upgrade your theme to 1.2.2.

First a few screenshots:

How to upgrade to Gridfolio v 1.2.2 :
Download This File: gridfolio_update_to_1.2.2

1.Copy template-portfolio.php file into „GridFolio” main folder.
2.Copy custom.js file into „js” folder.
3.Copy reverse.png image into your „images” folder
4.Now copy these few lines into your style.css (replace old .ib-preview-descr class with what you see below – line 503)

And That’s it!

7. Changelog

Update to ver. 1.1 – Minor bugs fixed.
Update to ver. 1.2 – Full Content area scrolling fixed, add video’s support inside content area, minor bugs fixed.
Update to ver. 1.2.2 – Added content area in Portfolio page.

8. Demo & Download

And that’s it! I hope you will enjoyed with this theme:)
If you find any bugs please let me know;)