Recently I have had many requests for Wordpress theme assistance from new bloggers.  Some just needed a few tweaks and others a complete makeover.  This past week I was able to help two such bloggers who were kind enough to let me use their blogs as examples for this post.  I’ve been wanting to share some of my experience with tweaking themes and I figured this was a great opportunity to show some of these tips in action.

I’ll start with Atiff Rizwani and his blog, Confident Nerd.  Atiff’s focus in his new blog is “Taking someone from low, to know confidence and developing them into a confident professional.“  Keep in mind that this is a brand new blog, but he has already published a few posts to read and enjoy.

When Atiff started his blog he decided to go with a free theme with great potential, but he wasn’t completely satisfied with the look.  So he contacted me requesting I help him redesign the theme with the focus on a clean, simple look and feel with great accessibility to the necessities.  Here’s the before and after…

Before: Click on the image for a full size view.

After: Click on the image for a full size view.

So what changes did I make and why?

The first thing I did was change the title/logo. In it’s stock form you had a general typed out blog title.  This is fine, and even relevant for certain types/styles of blogs, but if you want to create a brand for your blog and come across as a more serious blogger I think it’s important to implement something a little more unique.  (I understand that this might ruffle a few feathers because you may be one who falls into this category.  Heck, you may also have a highly successful blog.  I’m not here to tell you that you need this to be successful in your blogging pursuits, just that it can only help make your blog stand out from the crowd.)

So to start the logo creation process I whipped out my trusty logo creator software and started crafting the design.  (I came across this great software a few months ago and have used it to create all the logos for my blogs and others.)

Ideas for creating a great logo…

• Come up with a look that is relevant to the name/idea being presented. As you can see with Confident Nerd, I used fonts that elaborate on the words they represent.

• Add ’stand out’ qualities. In this case I gave the word Confident a gradient (color) look as well as a subtle white shadow.  With these qualities on a black background, you get a logo that really POPS!

• Make sure  it blends well with the rest of the header. You want your logo to stand out, but not like a sore thumb.  Big is often good, but not always.  Also, make sure you can’t see unwanted outlines of the logo and that the colors go well together.  Contrasting colors can be good for visibility, but bad if it ends up looking tacky.

After I had created the logo it was ready to be added to the header.  I am not going to get into the details in this post, but I made sure to add the logo while retaining the link back to your home page.  So you can still click your blog name and go ‘home’.

Next I decided to ‘Cut The Fat‘.

I am a real fan of a clean and simple design with a touch of elegance/refinement.  So to me, it was an obvious choice when I decided to remove the ’second header’.  Though I could see the use of this in some cases, for Atiff’s needs it wasn’t necessary.  So I just completely wiped it out. Since this was the location of his ‘recent posts’ listing, I just added that to the sidebar with the rest of the relevant content.

I also dropped the ‘Top Commentators’, ‘Top Comments’ and ‘My Sponsors’ as well as changed ‘Random Links’ to ‘Favorite Links’.  At this point, I see this as just unnecessary clutter in the sidebar.

Getting rid of this bar also removed the blue around this search area.  I could have added it back some way, but decided to leave it off.

I also removed the line dividing the post area and the sidebar.  Since the post area was already well defined I found this to be redundant for my tastes.

Now for the refinement.

One of the things that really helps give your blog a unique look is refinement.  In this case I started with sidebar headings.  As you can see, they have an image of scissors cutting toward dotted lines.  I didn’t quite get this so I decided to create custom ones.  (Any time you can customize a normally generic item on your blog, like headings/typed words, you add something to your blog that no one else has.  A great way to stand out!)

Sidebar headings before and after:

I once again used my logo creator software to accomplish this.  I tried to stay with the blue and black theme while using the same font on part of the heading that I used in the logo.  (Consistency is key when it comes to having a theme that looks fully refined.  Sticking with a few specific colors/fonts really helps make your site feel clean and thoughtfully created.)  Then I replaced the scissors with an image that I thought added a little elegance.

Next I moved on the RSS icon.  For me, personally, this one was an eye sore.  If you are familiar with my two blogs you will know that I like big subscription icons, but this one is a little TOO big.  So I dropped it and went over to my favorite RSS icon page and picked out some new ones that kept with the theme.  These happen to be 125×125 in size.  For the email subscription icon I added the word ‘Email’ inside the icon to give it an appropriate look.  (Notice I used a font from the logo.)  I put them side by side as a way of creating a kind of sidebar header with them.

Notice I also removed the sentence that was below the RSS icon and replaced it with the larger, short phrase “Subscribe via…”.  I’m a big believer that the only sentences on your front page should be in the posts themselves. Things like the header, footer and sidebars are the frame for you blog.  And just like any proper frame, too much clutter takes away from the ‘picture’ it’s surrounding. (Occasionally I break this rule, but even then I try to do it the most subtle/attractive way possible.)

I then widened the content area by 30px.  I think it’s important to have room for those big beautiful images.

