course notes 2018/19

wordpress design illustration

WordPress theme design

Mar 13th 2019

Ready for a little challenge? — 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 :)

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 MAMP or  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

CMS illustration
  • 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

theme design illustration
  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!
  8. expand to all content elements – check on WP-generated classes!

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.

theme files illustration

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 design prototype
↓ download the vanilla theme ‘eyestyle 2018’

LoveWP 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 final day 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.