On Blogging Australia

This is part 2 of a guide to editing/customising themes on self-hosted WordPress blogs. Part 1 looked at how you can survive the process.

Do I really want to become a programmer?
Maybe you do, maybe you don’t I can’t guarantee that you will be making a living out of coding based on my sketchy introduction any time soon, but you will be able to make a few basic changes to your WordPress blog’s theme without destroying it (so long as you are careful).

I’d be the first to admit that my old computer science lecturers and tutors didn’t turn me into a gun coder - but what they did teach me was the importance of thinking about the coding process carefully.

Web programming: the really quick (and potentially confusing) introduction
Following is the five minute guide to programming lingo basics. There is a lot to learn, and a lot that is disputable by really scarily bright people (usually identifiable by the amount of time that they spend disputing things that the rest of us don’t understand)

The following is more than likely true (for a given value of true) if you break it down into simple terms - although some of it is deliberately oversimplified:

• programming languages are languages in the same way that English and Tagalog are languages - they have rules, grammars, statements, and are useful only where both parties in the conversation have enough knowledge to effectively communicate the required information.
• most programming that most people do for the web (especially in straightforward content management systems like WordPress) uses interpreted languages. Generally speaking, interpreted languages have an interpreter - something that takes mostly plain text instructions and interprets them. In this, they contrast with compiled languages that mostly get run through a compiler prior to being run (although there are weird languages like Java that still need an interpreter of sorts). If you can send the source code to the interpreter in plain text (like a PHP file) then it is an interpreted rather than a compiled language. The distinction is mostly arbitrary, but it helps to know the difference if you need to seek the help of real coders and not have them sneer at you
• A lot of people consider that PHP is a real programming language because it has flow control. What is flow control? Basically, the ability to have conditional branching (for example - “if the user comments then send them an email thanking them for their comment” or “when it reaches midnight move the current date on my calendar widget”). Variable substitution helps too - imagine storing a value under a name so that it can be manipulated in some way - like having “postname” in a template to tell the system where to place the post name.
• HTML is not a real programming language because it does not have flow control. It is, however, a scripting language - in oversimplified terms, a language that tells text and images what to look like and where to sit on a page without having any flow control. CSS is a scripting language also.
• Where it gets complicated is something like JavaScript - often considered a scripting language, but it does have flow control and variable substitution - and for every three coders you ask on which side of the fence it sits, you will get four opinions.

Does any of this flow control and variable substitution stuff really matter?
Yes - in that you will probably only know how much it matters the first time you get it wrong

Will you teach me how to code like a pro?
Nope This is not out of a love of being mean, it is because there is just too much to learn. But I am happy to talk about the languages that you could usefully learn a bit about so that you can change your WordPress templates.

Which languages should I learn about?
There are four programming/scripting languages that cover most of the WordPress theme editing experience:

• PHP: PHP is a powerful language, and while it may or may not have the elegance of its spiritual ancestor Perl, it is wonderfully useful when you want something that sits on top of databases that talks to web browsers. You can identify a PHP file fairly easily - they are named *.php (that is some file name with a .php suffix/extension) and they start with <?php. PHP does a lot of useful stuff, and is generally used to generate HTML on the server that can then be displayed by a web browser.
• HTML: HTML is used to structure text, images, and other objects on browser-interpreted pages. It is supposed to be dead and gone by now, and replaced by XHTML and XML (which is surprising given the squillions of pure HTML pages added to the web every single day). Regardless, it is (mostly) what we have now, and we need to learn to live with it while striving for something better. You can tell a HTML file because it is (usually) named *.html or *.htm and will start with <html. There are a few weird variants of HTML about, like Microsoft’s CHM used to store (amongst other things) help files.
• CSS: CSS is used to modify the “look and feel” of text elements nominated by other scripting languages (again, mostly plain old HTML). CSS files are generally named *.css.
• JavaScript: JavaScript is sometimes maligned as the poor relative of “real” programming languages. It does have the stigma attached to any code that is (mostly) interpreted by the browser - browser-side code is the source of a lot of exploits (security holes) and as such a lot of browsers have the capacity to turn JavaScript off. JavaScript code can be written into a HTML file or stored separately and called as a *.js file (the .js extension is just a convention - you could call it .shirley for all that the browser cares - mostly).

