WordPress theme design
Ready for a little challenge? — I’m really looking forward to taking you all through the theme design today ~ this will be an unsual, online-only session which should be interesting and fun:)
Meet Jitsi – an open source, super-friendly video chat (works best in Chrome, as some of you will be happy to know :D) — I will post the link to our session here in due course.
We will try to use this as video chat initially – bear in mind that on poor connection, camera or mic might switch off. You can always switch this off/on as and how you like. I will use the screen sharing to work with you through the theme build today.
NOTE: I will be following up today’s session with some notes on the process we are going through today, and WordPress-specific resources to the demo site I’ll be using for our session: learning WP theme design
Please do check this site out in more detail if you’re going to use WP for your major projects — you’re welcome to use the comments to ask any questions you may have ;)
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.
- 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
- prepare design as HTML/CSS prototype
- check / add code comments and annotations, inc fonts, colours and brand info
- transfer layout structure to relevant theme file/s
- update CSS for correct file paths
- check for additional content presented via WordPress
- upload and activate theme
- test! test! test!
- expand to all content elements – check on WP-generated classes!
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 design prototype
↓ download the vanilla theme ‘eyestyle 2020’
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!