There are a lot of reasons to love WordPress, but one of the reasons I keep WordPressing is the supportive community. While I have no formal training as a web developer, I don’t like describing myself as “self-taught.” I didn’t figure this out on my own, I was taught by a supportive community that filled the Internet and WordCamp with everything I ever need to know.
As a “community-trained” web developer, I have spent a ton of time searching for solutions on the Internet to my WordPress problems. More often than not when I’m searching for a solution or helping someone else, the answer is a bit of PHP or JavaScript code. But, what you should do with the code snippets you find online is not always obvious.
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. After reading this post, be sure to check out my post on how to put this knowledge to work when evaluating and implementing those code snippets that you find on the internet and think will help solve your problems.
Before I do that, I want to say that if you make websites, then in my mind, you are a web developer, whether you write code or not. Whether you are a “site builder” that doesn’t write code or a programmer doesn’t matter. If you make WordPress sites, then you’re going to have to be able to evaluate suggestions that involve adding code to your site that can have real consequences.
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 run in your site visitor’s 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. I have a short introduction to the topic and Tom McFarlin has a longer introduction, both of which are beginner friendly.
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.
In my next article in this series, I cover what to do with custom code you might want to add to your WordPress site. This article should have prepared you to know what kind of code you need and be more prepared to evaluate, test and implement that code.
I hope this article has helped you understand a little more about how WordPress works. My goal wasn’t to make you an expert programmer. Instead I am hoping that I helped you understand a bit more of which of the four languages in WordPress are responsible for what, so you will be better prepared to modify WordPress’ behavior to fit your needs.
All cat images from Wikicommons 🙂
(: Cats is more remarkable.