CUSTOMIZING GENESIS – A QUESTION OF ‘BEST PRACTICE’
Some time ago, I stumbled upon a YouTube video entitled “How to Safely Customize Your Genesis Child Theme”, in which Katrinah (katrinah.com) explained how to customize Genesis child themes using secondary custom files to protect customizations from theme updates.
As a fellow Genesis user and third-party developer, I saw Katrinah’s tutorial as a helpful resource for the Genesis community. However, I recently happened upon the video again to find the original content removed and several comments taking issue with adding secondary files over editing theme files directly. StudioPress support also weighed in, stating that Best Practice is to edit theme files directly because Genesis child themes do not get updated.
Well, this might be true of some StudioPress themes. However, many Genesis child themes do get updated, including StudioPress and third-party themes adapting to new technologies (e.g. responsiveness) or respecting new web protocols (e.g. accessibility), and those which integrate frequently-updated plugins (e.g. WooCommerce) which, in turn, necessitate theme updates.
Another limitation is WordPress multisite. Customizing the Genesis child theme’s native files restricts the developer to either network-wide customization using one theme, or multiple theme copies to customize each site. Alternatively, secondary custom files offer a simple, light-weight solution to target individual site customizations while using the single Genesis theme.
Check out my other article entitled, “You Don’t NEED to Update Your Genesis Child Theme … but SHOULD You?” for a deeper analysis of the Great Update Debate.
BENDING THE RULES, NOT BREAKING THEM
So, in view of the little debate above, here are a few considerations up-front –
- WP Clips uses secondary custom files.
I believe there is good reason to abide by StudioPress’s Best Practice method. However, I also believe there is a place for adding secondary custom files, in particular for customizing Genesis child themes which offer updates or require ongoing customization. - WP Clips is still extremely useful in combination with Best Practice.
You can always transfer your code back to the theme’s native files. In this case, WP Clips offers both a helpful facility for massaging and testing your code, and an easily activated or deactivated back-up of your customizations. - WP Clips is ideal for customizing with code.
At just 10kb in size, the starter plugin contains little more than a folder of empty files. It’s not intended to replace more intuitive customizers such as Genesis Extender or Design Palette Pro. However, if you want to dive into code and get your hands dirty, WP Clips offers a great outdoor playground while keeping your home neat and tidy. - WP Clips is ideal for customizing multisite environments.
The multisite plugin enables customizations to be applied across the network or to individual sites using one Genesis child theme installation.
… if you want to dive into code and get your hands dirty, WP Clips offers a great outdoor playground while keeping your home neat and tidy.
PUTTING WP CLIPS INTO PRACTICE
So, you’ve installed your Genesis child theme and it’s time to start customizing. Well, here are some very simple steps:
- Download WP Clips from wpclips.net
Note that multisite requires WP Clips Multisite plugin to be installed. Further information on using the multisite plugin can be found at wpclips.net/wp-clips-multisite - Install and activate the plugin.
Both plugins can be installed as must-use (mu-) plugins for best security. - Now, dive in and start customizing.
I won’t use this forum to expand on the how-to’s of customizing Genesis child themes. I’ll simply discuss in relation to WP Clips, and include some resources at the end.So, central to customizing with WP Clips are the custom files located in the wp-content/clips/clip-core/ and wp-content/clips/clip-custom/ directories – the core and custom Clips. These files include:
core-functions.php – for WordPress core functions
custom-functions.php – for theme/plugin custom PHP functions
custom-script.js – for theme/plugin custom JS/jQuery scripts
custom-style.css – for theme/plugin custom CSS stylesVisit https://wpclips.net/customizing/ to learn about customizing with WP Clips.
- Life after customizing.
If you are comfortable keeping your customizations within the active Clip (my preference), then start celebrating. You’re done! If, however, you wish to adhere to Best Practice, then carefully transfer the customizations across to your native theme files (adjust paths and parameters where required) and simply deactivate the plugin.Leave the plugin installed for future customizing and as a back-up should you ever need to restore or update the original child theme. Your customizations will be reinstated immediately upon reactivation.
This is the practical advantage to using secondary custom files when customizing Genesis child themes. You can always return to basecamp in seconds. It’s not so easy when your customizations are scattered throughout the theme’s native files.
A FEW TIPS
Additional files and content
You can add and enqueue any required files and content within the custom Clip folders (e.g. images or lib folders, jquery plugins). There’s really no limit to how you use the Clip.
Customizing native theme files
Sometimes, it just makes good sense to customize native files directly. A log.txt plain text file is included within the Clip to record any such changes.
Translation
The WP Clips plugin itself is translation-ready and includes a /languages/wp-clips.pot file. If leaving the custom Clip active, this file can be updated at any time with a simple translation plugin (e.g. Poedit) to include all translatable custom text.
Changing to a must use (mu-) plugin
After development, you may want to consider transferring the plugin folder contents (not the plugin folder) to a new or existing /wp-content/mu-plugins/ directory. This will block access to custom files and prevent plugin deletion via WordPress admin. A good final safeguard before hand-over to a client.
Don’t stress and have fun
As I said before, WP Clips is like an outdoor playground for customizing Genesis themes. You can get your hands dirty, try new things, toss ideas in the air and see how they land, anything you like, always knowing that your fundamental theme remains unchanged.
FINALLY …
Please check out the WP Clips website wpclips.net. There is plenty of documentation and FAQ’s on how the plugin works and how you can tailor WP Clips to fit your needs. Also, learn about WP Clips Multisite, Precoded Clips and the new ClipBank™.
And remember, WP Clips is constantly being improved. So, please send us your feedback – maybe a new feature you’d like to see, or a different application you’ve discovered, or perhaps you’d simply like to weigh in on the ‘question of custom files’. Don’t be shy. Throw your comments our way!
StudioPress website (where it all starts) – www.studiopress.com
Brad Dalton’s WP Sites (awesome code snippets and tutorials) – wpsites.com
Sridhar Katakam (equally awesome code snippets and tutorials) – sridharkatakam.com
Carrie Dils (more awesome customizing Genesis info) – www.carriedils.com
Nick Davis’s Genesis Guide (keep up to date on all things Genesis) – genesiswp.guide
Chrome DevTools (learn how to use the inspector and other browser dev tools) – developers.google.com/web/tools/chrome-devtools/
Mark says
I bought your Envy duo package and liked the full screen responsive slider. I decided to test out your WP Clips using genesis sample theme. I have added a front page file and put a widget on it. I have set up the responsive slider exactly the way I set it up in Envy Pro. Then I add the WP Clips Plus plugin and upload the full window clip. Nothing happens. The source code shows all the files are loading but nothing is changing on the slider. Any feedback would be appreciated. Thanks.
Jon Barratt says
Hi Mark
You shouldn’t need to add a front-page template to the Genesis Sample theme. The Clip will hook in its own widget area (‘Home Full-Window Slider’) beneath the header. You should see it under widgets. You also don’t need to set up the Genesis Responsive Slider settings. Just do a reset and the correct settings should be applied.
Is the widget area appearing? Or is it appearing and the slider is not doing what you’d expect?
If you have a link, I’d be happy to check it out.
Best always
Jon
David says
Hi and thanks for a great plugin.
How can I change the order of Clips CSS enquing so that it loads last thus overriding my Genesis child theme?
Thanks
Jon Barratt says
Hi David
The Clips CSS is already coded to enqueue after the Genesis child theme. If you’re experiencing an issue, please send me some details (including a link to your site or page) via the ‘contact us’ form and I’ll be happy to investigate.
Best always
Jon
Damien Carbery says
While wp_clips_custom_scripts() is called with priority 15, this does not mean that custom-style.css is loaded after the Genesis child theme stylesheet. It is the dependency parameter of wp_enqueue_style() that governs that.
(I am looking at wp-clips 1.0.0 genesis).
Jon Barratt says
Yes, that’s correct Damien. Same priority is given to all WP Clips versions.
Jon Barratt says
Sorry Damien. I should expand on that a little further. The default priority for loading a Genesis child theme stylesheet is 5 (as dictated by the framework). WP Clips is 15. So, unless the priority is altered from within the child theme, the WP Clips custom-style.css should load after the child theme stylesheet.
Jon Barratt says
Note to self. Don’t respond to forum comments at 12.30 in the morning having attended a friend’s ‘bon voyage’ function 🙂
Damien, you were talking about dependencies! I see that now and you’re quite right. The $deps can override the wp_enqueue_scripts $priority. Thanks for making me aware of this.
Perhaps, as a safeguard in the WP Clips for Genesis plugin, I’ll build the –
– into the wp_enqueue_style() $deps array and release a minor update.
Thanks for helping to improve the plugin!
Jon
Ben says
I was waiting for a very long time for someone to come up with something like this.
Thank you very, very much!
Eva says
Hi, I have just started to use clips, and I really like it. But, I am also a bit confused… I am used to customizing a genesis theme directly in the child themes’s css file. Normally I first try out my customizations in the wordpress “customize” mode, so I can transfer them to the css file later.
I am using WP clips ver 2.02 and the genesis-inline-responsive-menu clip with the Genesis Sample child theme. I just found out that it comes with a clip-style.css and the child themes css is overruled. Therefore.. should I make the customizations in the clip-style.css file, and upload it again? Or is it best to transfer the customizations from the wordpress “customize” mode to the clip_custom/custom-style.css file?
I hope I have made myself clear, and you can help me out.
Thank you!
Eva
Eva says
Sorry, I think I have just found the answer…
“This Clip unloads the theme stylesheet and replaces it with the stylesheet within the Clip (clip-style.css). Therefore, if you have made any changes direct to the theme’s stylesheet, take a backup / make a note of your changes and re-apply them.”
So I will just re-apply them through the clip-style.css…
Sorry for that 🙂
Thanks
Eva