A WordPress Child Theme Alternative

You find a knockout WordPress theme. With minor font, color, and layout tweaks, it’ll look great. Add in some custom functions, such as support for certain post types or control over social media thumbnails, and it’ll be almost perfect.

Normally, you’d make a child theme for that. A child theme piggybacks off the theme you’re considering, letting you make changes without affecting any of the original (parent) theme’s files. Otherwise, you’d have to make changes to a theme’s appearance by editing its CSS (Cascading Style Sheets) and php file(s).

However, when you make direct changes to a theme’s files, you’ll lose those changes if the theme itself is updated by its author, something that frequently happens with themes you find in the WordPress theme repository. Often, those updates are necessary not only for security reasons but also for harmony with browser and device trends – as well as changes to WordPress itself and its plugins.

So, how do you make changes to a theme while still being able to take advantage of crucial theme updates?

Create a Child Theme.

One way is to make a child theme. A child theme typically consists of a style.css file (mandatory) and a functions.php file. The latter is optional but necessary if you want to change some of the things your theme does, such as which images are used when posting to social media. You may also copy the parent theme’s header.php and footer.php files (or any of its template files) into your child theme folder if you want to code in your own HTML, such as that needed to move a navigation bar under or over a header image, or to alter footer information. Any CSS or HTML you apply takes precedence over that in the parent theme, overriding fonts, color, layout, spacing, shadow, and other aesthetics.

Sounds great, but even so – if the theme developer makes crucial updates to any of the original template files, parts of your child theme, such as its header or footer, will not be updated with those changes – some of which may be security or feature related. That’s a major downside to creating a child theme in the first place.

Child (Theme) Left Behind

However, with deft use of CSS and the right plugin(s), there’s an easier solution. Here’s a simple example of layout changes done without a child theme – and here’s another.

The only reason, then, to make a child theme would be if you want to add your own theme functions, which – unlike those in the child theme’s style.css file – don’t override those of the parent theme.

Even then, if all you need beyond style changes are some custom theme functions, you still don’t need to go to the trouble of making a child theme. Instead, just use a CSS plugin – and the My Custom Functions plugin.

Jetpack, a mega-plugin that comes pre-installed in many instances of WordPress, provides a pretty good stylesheet editor, called “Custom CSS“. But if you want a more robust option, which includes a visual editing mode as well as a code-centric one – complete with code hinting, syntax checking, and code completion – then use SiteOrigin CSS.

Next, add the My Custom Functions plugin, which will allow you to add whatever new functions you want. Even if you don’t know PHP, you can find all kinds of neat code snippets online – nifty ways to soup up your theme. Just follow the directions and copy the new code into My Custom Functions, hit “Save”, and you’re all set.

Between those two plugins, you can make all the style and function customizations you want, without having to wrap your brain around a child theme. That makes it easier to move your site later, since you only need to install the parent theme and the aforementioned plugins, then port those two files later when you move your site.

Meanwhile, to move your Customizer and widgets settings, just use Customizer Export / Import and Widget Importer & Exporter. Then, just make sure you have all those plugins installed and activated before importing your site onto the new server.

So, the next time you’re thinking of making a child theme – try using SiteOrigin CSS and My Custom Functions instead.