Theme Tips & Best Practices

Tab Indexes

Try to use tabindex property on your form inputs. This is for accessibility reasons.

Use onSubmit over onClick

Make <form> elements submittable, rather than using the JavaScript onClick button event, instead use onSubmit form event.

Reason: Quicker. Accessibility. onClick will only work for the element/s specified, but onSubmit will work for all submit-able elements.

Replace select options

Try not to replace <select> box via AJAX. Try to replace the <option> element instead. http://o7.no/oJBAFS

Reason: When you replace the select box, the selection of the <select> is lost, and it is not user friendly, primarily from an accessibility stand-point.

Don't reuse input names

Try not to use the same name attribute value for different forms that have different purposes.

Reason: Browsers will autofill the forms incorrectly, and cannot remember details for all separate areas. (They remember only the most recent for each name).

Use function_exists for helper functions

Try to use function_exists when defining functions in partials. http://o7.no/neQtD1

Reason: Incase someone tries to use a partial more than once, or else it throws redeclaration errors. It may also be beneficial to allow overloading the definition (a good example is WordPress pluggable functions).

Include CSS first and foremost

CSS should be included together into the page before JavaScript.

Reason: FOUC (Flash of Unstyled Content). Slower, see: Google Site Speed.

Use page specific CSS

Try to reference page-specific content via CSS. There is a helpful snippet for that here.

Use this in your head partial:

<?

if (!isset($this->data['body_classes']))
        $this->data['body_classes'] = array();

$page_class = str_replace('/', '-', substr($this->page->url, 1));

if (!$page_class)
        $page_class = 'home';

$this->data['body_classes'][] = $page_class;

?>

It converts your page URL into a CSS reference-able token:

  • / => body.home
  • /about => body.about
  • /contact => body.contact
  • /blog/post => body.blog-post
  • /account/register => body.account-register

Use this where your BODY tag is located, most of the time this will be in each template.

<body class="<?= implode(' ', $this->data['body_classes']) ?>">

It can be extended in the Pre-Action Code on a per-page basis:

$this->data['body_classes'][] = 'test';

Referenced in CSS:

body.home {
	/* do something amazing */
}

Good examples are: carousels, portfolio sliders, checkout tables.

Reason: If you attempt to make a generic CSS set instead of using one-offs, you will often bite yourself in the butt with future attempts to alter it for X page, screwing up Y page.

Avoid too much logic within HTML

Try not to embed too much logic inside HTML elements. Bad: http://o7.no/A3SW9g Good: http://o7.no/wHD9J1

Reason: When other people or you in the future look at the code, it may not be clear what's going on. Using logic outside of the HTML element is easier to read at a glance. It's worth the extra lines.

Use empty javascript for links

Try to use javascript:; instead of # for JavaScript links. (Ideally you would have a non-JS associated page). So instead of this:

<a href="#">Create tag group</a>

Use this instead:

<a href="javascript:;">Create tag group</a>

Reason: If an error occurs in your JavaScript when you click the link, and the propagated event is not stopped, you may be redirected to the root domain or your window scroll will go to the top of page. It makes debugging more difficult.