John's Windows WordPress Theme Development Workflow (now with SASS!)

by on May 6, 2013

Every developer here at Inverse Paradox has his or her own methodology, style, and tool-set when building a new WordPress theme. The following is one man’s attempt at streamlining the workflow with the goal of minimizing the often tedious procedures that are necessary to take a project from design file to fully formed WordPress theme. Any cut in keystrokes or mouse-clicks is a victory in my eyes.

Typical Flow:

  1. Write code / markup
  2. Process SASS
  3. Upload new files to server
  4. Refresh browser

Ideal Flow:

  1. Write code / markup

With a bit of help from our Sublime Text packages (and a healthy dose of configuring) — we can streamline the process to a single step.

The Tools:

Two Dev Modes

When starting a new theme, I usually code the HTML / CSS first (index.html, any other interior.html), then break it down to the individual theme files (header.php, sidebar.php, etc). This creates two different development “modes” — offline front-end design and actual theme coding. This separation isn’t a necessity, only my preferred method.

Front End

This is the fun and exciting part of the project. Everything you need is in the design file, the project is fresh and new, and your spirit has not been weighed down by bug fixes, demanding deadlines, or project re-specification … (yet).

Since we are just addressing the visual design (HTML, CSS, JS) we can do it all from our computer. No webserver, ftp, or internet needed. There are only three basic items we need:

  1. The design file (in Photoshop)
  2. The file editor (Sublime Text 2) with our IP Boilerplate
  3. The browser (Chrome)

The dream obviously would be a three monitor work station (one for each) — but for now that is a bit out of reach. Personally, I find I don’t need much visual room for the editor, so I usually divide among my two monitors this way:

001

Left Screen: All Photoshop
Right Screen: 75% Browser (wide enough for the full screen design, normally 1140px) / 25% Editor

With SASS and LiveReload properly configured, you will be able to make changes in the HTML and SCSS, save, and instantly see the results.

Theme Coding

Once the initial design is built, it is time to break it down into an actual theme. This can be done all at once, or piece by piece. But once the theme is together and on the server, it is time for the real project to begin. The cycle reviewing and tweaking / adding / fixing starts here. Often you’ll only need the two items here:

  1. The browser (Chrome / Firefox)
  2. The file editor
  3. (Optional) Details / guidelines of fixes or additions (e-mail, to-do manager, etc)

002

So a 50/50 split will often suffice here.

The idea is to configure FTPSync so that changes made to any theme file (including styles and scripts) will be noticed and uploaded automatically. This saves us from having to compile and manually upload updated files each time (which, if you’re like me, will be many, many times). You can do this with the following config file:


{
// your main connection
"default": {

// address
“host”: “yourhost.com”,

//”port”: 21,

// credentials
“username”: “username”, // or null for anonymous login
“password”: “password”,

// server path to your project (example: /www/)
// start with “/” and then append all the folders you’d need to open to get to your project from topmost folder
“path”: “/public_html/wp-content/themes/ThemeName/”,

// encoding used for filenames and filepaths (“auto” or other charset name)
//
// auto = use UTF-8 if availible (FEAT: UTF8), otherwise use local
//
//”encoding”: “auto”,

// Whether to use secured FTP connection
// ‘true’ is recommended
//”tls”: false,

// set whether the connection will be passive or active
“passive”: true,

// whether to use temporary files for more stable transfer
// has only a very small performance impact when transfering large amounts of files
// ‘true’ is highly recommended
//”use_tempfile”: true,

// true = upload on save, false = upload only manually
“upload_on_save”: true,

// how long until connection closes [seconds], unless closed immediately
//”timeout”: 30,

// regular expression, when matches the file path of the file-to-be-uploaded, it cancels its upload
// recommending using b in general and /…/ for folders to avoid matching substrings
//”ignore”: “”,

// whether to check ‘last updated’ of the target file on server
//”overwrite_newer_prevention”: true,

// if set to true it will download the file from server on opening, but only if it’s newer than the current file
//”download_on_open”: false,

// delay [seconds] before changed file is uploaded !when using upload_on_save!
// can be used for increase of performance or to allow build scripts to finish
“upload_delay”: 2,

// If the server you’re working with is in a different timezone, you can specify the offset here
// in seconds. For example, if the FTP server is 1 hour ahead of you, use -3600 as the offset to
// make comparisons against the server time take 3600 seconds off of the server time.
//”time_offset”: 2,

// If the server has MFMT extension installed, it will set true last modified value based on local file’s last modified value
//”set_remote_lastmodified”: true,

// chmod value for directories created on remote server by FTPSync
//”default_folder_permissions”: “755”,

// list of lists with pathnames and filenames to folders to be watched for change in between delay (upload_delay)
//
// ** example:
// after_save_watch: [ [ “code/assets/css”, “*.css” ], [ “code/assets/”, “*.jpg, *.png, *.gif” ] ]
//
// ** Used only in conjunction with upload_on_save and upload_delay **
//
//”after_save_watch”: []
“after_save_watch”: [ [“scss”, “*.scss” ], [ “css”, “*.css” ] ]

}
}

Note: If you use this directly, be sure to update your host, username, password, and path.

Walkthrough:

Initial Setup:

  1. Install Sublime Text 2 (optionally with the Soda Theme)
  2. Install package control
  3. With package control, install: SCSS, FTPSync, SublimeOnSaveBuild
  4. Follow these steps to configure Ruby and SASS Build
  5. Configure SublimeOnSaveBuild in Sublime Text 2 by going to Preferences > Package Settings > SublimeOnSaveBuild > Settings — User and use the SublimeOnSaveBuild configuration below
  6. Configure SASS Build in Sublime Text 2 by going to Preferences > Browse Packages > SASS Build and editing both SASS – Compressed.sublime-build and SASS.sublime-build to match SASS Build configuration below
  7. Install LiveReload and the Chrome Extension

Per Project:

  1. Create a new instance of the IP Boilerplate and add it to SublimeText2 as a new project (drag the folder onto a fresh window)
  2. (Optionally) proceed with Dev Mode One: Front End by adding the project directory to LiveReload, loading the index.html into chrome, and enabling LiveReload
  3. Install WordPress on the server, and add the theme (through FileZilla or any other file manager)
  4. Configure FTPSync by right-clicking the folder in the ST2 sidebar, and choosing FTPSync > Setup FTPSync in this folder. This will create an ftpsync.settings config file. Use a configuration like the one above, which is set to automatically upload on save, and upload newly compiled .css files as needed. If you copy and paste it, you’ll only need to change the host, username, password, and path.
  5. Continue on with the project, adding or modifying theme files as needed.

SublimeSaveOnBuild Configuration

{
"filename_filter": "\.(sass|less|scss)$",
"build_on_save": 1,
"cmd": ["sass --watch scss:css"]
}

SASS Build Configuration

{

“cmd”: [“sass”, “–update”, “$file:${file_path}/../css/${file_base_name}.css”, “–stop-on-error”, “–no-cache”, “&”, “sass”, “–update”, “${file_path}/global.scss:${file_path}/../css/global.css”, “–stop-on-error”, “–no-cache”],
“selector”: “source.sass, source.scss”,
“line_regex”: “Line ([0-9]+):”,

“osx”:
{
“path”: “/usr/local/bin:$PATH”
},

“windows”:
{
“shell”: “true”
}

}

Share This Post