Now that 2010 is just starting, many web designers have to update the copyright year on their own websites, and their client’s websites.

Many end up doing it manually and waste a lot of time with this tedious task, but some use a better method, and it’s as simple as one line of PHP.

Copyright <? print(Date("Y")); ?>

No longer do you have to manually edit the footer of your websites with each year that passes!

I decided to experiment a little with the new design and development of my website. After months of making notes on design elements that I like, ideas I had for the site, and various other little scribbles, I ended up jumping on this re-design project 2 days ago, and completed it this morning at about 4am. When I work on a project that I get really into, I struggle to pull myself away from the computer. When I say “struggle”, I’m talking about sometimes spending 18 hours straight with one break in between. It is part of my character, whether it is a good thing or a bad thing. Once I have my mind set on getting something done, I just do it.

So, the design in photoshop, and all of the coding was done in 2 days, and I am more than happy with the outcome. I believe this new design is right where I want it to be visually. The overall look and feel is light, yet I think there is a perfect touch of artistic flair in the graphic elements and overall aesthetics. It was important to me to have a clean design, but I still wanted to create an image that presented me, my personality and characteristics. This balance is difficult, especially with a somewhat sketchy design, but I think it came off nicely.

I first learned about WordPress around February 2008 when I was trying to increase backlinks to my company website. After finding David Airey’s website, I proceeded to add several comments to his posts, and enjoyed his articles and writing style. David quickly realized what I was doing, and told me off! So, I learned all about the blogging and online design industry by being a dirty search engine optimizer concerned with acquiring backlinks from design related sites. Thanks David! I learned the error of my ways, and understood the “blog commenting etiquette” that was in place, or was supposed to be in place.

My previous design was pretty much my first attempt at creating a custom theme for WordPress. I loved the textured website designs around the net, and wanted to do something along those lines. While I was happy with the original design for a while, my interface and graphic design skills had progressed past the image the website was giving off. Since February 2008, I have immersed myself in everything to do with developing custom WordPress themes, from reading tutorials, to mashing the code up to see what works and what doesn’t. I learn the most by simply hacking away at things using only educated guesses, and once something works, I remember how to do it forever.

Quickly I found myself understanding WordPress a great deal, and ended up working with it on almost a daily basis using it as a CMS system for client websites. For about 5 months or so, I have tried to plan the time to re-design this website, and just the other day I just decided to go for it. I went through my notes, my bookmarks and everything else that I had saved for inspiration for a new re-design, and I was ready.

The new logo came first. While I don’t see this is aspect as too vital for my reasons or goals as a design blogger, I thought it would still be fun to create a unique identity for myself and my website. I blog predominantly for the fun of it, and for networking with others, so I’m not overly concerned with my “online brand”. My company’s brand is what I put time into.

I wanted to find a way to put the “B” and the “Y” together, but had struggled with this in the past. They are not the best initials to work with. I decided to draw a custom font in Adobe Illustrator for the two letters, and after some variations on the arrangement of them, I found a format that fit well. Then, I decided I wanted the logo not to just represent my name, but I wanted it to also display what I do, what my interests are, what my personal site is about, and what readers can expect to see on my blog.

I didn’t have to go far for inspiration, as I simply thought to myself “What do I do, what do I blog about?”, and the answer was right there on the left hand side of the programs I use every day. The pen tool and the brush tool in Adobe Photoshop and Adobe Illustrator were perfect little symbols to represent what my blog is about. Designers will know what the imagery means, and represents, and after all, I am not too concerned about marketing my personal site to people outside of the design industry.

After drawing the two elements onto the “BY” initials, and changing the colors of the letters, I asked my Twitter followers if they had any feedback. Martin Kulakowski came back to me with a great suggestion, and even sent an image showing his idea. He added a slight amount of separation between the stem of the letters and the design icons. I thought that was a perfect addition.

So, the logo was ready to go, and immediately I started working on the website design. I knew I wanted to create a light, watercolor/sketch look, and its color scheme would include teal / turquoise (my favorite color). I also knew that I wanted the website to be 1080 px wide. This would provide me with a nice amount of white space and room to work in some design elements.

During a quiet night staying in, I put together a header design that I was really happy with. It had a classy / artsy feel but wasn’t heavy like my previous design. I also wanted to include a personal image but didn’t want it to look out of place inside the overall design. A little saturation and play with the hue of the image, and it fit into the color scheme nicely. The before and after can be seen below.

The previous design was way too heavy, and I went a little crazy with the paper texture brush. I think I had just found that brush or something, and was a little too excited to try it out!

The new header has much more style, and helps to give the new design a light, clean feeling.

From my notes, I knew I had a lot of little touches of quality that I wanted to put on the website, whether it was some type of creative rollover or a unique way of showing information.

