Learning WordPress development starts with a lot of key questions, including this one: “What language is WordPress written in?” Another common one is “Should I learn PHP or JavaScript first?” WordPress programming languages is a big topic, but we’ll cover all you need to get started.
The answer to “What coding language does WordPress use?” is “Four main ones!” WordPress relies on two declarative languages, HTML and CSS; and on two programming languages, JavaScript and (especially) PHP.
Here, we introduce each of WordPress’s technical languages.
You’ll need to know two broad types of things to be able to program in WordPress: languages and concepts.
This chapter works with the first topic: the languages used in WordPress programming. These are HTML, CSS, PHP, and (optionally) JavaScript.
If you have a basic knowledge of these languages—enough to understand the text and examples below—you should be good to go. If what you read below confuses you, you’ll need to learn the basics of that language before proceeding with the part of WordPress development it involves. (For example, you might be able to write a plugin without CSS, but not a theme.)
If you do need to learn one or more of these languages, good news: You’re about to learn something that, per hour spent, is the most useful and marketable thing you could possibly learn!
HTML: What the Web is Made Of
HTML is the one universal part of the web: every page you see on the internet with content inside of it is marked up with some version of HTML.
HTML isn’t really a “programming” language, it’s a “markup” language. It stands for HyperText Markup Language. An HTML file is essentially a big text document, but with “markup” baked into it to explain the specific meaning of the various bits of text. Here’s a bit of HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Page Title in Search Results</title>
</head>
<body>
<h1>Page Title at Top of Page</h1>
<p class="lorem">Lorem ipsum dolor sit amet…</p>
</body>
</html>
This is a full, but very small, HTML page.
As you see, in HTML, most elements are contained between two different tags (the things inside the less-than and greater-than signs). The <p></p> tag is an example: anything inside <p> and </p> is part of that paragraph, which is what p stands for.
Certain other elements are self-closing, like <meta charset… /> in this example. Image tags, <img />, are another example. This just means there’s nothing “in between” opening and closing, the way there was with the <p> tag, since things like images don’t take text content inside them.
Elements can be given attributes. In our example, the <p> (paragraph) element was given a class of lorem. We can use this class to do all sorts of things—probably the most important is that we can use a single CSS rule to tell all elements with that class exactly how to look.
CSS: Making HTML Look Good
CSS, which stands for Cascading Style Sheets, is the way that almost all modern webpages are styled, meaning “given a specific appearance.”
In CSS you’ll style either HTML elements, like <h1>s, or HTML attributes, like the class of lorem we mentioned earlier. In either case the syntax is pretty uniform, and looks like this:
.lorem {
color: #325050;
background: #fff;
font-family: 'Libre Baskerville', sans-serif;
font-size: .85rem;
}We first specify which HTML element or elements the set of styling rule affects: in this case, our rule affects only those elements that have been given the lorem class. (In CSS, classes start with a period.)
And then inside the curly braces we declare a set of style properties, as follows: the property, followed by a colon, the specifics of that property, and a semicolon. New lines after the semicolons are common but not necessary.
The hard part about CSS is know which properties to use to give your page the appearance you want. Whole books are written about that topic, so we’ll move on.
PHP: The Engine of WordPress
PHP is what runs WordPress on your web server. No matter what else is true about your WordPress site, it’s using PHP on the server to build your pages and put them together. Therefore, it’s the most important language to truly understand WordPress.
PHP was initially built with the intent of making HTML pages easier to build. By default, it will render out the results of its operations into an HTML page that the server then shows your site’s visitors.
For WordPress themes, the basic logic and structures of PHP are what’s really important. Here’s a snippet, which we’ll then explain.
<?php
$variable = 4;
$math = $variable + 1;
if ( $math > $variable ) {
echo 'Yay. Math yielded '.$math.'! '; // User's screen will show: "Yay. Math yielded 5! "
echo 'Variable was '.$variable.'.'; // User's screen will show: "Variable was 4."
}
?>
<p>I'm an HTML paragraph. Hi!</p>
<?php if (true) : ?>
<p>I'm HTML that will render, because I'm inside a true if-statement.</p>
<?php endif; ?>
<?php if (false) : ?>
<p>I'm HTML that won't render, because I'm inside a false if-statement.</p>
<?php endif; ?>There are a few important things to know from this example:
- First, anything that’s not inside PHP tags (
<?phpand?>) is just plain HTML. When the server processes the PHP file, it’s just going to display this stuff to the visitor, exactly like it would with a regular HTML page. - Variables in PHP start with a dollar sign, like:
$variable. You do math with them just like you do in algebra. We first set$variableto 4, then added 1 to it to make it 5, and saved that as$math. - Within a block of PHP, you use the
echocommand to “print things out to” the final HTML page. The two lines above beginningechoboth concatenate (join) regular text strings (inside the' 'characters) with PHP variables. This concatenation is done using the.operator, as follows:<?php echo 'One and ' . 'two'; ?>. - PHP logic controls any HTML inside it. This is why the HTML inside the first PHP conditional statement,
if (true), will show up on the page (sincetrueis true), but the HTML inside the second statement,if (false), won’t (sincefalseis not true).
There’s loads more to understand about PHP, but this gives you a start.
JavaScript: Programming Web Browsers
JavaScript was invented to allow for programming the behavior of HTML pages after they’ve hit the visitor’s web browser. For example, if you click on something and it disappears, turns a different color, or slides out into a bigger thing, that’s most likely JavaScript at work.
A WordPress theme can work perfectly and run very well without using any JavaScript. But as with most of the web, you’re seeing more and more JavaScript inside WordPress themes and the core of WordPress itself. This is because JavaScript allows for much quicker interactions and a sense that the page is really working for—and responding to—the visitor.
If you’re just learning WordPress, you’ll mainly want to get familiar with the other three languages, with HTML and CSS being mostly mandatory building blocks, and PHP being where much of the intellectully interesting heavy lifting happens. So this book won’t talk much about JavaScript, and we recommend you start by getting a pretty solid grasp on the other three languages.
For your learning, though, we’ll include a JavaScript snippet that we’re using here on WPShout. It uses JavaScript’s super-common and extremely helpful jQuery library, and its purpose is to set a minimum height for our left sidebar so that it can’t “run into” our footer.
( function( $ ) {
// 1. Define variables
var navMenu = '.primary-navigation';
var pageContent = '.main-content';
var gap = parseInt( $( 'html' ).css( 'font-size' ), 10 ) * 2;
// 2. Define function to give min-height
function setPageMin() {
var height = $( navMenu ).height();
$( pageContent ).css( 'min-height', height + gap );
}
$( window ).load( function() {
// 3. Run function on first window load
setPageMin();
// 4. Run function every 120 MS when window resized
$( window ).resize( function() {
setTimeout( function() {
setPageMin();
}, 120);
});
});
})(jQuery);
Should I learn JavaScript or PHP for WordPress development (first)?
A really common question these days, especially now that the new JavaScript-based WordPress editor (which was codenamed “Gutenberg” during its development) is here is which language to learn first. If you’ve not gotten your sea-legs for HTML and CSS, do that first. Both WordPress PHP and WordPress JavaScript rely on those underlying declarative languages.
Once you’ve come to understand how CSS and HTML work (for most people, myself included, they’re practically a single unified language today), we think PHP is the right next step. This is because you can certainly make a WordPress theme or plugin without JavaScript, but you’ll never make one without PHP.
Further than that, most things you’ll need to do in WordPress are simply much more complex if you’re remedial in PHP but skilled in JavaScript. The great strength of the JavaScript programming language remains rich client-side interactivity. But WordPress servers still speak exclusively PHP, so anything you try to do on the server will use some PHP code for the server-changes.
WHY UP AND RUNNING IS PHP FOCUSED
You’ll notice that further chapters of Up and Running speak only to PHP levels (or APIs) of WordPress. This was an intentional and considered choice, that we still stand by today. Quite simply, most of the effective things that you’ll need to do for a client–create a new theme page template, get a different and better view of their content, increase server performance, or change the design of the theme–becomes possible when you learn all of WordPress’s PHP APIs.
WordPress’s JavaScript APIs, even having grown with Gutenberg, are still pretty small, weak, and poorly-documented. So while there are cool things–primarily WordPress’s block editor itself–that are simply impossible without JavaScript, PHP is just much more stable and powerful for a newer developer to wrap their head and arms around. After you’ve made a few WordPress theme or plugins yourself, and found things you wished to do but couldn’t with PHP, you’ll find you’ve hit the right time for you to learn JavaScript. And you learning there will be faster as a result of your earlier PHP-focused learning.
Now You Know What Languages WordPress Uses
Obviously, we’ve barely scratched the surface of how these four languages work and how to use them effectively. But we hope you’re clear enough now on what languages WordPress is written in that you feel prepared to dive in deeper. Knowing about these four languages and what they’re good for is a great place to start.
