creation of this site!

I’ve been working on this portfolio website for awhile now. I consider it a polished version of its predecessor. Designs are different, but I was looking to create something a bit more professional and in the long-run, ease of use. I wanted this to be my first design I get posted up on some theme websites and hopefully make a little money off of it.

Anyways, I’m going to go over the creation of this website. What I had issues with, what worked well, plugins used, and why it’s so cool.

why its awesome

Aside from a sleek minimal design and the full responsiveness, the back end is what is so fun about it. I mentioned ease of use right? My end goal was to publish a portfolio style theme for WordPress that nearly anyone can use with minimal web experience. This means I wanted to automate nearly everything. The main feature, the portfolio display, uses masonry, a jQuery layout script. Masonry in conjunction with the WordPress loop and a custom post type makes for one of the easiest features this theme provides. Let me explain…

how it works

menu-exampleThe custom post type (aka the Portfolio Menu) is labeled “Portfolio” right in the WordPress dashboard menu. This makes it so the user can click the menu Portfolio, click the “add work” button, and make a normal post with their image. The user can choose to add information with the image if they choose to or not, but if you do, it would require some formatting (adding a heading or paragraphs) aside from the post title. WordPress takes the image, creates a thumbnail, displays it on the front page of the site, and then has masonry handle the cool layout it does. Pretty easy right?

plugins

I also use a plugin (Advanced Custom Fields) for the purpose of adding details about each image. This is very easily done and doesn’t take much to display the information you want. Basically this plugin allows me to add fields to the “Portfolio” menu. These fields are set to display a few lines of text each, details of the image (such as what kind of project or for what client), and display them under the image. It then takes anything I write about the image in the main post area and displays that also. Its easier to see then read about, so go ahead and view one of my works under Portfolio.

I use something similar to this for the “services and pricing” section. I wanted to be able to organize and edit single posts for each service, so they wouldn’t all clutter one page. This was done by another custom post type. Now all I have to do is go to the dashboard, click the “Services” menu, and see all the posts under it. I can go in to each one, change what I want, and it is all more easily managed.

For even more ease of use I use three main plugins. Auto Post Thumbnail, which automatically sets the featured image to the first image posted inside of a post (great for setting up for the first time when you are doing a large amount of images). Post Types Order, which allows me to go into my “Portfolio,” “Services,” or “Posts” and very easily re-order them however I want. That means if I decide I am getting a lot more logo work then web design, I can re-order my “Service” list in just a few seconds. And the last plugin, Custom Post Type UI, which allowed me to setup the custom post types (the portfolio and services menus) quicker, and be able to customize them should I desire.

I also wanted to feature a blog this time around. This was one reason why I chose to do the custom post types, I could manage the blog under my normal posts, and the “Portfolio” and “Services” would be separated and more easily managed. This is my first ever blog post, anywhere, and hopefully won’t be the last. I’m pretty happy that it’s on my own custom WordPress themed website.

what is to come

I will continue working on the site and hopefully start up freelancing very soon. Kind of why I built a portfolio site in the first place! I plan on making some small theme edit options for more customization before I try to get people to buy the theme, such as a color picker for changing the titles and nav main colors, adding a easier way to add a logo, and maybe having another background option for a lighter overall feel.

I also want to add comments to the blog and perhaps a testimonial loop somewhere. During the creation of this theme, I have learned so much. I am actually working on (another) boilerplate to get some premium themes underway. I am using the _s theme as a base and integrating Option Tree into it. This will let me either make some small edits on the fly if needed, but really it is for the user who will buy it. Being able to change the color options, typography, and possibly layout should appeal to a lot of potential buyers. I am teaming up with someone who is just as eager as I am to try our hand at theme creation and design. As we are both designers from the same college, I will be responsible for most of the back end work to start, but after that we will have a solid theme to design and hopefully pay for our college loans!


One thought on “creation of this site!

  1. Jason Penezich says:

    Hey me! Great article. I’m going to put some text in here so people may not notice I’m talking to myself and I can have a free test comment on my blog!

Leave a Reply