Blog Customimization – How to Customize Your Word Press Theme

Do you prefer a customized blog that ties into the theme of your business?

There are many Word Press themes you can easily install for a Blog however many people want a design that is unique to their subject and prefer to have some input as to what it will look like. You can’t do this if you just grab one of the free themes online without it being customized to suit the desires of the owner.

Recently a client asked if I could create a 3 column web site (blog) . These are the customizations he wanted:

1. New header banner
2. Links, Categories and Admin in the left sidebar
3. Search box and Ads (or Google Ads) in the right sidebar
4. Widen the right sidebar
5. No evidence of comments on the web site
6. Different colors for the template and content backgrounds
7. Change footer color and text
8. Change navigation bar links from brown to white
9. Add a contact form
10. Optimize the blog for the search engines

Here’s is how I proceeded with the customization:

I began with the installation of the downtown-java-3column theme
http://www.briangardner.com/themes/downtown-java-wordpress-theme.htm

Changing the style

1. I created a new header banner with the same name and dimensions as the original then replaced it on the server. I adjusted the height of the header in the header section of the CSS and adjusted the font size of the header text (#header a)

2. I changed the template background by editing CSS body

3. I changed the content body by editing the CSS #wrap

4. I changed the footer color by editing CSS #footer and edited the text in footer.php within the template files.

5. I widened the right sidebar (#r_sidebar) by increasing it from 180 pixels to 190 pixels
then reduced the CSS ID…#contentleft from 500 pixels to 490 pixels. This means the client can now place wider ads in the right sidebar.

6. I changed the navigation link colors from brown to white by editing the color in #navbar ul li a then removed the color from #navbar ul li a:hover and added text-decoration: underline; (instead of none;)

Changing the theme within the admin panel

1. The blogroll (link) was in the right sidebar by default (in the original theme) so I removed the blogroll code in r_sidebar.php and placed it at the top of l_sidebar.php (before the category code).

2. Within design – widgets…I added the search box and a text box. I placed the html code for an ad inside the text box. (You can also place your google ads code here to display Google Ads).

Removed evidence of comments

1. I removed this comment code from index.php in the template files.


<h4>Comments</h4>
<?php comments_template(); // Get wp-comments.php template ?>

2. I removed this code in home.php to get rid of “leave a comment ” under each post on the home page.


<?php comments_popup_link('Leave a Comment', '1 Comment', '% Comments'); ?>

Added a contact form

I downloaded the contact form plug-in from http://www.douglaskarr.com/projects/wp-contactform/ then uploaded it to the plug-ins folder and activated it. I then configured it within the admin panel to reflect the correct contact information.

Blog SEO optimization

1. I added the headspace plugin so the user can insert his own title and description tags for each post or page.

2. Under permalinks I added /%category%/%postname%/ to custom structure then created a .htaccess file to add the code the template produced and uploaded this to the server. This enables friendly URLs to be displayed for each post.

Conclusion.

The customization I did for this Word Press web site can be applied to all word press themes however I found this particular template and related templates clearly commented. This enabled me to easily find the appropriate code to edit.

Comments

  1. Thx a lot for the nice tutorial and the psd – exactly what I was looking for!

  2. The more time that is spent dissecting, analyzing, and critiquing a design by the wrong kinds of people the worse that design gets. The same trend applies to the number of people involved in the design process.
    Thx a lot for infomation!

  3. Hi,
    I don’t normally comment on blogs but your post was a real call to action. Thank you for a great read, I will be sure to bookmark your site and check in now and again.

    Regards,
    William.

  4. I like it! thanks!

  5. completely agree with you on this one.great post.

  6. TY, good post! Precisely the stuff I needed.

  7. That’s very sweet of you to post all the guidance up here.

  8. Hi there I am so grateful I found your web
    site, I really found you by error, while I was browsing on Google
    for something else, Anyways I am here now and would just like to say kudos for a incredible post and a all round enjoyable blog (I also love the theme/design), I don’t have
    time to read it all at the moment but I have book-marked it and also added in your RSS feeds, so when I have
    time I will be back to read a lot more, Please do keep up the fantastic b.

Leave a Reply to Seymour Hoitt Cancel reply

*