One of the features that I worked hard to incorporate into my new site were WordPress Custom Post Types. In the past, I had “tricked” WordPress into showing certain posts as portfolio entries using categories and other means. On my new site, my portfolio got its own custom post type. Likewise, the team members on the About page are also custom post types.
There are lots of tutorials online about implementing custom post types. Most of the tutorials I found did not cover some aspects I was hoping to incorporate into my new post types. I wanted to include some custom meta boxes, and make use of them and the other elements in non-traditional ways. The best custom post type tutorial I found that came close was on ThinkVitamin.com.
The tutorial was perfect for what I was looking for! It implemented lots of the features I wanted to make use of. I re-purposed the meta boxes, and made them my own. Otherwise, my portfolio creation dashboard looks very similar to what is featured on Think Vitamin.
Custom Meta Boxes
One thing I wanted to do differently, was to have images of my beautiful websites and graphic creations on each portfolio entry. I needed a way to insert images systematically. I wanted to have a defined thumbnail image, an enlarged image and title tags on each image. I came up with a workable solution for the time being. I just upload a thumbnail image, an enlarged image, and type in the title tag into the meta boxes. I have made room for up to 5 images per portfolio listing. I would like a way to do this more cleanly. Like an “add more” button, and be able to add as many or as few images as I would like. (In the works!) Beside that one issue, I am happy with my results.
Porting to the Front End
The next dilemma was implementing all these neat features on the front end. I mean, now I have all this great content, I want to show it off! I wanted the text content to all be shown in the sidebar of the portfolio pages. I called each meta box in where I wanted, and used the main content in the sidebar as well. The main part of the screen just shows the portfolio images. To call information from the meta boxes, I made use of the WordPress function
Like the portfolio custom post type from the Think Vitamin article, I used the custom taxonomy (aka… Custom Categories) to list the skills used to create each portfolio piece. I wanted to have this listed on my portfolio page. However, I did not want the list items link to a category page, which is default if you use
echo get_the_term_list( $id, $taxonomy, $before, $sep, $after );. I did use the function to get the listing of custom taxonomy. However, to output the list, I used
echo strip_tags(); to strip away all the markup except for the “li” tags. I know this was a little anal, but when you have something in mind, you try to make it happen. Right?
I hope that gives a brief insight into how I made my new portfolio come to life. It was hard work, but fun all the same. Next time, I hope to cover how I made the team members come to life on the about page.
As always, thanks for reading!