The Four Languages You Must Know to Understand WordPress

WordPress Programming Language Book

Learning WordPress development starts with a lot of key questions, including this one: “What language is WordPress written in?”

Well, as it turns out, 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 for 2018, 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

Let’s dive in!


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

404567874_e3cd711d6c_o

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

WordPress Programming Language CSS

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

WordPress Programming Language PHP

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

WordPress Programming Language Javascript

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

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!

  1. 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
  2. CSS is a:
    1. Way to style HTML
    2. Way to create complex, dynamic programs in web browsers
    3. Way to program web servers
  3. PHP is a:
    1. Markup language
    2. Language for programming web servers
    3. Language for programming web browsers
  4. JavaScript is not:
    1. A programming language
    2. A way to program web browsers
    3. The main language of WordPress
  5. The WordPress core software is written mainly in:
    1. HTML
    2. JavaScript
    3. PHP
  6. 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

  1. B. HTML lets you declare the structure and content of a webpage, but has no logical operations.
  2. A. Cascading Style Sheets allow you to change the way HTML looks.
  3. B. PHP is a language that runs on most web servers.
  4. C. While WordPress has more and more JavaScript in it, PHP is the software’s “main” language.
  5. C. The most programmed and programmable parts of WordPress are in PHP.
  6. 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


7 Responses

Comments

  • Fernando says:

    About the brazilian band CSS, their name is actually “Cansei de Ser Sexy” (Translates to “I got tired of being sexy”). A fortunate coincidence for developers, they’re actually pretty great, even though their lyrics are pretty hard to translate because of their use of slangs and expressions.

    Also, CSS is also a Markup language. Cool for pointing it out on the HTML bit, but you forgot on the CSS.

    • Thanks for the enlightenment about the band, Fernando. I speak approximately no Portuguese, but I too get tired of being sexy.

      And you raise an interesting point about CSS. It seems essentially correct that it’s a markup language, though I Googled and found this Stackoverflow thread and am now even less sure about what words to use.

      Thanks for commenting!

  • Massa Kone says:

    Very good tutorial, you guys really know how to teach on top of knowing your stuff. Well done !

Pingbacks