I have come across several questions about Genesis child theme customizations. Be it StudioPress forums or Genesis Facebook group(s), every user want to customize one or the other Genesis child theme. This includes minor tweaks like updating the color scheme, changing the font, adding background image, etc to some major enhancements like creating new custom posts types, adding a filterable portfolio to the site and so.
Every user want to customize the Genesis child theme they are using. These customizations allow them to have a custom website design based on the child theme so that they don’t have to reinvent the wheel.
While each of these tasks is possible via one plugin or other, there are certain customizations for which you have to get your hands dirty in code.
What if there is no plugin available for the enhancements you want to add. Well, Genesis community is full of helpful people and you will be able to find some good tutorials and step by step guide to achieve what you are looking for.
And for this you will have to put on your developer’s hat — fire up FTP and get into some serious coding.
You don’t have to be a good coder for customizing Genesis child themes; you just have to be smart.
Find the plugin(s) or tutorial(s) for customization
If the required customization can be done via plugin, go for it like adding social sharing icons, favicon uploader, etc.
If you have some peculiar customization requirements, find the tutorial which will help you in accomplishing the task, for example say adding a retina ready logo to your Genesis child theme or registering custom widget areas.
Edit the Code Files — functions.php and styles.css
Once you find the tutorial, you will have to edit the code files. You have to be a little careful when it comes to editing the code files. Never touch the core theme files. It goes for both — the theme framework as well as the child themes.
Here are a few plugins which will help you in adding the customizations to your theme:
1. WP Designer
WP Designer creates a ‘wp-designer’ folder in the uploads directory which includes all the necessary files and folder required for customizing a theme. It includes a functions.php for adding custom functionality, style.scss for SCSS / CSS styles, images folder for uploading all the images required for use in CSS and a scripts folder for adding all the necessary scripts.
You can neatly add all your theme customization code to the required files and you don’t have to worry about theme updates or breaking the functionality of the theme. The plugin also features a debug mode which allows you to disable functions.php and style.scss via settings panel for testing purposes.
2. Code Snippets
Another option is to use Code Snippets. Code snippets provides a GUI interface for adding the code snippets to the theme.
You can keep on adding code snippet and each code snippet is managed like a new post. You can also activate and deactivate the code snippets just like plugins. The snippets can also be exported and imported from one set-up to another. So just in case you have to add the same functionality to another website, you can simply export and import the snippet(s).
This plugin works only for adding custom functionality; basically php code snippets. If you go with this plugin, you will have to pick one of the following plugins for adding custom CSS styles (via WP interface):
- Custom CSS (Jetpack module)
- Simple Custom CSS
- WP Add Custom CSS (this plugin even allows you to add custom css on per page and per post basis).
3. Design Palette Pro
If all you want is the design customizations, Design Palette Pro is a good option. It allows you to customize the design of any Genesis child theme to your liking without writing a single line of code.
Get in touch with an experienced Genesis developer
If customizing a Genesis child theme feels like a daunting task, it is better to approach an experienced developer. This will not only save you time and effort, but will also make sure the customizations are done the right way — without breaking the theme or any of the existing styles and functionality.
So, how do you customize the Genesis child theme?
UX & Frontend Design, Genesis WordPress Theme Framework Child-Theme