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.
-
Creating a theme from scratch
-
Testing Your theme
-
Debugging
-
Creating a plugin
-
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
- HTML
- CSS
- Basic PHP
- Photoshop/Gimp/ Any image editor
- 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
- 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.
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.
- 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
Creating a Plugin
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
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.
- 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.






Pingback: Building/Customizing your own Wordpress theme: Beginners and Intermediate | Desizn Tech
Pingback: So here is me at wordpress | Jathnael.com ™
Pingback: 19 megacolectii de teme, pluginuri, sfaturi si resurse Wordpress | Victor Sosea | blog personal
Pingback: Twitted by yamasas
Pingback: 15 situri despre Wordpress si optimizare SEO | Victor Sosea | blog personal
Pingback: Mar-20-2009 web design links | w3feeds
Pingback: Building Customizing your own Wordpress themeat Top 3K Mega List - Must Have Popular Website Links for Web Designer, IT Techie & Office Worker
Pingback: Webzappr’s Lifestream « My Random Web Snippets
Pingback: Rejuvenate a Living Room for Less: Inexpensive Living Room ... | AfrikBoutik Blog
Pingback: Building/Customizing your own Wordpress theme: Beginners and Intermediate « Feed Reader (Beta)
Pingback: pligg.com
Pingback: Bookmarks for February 18th 2009 through February 26th 2009
Pingback: links for 2009-02-24 « boblog
Pingback: Building Customizing your own Wordpress theme | just4freaks.de
Pingback: all said and done » Blog Archive » Wordpress Build-It!
Pingback: Building/Customizing your own Wordpress theme: Beginners and Intermediate | Desizn Tech - Illuminations
Pingback: Inspiring Design Links for Creatives for 2009-02-17 | This Inspires Me
Pingback: Building/Customizing your own Wordpress theme: Beginners and … | thewordpresssecrets
Pingback: Building/Customizing your own Wordpress theme: Beginners and … | thethemesecrets
Pingback: Building/Customizing your own Wordpress theme: Beginners and b…/b | bigforkgolf.com