This article is intended for developers and designers who modify our themes, and outlines best practices for maintaining changes when working on client projects, whether you use a child theme, or have forked the original into your own theme.
View related topics:
Restyling vs Modification
Just about any visual change to the theme can be done exclusively with CSS. This even means moving elements around to an extent. As best practice #1, attempt to do as much of the re-design in CSS as possible using the Theme’s Custom CSS field. We are able to provide 100% support for CSS-based changes to the extent of helping you isolate selectors or determine the best way to tackle specific styling.
Custom CSS vs custom.css
Custom CSS has the advantage of being stored in the database and can survive catastrophic failure of the theme’s folder or files due to reinstall, user error or code injection attacks. The custom.css, on the other hand, can be overwritten or deleted. In the case where you don’t want your client to be able to see the Custom CSS, we recommend hiding the Theme Options using custom role management in a plugin such as Admin Menu Editor, or setting up custom roles with Justin Tadlock’s Members plugin.
If you are not modifying templates, but want to ADD functions or templates, you can do it two ways:
1. Frankenstein mode – create a copy of the widgets with unique class names and drop them into the theme’s widgets folder. Custom functions can go into a myfunctions.php and dropped into the ocmx/includes folder. Please don’t do this on client sites unless you plan to maintain and support them.
2. Create a Child theme (recommended):
In cases where you need to get into adding or modifying the HTML markup in the templates or add PHP for any reason, a child theme is necessary. Child themes allow you to segregate template changes from the original theme. This allows you or your client to keep the original theme updated, which is critical for several reasons, without it necessarily breaking the front-end. This does not mean you don’t ever have to update your child theme or modifications – it just makes the maintenance process easier as we are not able to support a modified theme or your modifications, but we can easily knock out issues in the original theme or help you determine which is the cause when you are using a child theme.
Updating a Modified Theme
The most important thing you can do for yourself is version-control your changes and keep an update log. To increment your versions, change the version in your child theme style.css each time you are done with a change. For example, if your version is 1.0 to start, the next change is 1.0.1 and so on.
We recommend using a system like GitHub or BitBucket to track and log changes. These systems allow you to establish a control repository on your computer, which is used to compare against your changed version of the repository contents. To put simply, you can have a copy of the theme in this folder that you keep updated but never change, and a copy of your child theme. This syncs to the remote server. When you make changes or when we make changes, you can then easily compare the files to see line-by-line changes and carry them over to your modified templates or vice versa.
If Git or Bitbucket seems too complicated or advanced, there are desktop programs that can help you compare two files, allowing you to check our udated source code against your modified code.
Kaleidoscope is a great premium program for Mac, or WinMerge is a popular free and open source alternative for Windows users. Many HTML tools such as Dreamweaver and Sublime also have a find and replace or compare mode.