How to customise a WordPress theme

You have downloaded a free theme or even shelled out a few bucks for a “premium” theme. It’s a beautiful theme, gorgeously laid out, dripping with wonderful features.

However, it is very likely that you will want to customise the theme, whether you want to change a few colours here and there, replace a logo image with your own image, or radically alter the layout. So why do so many users (be they self-styled “designers”, “developers”, or honest “have a go heroes”) – especially those new to web site customisation – make life so difficult for themselves by not using basic web development tools?

This is a question I ask myself time after time when answering common customer queries on the Studiopress Support Forums. Many times I see posts from people wanting to change some CSS stating “I changed a few things in the stylesheet, but it didn’t work.”. Of course it didn’t work! Why would it, if you don’t know how CSS works. Sometimes you’ll get lucky and successfully tweak something “blind”, but often you won’t get lucky, and the inevitable frustration and disappointment will set in – no doubt aimed at the hapless theme designer who has done nothing wrong.

You are investing your precious time and money in building a web site, so I assume you want a decent looking one? One which still looks good in different browsers? One which has the functionality that you need in order to present your content in the most appropriate manner? Of course you do!

However, to do this in an efficient and stress-free manner requires that you approach this web site stuff seriously, even if you’re a novice, and arm yourself with the tools that will make the whole process as smooth as it can be. Let’s put it this way: would you try to put up some shelves without a screwdriver and drill? Or fix something on your car without a spanner or two? No, I didn’t think so. And web site customisation is no different.

So, here’s the secret…

Get yourself some basic web development tools, learn how to use them (which won’t take long, honestly), and get customising – in a relatively pain-free, efficient and rewarding way.

Essential WordPress customisation tools

Here’s what I use whenever I’m customising a theme, setting up a new WordPress site, or even answering a basic question on the Studiopress forum. Not all the tools listed below will be used all the time – but they each have their purpose and you should use them.

FTP Client

The Theme Editor built-in to WordPress is all well and good, but it has limitations. A much better solution is to edit your template files locally, and upload them to your site using FTP. To do this, you need a “FTP Client” software – and luckily there are some excellent free one’s out there.

I use Filezilla, but there are other free FTP clients out there (Google is your friend).

Text Editor

You need a plain text editor software. Never you a rich-text editor like MS Word or its rivals. Plain text is what you need! It’s perfectly possible to use Notepad (for Windows users), but it doesn’t have any syntax highlighting, indenting and the other features that make working with code easier.

Personally, I use Homesite from Adobe, which was at one time packaged free with Dreamweaver (it may still be). However, there are plenty out there, either free, or relatively inexpensive.

I also use UltraEdit, which has more features and will handle complex coding projects. It’s not free, but it’s a steal at the price.

Browsers

If you’re a PC user you will already have Internet Explorer, and if you’re a Mac user, Safari.

However, browsers do not all behave the same, so it’s worth while installing at least a couple of other browsers so that you can easily check your customisations and make sure that nothing is broken in other browsers. As a starting point (for Windows users) I recommend using Firefox for development, and IE and Chrome for checking cross-browser compatibility.

Do not ignore IE. Many people criticise it relently, but at the end of the day it is widely used, despite its quirks, and cannot be ignored.

I generally use Firefox as my main “development” brower, but I continually check my work in IE and Chrome. Firefox has many great features (not least being the adds-on that I’ll come to in a minute) but it is, in my opinion, too forgiving of markup errors which will break the site in other browsers – especially IE. So, by all means use Firefox as your development browser, but check your work in IE.

Browser development add-ons

One of the great things about Firefox is the wealth of add-ons that are avaiable to add additional functionality and tools to the browser. Two such add-ons that you should download and install are:

• Firebug
• Web Developer Toolbar

Frankly, I can’t do any serious web work without Firebug. It allows you to inspect the HTML, CSS, even scripts, and is essential for debugging, customising CSS, and finding markup errors.

Page Source

Ok, this isn’t a tool, it’s a tip. Many people forget that there is an excellent development tool right under their noses – the Page Source (Ctrl+U in Firefox). Something not appearing quite as you expected? Check your Page Source and see if there is a markup error. Also, essential for checking image URLs in case of images not appearing.

Firefox Page Source also highlights markup errors, which makes it even more useful.

Other resources

You don’t need to be an expert in order to create a great-looking and functional web site, but you do need to understand that code such as HTML, XHTML, CSS and PHP has syntax rules and standards, which can’t be ignored. Luckily, there are some great tutorials out there (again, Google is your friend), aimed at different levels of knowledge, which can greatly improve your understanding of these topics, and help you deal with problems. Use them!