WordPress is an incredibly powerful platform that will empower you with the potential to reach the entire world with whatever you have to say. Even though WordPress combines relatively simplicity with incredible power and potential doing things like customizing Genesis themes can be a little intimidating if you’re just getting started, or if you’re just getting started tinkering “under the hood.”
Fortunately we can take some of the mystery out of it and help you avoid some of the most common pitfalls. In this post I’m going to describe the simple workflow that I’ve been using since my early days working on WordPress sites.
The big goal here is to be able to recover things quickly if when I make a mistake.
Yes, even after working with WordPress for over 8 years I still make mistakes. You will too, especially when you are first starting out. The way I’ve structured my workflow mistakes are no big deal because I make it easy to revert back to what I had before things “broke.”
Overarching Concept
It sounds obvious, but one of the main things to keep in mind is that computers only do what they are told to do. That means that if something is working as expected, then I change something and I see something I don’t expect (or I break something) then it must mean I gave the computer incorrect instructions somewhere along the way.
Therefore when I’m troubleshooting something, especially something that I’ve done, I start with the perspective of “what did I do wrong.” When I find that and correct it, then it starts working correctly.
If I see another example of what I’m trying to achieve, like say a working theme demo, and mine’s messed up then I look to see what is different about mine and theirs. I assume the mistake is on my end, not theirs.
Most of the time that’s a safe assumption, though obviously now that I’ve got years of experience I can often come in behind other folks and see what they did wrong too. That’s because I’ve made most of the same mistakes myself at some point.
How NOT to Customize Your Theme
The next thing I want to point out is how not to customize your theme files.
As a general rule, never ever (ever!!) customize your theme files by editing them from the Appearance –> Editor menu in your WordPress dashboard.
This one tip alone is worth the price of admission because it will save you hours and hours of grief.
There are two problems with editing your theme files (and the same applies to your plugin files with the Plugins –> Editor too).
The first big problem with editing your theme and plugin files from the WordPress dashboard is that there is no simple way to undo a typo or other mistake once you hit that teal “Update File” button. Therefore you are left solely dependent on your memory to revert a change that didn’t produce the results you intended.
Of course that’s assuming the second even bigger problem doesn’t get you.
It is very easy, especially with PHP files, for a typo as simple as a missing semi-colon or leaving out a closing bracket to throw your WordPress site into the white screen of death. When that happens you often cannot access your WordPress dashboard anymore.
That can ruin your day. How do you fix a problem with the file you just edited from your WordPress dashboard when you can no longer get to your dashboard?
You have to log into your site via FTP to restore access to your WordPress dashboard. Messing with server files via FTP may sound a little intimidating, especially if you’ve only ever edited your files via the WordPress dashboard editor.
But here’s the thing. You will make a mistake at some point and lock yourself out of your dashboard. It’s just a matter of time. I’m here to tell you that it’s a whole lot easier to learn how to use FTP before you crash your website rather than with the added pressure of trying to figure it out when your website is hard down.
The Right Way to Do Genesis Theme Customizations
That’s why editing theme files on my local computer and then FTP’ing them up to the server is part of my workflow. Here’s a basic outline of how to customize your Genesis themes the right way:
- Backup your existing theme to your local computer via FTP
- Make a duplicate copy of your theme before you start working on it
- Open your working copy of the file you want to edit in a good text editor
- Make your change
- FTP the file to its proper place on your server
- View the corresponding web page in your web browser
- If your change didn’t work correct it
- If it did then move on to the next change
It’s not very complicated, is it?
The goal here is twofold. First we want to make it as easy as possible to go back to where we started in the event that we mess something up. And trust me, at some point you will mess things up.
I can’t tell you how many times I’ve been working on a website trying to figure out how to do something I’ve never done before only to get to the point that I realize the path I’m going down is just plain not working. It’s so nice to be able to just upload a copy of the files that put the site back in the condition it was before I started.
At that moment I may not have fixed the problem. But at least I can get it to a place where I haven’t made it any worse. And often, by taking a little break to clear my head and reproaching the problem fresh I come up with a better way to solve the problem that works out pretty well.
Not having the pressure of trying to remember how to undo what I did gives me room to think about better solutions.
Work Local
That’s why I recommend not only working on your local machine. It’s a good idea also to backup your theme before you start working on it. That way you have 2 copies on your local machine. One that you’re working on and one that hasn’t been touched in the current customization session.
When I’m making massive changes to a site, or starting from scratch for a custom site, it’s not unusual for me to make backups along the way. Backing up things at the start of a new day is a good idea.
I also recommend taking a look at each change you make by refreshing the affected page on your site in your browser. Make a change. Look at it. Make another change. Look at it. Etc.
Rapid Iterations
It may seem like making one change, FTP’ing the file up, refreshing your browser, going back to your editor to make another change and repeat the process is a slow way to go about it.
But in the long term it is a whole lot faster than making a whole slew of changes before you look at what they do. Because then you’ve got to dig back through all of your changes to figure out which one broke things or did what you didn’t expect it to.
When you’ve just changed one thing and gotten an unexpected result you can focus on what is wrong with that one thing and sort it out and then move on.
However, if you’ve just made 27 changes before you looked back at the site and see something wrong, then you got to dig through a whole bunch of code to figure out which one made that happen. I promise it won’t take very many times experiencing that frustration before you realize it’s a good idea to check each individual change as you go.
Besides, as you get more skilled you will find you can cycle through that process very quickly. Part of that is because you see fewer and fewer unexpected results from your changes. And part is the results of simple practice. I’m in it every day so I can work through the whole process, including switching between apps on my computer, without ever touching my mouse.
You get pretty fast at it.
And yes, as you get more experienced you can make larger batches of changes before you look at things and still not end up wasting much time. But for those just getting started I strongly recommend making 1 change at a time.
Making Recovery Easy
My career before I got into WordPress development was in marine cargo handling. I had several jobs where I was in charge of where and how containers were loaded aboard ships.
I had to make decisions all day long, and most of them had significant cost implications for the operation. I learned early on to do my best to leave as many options open as long as possible.
Many times when you decide to do one thing that means you are not going to be able to do another thing later on. Often there’s nothing wrong with making that choice. One of the things I learned, though, is that you can sometimes do the first thing in a slightly different way that doesn’t automatically exclude the option to do the second thing down the road.
That’s basically the principle I’m shooting for when I’m customizing themes. I want to be sure I have a way to go back to where I was before and press forward in a different direction if what I’m doing now doesn’t do what I want it to do.
Remember the white screen of death? My method won’t eliminate that from happening. Face it. When something as simple as a missing semicolon can crash your website, it’s bound to happen sooner or later.
The good news is, that when you use this workflow recovery only takes a matter of moments and your website is barely down long enough for anyone to notice.
Just click “Undo” in your text editor, FTP up the previous version of your file and rock on. That’s a whole lot less stressful than being completely locked out of your crashed site with no idea how to undo the damage you just did.
This is the fourth in our series of articles on Best Practices for Genesis Theme Customization.
Herb Trevathan says
Good Stuff Chris!! I get lots of clients who could have avoided paying me to fix their their theme if they followed these guidelines. The editor is key…after several successful css paste ins, clients can get comfortable, then going on to get into and editing the php. Some sites wrap the code, and some sites don’t but you’re right one function syntax error and – boom – dead website.
Rebecca Gill says
I will confess – before I met Chris I made edits CSS via the admin panel. I am happy to say I have not done that for years. This is both for safety of PHP and to protect myself from Chris. =)
Chris Cree says
Don’t let Rebecca kid you. I’m a softie.
But seriously, most new folks don’t understand the power they have with the dashboard editor, power both for good and for destruction. It’s just too easy to leave off a closing bracket or semicolon when copying and pasting code into the dashboard editor. And that’s all it takes to crash a site.
Rob Cubbon says
Cool synopsis of the workflow.
Over the years I’ve really wished WordPress would improve the functionality of Appearance > Editor. I mean just numbering the lines would be nice. (Admission of guilt, I still edit via the Admin panel sometimes when is a small change. I like to live life dangerously 😉
My process of theme editing is opening the file (usually style.css or functions.php) in Dreamweaver, making one edit, save, (upload by FTP if not working locally), refresh, observe.
I may have to splash out on Coda. DW has FTP capabilities as well but they’re a little complicated to set up. I only use DW because it’s bundled with the CS I use.