course notes 2016/17

WordPress theme design

Mar 15th 2017

I’m really looking forward to taking you all through the theme design today ~ let’s see how beautiful your blogs will become once you start creating your own themes :)

NOTE: I’ve recently delivered 2 workshops elsewhere on this very topic, thought you might like a look: Digital Practices ↗You will be familiar with plenty as we have covered lots of these resources in class – could be a handy reminder :)

working with WordPress

When developing a new WP site – you should always work on a development server, and never on the live version. This could be your local server (for example, via XAMPP), or a development setup on your server. Once your theme is completed – you can then safely setup the live site and know all will work as planned.

CMS recap

  • database as storage for all content (text/media files)
  • theme as design layer, independent from content
  • easy updates and backups of content
  • easy design updates / changes
  • performance relies on all components

WP theme & setup

  1. prepare design as HTML/CSS prototype
  2. check / add code comments and annotations, inc fonts, colours and brand info
  3. transfer layout structure to relevant theme file/s
  4. update CSS for correct file paths
  5. check for additional content presented via WordPress
  6. upload and activate theme
  7. test! test! test!

Let’s go!

With so much material out there to support you on your journey into designing your own custom themes for WordPress, we’re going to focus on the practical task today. Rather than spend a lot of time discussing the technical aspects we’ll work on transferring an existing design into a WordPress theme.

The WP codex  will always be your best friend – and if you’d like another way to read up – check out WPHierarchy. It offers a clear flow chart which breaks down the components, with direct links  to their references, very handy :)

Let’s go through the process of transferring an existing design into a WordPress theme together :)
Download the 2 ZIP files below to get started.
↓ download the sample design
↓ download the vanilla theme



slack iconLoveWP team on Slack from now on :)

Those of you looking to work with WordPress for your major project: join our dedicated Slack team. It will be easier to keep our conversations separate from the rest of the program talk. This will mean less clutter for those not interested, and more focus for the rest of us WP lovers :) Let me know if you’d like to be invited.

Last session thoughts.

How time has flown by! Today is already the last session of this course… Hope you enjoyed our sessions and that you feel you’ve learnt a lot :) Good luck with your work on your major project!

One final piece of advice: don’t forget to back up your work continuously!

And I hope that you will carry the torch for web standards and the all inclusive web forward, via your major projects and beyond! Wishing you all the best for your design journey on the web!

Long live the Open Web, and with it Open Source!

Comments are closed.