How I Designed My Blog – Summary of Platform, Theme and Plugins
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.
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.
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.
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.
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/.
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.
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.
I created my tip boxes by designing a light bulb in Photoshop and then styling the boxes through XHTML.
The Lifestyle theme comes complete with css for blockquotes. I simply customized the existing coding.
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 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.”
Out-of-the-box SEO for your WordPress blog.
The Category Order plugin allows you to easily reorder your categories the way you want via drag and drop.
Generates a fully customizable sitemap By Dagon Design.
The DISQUS comment system replaces your WordPress comment system with your comments hosted and powered by DISQUS.
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.
This plugin will generate a sitemaps.org compatible sitemap of your WordPress blog which is supported by Ask.com, Google, MSN Search and YAHOO.
Control your Ad Space with OIOpublisher.
The WordPress Plugin for Similar Posts. It’s small. It’s fast. Really.
SexyBookmarks adds a (X)HTML compliant list of social bookmarking icons to each of your posts.
Insert YouTube videos in posts, comments and RSS feeds with ease and full customization.
Place widgets into tabbed and accordion type interface blocks.
Adds the TweetMeme button into your posts and RSS feed.
Enable Google Analytics on your blog. Has options to also track external links, mailto links and links to downloads on your own site.
Retrieves the most active entries of your blog and displays them with your own formatting (optional). Use it as a widget or place it in your templates.
Adds an AJAX poll system to your WordPress blog. You can easily include a poll into your WordPress’s blog post/page. WP-Polls is extremely customizable via templates and css styles and there are tons of options for you to choose to ensure that WP-Polls runs the way you wanted. It now supports multiple selection of answers.
Very fast caching plugin for WordPress.
What you should notice about my list of plugins is I try to only use plugins for things I can’t do myself. Plugins require time for loading, so the more you have, the longer it takes for your blog to load. When I first set up my blog, I had A LOT more plugins installed, but my blog was really slow. I decided to remove any that I could easily recreate myself or live without. This helped speed up my loading time.
|I plan to discuss these plugins more in a future post, so stay tuned!|
So, there you have it – a quick summary of how I designed and set up my blog. I know you will probably have some questions, so please ask away in the comments section below! If you need help customizing your blog, I am available for hire. Simply visit my web marketing site and fill out the contact form!