A look at some of the new elements and features…

Obviously the layout of the homepage is important. If it is good, your bounce rate will be low, and visitors will want to click-through to the various pages and posts on your site. I decided to get rid of the “Featured Post” spot on the homepage, as this started to have no meaning to me. In my opinion, for a site like mine, the most recent post WAS the featured post. So, I simply decided to just list the posts in order of publish date.

Comment Count

One small note I had written down somewhere was to display the “post comment count” in a speech bubble. This is a nice way to display this information, as it is simple, takes up very little room, and looks more interesting than a simple text link saying “3 comments”. It also allowed me to have fun with a rollover inspired by sites like Web Designer Wall (rollover the main navigation). You can see what I did if you rollover the little teal colored speech bubble at the top right of each post page, and on the homepage and category pages.

Navigation

I really didn’t like my navigation on the previous design, and it bugged me every time I thought about it. I had used some junky javascript and images for the rollover effect, and that was not cool to be doing in 2009. For my new website navigation, you can see similar rollover effects, but the entire navigation uses one single image, utilizing the CSS image replacement technique. I am a strong believer in this type of navigation, especially because of the fact that text links remain in the source code. The search engine bots don’t see the image file with a link, they see plain textual links. I like (insert Borat accent). High five

A little more insight…

Another small addition, is at the bottom of each post page. I thought it would be nice to have some little snippet of information about what was going on in my life or what I was thinking at the time I published a post. So, I added some custom fields and the necessary php code to pull them into the website, and on each post, it will now have a few lines of “when I published this post, I was…”. Prepare to see things like “planning world domination” or “eating a big mac and judging myself”.

One major part of this website re-design included the display of visitor comments, and the comment form area. I really wanted this to look unique and in-line with the rest of the website. I spent time working on the layout of the comments list, and finally landed upon a format that I was happy with. First, the visitor’s name, twitter ID, and the time and date the comment was made. Below that line, the avatar, and the comment text.

I’m quite happy with how the comments list turned out. A little addition to this area is the “Highlight Author Comments” plugin (by a god of WP plugins, Rob Marsh) that allows me to make it easier for visitors to read my comment responses. With a bit of padding, and my new logo, it now provides a subtle difference to make it easy to follow my responses in the comment thread.

Next up was the comments form area. This was another area that I neglected with my first custom WordPress theme design, mainly because I was too afraid to hack up the code that controlled the form. Not anymore!

With some simple CSS on the form fields, and correct positioning, I was able to use a single background image for the form, and keep the overall look consistent with the rest of the website. I still have a few additions to this area of the website, and will probably get to them in the next few days. They include: adding a “comments policy”, and creating a nicer submit button.

A before and after screenshot can be seen below:

Another major piece of the new design involves how the categories and archived posts are displayed. I didn’t want to have a giant list of categories going all the way down the right hand side of the website, so I decided the best way to keep the site clean was the hide the categories until a visitor activated that area to see them. I did the same for displaying “Popular Posts” and “Random Posts”. This keeps the sidebar nice and simple and drop down slider is a fun way of presenting information.

On the old site, I had a section I called “Today, I am reading” and this was a small list of some of the various design related blogs that I regularly visit. For this new design, I moved this to the footer where it fits much better.

I will be changing the RSS feeds that I pull into this area regularly, but for now I am happy to display Randa Clay’s, David Airey’s and Six Revision’s latest posts. There is some weird character issue with the RSS feed script in WordPress in the way that it deals with apostrophes and different characters, but this may be more of a character set UTF-8 issue. Not sure just yet, but I will try to fix this soon.

So, all in all, I am quite pleased with this re-design. My main goal of this new design is to re-ignite my energy into posting more regularly and being more active on here. The old site just didn’t encourage me to do this, and I think this new design will.

Thanks to everyone on Twitter for your feedback and comments on the design, they are much appreciated. If anyone is interested in seeing a tutorial on any aspect of the creation of this theme, please leave a comment and I will be happy to write a post about it if a few others are interested also.

What do you think of the re-design?

So, you are just like me (one week ago) and are wondering how to set up WordPress as not only a blog for a website, but also as a content management system for the site. WordPress by default **sort of** allows you to do this, by creating pages and posts alike. However, one problem that I ran into was that I needed the frontpage to be a normal homepage, without all of the blog posts.

After searching Google for a while, and visiting a number of sites and blog posts about this topic, I was not happy with what I found. Many of the instructions were pretty long winded and when I actually tried a few of them, they never worked. They also went into some source files to make changes which is often the last resort when customizing WordPress.

So, after asking Aaron Russell (an experienced developer) how he would do this , I was able to set up a website using WordPress as a content management system and a blog in a few easy steps, while keeping using one template for the homepage and a different one for the blog page.

