Demo | Download

Quick Connect

Demo | Download

Quick Connect

Demo | Download

Quick Connect

Demo | Download

Quick Connect

Demo | Download

Quick Connect

Demo | Download

Quick Connect
[contact-form]

I was first introduced to WordPress about 3-5 years and it was love at first sight. From the time I started using it, I’ve never looked back or thought about shifting to another blogging platform/software. WordPress has gone a long way since then and I’ve witness it grow and mature from a blogging software into a full-featured CMS.

Being an avid WordPress user and advocate, I was happy when I found out that WordPress was recently awarded the 2009 Overall Best Open Source CMS Award by the Open Source CMS Awards. Matt Mullenweg himself was very excited about the award.

I was very excited last week to learn that WordPress has been awarded the Overall Best Open Source CMS Award in the 2009 Open Source CMS Awards. This is a landmark for us, as it is the first time we’ve won this award, and it marks a shift in the public perception of WordPress, from blog software to full-featured CMS. No small contest, the Open Source CMS Awards received over 12,000 nominations and more than 23,000 votes across five categories.

Aside from winning the Overall Best Open Source CMS category, WordPress was also 1st runner-up for the Best Open Source PHP CMS category. Making it to the #2 spot this year is a great feat considering that WordPress wasn’t even in the top 5 last year and puts WordPress ahead of Joomla. Another thing to note is that Drupal, the winner of the Best Open Source PHP CMS category, outranked WordPress only by a very slight margin, which means that WordPress has really become more popular with the users and developers over the past year.

I like Matt’s ending statement:

Every member of the WordPress community, from core developer to beginning user, should be proud to be part of this momentum: congratulations to us all!

As a user, advocate and a member of the WordPress community I’m happy and proud for this recent achievement of WordPress and I certainly feel that I’m a part of this success. Even though I’m not a core developer or theme/plugin developer, I believe that I’ve done my part with my WordPress news/updates, WordPress theme & plugin reviews and other WordPress-related posts which are my contributions to the community.

Congratulations to WordPress, the Automattic team and all the WordPress core developers, theme/plugin developers and users!

Btw, I just remembered that WordPress won Best Open Source Social Networking CMS in the 2007 Open Source CMS Awards two years ago.

WordPress Theme is responcible for the visual whoomp of your blog. It is a single, most important element that creates the Look and Feel of your blog and determines the visual message you send to your visitors. It is also one element of your WordPress blog that will either help you or drive your visitors away!

No matter how well crafted are your posts, how well research and presented your content – if the first impression is negative – your chances of retaining the visitor are slim. This article of WordPress Guide Series will concentrate on the task that according to the poll on this blog is The Most Painful Task:

A few words before I begin with this tutorial:

• I’m not a designer and while I can “make do” I recommend you get a pro if you need a really custom theme
• I do not support any mods you will create as result of this post and do not provide any support or take any responsibilities, use this guide at your own risk
• Make absolutely sure to have a good backup of your existing theme BEFORE starting any mods

1. Getting Started With Theme Mod

I will continue to use WordPress Default Theme as an example for modification and before doing any mods in this case we need to ensure it will not get overwritten with next WordPress core update. If you are not using Default theme – you can completely ignore this step.

You have couple options: copy and paste default folder with different name or rename the default folder to something else. I choose to rename, see image below:

Once I was done renaming I had to go into Admin->Presentation->Themes and click on Classic theme to activate it and then Click on Default to re-activate it and make it current. The reason behind it is because that theme stores its info in wp_options table and need to be re-activated to point to a new folder location.

2. Changing Your Header Image

There are a few ways to go about this one. First I will discuss how to Replace Existing Image with your own to create a custom look. This one will be appropriate ONLY if your theme already has an image…

Simplest way is to view the blog front page and then save the header image to your desktop, edit it to your desire and then upload it back to the directory you got it from but I actually want to explain the inner workings that determine the image location and image name, so you could use it later…

Admin->Presentation->Theme Editor->Header

Open header.php file for editing and locate the section that identifies the header layout options. See image below for details. Default theme uses style.css file for defining the header image and that is what I’m showing you in image

Once we located section above we know we have two devisions we need to locate in style.css: header and headerimg. So lets have a look at the file and see what they have to say…

As you can see in style.css we have locate that our image name kubrickheader.jpg and it is used as a background image with size 192×740.

All you have to do now is either upload header image with same filename and dimensions and overwrite current or use a new file name and make sure to edit style.css to reflect a new filename: I have chosen the second option, see image below:

Second option is a lot more elaborate and requires that you add image to a theme that doesn’t have one defined. There are couple things you will need to do to implement this one.

1. Locate a place in header.php where you can place the image. This one can be varied depending on the theme and there is no clear definition but based on what I always see is that you need to locate code similar to below:

Generally with after <body> tag you will have a division defining the page layout, in example above <div id=”container”> but it can be anything as that division is defined by Theme Designer. Placing image after that devision should get you the header.

2. Add following code replacing the variables as appropriate:

<center><img src=”http://www.yourblog.com/path/to/header/header.jpg” border=”0″ width=”960px” height=”100px” alt=”My Blog Name”></center>

Following variables will depend on your theme:

• http://www.yourblog.com/path/to/header/header.jpg
• width=”960px” height=”100px”

Obviously description above is very general but since there are so many variations it is nearly impossible to address them all.

3. Customizing Style of WordPress Theme

This is the part of your theme where you can do either greatest change or biggest damage to your blog look and before touching anything I highly advise you make a good backup copy of style.css file within your theme.

First change and one that can have a biggest impact on your blog Look is defining a background color or image. In my personal experience EVERY theme I have seen has a #body definition within which you can change this aspect.

In image above I have underlined section responsible for background in my blog using WordPress Default theme. If you don’t like the image and would like to simply change it to a color (and save on load time of the page) simply replace it with color definition:

background-color: #d5d6d7;

Please be aware that doing so will make you blog look a bit out of place, because page uses another image for outlining its form. But in a theme that doesn’t use an image for page layout this will work quite nicely. Like the case with the blog you are currently reading.

Other major changes you can within the style.css file is definitions for all H1, H2, H3, etc. tags. Since every theme is using a different definitions I will not be providing them here but it is an option you can look into as it drastically changes appearance of your blog.

There is obviously a lot more you can do within that file and I simply have no way to provide a comprehensive guide due to differences in themes but do experiment and change it to your desire.

4. Final Recommendations

I’m not the most color coordinated person and when I’m picking colors for the theme modification – I need help. Unless you know what you are doing I want to recommend this free tool that will generate the color theme for you to use.

I’m not even going to mention backup of your existing theme again but I do want to bring your attention to a great plugin you can use to work with theme without your visitors knowing about it.

• Theme Test Drive – this plugin, when installed allows you to test a new theme and it will be visible only to logged in administrator – you. Besides testing new themes you can use it for moding a new theme to your heart’s desire and activate new theme ONLY when its ready to present the full glory of your designing skill to your readers.

That would be the end of part 1 on Theme Customization brought to you by ModifyWordpress, stay tuned for part 2 of this toturial.