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.


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.


Step 1 - Installing Wordpress and Initializing the Theme.

The first step in creating our portfolio website is to install Wordpress. This is a simple task, and, even better, most web hosts out there provide one click installers. However, if you are new to this, here is an awesome guide to help you out with the installation.

Once the installation has completed, we should next create our custom theme which will display our portfolio. There are various methods for creating custom themes. Some prefer to create a new blank white template, while others choose to create child themes of the new TwentyTen template. For this tutorial, we will use the Starker's theme, by Elliot Jay Stocks. It's a completely blank theme with no styling; it's a great base to build our theme on. Edit the styles.css file, and change the theme name referenced at the top. To install the theme, simply paste the theme folder in thewp-content > themes folder. Once the theme is installed, you can activate it by going to the themes page.


Step 2 - Planning the Layout

Our portfolio site will not contain much data. A basic portfolio site contains images of the projects, some tags to identify the projects, and a short description of each. The multi-layout theme will function in such a way that the user can select between a grid and list layout. Like many multi layout websites available, we are not going to load a different page when the user clicks on the list view or the grid view. Instead, we'll use AJAX to asynchronously load in the new viewer. This is the basic design of how our portfolio site will appear in grid mode:

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.


Step 3 - Setting up the Backend

For our portfolio, we need to register a custom post type, called "project." We can customize every aspect of a WordPress post. For example, we can change the labels involved, select various features for the post like comments, thumbnails, excerpts, etc.

To implement a custom post, edit the functions.php file located within the theme folder. It contains a lot of predefined code, as the naked Starkers theme provides some functionalities of the default TwentyTen template. Don't be scared or confused; you can append the following code either at the bottom or top of the functions.php file.

Don't leave any empty space at the end of the functions.php file.

We hook our custom function to the initialization (init) action in the following way:

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

You can learn in detail about the method involved in registering a custom post type here.

The register_post_type method requires a name for the custom post, and a set of arguments, which define the characteristics 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.

Once we've defined the labels, we need to define the set of arguments for the custom post type. The labels array defined earlier is going to be an argument as well. Once the arguments are defined, we register the custom post type as "project".

Create Custom Messages for the 'Project' Post

We can also optionally add custom messages for the custom post type. These messages will be displayed in the WordPress dashboard when we edit or update the custom post. We can do this by creating a filter for the post updated messages in the following manner:

Registering a Custom Taxonomy

We next need to define a custom taxonomy for the tags to be used with each of the portfolio items. You can learn more about the register taxonomy method here.

Return to your WordPress dashboard, and open the media settings from the settings tab. Here, you have to set the default size for the portfolio image thumbnails. You'll also notice in the sidebar that the "Project" custom post type has been successfully registered, along with the custom taxonomy, "tags." We can register the default thumbnail size using the set_post_thumbnail method, but I'll demonstrate another way to achieve this. You can learn more about how to set post thumbnail sizes programmatically here.

Create Demo Portfolio Items

Create some demo portfolio items by going to projects and clicking on add new. We require a title for the project, the content, and a thumbnail. We can see that a tag section has also appeared and confirms that our custom taxonomy was successfully registered. Add some tags for the portfolio items, as well.


Step 4 Coding and Styling The Template

Coding the static template

To create the theme, we will first create a static HTML/CSS3 template for the website. This separates the two tasks of making the website look consistent with the design, and fetching the content from the database. Coding the theme directly may be a bit confusing for beginners sometimes - specially, if a lot of content is present in the theme. Create three folders, named
"css", "images" and "js," respectively. The general structure for the main content area will be like so:

Style the Template

Styling the template is dependent on you. You can experiment with different colors and images to suit your needs. But for this template, we are going to create a dark grunge theme and use some fun CSS3 to achieve those subtle hover effects and transparency. The slicing up of the design into images is rather. As such, I won't go over the details here.

The basic styling for the main container and the layout controls are as follows

The following are the general styles for the project list. We will later do specific styling for each grid layout mode and a list layout mode depending on the current class of the folio list.

Also make note that we are not using the general opacity method of achieving transparency using CSS3. Using the opacity method also affects the children of the parent container on which the opacity is applied. Instead, we are using the RGBa method of adding background colors to the container, and using the alpha value to control the transparency of the container.

You can read more about the RGBa Property in this awesome article.

This does not affect the transparency of the children elements. We also need to create IE specific CSS code to support the alpha transparency.

In the HTML structure, you will notice that there is a class given to the portfolio list.

Basically, the "grid" class is used to display the list in a grid view and the "list" class is used to display the list in a list view. In the grid mode, all the extra content is hidden from the user, and in the list mode, all the content is visible to the user. We have two separate sets of styling for each mode. The styles for the grid mode are as follows:

List mode styles are as follows. At any moment, only one of the grid or list styles is active.

Use jQuery to Add Effects

We next will use jQuery UI to change the class of the folio list with respect to the layout button clicked by the user. We're detecting the click event of the layout control buttons, fetching the current class and the new class to be activated, and then using the add and remove class methods to change the classes. We also have a set of parameters which define the speed of the events taking place.


Step 5 Integration with the WordPress Theme

Now that we have completed the static version of the site, we can integrate it with the WordPress theme in a matter of minutes. All we need to do is loop through the posts using a wp_query object with a query for the custom post type. Then, we place the content in the respective position in the template.

Edit header.php

First, we need to modify the header.php template, and include our custom JavaScript files. In this tutorial, we'll include 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.

Move the css, js and images folders - that you created previously for the static template - to the WordPress theme folder. Insert the jQuery UI custom file, and the main script file in the header. Make sure it is inserted below the wp_head method.

Create the Main Template

Now, you can either create another template in the theme - for example, page-home.php - or you can modify the index.php already present in the theme folder. If you choose the former method, then:

  • Create a page
  • Set the page's template as the template you just created.
  • Go to the reading settings in the settings tab.
  • Select the homepage as a static one.
  • Select the page you just created 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 following code demonstrates how you can create a custom query using the wp_query object.

We are using a variable, count to count the number of items in the list. We need this because we will keep only four items in each row and assign a 'rightmost' class to every fourth list element. The 'rightmost' class eliminates any right margin to the list elements. Alternatively, we could, in our CSS file, use the li:nth-child(4n) selector.

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

Inside the loop, we insert the content in the normal WordPress way, using the $loop wp_query object, of course. The following code shows how we can fetch the thumbnail of the project post and insert it into the template. Make proper note of how we use the $count variable to insert the 'rightmost' class on every fourth list element.

Now comes the content section where we need to insert the title, tags, short description and fetch the excerpt for the post with a custom excerpt method. Inserting the title is rather easy, as are the tags. Remember, we previously created a custom taxonomy by the name of tags.

You will notice that we are not using the general the_excerpt() method, provided by WordPress. Instead, we are defining our own custom method by adding some filters. The general excerpt method returns a greater length of excerpt than we require. Hence, the custom version. We're also modifying the 'Continue Reading...' text added at the end of the default excerpt, and replacing it with 'Read More'. The following snippet serves our purpose. This custom excerpt method comes in handy for plenty of situations.


Step 6 Conclusion

The above method of creating a multi-layout portfolio is quite simple, and uses basic CSS and jQuery tricks to achieve the result. Even better, these techniques can be applied to a variety of projects. Other techniques in this tutorial, like custom post types, custom taxonomies and adding filters to the excerpt method, can be used in various other innovative ways, as well!

Tags:

Comments

Related Articles