Here are the simple steps that Aaron provided that will make this extremely easy to do! You can finally use WordPress as a content management system and a blog without too much stress at all!

1. Install WordPress into your root directory as normal.
2. Create a new ‘page’ called "Home".
3. Then, create a new page called "Blog". Make sure the slug is "blog"
4. Go so Settings > Reading and change the ‘Front page displays’ to Static and select your new pages, "Home" and "Blog"
5. Go to Settings > Permalinks and change to a custom structure. This can be any structure you want but should begin with ‘/blog/’ – for example, you will normally want it to be like this ‘/blog/%postname%’ (if this does not work, you may have to fix the permissions on your .htaccess file. (check out Permalinks over at WordPress’ support forum.
6. That’s it – you’re done! How easy was that!
7. Now, obviously you need to make sure that you have a link set up somewhere on your site to go to www.yourdomain.com/blog/

I know that this is not really anything new to a lot of people that have been using WordPress as a CMS and a blog for some time, but there seems to be a lack of really simple instructions available for those trying to do this.

I hope that this quick tutorial has helped you to get your site rolling and now you can spend that valuable time customizing your site and getting the content together!

Now that you have your CMS and Blog ready, you need to start thinking about all of those great plugins you will need before you turn the site over to the client.

Here is a top 10 from Blueprint Design Studio of WordPress CMS Plugins

1. Cforms II – This is far and away the best contact form plugin there is. The reason? configurability. You can easy build literally anything with it. We’ve built out employment application forms, wedding checklists, and more for clients. It also drives our own quote form. There’s also built in spam protection, via question and answer or captcha. by delicious days
2. WP e-Commerce – Unlike cforms, this plugin has no competition. It provides an easy to manage storefront and shopping cart as an integral part of your wordpress installation. It includes the ability to sell digital downloads as well, which is great for photographers, musicians, and authors. By default it includes support for PayPal, although the $29.99 fee for the authorize.net module will pay for itself in lower fees for most serious e-Commerce sites. by Instinct Entertainment
3. Search Everything – Since most of the sites we develop focus more on their static content than on their blog posts, this plugin is essential for allowing users to search your entire site without leaving your site and relying on google. by Dan Cameron
4. Google Sitemap Generator – The biggest benefit of using wordpress is the manual labor you save because the software already knows where all of your content is. This Plugin submits a comprehensive index of your site to google, yahoo, MSN Live, and Ask.com every time you update your site. It’s a huge boost to your site’s SEO . by Arne Brachhold
5. Subscribe2 – Subscribe2 is a newsletter plugin for your site. It allows you to create newsletters and manage subscribers within your WordPress Dashboard. It also allows you to email subscribers when you post a blog entry, which allows you to have a permanent copy of the newsletter that you can refer people to. plugin homepage
6. Event Calendar 3 – There are a ton of event plugins out there. This is the best & most integrated one we’ve used. It provides an iCal feed, in addition to the standard RSS feed. Since the events are created as Blog posts, it’s easy to integrate them into your site. by Alex Tingle
7. Page Links To – by far the simplest plugin on this list, This plugin allows you to create “pages” that link to something else. It’s the easiest way to add links to your main menu, without mucking around in code. It’s good for adding a link to an external photography portfolio, for example. You could also use it to link to sections of a page, rather than an entirely seperate page, which could be useful for linking to sections of a restaurant menu, or other small sections of a larger page. by Mark Jaquith
8. TinyMCE Advanced – I’ve posted a lot about using this plugin. It was referred to me by Jim Burke from TSG Real Estate, who needed a way to easily add classes to blockquotes, tables, and images. The plugin also does a great job of making tables work well with WordPress posts. plugin homepage
9. XSPF_Player – As much as I’m not a fan of auto-playing music on websites, This MP3 player makes it easy to manage playlists, cover art, and artist links. It’s a great way for music venues to highlight upcoming shows. Used in conjunction with Event Calendar, you can make the track link lead to the post for their upcoming show, all of which is easily manageable from your wordpress dashboard. by Boriel
10. pageMash – I just posted about this, but it’s worth mentioning again. This plugin makes it very easy to put your pages in order, without having to edit every page individually. by Joel Starnes

You will also want to download the "Role Manager" plugin here

Others discussing WordPress as a Content Management System and Blogging Platform:

Andy Peatling
http://apeatling.wordpress.com/2006/11/23/five-wordpress-cms-enabling-plugins/

Web Helper Magazine
http://www.webhelpermagazine.com/2008/04/wordpress-wow-seven-top-sites-using-wordpress-as-a-cms/

Sizlopedia
http://www.sizlopedia.com/2008/07/27/free-wordpress-cms-themes/