In this quick tutorial I’ll show you how to create a simple portfolio slider in wordpress using cu3er.

Introduction

Cu3er is an excellent and visually impressive 3d flash image rotator. Credit goes to Stefan Kovac for putting it all together. You can find all the files and documentation you’ll need to familiarize yourself with the program over at http://www.progressivered.com/cu3er/

Or you can get started straight away by downloading the latest release here (currently beta 0.9.2)

In this tutorial, I’ll be showing you how to set up a simple portfolio slider in Wordpress which will allow you to automatically display your work on your homepage using cu3er (similar to my own homepage)

Let’s get started!

Step 1. Creating the portfolio category

I’m going to assume you already have a good working knowledge of how Wordpress operates. I’ll try to be as comprehensive as I can, but if you get lost,, I suggest you head over to the Wordpress forums and have a good read of the codex.

Okay. Once you’ve installed Wordpress, create a new category (posts->categories). Give the fields the following values:

Category name: Portfolio
Category slug: portfolio (keep it lowercase)
Parent: none

Step 2. Getting the category id

Once this category is created, we have to find it’s id value. We use the id instead of the name because it’s unique and stays constant. This means that we can change the name, slug, description etc but the id remains the same. (no php errors thank you)

Hover your mouse over the title of the newly created category. Right click and copy the link url. Paste it somewhere. You should get something like this

http://www.yoursite.com/wp-admin/categories.php?action=edit&cat_ID=8

Make note of the cat_ID. This is what we’ll be using.

Step 3. Adding a portfolio item

Let’s add some work for your portfolio. The portfolio items are handled as posts, so let’s add a new entry. (posts->add new)

Enter the title of your project, a small description in the excerpt and whatever body of text you want in the main content area.

Step 4. Adding the image for cu3er

Using the Wordpress upload/insert functions, upload the image you want displayed on the homepage via cu3er and copy it’s url (Link url field)

note: Make sure all your cu3er images are the same dimensions or it’ll look funky as hell.

Without inserting the new image into the post, close the upload (not the browser) window.

Step 5. Creating the custom field

Create a new custom field named slider and paste the image url as it’s value.

Step 6. Attaching it to the portfolio category

This is the tricky part :). Make sure the portfolio category is checked. Once that’s finished, update your post and close the window.

Step 7. Installing Cu3er

Upload the cu3er files to your site like so:

• /wp-content/
  • /themes/
    • /yourtheme/
      • /library/
        • /cu3er/
          • cu3er.swf
          • slideshow.php
          • /js/
            • /swfobject/
              • swfobject.js
              • expressInstall.swf

Step 8. Creating the php/xml file

Open up the slideshow.php file and add the following to the top:

You can customize this whatever way you like, but for me I chose the following cu3er settings:

Now it’s time to call the portfolio items and close <cu3er> tag

Here’s a brief explanation of what’s going on.

Reads the file as xml:

Configure these to customize the amount of projects you want showing up and the category you want to pull them from. (step 2)

Gets the image url from the custom field slider

On my portfolio detail page I gave each project a specific div which related to it’s ID value. This meant that when the user clicked on the specific slide it would take them to the portfolio page along with the anchor to that div.

Step 9. Adding Cu3er to the header

Add the following to the header.php file:

<!-- SWF object -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/cu3er/js/swfobject/swfobject.js"></script>

<!-- CU3ER slider -->
<script type="text/javascript">
var flashvars = {};
flashvars.xml = "<?php bloginfo('template_directory'); ?>/library/cu3er/slideshow.php";
flashvars.font = "font.swf";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("<?php bloginfo('template_directory'); ?>/library/cu3er/cu3er.swf", "cu3er-container", "600", "350", "9", "expressInstall.swf", flashvars, attributes);
</script>

Step 10. Adding cu3er to your template page

If you’re using Wordpress for your portfolio, it’s likely that you’re using a custom template for your landing page. Add the following where you’d like cu3er to show up:

Conclusion

That’s all there is to it. If you’re looking to minimize load on your server, I’d recommend that you create a condition that the cu3er settings in the header only appear on pages which require them. Even if you don’t, it’ll still work. It’ll just be redundant.

I wanted to try to emulate the method they use in the channel 4 adverts. The base idea turned out okay. Could use some refinement.

OOH! Shiney from Red King on Vimeo.

It’s been a long week of a design and development. I encountered my fair share of bugs that had me up until the wee hours of the morning but I’m finally (and hopefully) finished with the site for now. It’s great to have it finally completed and bug free. I’ve been wanting to start my own blog for a while now. Nothing major or revolutionary, and definitely not a “dedicated” blog. Merely a platform to spread the gospel according to design and development.

Keep an ear out – or better yet, subscribe to the rss feed to receive updates. I’ll be posting a lot about web design and web development (particularly Wordpress) and I’ll also be providing some tutorials on the things that I’ve learnt.