EN

WordPress・Connecting what you learned

Where does the HTML/CSS you learned come in handy?

WordPress is a tool built so you don't have to write code, but people who can write it get even more freedom. The Custom HTML block and Additional CSS—here's where the skills you learned get to shine.

Up to now, you’ve operated WordPress without writing a single line of code. “So there’s no place for HTML and CSS, then?”—there is. And in the juiciest spots, at that. When you reach for something themes and blocks can’t touch, whether you can write code changes how much freedom you have.

Chance 1: the Custom HTML block

The block editor has a block where you can write your own HTML directly. Its name is “Custom HTML.” Type “HTML” in the block search and it’ll show up.

In the block editor, “HTML” is typed into the block search box, and the Custom HTML block appears in the results
Type “HTML” in the block search box. Anything the ready-made blocks can’t express, you can build with your own code.

For example, you can drop a button like the one you made in the CSS course straight into an article.

<a href="#" style="display: inline-block; padding: 12px 28px;
   background: #ff8a3d; color: #fff; font-weight: bold;
   border-radius: 999px; text-decoration: none;">See details</a>

Layouts and embeds that a ready-made block can’t express can be assembled directly with tags in Custom HTML. “If it’s not in a block, write it yourself”—this is a privilege only for those who’ve learned tags.

Chance 2: Additional CSS

“The theme is fine as is, but I just want to change the heading color”—for times like that, WordPress provides a place to add your own CSS as an override on top of the theme. In many themes, you can write it from “Appearance” → “Customize” → “Additional CSS” (depending on the theme, it may be named “Styles” or similar).

h2 {
  color: #2c6fbb;
  border-bottom: 2px solid #2c6fbb;
}

Aim with a selector, tidy up with properties—everything you did in the CSS course works exactly the same for adjusting the WordPress screen.

Chance 3: you can “read” what’s inside a theme

What a theme really is: an HTML template and a bundle of CSS—you learned that two lessons back. In other words, since you can read code, you can

  • understand the “customization examples” in a theme’s description
  • when a bug occurs, make an educated guess in the developer tools about where the cause is
  • eventually, move onto the path of building a theme itself from scratch (which needs a bit of a language called PHP)

From “someone who uses it” to “someone who can fix it.” Your standing in the WordPress world moves up a notch.

Theme developmentLet's build a theme for a company siteWhen you feel like building a theme itself from scratch, head to the advanced course “Theme Development.” You’ll build one company site all the way through

Summary of this lesson

  1. With the Custom HTML block, you can drop your own tags straight into an article—anything a block can’t express, you can build yourself
  2. With Additional CSS, you can make pinpoint overrides to a theme’s look—your selector knowledge applies as is
  3. When you can read code, you can understand a theme’s insides and narrow down bugs—from “someone who uses it” to “someone who can fix it”

Try it: put your own HTML into an article

In Playground, let’s embed the code you learned into a WordPress article.

  1. Open a new article with “Posts” → “Add New Post”
  2. At the start of a line, type /html and choose the “Custom HTML” block
  3. Paste the button’s HTML code from above (feel free to change the wording and color codes)
  4. Switch to “Preview” in the block’s toolbar to check the look on the spot
  5. Publish, and confirm the button shows up on the front side

Your own tags running inside a WordPress article—it’s the moment two worlds connect.

FAQ

Does Additional CSS apply to the whole site, or just a specific page?
Additional CSS applies to the whole site. When you want to change the look of only a specific page or post, don't use Additional CSS—instead, set the style in that block's settings panel or inside a Custom HTML block.
What if I write Additional CSS but the look doesn't change?
The theme's own CSS may be specified more precisely and be winning over your override. Select the element in the developer tools and check whether your style has a strikethrough through it. Writing a more precise selector often lets you win.