Design/build : WordPress themes

from design prototype to theme : how to get started

Start simple.

published 1/3/2018 by author name

Having gotten to grips with implementing your designs via HTML and CSS and having made a start on PHP - you're now ready to start building your own WP theme ;) This will initially feel like quite a challenge (which it is) - you'll soon be on your way, I'm sure.

If this is your very first theme build, my advice is to start with a simple design to allow yourself time to explore and experiment, to make mistakes and to learn. Plan for a small site, maybe a diary of your work on your project? - and create your content alongside a simple design for the site. Work on a representative prototype (HTML/CSS/JS) and proceed to the theme build.

Content out

As with any site design, you will start with your content, then the design - followed by the theme build. When designing for any CMS, it is important to work with given content. Attempting to design a theme or template for an empty site will only result in lots of time wasted, confusions during content input and your learning process will be much slower.

Content precedes design. Design in the absence of content is not design, it’s decoration.
Jeffrey Zeldman

Even once you are confident in your theme building skills, you will still approach the work as usual: content out and mobile first :)

read full article →

summary of theme build

published 1/12/2018 by author name

Before the build - what you need:

  • IA / site plan
    this will guide your planning for the templates and UI
  • content : text / media
    i deally full content, at the very minimum: exemplary content type samples (i.e. examples featuring the typical content your site will feature, such as posts with multiple images, or none, or text featuring lists, blockquotes and other formats)
  • site design prototype
    ideally full content, at the very minimum: exemplary content type samples (i.e. examples featuring the typical content your site will feature, such as posts with multiple images, or none, or text featuring lists, blockquotes and other formats)

WordPress site setup

While you could work on your prototype offline, the theme build will require a server setup to run the PHP. You can set up a local server (using MAMP or the like), or work on a remote server ~ entirely up to you.

Initially, you will be mainly working on transferring the structure from prototype to theme files. But in order to preview, test and tweak - you will have to install and activate the theme, be that local or remote.

From prototype to theme

  1. plan for content types / templates
    completed prototype in hand, make notes on your content structure within Wordpress in regards to content types such as pages, posts and categories.
  2. content input / WP setups
    before you begin your build, your new WordPress site has to be set up and configured, content added with pages/posts/categories as required.
  3. theme build
    you are now ready to build the theme: opening up the prototype as well as the theme in your code editor, you can now work through the files and implement your static design by transferring your layout structure's markup (HTML/CSS) to the relevant theme files (PHP).

read full article →