Date: August 2016
Type: wordpress development
Client: Zen Web Themes
Portfolio Prism is a portfolio theme for WordPress that I developed both for myself and for Zen Web Themes.
I developed the Portfolio Prism theme to offer at Zen Web Themes, but I also developed it to use myself here on Zen Web Consultant. In this post I’ll go over what I wanted to accomplish with the theme itself, and what I wanted to do for Zen Web Consultant.
I’d been using the Divi theme from Elegant Themes for a couple years. That’s one of those multi-purpose themes that adds an additional layer over the standard WordPress pages and posts, giving you a more “drag-and-drop” layout experience.
I’m pretty torn on whether I like those themes or not. They’re great in that they give you a lot of extra control, and you can create many different types of websites from one theme. But I ended up feeling really stuck with it after a while. It seems like once you build a website with that kind of theme, it’s really difficult to get out of it. You have to either keep using it forever, or make a big commitment to strip your site down to the bones to redo it. That defeats one of the best things about WordPress, which is how easy it can be to change the design of your website.
I also wanted to simplify this website. I’ve been using it as my freelance/consulting site for a couple years now, and it had become a little unwieldy. I wanted to remove some features and update the portfolio items to be more consistent. I felt that the website also needed a general design update—something more minimal and without things like slideshows. I created a new version of the logo to match the logo for Zen Web Themes as well.
So, all in all, it was time for an overhaul. Since I now know how to create my own themes, I figured I could create a portfolio theme for myself and at the same time develop the next theme for Zen Web Themes. At the time of this post, you can now see the theme live on this site.
For this particular theme, the main challenges were designing a minimal portfolio theme and creating a custom post type for portfolio items. I also created some original line drawings to use in the theme demo as example portfolio items.
I suppose that calling these graphics “original” is a bit of a stretch because they’re all based on sacred geometry concepts, or the mathematics that make up the natural world. Obviously I did not come up with those ideas. However, I didn’t just steal someone else’s drawings from Google—I created my own in Adobe Illustrator. In the theme demo you can see that I also used some free stock photography to use as backgrounds, just to create more variety for the demo.
I created a custom post type for portfolio items.
This is an example of a portfolio item:
This is how it looks in the back end:
I created a special page template that can be used to create a custom About page for your website.
Below that, you get a box where you can highlight three of your main areas of expertise. This has:
And just like with the portfolio items, you also have access to the full standard WordPress content editor, so you can add anything else you want to the page.
Here’s the back end:
The homepage, portfolio index, and all archives pages have grid layouts. I used the same flexbox system that I developed for my Magazazz theme.
You can check out the tutorial I wrote for that here:
One big thing to be aware of is that this grid layout looks best if you consistently size your Featured Images for every portfolio item and every blog post.
They don’t have to be any specific size, but they should all be the same. (Bigger than 300 px is best, and I recommend 600 x 400 px or 600 x 600 px to be safe.)
This can cause a headache if you’ve been wantonly sizing your featured images in the past, or if you haven’t been creating any at all. Even now, you can see in my old blog posts that I haven’t made them all the ideal size. Many are consistent, but consistently too small because they were designed for other themes.
However, all that being said, it’s a really nice system for archives pages because it’s automatically responsive and you can create a really lovely layout if you put in the effort.