How to Create a Web Design Portfolio Page in WordPress: Part 2

Portfolio

In the previous post at FWebDe, we started creating a portfolio page for a WordPress blog, using the WordPress Links Manager. If you haven't already, you can go and read the first part of this tutorial.

Today, we will be going through the portfolio we created, and styling it with some CSS, and adding some small animation jQuery.

Styling With CSS

Now that we have the functionality working correctly for our portfolio, we can make it look pretty. Open up style.css in your web browser, and we can get started editing the CSS.

First, make sure that you have the .clearing class defined in your CSS.

.clearing {
    clear: both;
}

Then, we can set the style for each item of the portfolio. We'll give it 40px of bottom padding, and a 1 pixel thick border.

.portfolio .portfolio-item {
    padding-bottom: 40px;
    border-bottom: 1px solid #ccc;
}

We don't want an extra space and a border under the last portfolio item, though. So, we'll use the :last-child pseudoclass to get rid of those.

.portfolio .portfolio-item:last-child {
    padding: 0;
    border: 0;
}

Next, we'll style the container around the portfolio image. It'll be floated to the left, with a border around it.

.portfolio-image-container {
    width: 150px;
    height: 150px;
 
    float: left;
    margin: 0 15px 15px 0;
    border: 2px solid #ddd;
    overflow: hidden;
}

Lastly, we'll style the "Visit" link. It'll look like a simple button, with nice rounded corners.

.portfolio a.visit-link {
    background: #BCCAD1;
    padding: 5px 7px;
    border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    text-decoration: none;
    color: #0D557D;
}
 
.portfolio a.visit-link:hover {
    background: #9BC2D6;
}

Now, you should have a fully functioning portfolio page on your WordPress site, that looks good. You can stop here if you want, or you can continue reading to learn how to make it even better.

Enhancing Your Portfolio With jQuery

To add a little bit extra to our portfolio, we'll add in a little jQuery animation. When the user hovers over the image, a little box containing the short description of the project will slide up, and it'll slide back down when they move their mouse away.

Go back into your portfolio.php template file, and add in the following code right after the portfolio image inside the foreach loop.

echo '<div class="portfolio-desc"><p>' . $link->link_description . '</p></div>';

This will add the short description of the project inside the same container as the image.

Back in style.css, we'll be using absolute positioning to make the short description box easy to work with in jQuery. Here is how we'll be styling it:

.portfolio-desc {
    width: 150px;
    height: 35px;
    padding: 4px;
 
    position: absolute;
    bottom: -43px;
    left: 0;
 
    background: #295873;
    background: rgba(41, 88, 115, 0.85);
 
    color: #ddd;
    font-size: 85%;
}

This makes the box 35px high, with a padding of 4px, and a transparent background with rgba. There is also a fallback colour, just in case if the browser this is being viewed in does not support rgba.

To make it hidden, below the image, we set bottom to zero, minus the height of the container plus the padding times two.

But to make the box absolutely positioned within the container, we have to make a small change to .portfolio-image-container:

position: relative;

Now, the short project descriptions should be hidden from view.

The JavaScript

Before we get started with the jQuery, we have to include it, the right way in WordPress. Open up header.php, and add in the following code before wp_head();.

<?php wp_enqueue_script('jquery'); ?>

This is the proper way of including libraries in WordPress, and it helps to prevent the same library from being included twice, wasting system resources.

Create a file called portfolio.js. This will contain all of our JavaScript code.

In header.php, right before </head>, add in the following code.

<?php if (is_page_template('portfolio.php')): ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/portfolio.js"></script>
<?php endif; ?>

This will check if the current page is using our portfolio template. If it is, it can include the portfolio.js JavaScript file from the template directory.

To make sure this is working correctly, add document.write('test'); into portfolio.js. If it was included properly it should display "test" at the top of your portfolio page, and not on any other pages. If everything is working correctly, you can delete that line, and continue.

The JavaScript used in this example is quite simple:

jQuery(document).ready(function() {
 
    jQuery('.portfolio-image-container').hover(function() {
 
        jQuery(this).find('.portfolio-desc').animate(
            { 'bottom' : '0' },
            { queue : false, duration : 200 }
        );
 
    }, function() {
 
        jQuery(this).find('.portfolio-desc').animate(
            { 'bottom' : '-43px' },
            { queue : false, duration : 200 }
        );
 
    });
 
});

When the user hovers over .portfolio-image-container, jQuery gets .portfolio-desc, and changes the value of bottom to 0, bringing it up to the visible portion of the box over 200 milliseconds. Then, when the user moves their mouse away, it sets the value of bottom back to its original value (-43px), again over 200 milliseconds.

Go to your portfolio page in your browser, and test this out. If everything went well, you should get a nice, smooth animation of a description box sliding up when you hover over one of your portfolio's images.

Conclusion

Using the WordPress Links Manager is an easy way of creating a portfolio page for WordPress, using only tools that are built right into WordPress. You can use it to create a really nice portfolio without spending money on premium WordPress themes, or worrying about plugins slowing down your site.

Do you have any questions, or problems? Have you used a similar technique to do this? Can you think of any other ways a technique like this can be used?

Be sure to leave a comment, and share your thoughts.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

8 Comments

  1. Stevesed
    January 6, 2010

    Cool post, with some excellent ideas!

    But I think that the javascript should be closer to the bottom of the page because it will maek it look like the page is loading faster.

    • January 6, 2010

      You're right. After I published this post, I realized that it would probably be better to keep the scripts in the footer.

      That's an excellent tip to remember!

  2. marja
    January 28, 2010

    I can´t seem to get the jquery to work. All the rest is fine, but nothing happens when I hover over the image.
    I have no knowledge of jquery so I don´t know what I´m doing wrong. I have followed your steps exactly, although I don´t knwo where to put the test line in portfolio.js.

  3. marja
    January 28, 2010

    You can ignore my previous comment. I didn´t include the jquery before wp_head();.
    It works fine now, thanks!

    • January 28, 2010

      Good to hear that it's all working now!

  4. September 13, 2010

    Very cool! My portfolio page looks 10x better now - thanks for this helpful information. I'll make sure to use WordPress Links Manager whenever I put together Portfolio pages in the future as well.

  5. July 3, 2011

    Hi!
    I can't see demo
    thanks

Trackbacks/Pingbacks