How To Design A WordPress Blog Theme Template From Scratch

There are both paid and free tools for designing WordPress templates or for any other web design project which quickly become indispensable as you get more familiar with online design work. Needless to say, there are a lot of different tools out there which do the same tasks in different ways and each designer has their own favorites which they turn to every time.

Best Recommended WordPress Development Tools

-Design WordPress Templates Like The Pros

Paid tools can be expensive but often pay for themselves by being easier to learn because of the vast number of free resources available for learning them. Photoshop and Adobe illustrator are pricey for example but there are hundreds of websites offering free Photoshop tutorials, video training resources and plenty of books which makes learning it much easier than many of the free software offers. Below are some of the tools I personally use for designing WordPress blogs myself.

Adobe Photoshop CS6 - Macintosh

Adobe Photoshop CS6
WordPress designers use Photoshop to layout the theme and then slice it up ready for web layout via CSS. This software has a pretty steep learning curve at the beginning but once you get used to the concept of things like layers then it is an incredibly powerful piece of software. It is also quite pricey but for me, it is almost indispensable as I build my own themes.

An alternative you can try instead is the open source photo editing and graphic manipulation software GIMP which is freely available online. I think the learning curve is similar but free is free if you are starting out. Personally, I preferred to go straight to Photoshop because I knew this is probably what I would end up using anyway so why take the time to reinvent the wheel later.

Buy Now

Wacom Bamboo Create Pen and Touch Tablet (CTH670)

Wacom tablets are perfect for designers looking to create their own digital graphic images. Working with a mouse is fine but its a skill all of its own to draw with one. A much more natural approach is to use a ‘pen’ and the tablet surface which lets you sketch, draw and paint creating the visual flair elements which make you WordPress template unique and stand out from the crowd.

There are a lot of good graphics tablets on the market today but Wacom makes some of the best. This is a good mid to entry level graphic tablet for template design although feel free to shop around as there are those which start at much cheaper prices as well as professional level which cost much more.

Buy Now

Free Software For Designing WordPress Themes

-Free Web Design Tools For WordPress Templates

Whilst there are many excellent paid-for software programs and extensions which can be used to enhance and improve the website design process, there are also a fair number of excellent web design tools for free out there on the internet.

  • Notepad++ Free Source Code Text Editor A good text editor is an essential piece of software for creating and editing the source code when designing WordPress themes. Notepad++ is one of many free text editors out there which have a range of features which make designing for the web more easy. Whilst not as useful as something like Dreamweaver, it also will not set you back $400 either.
  • Gimp – Free Image Editing and Manipulation Software This open source image editor is a good alternative if Photoshop is outside your budget. I haven’t had too much experience of it myself but I hear nothing but good things from those who do use it.
  • Xampp You will at some point want to test your WordPress template out and rather than uploading and messing around with this on a server you can instead set up a local Apache server environment and run WordPress on your desktop computer. This might sound daunting but Xampp makes this a very easy process. Best of all, this is completely free.
  • Sample Post Collection For WordPress Theme Creation A fresh install of WordPress on your desktop is going to be empty so you will want to populate it with posts which use all the things like bullets and subheadings you’ll be styling in your theme in order to see how it looks. This collection here lets you download these posts ready to plug in to your WordPress installation saving you a lot of wasted time and effort.

Free WordPress Theme Tutorials

WordPress Theme Development Lessons

Here I will be collecting some of the most useful guides to creating WordPress themes yourself which I have personally found useful whilst learning how to do this myself over the past few weeks. Hopefully you’ll find some nuggets of information in here too.

Create A Custom WordPress Theme Tutorial

This is a detailed rundown of how to create a custom WordPress template from scratch from LIfeHacker.com.

CSS Tricks WordPress Theme Designing Video Tutorials

WordPress theme creation from beginning to end! This excellent collection of free WordPress theme creation guide videos walks you through the steps one theme developers uses to create a WordPress theme from scratch. Starting with a clean WordPress installation, a virtually blank WordPress template with all the CSS and extraneous extras stripped out and an idea, this collection of three videos gives you a step by step guide to creating a WordPress template from scratch. Very, very useful if you are new to theme development and some nifty CSS tricks in there as well.

How To Create A WordPress Theme From Scratch

Very useful WordPress theme development tutorial which also introduced me to the time-saving qualities of various CSS frameworks to help speed up the creative process. This guide to making your own WordPress template uses the Blueprint CSS framework and also explains a little about how to use dynamic widgets in the sidebar which I found particularly useful.

Slicing A Photoshop Image

Unless you intend to create a basic WordPress theme or have an ingeniously simple WordPress template in mind, the chances are you’ll want to use images at some time. Many theme designers create their WordPress layout on a graphics program like Photoshop first and then ‘slice’ the images into usable chunks for their theme code to position on the page usually these days with CSS. This very useful Photoshop video tutorial shows how to slice a Photoshop image graphic ready for use in a WordPress theme (or any other form of template or web application). Actually, this one shows how to link image slicing up with Dreamweaver but the principals should cross over nicely to any other development aid you use for coding your themes.

How To Create WordPress Themes

Another step by step guide to creating WordPress themes, including the design process, slicing Photoshop images and coding the WordPress files.

How To Make A WordPress Theme

A very detailed 12 step guide on how to build a WordPress theme from scratch.

WordPress Design Tutorials

A collection of very useful tutorials focusing on various parts of the WordPress template. Lots of great tips and tricks for WordPress designers.

How To Make A Magazine Style Theme For WordPress

A blog article and free 30 page PDF eBook outlining how this particular designer goes about how to create a WordPress magazine theme layout.

How To Create A Magazine Style WordPress Theme Layout

Make A WordPress Magazine Template

Breaking Down The Components Of A Premium WordPress Magazine Theme

This is a series of articles which break down the anatomy of a WordPress magazine theme which can help you to customize an existing WordPress template to have a more magazine style layout or make your own newspaper style layout.

More Word-press Theme Development Tools

-More stuff to make WordPress theme making easier

WordPress Theme Development Checklist

A useful checklist of over 140 things to check when creating a WordPress theme from scratch. You can use the checklist online as you work or download a tick off as you go. This list is useful for coding WordPress themes as it ensures you check for things like image styling, header content like C DATA and DOC-TYPE and other things which are easy to overlook.

WordPress Frameworks For Theme Development

A framework can save you a lot of development time in the long run as using a WordPress theme framework cuts down on a lot of the repetitive coding which often accompanies making a theme from scratch allowing you to focus on the most important stuff – like creating an awesome theme design!

Cool WordPress Theme Tips and Tricks

-Other Fun and Useful Stuff For WordPress Theme Designing

Occasionally whilst browsing around looking at different WordPress theme tutorials I find the odd little nugget of information which is too good not to bookmark or otherwise pass on. Here are those little gems…

WordPress Sprite Date Display Tricks with J Query

OK so I’m yet to try this out myself but this is a really cool way to edit the way the date is displayed next to each blog post. I’ll definitely be trying this some time in the future.

Your Favorite WordPress Tutorials, Tips and Tricks

So…since I’m still learning and if you’ve come to this page the chances are you are too (seriously, when it comes to design, does anyone ever stop learning?) then how about you share the links to some of your best WordPress theme design tutorials or recommend other useful sites and pages which will help in the design process! List ’em below so we can all learn how to create WordPress templates by ourselves.

Leave a Reply