EN

Theme development・Finishing up

Finishing the theme, and the road from here

A completion check and grooming for the Shimaenagado theme (screenshot, the profile section in style.css), plus a map of what's ahead—block themes, the official handbook, and more.

Top page, about, news, category, 404, products—every page a corporate site needs is running on a theme you built yourself. The final lesson is the finishing touches that tidy the theme up, and a guide to the road that lies beyond this course.

Finishing touch 1: the theme’s screenshot

In the “Appearance” → “Themes” list, is your own theme the only one showing as a gray blank with no image? Just place an image named screenshot.png (recommended 1200×900px) in the theme folder, and a thumbnail appears in the list.

Just take a shot of the top page and save it under that name. That alone sharpens up the “face” in the list. Even if the ratio is off from the recommended 4:3, it still displays (there’s just some empty space), so prioritize placing it first.

With this, the theme folder takes on this finished form. A folder that started from two files has grown this far.

shimaenagado/
├── 404.php
├── archive-shohin.php
├── category.php
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── home.php
├── index.php
├── page.php
├── screenshot.png   ← the last one
├── single-shohin.php
├── single.php
└── style.css

Finishing touch 2: finish the profile section in style.css too

The comment at the top of style.css that you wrote in the first lesson is, in fact, still active. In the themes list, below the screenshot you just placed, this comment’s Description: and Author: are shown as-is as the profile text.

/*
Theme Name: Shimaenagado
Author: Your Name
Description: An original theme for the sundries shop Shimaenagado. It implements the standard corporate-site layout (top, about, news, products) in the classic theme pattern.
Version: 1.1
*/

The two points worth reviewing at finishing time are these.

  • Description—is it still the placeholder description you wrote early in development? Rewrite it in a line to match the current finished form
  • Version—since this is a milestone of a big finish, bump it up like from 1.0 to 1.1. It makes “what changed at which milestone” easier for even you to trace later

If the screenshot is the “face,” this comment is the “self-introduction.” With both in place, it becomes a piece you needn’t be embarrassed by in the themes list.

Finishing touch 3: the completion checklist

Let’s inspect your theme using the same checks the pros run before delivery.

  • Actually clicked through every page (top → about → news → category → detail → products → 404)
  • wp_head() and wp_footer() are present (the admin bar shows = OK)
  • The title tag changes per page (title-tag support)
  • CSS is loaded with wp_enqueue_style (no hand-written link left over)
  • Custom field output is escaped with esc_html()
  • It doesn’t break when there are 0 articles (a heading outside the loop, and the like, doesn’t go weird)
  • It doesn’t fall apart viewed at phone width (adjust with a media query if you have room)

The road from here

The patterns you gained with Shimaenagado are, as-is, the foundation for real-world work. If you’re moving on next, here are three directions.

1. Read the official Theme Handbook

WordPress’s official Theme Developer Handbook is the complete-edition dictionary of what you learned in this course. In particular, the “Template Hierarchy” page is the illustrated version of the template hierarchy you learned in this course—worth bookmarking as a map to return to when you’re lost. Conditional tags, internationalization, and every “next step” are all in there. It’s in English, but browser translation is plenty to read it.

2. Build up the admin screen with SCF (ACF)

Introducing SCF (Secure Custom Fields), which we touched on in the custom fields lesson, lets you build an editing screen at a level you can hand to clients. It’s the next step closest to a “real-world WordPress project.” For looking things up, searching with the information-rich old name “ACF” is fine (usage is nearly shared).

TipsACF or SCF—which one should I install?The question of why there are two names can be settled with this article in the handy-tricks section

3. Peek into the world of block themes

What you learned in this course was classic themes. Today’s WordPress has a new approach called block themes (theme.json plus HTML templates), where even the templates are built with blocks. The template files become HTML-based markup rather than PHP, and theme.json takes over part of the role style.css’s comment carried, managing color and spacing rules all in one place. The concepts (template hierarchy, theme support) are shared, so now that you understand classic themes, you should be able to read the differences between the two as “reasons for the evolution.”

Summary of this lesson

  1. Place screenshot.png in the theme folder and the themes list gets a face
  2. Review style.css’s Description and Version too at finishing time—the self-introduction shown in the list
  3. Finishing is checklist inspection—especially wp_head/wp_footer, enqueue, escaping, and 0 articles are viewpoints checked in real-world work too
  4. The next road is the three directions of the official handbook, ACF, and block themes. First, changing the subject and doing one more lap is the shortest review

Try it: complete the Shimaenagado theme

The final finishing touches.

  1. Take a screenshot of the top page and save it as screenshot.png in the theme folder
  2. In “Appearance” → “Themes,” confirm your theme has gotten a face
  3. Inspect the checklist above from top to bottom (fixing even one is well done)
  4. Click through the finished site all the way from the top to the 404

Well done. You are no longer a “person who uses themes” but a person who can build themes. Take the patterns you built here and try one more lap with your own subject.

FAQ

Can I distribute or sell a WordPress theme I made myself?
Because a WordPress theme's PHP part inherits WordPress core's license (GPL), the rule is that if you distribute it, you publish it under GPL (or a GPL-compatible license). You don't need to worry about it for your own personal use, but it's good to know as a rule that comes up when you consider registering it in the official theme directory or selling it.
When I want to modify the theme later, is it okay to rewrite the files directly?
If it's a theme only you use, direct editing is no problem. If you're going to hand it to others, or there's a chance you'll replace the original theme itself later, using a mechanism called a "child theme" that gathers just your changes into a separate folder keeps your changes from being wiped out.
Can I register a finished theme in the official theme directory?
You can. Anyone can apply to WordPress.org's official theme directory, and if you pass the review (coding standards, security, GPL compliance, and so on) you can publish it for free. The patterns you gained in this course (template hierarchy, escaping, and other basics) overlap quite a bit with that review's viewpoints too.