Designing a Portfolio with Wordpress


Designing a Portfolio

I redesigned my portfolio in summer 2009 using WordPress thinking of the three things mentioned previously. The whole idea was to make it easy to update, offer the content smartly, and present the services provided as a designer, developer, and writer. I wanted to make use of big images and put my design work in the center, featuring big graphical blocks. However, I also wanted to make sure that any new writing gigs got some exposure when they came up, so that was something to consider as well. There isn’t always a graphic chunk to show off, and that means that I couldn’t build it entirely around that.

I leftmy weblog out of my portfolio this time, since it can get a bit crowded. Most of the time I advise against this, but for this particular project it made sense to move the weblog away from the portfolio. My WordPress setup for this project was simple. First of all, I created a category for each type of project I wanted to be able to show off. I began with Design and Writing, but I also decided to add a category for Announcements. You never know. The reason for using categories is that I can easily use conditional tags to check whether something belongs to a specific category or not, and act accordingly.

Each project I wanted to display was a post in one of these categories, never several at once. I also tagged the posts for more sorting, especially with client names and types of gigs, things that may be interesting to query for in the future. The decisions I implemented in my own portfolio will be the basis of the following discussion and examples.

The Design Category

Posts in the Design category will be image-based, featuring a big fat image and some text on the front page. When the visitor clicks the image, they end up on the actual post, which contains more images, perhaps a gallery of elements you’re particularly proud of, and as much text as you want.

This means that you don’t want to show the post heading on the front page, at least not at the very top. You want the image, and text on the image. The solution for this is using custom fields, where you just store the URL to the background image in a custom field, and then query it on listings pages. You can check for what category each post is in listings, hence you’re able to output it differently.

An alternative solution would be to put whatever you wanted to display in listings in the excerpt field, and then use the_excerpt() to output things. However that would mean that you would either have to settle for a linked image only, or that you would have had to hack a lot of HTML code for each post. The whole point is to make updating simple and quick, and you would probably much rather just upload the image and paste the URL in a custom field. Besides, the solution we’re going for lets you output a heading in plain text, and that’s a good thing for search engines in particular. The single post view will use the post_class() styles to make smaller adjustments to the presentation of the projects.

The Writing Category

Posts in the Writing category will be text-based, since it makes sense. We’ll output the post title in listings, and then use the_excerpt() to describe the gig in question. Using large fonts, you can achieve the visual style you’re after and make it stand out. You could control the font size and basically all the stylings using the classes that post_class() puts on the containing div, but since you want to use the_excerpt() in this case, you need to have the conditional check for what category the post is in.

Single post view specials for Writing gigs will be controlled with the post_class() styles, just like with the Design category.

The Announcement Category

This is the default category and the code for this one is the loop you want to fall back on. In other words, if a post is in neither the Design nor the Writing category, this is the code to be used. In short, it’s a pretty basic loop. Since you want to be able to publish full announcements in your update stream, as well as longer ones with a read more link, we’ll use the_content() rather than the_excerpt(). Other than that, there’s nothing fancy here.

Single post view will be similar to the other two categories, but naturally you can add some custom styling to show that it is an announcement. There should be no doubt leftin anyone’s mind that post_class() is anything but a great tool, especially when it comes to sites like this.

Services and Contact Pages

These are simple. Just create a page.php template and make it general enough to work with pages that portray your services, as well as contact and other possible information pages. It is easy enough to add some custom styling or even a completely different behavior if you want to, thanks to the Page template features.

Legal Disclaimer

Our website is not responsible for the information contained by this article. Webworldarticles.com is a free articles resource thus practically any visitor can submit an article. However if you notice any copyrighted material, please contact us and we will remove the article(s) in discussion right away.


This article was sent to us by: Juwe T. at 05132010

Related Articles

1. Wordpress Plugins and Functions PHP
Plugins and Functions PHP WordPress themes and plugins usually work pretty much by themselves, coming together only when it comes to implementing features. Th...

2. When to Use Wordpress functions php
When to Use functions.php When, then, is it really a good idea to use functions.php? I have a rule for that too: only use functions. php when the added function...

3. Are you using WordPress as a CMS
WordPress as a CMS Using WordPress for things other than blogging is something that comes naturally to a lot of developers today, but not so much for the ge...

4. Things to Consider When Using WordPress as a CMS
Things to Consider When Using WordPress as a CMS So you’re considering using WordPress as a CMS for a project huh? Great, and probably a good choice too...

5. Trimming WordPress to the Essentials
Trimming WordPress to the Essentials Usually, when doing work for clients or other people within your organization, you’ll have to think a little bit diff...

6. Wordpress Static Pages and News Content
Static Pages and News Content I touched upon static Pages and categories as a news model previously. It is truly a great tool whenever you need to roll out a ty...

7. Making Widgets a Little More Dynamic
Putting Widgets to Good Use Widgets and widget areas are your friends when rolling out WordPress as a CMS. It is perhaps not as important for the small and stat...

8. Wordpress The Header and Footer Templates
The Job Board The first special project we’ll work on is a job board. You have probably seen this kind of site already, where people and companies can pos...

9. When using TDO Mini Forms to build this solution
Receiving the Jobs There are numerous ways to receive the actual content for the job listings. The easiest way would be to just have people e-mail listings to y...

10. Running a Web Shop on WordPress
WordPress and E-Commerce It goes without saying that WordPress can be used to sell stuff. In its simplest form you’ll run a weblog or traditional site wit...