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.
Beginners : What I need to know?
If you are planning your own wordpress theme. You need to know (be familiar with) the following languages
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.
- First thing you should do is get familiar with wordpres codex for theme. Read this guide, thoroughly.
- 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.
- 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
- Here is a guide from, Jonathan to create a theme from scratch.
- Another detailed guide from WPDesigner. Really useful. I recommend this one.
- Guide from ThemeTatation. It also shows video demonstration.
I would like to mock up my theme in Photoshop
- DesignRivers Awesome guide on Mocking up on WordPress them in Photoshop.
- Nick La from Web Designers Wall explains creating wordpress theme using Photoshop.
- Mock up theme from HV-Design with PSD File available.
- 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
- Video Screencst from Chris Coyier, on converting photoshop Mock up
- Encoding a Photoshop Mockup into XHTML & CSS from Spoon Graphics.
- Netutts explains how convert PSD to HTML.
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
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.
- Mac user: Checking your theme on IE
- 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.
- Compilation of WordPress Hacks
- 30 wordpress Comment Hack
- 15 Useful WordPress Tricks to Make Your Theme Even Better
- 40+ Most Wanted WordPress Tricks and Hacks
I am not Interested in Theming, I want to create a plugin
Sure why not. Start by reading up in here
- WordPress Codex : Writing a plugin
- Nettuts guide on creating wordpress plugin from scratch
- Video Tutorial on creating your first wordpress plugin.
- Use WordPress Plugin Generator
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.
- 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.
- 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.
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.