Thanks to everyone for coming out Wednesday night. It was a really good turn out and we had some interesting discussions and questions. I didn’t have slides to share so I thought I’d write a quick post to summarize everything we went over and aggregate the resources/links that were discussed. So without further ado…
The Basics of Theme Customization
In the broadest of terms, there are three “levels” of customization that we talked about. They are, from easiest to hardest:
- Customizing using the built-in WordPress customizer
- Using a child theme to customize presentation
- Creating a copy of an existing theme and modifying
Using the built-in customizer
This approach, while also the easiest, is the most limited in scope. For an option to be customizable via the customizer the theme developer needs to add functionality via the theme’s functions.php file.
The customizer can be accessed via the “Appearance” menu in the WordPress admin menu.
The options that appear on this page vary from theme to theme, but most themes that include this functionality allow you to customize background colors, links colors, menu, widgets, and other similar things. Certain theme “ecosystems” like ThemeForest or Elegant Themes, or frameworks like Genesis, have custom theme options that are independent of the built-in WordPress customizer but function similarly.
Building a Child Theme
If you’re looking to go beyond the basic customization allowed by the customizer (either built-in or custom), the recommended way to do this is to create a child theme. Child themes inherit all of the functionality and presentation from the parent theme with the exception of the customizations you make.
We covered the basic steps to create a child theme:
- Create a new folder in the wp-content/themes
- Create a style.css file and copy the required header information from codex and modify for your new child theme.
- Create a functions.php file and copy the code snippet from the codex that will tie your child theme to the parent theme.
Once you’ve done these steps, log in to your WordPress dashboard and activate your new theme. If you’ve done everything correctly your site will resemble the parent theme. After you’ve verified that the new theme is working, feel free to add any of the custom CSS, HTML or PHP to make the theme your own.
ProTip: Use Chrome/Firefox/Safari inspector tools to find css and edit it “on the fly”.
A quick warning about using child themes; when the parent theme updates there is a small chance that the developer may change something that breaks your customization (i.e. renaming an element’s id or class), but this isn’t considered to be a “best practice” so you should mostly be fine.
“Forking” an Existing Theme
The most advanced way to customize a theme is to create your own theme by copying an existing theme and modifying its theme files. At the least, you’ll have to edit style.css so WordPress won’t attempt to update your new theme if the existing theme is updated.
If you purchased the theme from Code Canyon, Theme Forest, or another, there may be some ramifications if you distribute the theme. I would consult the license that came with the theme for specifics. All the themes found on wordpress.org are open source, but it is a good practice to always give credit to the original author.
tl;dr
Useful plugins:
- What The File – “adds an option to your toolbar showing what file and template parts are used to display the page you’re currently viewing”
- Page Builder – “Build responsive page layouts using the widgets you know and love using simple drag and drop”
Relevant Codex Articles:
Helpful Sites:
- WP Test – “A fantastically exhaustive set of test data to measure the integrity of your plugins and themes”
- Stack Overflow – “a question and answer site for professional and enthusiast programmers”
- WordPress Stack Exchange – WordPress specific section of Stack Overflow
- GenerateWP – “The easiest and the fastest way to create custom and high quality code for your WordPress project using the latest WordPress coding standards and API’s”
Thanks again to those who came out to the meetup, I hope to see all of you again next month or at the WordCamp San Francisco watch party. Feel free to reach out to me on twitter with any questions, I’m @coderaaron.
