Themes worksheet

This worksheet is about editing wordpress themes to change the look and layout of your site.

You can start from any theme, but here are some particularly good ones for editing and customisation:

My notes are a starting point by to really get the most out of wordpress themes you need to do your own research about how they work and how to achieve different effects.

The WordPress themes documentation is a good starting point.

These is more advanced:

codex.wordpress.org/Blog_Design_and_Layout

codex.wordpress.org/Theme_Development

Here are some specific tasks you need to do:

Appearance with CSS

Change the general look of you site, including fonts, colours and spacing by editing the CSS style sheets.

There is a lot of documentation on the wordpress site about editing CSS, this is an introduction:

http://codex.wordpress.org/CSS

Layout with PHP

Edit to the PHP theme files to change the layout of your web page.

  • Change what appears in the side bar.
  • Move elements between different parts of the site, e.g between the header and the sidebar
  • Edit the layout of your page header
  • Add an image to your page header

This explains they layout of wordpress sites:

codex.wordpress.org/Stepping_Into_Templates

Information about editing page headers is here:

codex.wordpress.org/Designing_Headers

Extension: Dynamic content with Processing

HTML, CSS etc are limited in terms of how interactive and animated the content can be. To get some really dynamic content you need to write code in another language, like Processing, and embed it in your page.

This task is to create a Processing applet that works are part of your page, rather than just being displayed on it. For example if could be an animated element in your header or an interactive button.

You need to be careful about creating a Processing sketch of an appropriate size and functionality. You then need to embed it in your php theme files to get it in the right place.

Remember that anything can go inside the <a> link tag, including an embedded Processing sketch.

As a reminder you might want to look at my instructions for embedding a processing sketch

Alternatively, instead of embedding a sketch, you could look at Processing.js, an implementation of Processing in javascript. That means that it can run natively in your browser.

processingjs.org/

PDF    Send article as PDF to