Never miss a post - Subscribe To My RSS Feed and receive updates on new posts related to growing your Internet business!

How I Designed My Blog – Summary of Platform, Theme and Plugins

Keller Hawthorne | June 9, 2009 | 23 Comments

Blogging 101

I have received a TON of emails asking me what plugins I use on FresheVenture.com, how I designed certain elements on my blog, and what theme I use. After four days of being stuck in bed sick, I’m ready to get back to blogging and what better way to start the week off then to answer your questions! In this article, I will discuss my blog design, list plugins I use, and answer any of your questions in the comments section below.

The Platform

I created FresheVenture.com’s design in April 09 using Photoshop. At that time, I did not intend to use WordPress. In fact, I initially used Interspire’s Website Publisher software. Interspire has awesome website creation tools and I really liked their Website Publisher platform.

In late April 09, I decided to transfer my blog to WordPress for several reasons:

1. When I first learned about WordPress, I was told it was not a good option for CMS (content management system). Since my website was going to be based entirely on content, I wanted to use a platform that would support it. I chose to work with Interspire as Website Publisher is one of the best CMS tools available.

Shortly after, I found out that WordPress had undergone several updates that helped to transform it into a worthy CMS. With category control, I became convinced WP would meet my needs.

2. I really love the Plugins available for WordPress. Website Publisher has a similar “module” feature that is now open source – inviting developers to begin creating new features (or plugins) for it. But, their developer community is nothing compared to WP’s. It was a tough choice to make, but plugins helped sell me on WordPress.

3. I’ve taken on several WordPress web design clients this year and I like to have as much experience with my clients’ website platforms as possible. If I can’t figure it out, how am I supposed to help others’? This would be a great opportunity for me to become accustomed to WP.

WordPress seemed to be the best way to go. It was sad leaving Website Publisher behind, but I’m sure I will use it again in the future.

The Design

Design Transfer

When I first attempted to transfer my design to WordPress, I became extremely frustrated. The default css code for WP is (in my opinion) not well organized for new WP users. Since I was still in the beginning stages of understanding the WP platform, I made a lot of mistakes in transferring my original CSS (I broke the layout, made the sidebar appear underneath the main column, etc). I got so frustrated that I almost gave up on the transfer. Fortunately, I don’t take “no” for an answer, so I continued on.

WP Theme

After beating my head against a wall for several weeks, I decided I would purchase a WordPress theme to use as the skeleton of my design. I hoped this would at least provide me with a foundation to work with. A friend referred me to StudioPress where I purchased the Lifestyle Theme. Finally, css I could work with!

StudioPress has done a FANTASTIC job at organizing their css. Within an hour of uploading the theme to my blog, I had my original design mimicked perfectly. Since I did not create the design with WP in mind, their theme not only helped me recreate my design, it also took care of the areas I hadn’t thought about yet (comments, archives, etc). If you’re not comfortable with CSS, StudioPress’s designs are absolutely gorgeous as is – you don’t need to customize them the way I did.

Basic Design Elements

When I designed FresheVenture.com, the word “fresh” became my inspiration. I wanted the design to be clean, simple, and happy. Blue and orange are complimentary colors and tend to look awesome on websites, so they became my dominate colors.

Since my online brand image was new, I wanted my logo to STAND OUT so people would remember me. Therefore, I made my logo much bigger than I normally would. In the future, once my online brand is more known, I will resize the image in order to use that space for something else.

Remember, every square inch (or should I say pixel) of your website is prime real estate and should be used appropriately.

One of the areas of the Lifestyle Theme I customized the most was the home page. I removed the Featured Content Gallery because I felt my home page was too busy. I really love FCG, but it wasn’t right for what I had in mind. I may use it again in the future though. I customized my homepage through the php files included in the theme. I hardcoded my customizations, which means I altered CSS, HTML and PHP. If you don’t feel comfortable with code, I highly suggest you NOT try to customize this on your own. Get help from a web designer.

Getting my post images to appear on my home page as well as changing the size of the excerpts was the most time intensive task. I had to learn how to alter the formatting.php file that comes with WordPress.

My ads are all driven by OIOpublisher. You can read my full review of it in my article, The Best Ad Manager for WordPress – OIOpublisher.

Social Media Buttons

I’ve been asked about these a lot, so here’s the low down. The social media buttons in the “Welcome” widget on my sidebar and footer are NOT plugins. I searched Google for social media icons, downloaded some free ones, resized them in Photoshop and manually added them to my blog. This is easy to do if you feel comfortable with HTML. If not, there are a ton of plugins available for WordPress that provide really nice icons. To find some great icon designs, check out http://webdesignledger.com/freebies/the-best-social-media-icons-all-in-one-place and http://www.smashingmagazine.com/2009/01/23/friday-freebies-flavours-icon-set-and-cute-tweeters-icon-set/.

Social Media Buttons

Subscription Box

If you’ve looked at the Lifestyle Theme, you will notice an ad in the right side of the header. This ad space is “widgitized” (you get to customize it in your widgets admin). This made it really easy for me to insert my newsletter subscription box without the need to hardcode it.

My Signup Box

If you own a blog, most likely your most important call-to-action is your newsletter subscription. A great place to display your signup form is the top of your sidebar. If you want it to stand out even more, you may want to add it to your header as I have done. Simply insert code provided to you from your email management system (I use AWeber). To finish it off, I created a custom button (“Let’s Stay in Touch”). This is my own copyrighted image, but you can easily create your own in Photoshop.

Tip Box

I created my tip boxes by designing a light bulb in Photoshop and then styling the boxes through XHTML.

Blockquotes

The Lifestyle theme comes complete with css for blockquotes. I simply customized the existing coding.

The Plugins

Ok, now we’ve come to the FUN part! What plugins do I use? Below, I’ve listed each one as well as the description found on my plugins admin section:

Akismet

Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need a WordPress.com API key to use it. You can review the spam it catches under “Comments.”

All in One SEO Pack

Out-of-the-box SEO for your WordPress blog.

Category Order

The Category Order plugin allows you to easily reorder your categories the way you want via drag and drop.

Dagon Design Sitemap Generator

Generates a fully customizable sitemap By Dagon Design.

DISQUS Comment System

The DISQUS comment system replaces your WordPress comment system with your comments hosted and powered by DISQUS.

FeedBurner FeedSmith

Originally authored by Steve Smith, this plugin detects all ways to access your original WordPress feeds and redirects them to your FeedBurner feed so you can track every possible subscriber.

Google XML Sitemaps