Create a Multi-Layout Portfolio with WordPress

WordPress, as a content management system, is frequently used for creating portfolio websites. With the progress of consumer interface design and functionalities, a new tendency has emerged: displaying portfolio substance in unrelated layouts. This tutorial particulars the method of creating a committed portfolio section in WordPress’ backend, and using jQuery and CSS3 to display the portfolio in a fashionable approach.

In this tutorial, we are going away to expansively use dominant facial appearance of WordPress, such as custom posts, custom taxonomies, and we’ll also inscribe a function to fetch our personal custom excerpts.

Step 1 - Installing WordPress and Initializing the Theme.

The initial step in building our portfolio website is to install WordPress. This is a easy task, and, even superior, the majority web hosts out there make available one click installers. However, if you are new to this, here is an awesome guide to facilitate you out with the installation.
Once the installation has fulfilled, we should after that create our custom theme which will show our portfolio. There are a variety of methods for creating custom themes. Several like better to create a new blank white template, even as others settle on to create child themes of the new TwentyTen template. For this lesson, we will make use of the Starker's theme, by Elliot Jay Stocks. It's a totally empty theme with no styling; it’s a immense base to create our theme on. Edit the styles.css file, and modify the theme name referenced at the top. To install the theme, merely paste the theme folder in the wp-content > themes folder. Once the theme is installed, you can make active it by obtainable to the themes page.

Step 2 - Planning the Layout

Our portfolio site will not hold much data. A basic portfolio site contains images of the projects, several tags to classify the projects, and a short explanation of each. The multi-layout theme will function in such a manner that the user can select stuck between a grid and list layout. Like numerous multi layout websites accessible, we are not going to fill a unusual page when the user clicks on the list view or the grid view. As an alternative, we’ll use AJAX to asynchronously load in the new observer. This is the essential design of how our portfolio site will emerge in grid mode:

On one occasion the user clicks on the list view manage, the entire layout will smoothly modify to a list view which will include the title of the project, the tags associated with it, and a short explanation.

Step 3 - Setting up the Backend

Intended for our portfolio, we require to register a custom post type, called “project.” We can modify every portion of a WordPress post. For example, we can modify the labels occupied, select various features for the post like to comments, thumbnails, excerpts, etc.
To execute a custom post, edit the functions.php file positioned within the theme folder. It holds a lot of predefined code, as the naked Starkers theme provides some functionalities of the evasion TwentyTen template. Don’t be scared or confused; you can add on the subsequent code either at the bottom or top of the functions.php file.
We fastener our custom function to the initialization (init) action in the subsequent technique:

This project_custom_init method will be used to register the custom post category in the WordPress database.


You can discover in recognize about the method engaged in registering a custom post variety here.
he register_post_type method requires a surname for the custom post, and a set of arguments, which define the individuality of the custom post. Firstly, we need to define the labels for the custom post. These labels will be used for the custom post in the WordPress admin.

On one occasion we’ve distinct the labels, we need to describe the set of influence for the custom post type. The labels array define earlier is going to be an argument as well. Formerly the arguments are defined, we register the custom post nature as “project”.

Create Custom Messages for the 'Project' Post

We can also optionally insert custom post for the custom post type. These post will be showed in the WordPress dashboard while we edit or update the custom post. We can do this by creating a strain for the post simplified messages in the following way:

Registering a Custom Taxonomy

We after that require significant a custom classification for the tags to be used with each of the portfolio items. You can learn more about the register classification manner here.


Go back to your WordPress dashboard, and open the media settings from the settings tag. Here, you comprise to set the evasion bulk for the portfolio image thumbnails. You’ll also observe in the sidebar that the “Project” custom post nature has been effectively registered, along with the custom classification, “tags.” We can inventory the default thumbnail size by means of the set_post_thumbnail method, but I’ll reveal another way to attain this. You can gain knowledge of more about how to place post thumbnail sizes programmatically here.

Create Demo Portfolio Items

Create several demo portfolio items by going away to projects and clicking on add new. We need a title for the project, the content, and a thumbnail. We can observe that a tag segment has also appeared and confirms that our custom classification was effectively registered. Add several tags for the portfolio stuff, as well.

Step 4 Coding and Styling The Template

Coding the static template

To craft the theme, we will first craft a static HTML/CSS3 pattern for the website. This separates the two errands of making the website look unswerving with the design, and enticing the content from the database. Coding the theme openly may be a bit puzzling for beginners occasionally – specially, if a lot of content is exist in the theme. Create three folders, named
“css”, “images” and “js,” respectively. The common formation for the main content locale will be like so:

Style the Template

Styling the template is needy on you. You can research with unlike colors and images to suit your desires. But for this template, we are arrival to create a dark grime theme and use some fun CSS3 to accomplish those slight hover effects and transparency. The slicing up of the design into metaphors is rather. As such, I won’t go over the minutiae here.
The following are the common styles for the project record. We will later do explicit styling for each grid layout manner and a list design mode depending on the current class of the folio list.


Also create note that we are not using the common opacity method of achieving transparency using CSS3. By means of the opacity method also affects the brood of the parent container on which the opacity is useful. As an alternative, we are using the RGBa method of adding up backdrop colors to the container, and using the alpha worth to control the transparency of the container.


You can learn more about the RGBa Property in this remarkable article.


This does not involve the transparency of the children fundamentals. We also need to create IE definite CSS code to sustain the alpha transparency.


In the HTML makeup, you will perceive that there is a class prearranged to the portfolio record.


Essentially, the “grid” class is used to show the list in a grid sight and the “list” class is used to show the list in a list view. In the grid mode, all the extra content is unseen from the user, and in the list manner, all the content is able to be seen to the user. We have two take apart sets of styling for each manner. The styles for the grid manner are as follows:

List manner styles are as follows. At any instant, only one of the grid or list styles is dynamic.


We after that will use jQuery UI to change the class of the folio record with deference to the layout button clicked by the user. We’re detecting the click occasion of the layout manage buttons, enticing the current class and the new class to be activated, and then using the add and remove class methods to modify the classes. We also have a set of parameters which identify the velocity of the events enchanting place.

Step 5 Integration with the WordPress Theme

Now that we have finished the static adaptation of the site, we can amalgamate it with the WordPress theme in a material of minutes. All we require to do is ring through the posts using a wp_query object with a query for the institution post type. Then, we lay the content in the respective position in the template.

Edit header.php

Initially, we need to change the header.php template, and embrace our custom JavaScript files. In this lesson, we’ll embrace jQuery using the Google’s CDN version. We will deregister the jQuery provided by WordPress, and register Google’s CDN version of jQuery. Paste the following snippet in your functions.php file.



Be in motion the css, js and images folders – that you shaped formerly for the motionless template – to the WordPress theme folder. Insert the jQuery UI custom file, and the major script file in the header. Make sure it is inserted below the wp_head technique.

Create the Main Template

At the moment, you can either build a new template in the theme – for example, page-home.php – or you can change the index.php already in attendance in the theme file. If you choose the previous process, then:

• Build a page
• Place the page’s template as the template you just fashioned.
• Go to the interpretation settings in the settings tab.
• Select the homepage as a motionless one.
• Choose the page you just fashioned as the homepage.

The template will first contain the header, which you can call using the get_header() method, then the main content, which you will code within the template itself. Lastly, the footer, which you can be included, via the get_footer() method.
The subsequent code demonstrates how you can generate a custom query by means of the wp_query object.

We are using a variable, count to count the figure of items in the catalog. We require this because we will remain only four substance in each line and assign a ‘rightmost‘ class to each fourth list constituent. The ‘rightmost‘ class eliminates any right fringe to the list elements. Alternatively, we could, in our CSS file, use the li:nth-child(4n) selector.

The subsequent code illustrates how we can loop through the posts and insert the content, as required.


Surrounded by the loop, we put in the content in the ordinary WordPress mode, using the $loop wp_query object, of course. The subsequent code displays how we can carry the thumbnail of the project post and interleave it into the template. Make appropriate note of how we use the $count variable to place in the ‘rightmost‘ class on each fourth list ingredient.


Now comes the content part where we require inserting the title, tags, short explanation and fetching the quotation for the post with a custom quotation scheme. Inserting the title is pretty easy, as are the tags. Remember, we formerly created a custom nomenclature by the name of tags.


You will become aware of that we are not by means of the common the_excerpt() process, provided by WordPress. As an alternative, we are essential our own custom technique by adding some filters. The common quotation technique proceeds a better length of quotation than we need. Hence, the custom description. We’re also changing the ‘Continue Reading…’ text added at the end of the default quotation, and replacing it with ‘Read More’. The subsequent snippet serves our purpose. This custom excerpt method comes in handy for profusion of situations.

Step 6 Conclusion

The over technique of creating a multi-layout portfolio is relatively undemanding and uses basic CSS and jQuery tricks to realize the result. Even superior, these techniques can be functional to a variety of projects. Other methods in this lesson, like custom post types, custom taxonomies and adding filters to the passage technique, can be used in various other inventive conducts, as well!