If you go far enough into theme coding you will eventually need to learn some basic SQL (Structured Query Language, the lingua franca of most of the databases that WordPress blogs work with).

In the rest of this post I’ll cover two of these languages in an incredibly shallow way - but there will be links provided so that you can learn more

CSS - the basics
Changing your theme’s CSS is the easiest way to affect the look and feel. CSS controls a lot - when fully utilised it controls the size, colour, position, text style, mouse over behaviour, you name it, of every visible part of your blog.

This is an example of a single element taken from the style.css file for this blog:

body {
background: #CCFFCC;
color: #545454;
padding: 13px 0 25px 0;
}

It started out life looking like this:

body {
background: #3c3c3c;
color: #545454;
padding: 13px 0 25px 0;
}

What did I change? Basically all I did was change one of the colours - the background went from a shade of grey (#3c3c3c) to a shade of green (#CCFFCC). You can do this, save your work (through the Update File button on Dashboard > Presentation > Themes) and have a look at your blog to see what has changed.

Aussies please note: most coding languages were developed by people who couldn’t spell - a common error for Australian beginners is to spell “color” as “colour” and “center” as “centre”

Here is how you can start playing with CSS:

1. Read about surviving the process
2. In your WordPress blog, go to Dashboard > Presentation > Theme Editor and find your stylesheet (it is probably called Stylesheet inside WordPress but is actually a file called style.css)
3. Look for something that you recognise - a heading style, a page background, a sidebar style - and change it. Look at the result - is it what you wanted? If not, change it again, and check the result.
4. When you are confident that you know what you are changing (and how to change it back!), play by changing a lot of different elements. Check constantly so that you are changing the things that you think you are - and in this way, you will come to ‘master’ that particular theme.

To learn more (because there is a heck of a lot more to it than that):

• Flick through the colorlab colour wheel at Visibone,
• Check out the W3Schools beginning CSS tutorial, (it has a good explanation of the theory behind CSS) and
• Look at the CSSTutorial.net CSS tutorial that has some good practical examples.

PHP - the basics
PHP is useful. Really useful.

Like all programming languages, PHP is fairly fussy about syntax - the order in which things go is important.

Here’s an excerpt from the single.php file in the K2 theme:

<?php include (TEMPLATEPATH . ‘/theloop.php’); ?>

What does that mean? Let’s break it down:

• <?php starts the PHP statement,
• include asks the server to include the elements within the brackets,
• ( starts the included elements,
• TEMPLATEPATH is a variable that tells the server where to find the template files (very useful - it means that the template path only needs to be set once, and it can then be called (brought in) many many times)
• . (a full stop) is a concatenation operator in PHP - that is, it says “join this bit of text (the template path) to this other bit (the stuff between the single quotes)”,
• ‘ (a single quote, starting the rest of the text)
• /theloop.php - the rest of the text,
• ‘ (a single quote, finishing the rest of the text,
• ) a closing bracket, closing off the included elements,
• ; the infamous semicolon, without which PHP ceases to be useful (trust me in this - many people-years have been spent by programmers searching for dropped semicolons), and
• ?> ends the PHP statement

While this looks scary, all it is really saying is “include the theloop.php file from the template directory”. Get the quotes, brackets, full stop, semicolon and question marks mixed up and it will cease to be a functioning member of the team

To learn more:

• PHP.net has a simple tutorial that is, well, simple, but a good way to start,
• W3Schools’ tutorial is a little more complex, and
• WPcandy has some neat WP PHP cheat sheets - my favourite is The Advanced WordPress Help Sheet. I heartily recommend their post on The Loop.

What happens next? If you are careful, and start small, and keep at it, then you will soon be as dangerous as everyone else While I say “dangerous” with a smiley, there is a danger in coding carelessly that cannot be understated - you really can take your blog off the map (at least until you’ve restored your backup files). But it can also be very satisfying, knowing that you have more control over your blogging environment and a totally unique theme.

In the next part of this series, I’ll run through the customisation steps for this blog.