Exit Course

The language of the web

The building blocks of WordPress templates

Transcript

Introduction

In this lesson, we will look at what makes up a template and take a peek under the hood of WordPress. In previous lessons, you’ve gone over almost all the pages of the admin menu. Now that you are familiar with the various options, it’s time to venture into the yet to be discovered world of code. In this lesson, you will discover what a template page looks like behind the scenes, gain a deeper understanding of the building blocks of a WordPress site, and learn to recognize and read some code.

Under the hood

Firstly, let’s take an X-ray of your theme and inspect the theme files. Let’s navigate to Tools and then click on Theme File Editor. You’ll be greeted with a warning message, advising you not to make direct edits to your theme. This is only a brief introductory visit, so you can safely hit the I understand button. What you have before you is the backbone of your theme, an X-ray that reveals how the templates, template parts, patterns, and styles are coded. Let’s examine an example. In the right sidebar, under Theme Files, click on Templates and then page.html. This file is responsible for displaying your site’s pages. The first line calls the header template part. The last one calls the footer. In the middle, there’s the main part that features a group container holding the page Title and Content blocks, separated by a couple of Spacer blocks. Take your time and read the markup. Identify recurring patterns. Notice how some lines start with a less than sign, an exclamation mark, and two hyphens followed by WP and a colon. Another recurring pattern you will see is a less-than sign, an exclamation mark, and two hyphens followed by /wp and colon. Then, you can pause this video and explore other files using WordPress Playground or any other test website.

Coding languages

Since modifying the theme via the dashboard editor is not recommended, let’s open the Page Editor and try a safe example. So we can make our way back to the dashboard, go to Posts, and open a post. You will notice I’ve added some extra content. So the next step is to switch to the code editor. So click on the three vertical dots on the top right and either click on Code Editor or use a keyboard combo, Command, Option, Shift, and M on Mac or Control, Alt, Shift, and M on Windows. I will go ahead and click on Code Editor, and you will see a combination of three coding languages. The first one is HTML, short for hypertext markup language. The second is CSS, short for cascading style sheets, and the third is JSON, short for JavaScript object notation.

HTML is the fundamental language of the web used to structure pages. It’s made up of elements like open angle bracket, P, closed angle bracket for paragraph, li for list item, h2 for second level heading or img for image. Back in the code editor we can see these in action. At the top, we have a paragraph, then an h2 heading followed by a list, and right at the bottom, an image. On the other hand, CSS defines the styling of web pages and their elements. Let’s look at an example. The tag h3 with the color hex code #8d26d1 represents the purple subheading ‘Paragraphs with links.’

Next we can talk about JSON. JSON is a data format that uses key-value pairs. WordPress both generates and interprets these pairs, ensuring they are rendered into the relevant styles. When we return to the code editor, we can look at the image example, and there are two key-value pairs worth mentioning. The first is “align”:”wide” and the second is “className”:”is-style-rounded.” But what do they mean? “Align”:”wide” means the image alignment is set to wide width and “className”:”is-style-rounded” means the image has rounded corners. Then, we can look at another example and scroll up to the first paragraph. We will also see the key-value pair {“dropCap”:true}. This means the word’s initial letter in a Paragraph block is bigger, also known as dropped capital. In the next lesson, ‘How Styles are generated, ‘ we’ll cover this in more detail.’ Meanwhile, if you’re curious to know more about this, check out the Beginner WordPress Developer Learning Pathway, specifically the HTML lesson in the Programming Languages of WordPress module.

Demo

Next, it’s time to experiment. Now that code no longer feels like a complete foreign language, it’s time to practice what you’ve learned. We are going to create a new post. We will open the code editor. Then, paste the code from the transcript. Next, we are going to make a few tweaks. The first thing we’ll do is change the color of one of our headings from purple to red by replacing the hex code in both the top and the bottom lines. Then, we can save our draft and return to the visual editor to see the change that took place. Then I will open up my List View and make my way to outline to see the heading structure. And we’ll see this heading is h3. Then, we can return to the code editor. I would like to update the heading structure from h3 to h2. Here, I will change it to three different spots. Once again, I will save it and return it to the visual editor. Then, we can make our way to outline and see our heading level changed from h3 to h2. The last change I want to make is to edit the URL of the external link. So we can return to the code editor and update the URL from WordPress.org to learn.wordpress.org. Then, we can return to the visual editor to see how the change took effect. When we click on the linked text and then Edit, we will see that the link or the URL has been updated. To end off, it is worth noting that if something goes wrong, don’t worry. Click undo and start over. Changes you make are limited to this specific post and will not affect other posts or theme files. So go wild.

Practical

  • Use WordPress Playground and explore the building blocks of templates:
    • Create a New Post: Log in to your WordPress dashboard and create a new post.
    • Access the Code Editor: Click on the three vertical dots in the top right corner of the post editor and select “Code editor.”
    • Input Code: Paste the sample code provided below into the Code editor.
  • Modify the code:
    • Change the color of a specific heading or line of text.
    • Alter a heading level.
    • Remove the rounded style:
      • Remove ,”className”:”is-style-rounded” + is-style-rounded
  • Save your changes and return to the Visual editor to preview how your modifications appear on the post.

Experiment Further: Add new content in the Visual editor and view its structure in the Code editor.

Code for demo

<!-- wp:paragraph -->
<p>Welcome to WordPress Learn.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"dropCap":true} -->
<p class="has-drop-cap">Whether you’re a first-time blogger or seasoned developer, there’s always more to learn. From community members all over the world, these vast resources will help you learn more about WordPress and share it with others.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is a sample post, created to demonstrate various blocks and elements you can use to structure your content. Here are a few common examples:</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">A list</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>One</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Two</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Three</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3,"style":{"color":{"text":"#8d26d1"}}} -->
<h3 class="wp-block-heading has-text-color" style="color:#8d26d1">Paragraphs with links</h3>
<!-- /wp:heading --> 

<!-- wp:paragraph -->
<p>Here's <a href="https://www.example.com/sample-page/" data-type="page" data-id="2">a link</a> to another page of the site.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>And here's another link—this one leads to <a href="https://www.wordpress.org">an external site</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"tagName":"section","metadata":{"name":"Image section"},"align":"wide","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<section class="wp-block-group alignwide"><!-- wp:heading {"align":"wide"} -->
<h2 class="wp-block-heading alignwide">And an image</h2>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large","align":"wide","className":"is-style-rounded"} -->
<figure class="wp-block-image alignwide size-large is-style-rounded"><img src="https://pd.w.org/2024/06/353666aafaa385f47.48486550.jpeg" alt="A scenic view of distant mountains bathed in warm light from a setting or rising sun, framed by dark silhouettes of tree branches and a tree trunk in the foreground, with a meadow and dense green trees in the middle ground."/><figcaption class="wp-element-caption">Landscape photo by <a href="https://profiles.wordpress.org/ifranl/">Frans Pronk</a> @The WordPress Photo Directory</figcaption></figure>
<!-- /wp:image --></section>
<!-- /wp:group -->

<!-- wp:separator {"align":"full","className":"is-style-wide"} -->
<hr class="wp-block-separator alignfull has-alpha-channel-opacity is-style-wide"/>
<!-- /wp:separator -->
This is a preview lesson

Register or sign in to take this lesson.

Suggestions

Found a typo, grammar error or outdated screenshot? Contact us.