Presentation by Rob Winter at the WordPress NYC Meetup Group. How to use CodeKit with Flywheel Local and Sublime Text from a visual designer, developer point of view.
3. CodeKit
In order for CodeKit to work, it must have the
exact same pathways to both the original website
directories and the development directories
§ Create a development directory locally
§ In it put the WordPress path of directories with identical content
dev directory > wp-content > themes > your theme
§ Drag and drop the development directory into CodeKit
Set Up
4. CodeKit
Connecting the local website and the development code
§ Boot the local site on Flywheel Local
§ Go to the home page in the browser and copy the URL
But only up to and including “.local”
Connecting 1
5. CodeKit
Paste URL into Project Settings > Browser-Refreshing
§ Turn on “Use an External Server:”
§ Paste in URL in “External Server Address:”
§ Select “Override remote CSS files with local copies”
Connecting 2
6. CodeKit
Make sure to turn on the
TLS “Security Options” or the site will not boot
Once selected, the server should restart automatically
Connecting 3
7. CodeKit
Now boot the development site
in the browser of your choice.
My personal preference is to have the Local site in
Safari and the development site in Chrome (or Firefox)
Make sure that SSL is set to “Trusted” in Local
Connecting 4
8. CodeKit
Set what directory you want the CSS file to compile
in the Development folder
You can also set minifying, debugging, source map and
other options, just above the output panel
Connecting 5
9. CodeKit
Inside CodeKit right-click the directory you want to open
and navigate to Open With > Other...
Select Sublime Text
(or the text editor of
your choice)
& Sublime Text 1
10. CodeKit
You now have watched directories in the text editor and all
saved changes will:
§ Compile automatically in CodeKit
§ Update CodeKit's selected browser
§ Create a log of the compiling in CodeKit& Sublime Text 2
11. CodeKit
You now have both pages
One from the original site (on the left)
One with the development code (on the right)
& Sublime Text 3
