Now you understand what a child theme is and how to setup a child theme for a Theme Blvd framework-based theme, but what does it mean to actually start making edits from your child theme?
If you’re new to WordPress plugin and theme development, it may take some work to understand and educate yourself on what all this really means. But if you’re already experienced with WordPress development, you’re probably already pretty familiar with the following topics.
In this article, I’ve tried to consolidate the basics of making customizations from your child theme into the main categories, which I’ll quickly outline and link you to more information about. This is where you begin to travel down the proverbial rabbit hole.
Client-Side
Client-side languages, like CSS and JavaScript, are executed by your visitors’ web browsers (i.e. Chrome, Firefox, Safari, Microsoft Edge, etc), when viewing your website. So, keeping that in mind, there are a couple helpful tips I have for you when making these kinds of customizations.
- You may get different results, depending on the specific web browser. So make sure to check your CSS and JavaScript customizations in multiple web browsers.
- Web browsers cache things. So be aware of this when you’re making CSS and JavaScript customizations, and make sure you’re clearing the cache in your web browser. Most of the time you can do this with a couple of hard refreshes. And if results still aren’t showing, you can just clear your browser’s cache, through the application’s settings.
CSS
Editing the style of your website through CSS is probably the most common type of customization people dive into first. These will be customizations you’ll most often be saving with your child theme’s style.css file, in order to style the HTML that your website is outputting.
It’s probably one of the most basic languages to understand in the web development world, and is often not considered a “programming” language by those, snoody know-it-all developer types. Simple put, CSS is the gateway drug to becoming a WordPress developer. Don’t fight it. Just go with it.
JavaScript
JavaScript is another client-side language you may find yourself dealing with. Generally, it’s used to add dynamic and interactive elements to your website.
It’s more difficult to work with than CSS, but also less common for you to be diving into, at the beginning. This will get you more into the true “programming” realm of theme customization. However, generally if you do find yourself working with JavaScript, there’s a good chance you’ll just be implementing third-party scripts you’ve been given, which isn’t too difficult. So, don’t let that scare you.
Server-Side
In WordPress, our server-side language of choice is PHP. It’s what allows us to communicate with our web server. Once you start diving into the gateway your child theme’s functions.php opens up, you have officially immersed yourself into the world of web development, and it’s time to embrace your emerging, new life status!
When working with PHP customization, here are some tips to keep in mind.
- Remember you are programming now. If you trigger a fatal error, your entire website will break. So try to avoid editing PHP files directly in your WordPress admin or on a live website.
- You will break things. You will trigger errors. I do it every day. It’s very helpful, when you’re developing, to always have WP_DEBUG enabled from your site’s wp-config.php, to make sure you know what actually just broke! — i.e. Did you make a change and now your entire site is just a blank white screen? Having WP_DEBUG enabled will make sure you’re seeing the errors, telling you why.
Action Hooks
Action hooks are one of the most defining developer features of WordPress. They are points in the software that you can “hook to” in order to execute your own code. Your Theme Blvd theme is also filled with tons its own custom action hooks. Having most of the framework’s functionality hooked to an action, in one way or another, is crucial in making the theme as extendable for you, as possible.
Filters
Filters are technically another type of “hook” — But instead of simply executing code like with an action hook, they allow us to filter a piece of data. Generally speaking, when a piece of data is passed through a filter, it gives you a chance to manipulate that data, before it gets used, executed, or printed out.
Template Parts
Template parts in WordPress allow themes to take sections of their larger theme files and reduce them to smaller included files, throughout. The benefit here is that these smaller template part files can then be simply copied from the main, parent theme to your child theme, to make edits.
Pluggable Functions
A pluggable function is a function setup in a way that allows you to simply copy it to your child theme’s functions.php, in order to edit it.
Pluggable functions are not as popular around the WordPress community, as they once were. And over time, we’ve made strides to reduce the amount of pluggable functions within our theme framework, but have left many, for the sake of backwards-compatibility.
If you’re new to making PHP customizations from a child theme, pluggable functions are seemingly the easier way to go, at first glance. But as you start copying entire functions, that you didn’t write, to your child theme just to make small changes, you’ll see that things quickly become a mess. I personally would avoid editing functions in this way, and take advantage of hooking in custom functions instead, via actions.