Building/Customizing your own WordPress theme: Beginners and Intermediate

WordPress is an awesome CMS ( Content Mangement System). I find it easier and better than any other CMS. If you are not using it, you should consider it. The great things about the worpdress is the plugins. They makes it easier to add functionality and interactivity. Building wordpress theme is great experience. But, do not worry, I am not going to write a new guide on How to build your own wordpress theme?because there are so many well written guides by better experienced web designers than me. I am just going to explain what you need to know and where you can find theme.  You can jump to any section you like.

  1. Creating a theme from scratch

  2. Testing Your theme

  3. Debugging

  4. Creating a plugin

  5. Just customizing your downloaded theme

Creating  A Theme

Beginners : What I need to know?

If you are planning your own wordpress theme. You need to know (be familiar with) the following languages

  1. HTML
  2. CSS
  3. Basic PHP
  4. Photoshop/Gimp/ Any image editor
  5. You must have a text editor. Find them here.

You should be fluent with HTML and CSS tags. You are going to be using them to make your theme pretty and nice. You should have basic idea about PHP, because WordPress is based on the PHP. The reason you need to know how to use any image editor because you may want to design a header, a footer or mock up theme in Photoshop and then build a theme from there.

I know all this, how do I create a theme?

If you are comfortable with the basic requirements, than you should decide how do you want to create the theme. What I meant by that is do you want to mock up a theme is Photoshop and start a theme from scratch. First I will give you my thoughts on it.

Beginners

  1. First thing you should do is get familiar with wordpres codex for theme. Read this guide, thoroughly.
  2. Download a blank theme and start editing it as you like. The reason I find it easy is because this way you do not have create everything from scratch and you save time.
  3. Use the WYSIWYG theme builder because this way you see, what you are creating. You can use WordPress theme generator here. There reason I like this generator because you do not have to registrar and you can start building your theme right way.

I want to build my theme from scratch

  1. Here is a guide from, Jonathan to create a theme from scratch.
  2. Another detailed guide from WPDesigner. Really useful. I recommend this one.
  3. Guide from ThemeTatation. It also shows video demonstration.

I would like to mock up my theme in Photoshop

  1. DesignRivers Awesome guide on Mocking up on WordPress them in Photoshop.
  2. Nick La from Web Designers Wall explains creating wordpress theme using Photoshop.
  3. Mock up theme from HV-Design with PSD File available.
  4. Spoon Graphics explains how to create   Create a Vibrant Modern Blog Design in Photoshop.

How to do convert the Photoshop Mock up  to XHTML and CSS

  1. Video Screencst from Chris Coyier, on converting photoshop Mock up
  2. Encoding a Photoshop Mockup into XHTML & CSS from Spoon Graphics.
  3. Netutts explains how convert PSD to HTML.

Testing your theme

Before you release your theme publicly or just for your own purpose you may want test your theme. You will need a local server. Here are the ways you can test your theme

Debug

Make sure you always check your theme in different browsers after you created your theme. What I do is create/edit/check  my theme on Firefox and then check on Internet Explorer. There is 99% chance you might need to create a separate stylesheet for IE because IE is B&^$%. That right I said it. Microsoft can not give me the hours I lost fixing my theme on IE.

  1. Mac user: Checking your theme on IE
  2. Get a free website and Test your site for different user from there

If you are wondering why I left out Windows almost all the browsers are available to download for Windows.

How to become a better “Theme” ? and Things you can do to improve your theme

If you are pro at wordpress, there are still certain things you can do to improve your theme. Chances are you might have stumbled across this information already. Maybe it is time to revisit.

  1. Compilation of WordPress Hacks
  2. 30 wordpress Comment Hack
  3. 15 Useful WordPress Tricks to Make Your Theme Even Better
  4. 10 Steps To Protect The Admin Area In WordPress

  5. 40+ Most Wanted WordPress Tricks and Hacks

Creating a Plugin

I am not Interested in Theming, I want to create a plugin

Sure why not. Start by reading up in here

  1. WordPress Codex : Writing a plugin
  2. Nettuts guide on creating wordpress plugin from scratch
  3. Video Tutorial on creating your first wordpress plugin.
  4. Use WordPress Plugin Generator

Customizing

I just want to change the header/background/footer of the theme I download

Well lets say, you do not want to create a theme or you are not interested any of this at all.  You just want customize the theme to downloaded from website.

If you want change the header/ footer/background.

  1. First thing you should do go in the theme folder you downloaded you should see an image folder where all the image files are available.
  2. back

  3. Open up the style.css file in a text editor I will use my theme example but it might be different for there themes. but it is easy to find. Here is a quick tip. Just search the image name in text editor and replace the name with the name of new image you want for your background. This should be same for the header and footer. Just find header and footer tag in you CSS file. Always make two copies of the theme. So, if you mess you will have the original copy.

replace

This is just a basic tip for making a little change. If you  want customize more I suggest read up more.

Well that’s all. If there any tips I missed in between shout it in the comment.


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • Outdated

    “WordPress is an awesome CMS ( Content Mangement System). I find it easier and better than any other CMS.”

    Apparently you haven’t been looking too hard. Then again, this article is pretty out of date.

  • http://meugah.com musnah

    Quite an exhaustive guide,
    I’ve a challenge that I’m just now operating on, and I have been on the look out for such info.thanks

  • http://www.ayridam.com/ Fatih Güloğlu

    nice portfolio i really appriciate it

  • http://www.zirveyemek.com Kullanılmış Paçavra

    Thank you for any other informative website. The place else may just I get that kind of information written in such a perfect manner? I’ve a challenge that I’m just now operating on, and I have been on the look out for such info.thanks

  • http://www.hurremsultan.com Ottoman

    i war not user to comment you this article.. but i want to say that.. we want see your new articles on this blog.. see you..

  • http://ini-apa.com zifan

    thanks,so hard to lern wordpress theme

  • http://www.gauravlive.com Gaurav Prabhu

    Quite an exhaustive guide. I loved it.
    Thanks. :)