In this article, I’m going to give you a “mildly technical” WordPress primer. It’s not going to make you a rockstar developer, but it will help you understand a little bit about how your site works and what you need to know to customize it.

Using Custom Code In WordPress

Before I can properly cover what to do with custom code you might want to use on a WordPress site, let’s cover a few basics up front. These may be too basic for some, but many of them are things I didn’t know when I started making sites. These concepts are, in my mind, essential for anyone making WordPress sites.

What Language Does WordPress Use?

WordPress uses four languages: HTML, CSS, JavaScript, and PHP. The first three are executed in the browser, while PHP works on a web server to generate and serve the HTML, CSS and JavaScript the browser uses. Because of this, we think of PHP as being “server-side” since it runs on a remote server, while we call JavaScript “client-side” since it runs on the computer of whomever is accessing the site.

PHP works on your web server to generate the HTML document that includes CSS and JavaScript.

In the browser, HTML is used to define the structure and content of a document. CSS is used to style the document — change its visual appearance — and JavaScript manipulates the HTML and what CSS is applied to it.

Understanding what the four languages do, and where they run is essential for understanding what type of code you are looking for. When you understand the different responsibilities each have, then it will be easier to think of what type of code needs changed to achieve a goal.

WordPress Hooks

WordPress is event-driven. By that, I mean that there are a series of events that you can use to add new functionality or modify functionality. Server-side, WordPress uses a system of “hooks” to allow you to change the value of something — we call these filters — or doing something at a specific point — we call these actions.

Think of hooks this way: they are stopping points that invite others to do something. When WordPress gets to a hook, it checks if any other functions are hooked to the current filter or action, and if so all of those functions are called before moving on.

Most of the time when you are applying custom code to a WordPress site, it involves using a hook. We call the system of hooks the “Plugin API” and it is one of the most fundamental things about WordPress that you need to understand. Seriously, it is worth investing time in understanding the WordPress plugins API.

An example of using a hook, would be if someone tells you to add some code, such as Google Analytics tracking code to your page’s header. Every WordPress theme should call the action “wp_head” before the closing HTML head tag. You can hook into wp_head and echo your analytics code there.

While actions allow you to do something at a certain time, filters allow you to modify something specific. For example, if you wanted to add some additional content, such as information about a service or a link to a signup form, you could use “the_content” filter. This filter gives you the content of whatever post is being shown and you can modify, replace, or add new content to it.

JavaScript Events

WordPress is event-driven server-side thanks to hooks, but all websites including WordPress sites are event-driven in the browser as well. In JavaScript we can “bind” to events that are triggered by a user action, such as a click, or a change in the page, such as the page completing loading.

Often times, people want to change what happens when a user clicks on something. In this case, we need to bind a JavaScript function to the click on a specific HTML element. The JavaScript library jQuery makes this much simpler than using JavaScript by itself.

The jQuery on() function allows you to do anything “on” an event, such as on a click or on form submit. If you’re looking for code to modify how a page reacts to what a site visitor does, then you probably need JavaScript.

What’s the Best Way to Add Custom Code to WordPress?

Now that we’ve covered what type of code you might need, you should have a good idea of whether you’re looking to add PHP, CSS, JavaScript or HTML to your site. Based on that, you should have a better idea of why you’re adding the code, before you add that code.