The final bit of refinement was to change the header background color from an ‘off black’ to black.  (I also did this to the footer.)  Not only did this make it easier to blend in with the new logo, but it created a cleaner, ’snappier’ look.  ‘Off’ colors have their place, but all too often I find that they create a more ‘dirty’ feel than sticking with a crisp, well defined color.

The Final Result.

So what we ended up with was a much simpler/cleaner sight with a more crisp feel and a better ‘frame’ for the content.  (I also added an image to the most recent post which, of course, makes a world of difference.)

Fixing URL issues.

Next I want to bring in Liora Hess and her blog, Stream of Peace.  It’s focus is on “…topics such as meditation, awareness, simplicity, productivity, stress-reduction, and maintaining a balanced, healthy lifestyle.“  She is a budding writer with a lot of great things to say.

Her particular issue was brought to my attention in an email by Leo Babauta of zenhabits.  In viewing her blog he noticed this:

As you can see she had /wordpress as the root directory of her blog.  (There isn’t any particular problem with this, it’s just unnecessary.)  This occurred when she used her hosting company’s ‘auto install’ of Wordpress.

So he asked if I could help her change her blogs root directory to this:

With the help of these instructions I was able to fix her issue and give her the URL listing she preferred.  So if your blog is in an ‘extra’ or ‘wrong’ folder, check out the instructions or just contact me and we’ll see if we can’t get it taken care of.

What about MY blogs?

I figure while were at it I’ll mention my two blogs and show you the before and afters.  The themes for both, Up-And-Coming-Blogger and “Motivate Thyself” are of the same series of premium themes.  This series is called the Essence Series and they come from ithemes.  I found them to have clean code and a clean look.  There are some great added options and they are easy to manipulate.  I went ahead and got the full series instead of the single license because I knew I would use them for multiple blogs in the future.  This series has many different color options as well.

Starting with “Motivate Thyself” I used the ‘Dark Essence‘ theme.

Here it is in stock form: Click on the image for a full size view.

Now here’s the finished product: Click on the image for a full size view.

Next we have Up-And-Coming-Blogger.  Here I used the ‘Blank Essence‘ theme which is a stripped down version that’s great when you really want to kind of ‘make it your own’.

Here it is in stock form: Click on the image for a full size view.

Now here’s the finished product: Click on the image for a full size view.

The basic traits I think of when tweaking my own themes:

• Simplicity
• Clean lines
• Unique logo that blends well with the header, but still remains quite visible.
• Wide sidebar for flexible add/widget placement.
• Wide content area to allow for large images and flexible content arrangement.
• 990px total width. This fully fills a 1024×768 screen without having to scroll horizontally.  I mention this screen resolution because it’s generally the smallest someone will use to view your site.
• Good ‘content framing’ characteristics from the header, footer and sidebar.
• A subtle yet clear ‘line’ between the content and sidebar.
• Attractive and very visible icons for RSS/Email subscribing. This also goes for social media buttons.
• Attractive/neat add placement. I like a ‘well organized’ look.
• Good accessibility/usability. You don’t want your visitors to have to search for common items like ‘About’, ‘Contact’, ‘Subscribe’, etc…
• Some kind of color scheme/consistency. For “Motivate Thyself” it’s black and white and for Up-And-Coming-Blogger it’s gray, white and green.  (I even changed it so ‘links’ are green instead of the common blue.)
• An all around unique and attractive look. I like a blog that makes you step back every once and a while and say, “This blog really DOES look good!”

What tools I use when I work on Wordpress themes:

• As I mentioned before, The Logo Creator.
• Gimp.  (The free Photoshop alternative.)
• Filezilla.  (Free ftp software to upload images.)
• Notepad2.  (Much better than Windows Notepad for editing code.  I use this when it’s easier to directly edit the PHP code for the themes.)
• Firefox.
• Windows Vista and Mac OSX Leopard.  I go back and forth, but I tend to use Vista more.  (But it’s all done on a Macbook.)

Why didn’t I cover exactly HOW I did everything?

The simple answer is that it would have taken too long.  But the fact of the matter is, there will be some, if not many, things that you would like to do with your theme that you just don’t have the expertise (or the time for that matter) to accomplish.  In this case you will need to get someone who knows their way around Wordpress/PHP to do it for you.  I’ve recently been doing this for some who request the assistance.  I am currently assisting a few more as we speak.  I may or may not be able to help you, but my ‘door’ is always open so don’t hesitate to shoot me an email if you have any questions.  I also have a business and two blogs to attend to so I’ll do what I can, but I can’t promise anything.  But the fact is, I’m here to help!

I know this was a lot to chew on and I don’t expect you to take it all in today.  I just wanted to provide you with an in depth view of Wordpress Theme redesign tactics and my opinions on the subject.

If you enjoyed this post and/or feel it would be useful for others to read, please share it using your favorite social media.

By the way, don’t forget to check the latest at “Motivate Thyself”!  Leo of zenhabits sent me a great guest post for Motivate2ACTION! Week2 (Exercise).  He’s got some great tips to share!