The Four Languages You Must Know to Understand WordPress • WPShout

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.

Enjoy an Up and Running Sample Chapter

This article has been revised and expanded to include material from our multimedia “learn WordPress development” guide, Up and Running. Like all Up and Running chapters, it includes a video summary, Key Takeaways, a Summary Limerick, and a Quiz to test your understanding.

Enjoy the article! And if you want to really dive into WordPress development, visit Up and Running.

Serious About Learning WordPress Development?

Get Up and Running Today

Up and Running is our complete “learn WordPress development” course. Now in its updated and expanded Third Edition, it’s helped hundreds of happy buyers learn WordPress development the fast, smart, and thorough way.

Here’s what they have to say:

“I think anyone interested in learning WordPress development NEEDS this course. Watching the videos was like a bunch of lights being turned on.” -Jason, WordPress developer

“Other courses I’ve tried nearly always lack clear explanations for why WordPress does things a certain way, or how things work together. Up and Running does all of this, and everything is explained clearly and in easy-to-understand language.” -Caroline, WordPress freelancer

Get Up and Running Now

Let’s dive in to understanding the WordPress programming languages, and which ones we should learn in which order.

Key Takeaways:

You’ll work with four primary languages in WordPress: HTML, CSS, PHP, and JavaScript.
HTML (HyperText Markup Language) is the fundamental language of the web. It’s a declarative language rather than a programming language, and also the web’s most important markup language—basically, a text file with “markup” baked into it to explain the specific nature of various bits of text.
CSS (Cascading StyleSheets) is another declarative language: it’s a flexible, powerful, repeatable way to style—control the appearance of—HTML markup.
PHP (PHP: Hypertext Preprocessor) is the most important language to truly understand WordPress. PHP is a programming language that runs on a web server, the machine that hosts a website. PHP can perform all sorts of dynamic operations, and outputs HTML to send to the client’s browser at the end. PHP is the core language of WordPress: WordPress core itself, and nearly all WordPress themes and plugins, are primarily written in PHP, and so out of all technical languages, it’s most accurate to say that “WordPress is written in PHP.”
JavaScript is a programming language that can run in your browser, helping to make webpages more dynamic and interactive. It’s very powerful, but it’s also the only one of the four languages that you don’t really need to understand to get started in WordPress.

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  tag is an example: anything inside  and  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  tag, since things like images don’t take text content inside them.

Elements can be given attributes. In our example, the  (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 (<?php and ?>) 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 $variable to 4, then added 1 to it to make it 5, and saved that as $math.
Within a block of PHP, you use the echo command to “print things out to” the final HTML page. The two lines above beginning echo both 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 (since true is true), but the HTML inside the second statement, if (false), won’t (since false is 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);

For more about this code and why we needed it (and why CSS wouldn’t do the trick), visit the full article:

Patching Holes in CSS with jQuery: A Practical Example

Should I learn JavaScript or PHP for WordPress development (first)?

Johannes Gutenberg would have wanted you to learn PHP for WordPress before you learning JavaScript ;p

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.

Summary Limerick

WordPress is programmed in PHP,
Which factors to HyperText easily.
Then, with CSS styles
And JavaScript files,
It’s rendered in-browser immediately.

Quiz Time!

HTML is not:
1. The primary language of webpages
2. A fully-fledged programming language
3. A way to mark up the text content of a webpage
CSS is a:
1. Way to style HTML
2. Way to create complex, dynamic programs in web browsers
3. Way to program web servers
PHP is a:
1. Markup language
2. Language for programming web servers
3. Language for programming web browsers
JavaScript is not:
1. A programming language
2. A way to program web browsers
3. The main language of WordPress
The WordPress core software is written mainly in:
1. HTML
2. JavaScript
3. PHP
It’s most possible to be a competent freelance WordPress developer and not understand much about:
1. HTML
2. JavaScript
3. PHP

Answers and Explanations

B. HTML lets you declare the structure and content of a webpage, but has no logical operations.
A. Cascading Style Sheets allow you to change the way HTML looks.
B. PHP is a language that runs on most web servers.
C. While WordPress has more and more JavaScript in it, PHP is the software’s “main” language.
C. The most programmed and programmable parts of WordPress are in PHP.
B. JavaScript is hugely useful, but you can get a lot done in WordPress without knowing it.

Image credit: Alex Brown, Thomas Caspers, tiagonicastro, tacker, Dmitry Baranovskiy