Just Free Templates

Making your code readable provides a good start for others to modify and build upon your own work. From making useful comments to consistent indentation, there are a number of best practices which can help improve the readability of your code and improving your free web templates! Read on for a few of our top tips.

Use indentation and keep it consistent

Indenting your code makes it instantly more readable and often allows debugging easier if you are missing a closing </div> tag or bracket. There are a number of ways to indent your code but whichever you choose, keep it consistent through your files.

<div id="outside-container">
    <div id="header">
    	<div id="logo">
        	<h1><a href="/">My Website</a></h1>
        </div>
    </div>
</div>

<div id="outside-container"><div id="header">
<div id="logo"><h1><a href="/">My Website</a></h1>
</div>
</div>
</div>

Furthermore If you’re looking to extend or add to a project, it’s always best to use the indentation style that is already being used rather than doing your own thing.

Provide helpful, but not obvious comments

Commenting is a great way to explain what the code you’ve written is doing when it’s not explicitly clear, however when it is obvious what the code is doing, don’t bother adding unnecessary comments:

<?php
// increment counter
$counter++;
?>

You should also aim to include comments about customising your work in your free web templates, for example in your HTML pages you may point out where the page content or navigation goes:

<div id="container">
    <div id="main-page">
        <!-- put your content here -->
        <p>Your content...</p>
    </div>
</div>

Commenting can also extend to your CSS files:

#sidebar ul a {
    color: #ff9900; /* Change this to change the colour of the sidebar links */
    padding: 5px;
}

Use a consistent naming scheme

From the ID’s of your <> tags in your HTML files to the function names in your WordPress theme, pick a naming scheme and stick with it. Whether you choose to name functions using underscores between words or using camelCase, keeping it the same throughout your project makes it far easier for others to read and understand your code.

As with coding indentation, you should aim to follow the conventions of the current source if you are extending a project. WordPress, for example, expects you to use lowercase letters in function and variable names, using underscores to separate words. You should therefore not use camelCase in your theme’s function file.

A good example

Element IDs have been consistently named in lowercase, with hyphens separating words. Functions and variables follow a similar lowercase convention, with underscores being used to separate words.

<div id="outer-container">
    <div id="inner-container">
        <div id="left-sidebar">
            <?php
                $my_variable = do_something('input');
                $my_value    = calculate_something($my_variable);
                $my_object->do_something_else($my_variable);
            ?> 
        </div>
    </div>
</div>

A poor example

There is no consistent naming of the HTML elements, with camelCase being mixed with other naming schemes and the styling of the names of functions and variables within the PHP code change with each line.

<div id="outerContainer">
    <div id="inner-container">
        <div id="leftsidebar">
            <?php
                $my_variable = doSomething('input');
                $myvalue      = calculatesomething($my_variable);
                $myObject->do_something_else($my_variable);
            ?> 
        </div>
    </div>
</div>

Making use of these suggestions in your work (plus a bit of common sense!) will allow you to write much more readable, and hence extendable, code for others.