We develop enthralling web experiences.


Create a Multi-Layout Portfolio with WordPress

WordPress, as a content management system, is often used for creating portfolio websites. With the evolution of user interface design and functionalities, a new trend has emerged: displaying portfolio items in different layouts. This tutorial details the process of creating a dedicated portfolio section in WordPress’ backend, and using jQuery and CSS3 to display the portfolio in a classy manner.

Live Demo Download

It would be awesome if you could like us on Facebook or subscribe to our feed...

My latest tutorial for NetTuts discusses about how we can use WordPress as a CMS and flex it to our needs to create a stunning portfolio with multiple layouts. In this tutorial, we are going to extensively use powerful features of WordPress, such as custom posts, custom taxonomies, and we’ll also write a function to fetch our own custom excerpts. This is what we are going to create

Create a Multi Layout Portfolio Using WordPress

The multi-layout theme will function in such a way that the user can select between a grid and list layout.This is the basic design of how our portfolio site will appear in grid mode:

Multi- Layout Portfolio - Grid View

Once the user clicks on the list view control, the whole layout will smoothly change to a list view which will contain the title of the project, the tags associated with it, and a short description.

Multi Layout Portfolio With WordPress - List View

Check out the complete tutorial on Nettuts and get started on creating that cool portfolio you always wanted! Do share your creations, suggestions with us :)

Discussion 3 Responses

I wish I knew how to do this a few days ago I spent an absolute age trying to work this out. Thank you for the really informative tutorial this is great website and very useful.

Absolutely useful website. I learned more from this post. especial the custom post type function in wp. I havent heard it before. many thanks.

Yeah, I didn’t know about the custom post type function for wordpress either. And thanks for the other useful things I found around here.

Trackbacks and Pingbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>