Note

😫 This article is not for students who are too lazy to tinker

This article involves modifying theme code, which means you will have to re-apply the changes below every time you upgrade the theme, or they will stop working. As you can see, my theme is still stuck on version 20230131.

📦 Be sure to back up

Before you start, back up your theme files and database so a mistake doesn’t leave you wondering how to roll back.

🍦 Beginner-friendly

This article is aimed at coding newbies and walks through the whole thought process in detail. If you already know some code, feel free to skip straight to the code snippets.

At the moment my blog’s home page has two different things: regular posts and “say something” snippets. “Say something” is perfect for daily rants or things that don’t deserve I’m too lazy to turn into a full article. Next I’ll use the Cuteen theme as an example to show you how to add your own “say something” to whatever theme you’re using.

You’ve just finished a short piece, but its length and type feel different from anything you’ve published before. Rather than an article, it looks more like a朋友圈 or QQ空间 “mood”. So you want to add a new type to the home page to display these special posts. You sort out your thoughts and realize you only need to do two things: let Typecho know what this post actually is, and render it differently based on that type. Let’s begin.

Let Typecho know what this post actually is

Luckily Typecho already provides this feature—it’s called custom fields.

Custom fields

In Typecho, custom fields are an official interface left for user customization. By filling in the corresponding info on the post-editing screen, you can tell Typecho how to handle certain aspects of the post.

You feel this feature was tailor-made for your idea: just choose “article” or “mood” when publishing and Typecho will know which style to use.

After rummaging through the theme folder, you finally locate the themeFields function in core/Fields.php—this function lets you add custom fields to posts.

Note

🔔 Please note: the file name and location for adding custom fields differ from theme to theme. For example, in the Sunny theme the themeFields function is on line 1292 of functions.php. Ask the theme author what the file is called and where it lives. Of course you can also do what I did at the beginning—search the theme folder Ctrl + F for the name of an existing custom field you see in the back-end editor.

You modify the function like this:

The Typecho_Widget_Helper_Form_Element_Select class creates a drop-down. Here we build a drop-down named $isSpeak with two choices—哒咩 and 是—defaulting to 0 (“哒咩”), and the back-end editor will show the field label 是否是说说.

Note

It’s recommended to default to 0 so older posts stay regular articles; otherwise every past post will suddenly become a mood.

After saving, reload the editor and you’ll see the new field:

Choose “是”, publish, and Typecho now knows this post is a mood.

Render it differently based on post type

Next you tweak the home-page code so it can react to that field. Open index.php and you see:

This loop displays the post list, so calling Context::IndexList($this) returns the HTML for each post. That method lives in core/Context.php. Modify IndexList to add an if that checks the mood flag:

Context::ArticleExcerpt(1000 , $ctx) is a Cuteen helper that truncates to 1000 chars on the home page so things don’t get too long; adjust to taste.

Note

Non-Cuteen themes must change every $ctx-> to $this-> (Cuteen passes $this as $ctx). Also, Context::ArticleExcerpt won’t exist; use mb_substr($this->fields->excerpt, 0, 1000, 'UTF-8') or similar instead.

Can’t find while ($this->next()) ? [Sunny theme example]

If your theme’s index.php doesn’t contain while ($this->next()), open DevTools, locate the element wrapping posts—here <div class="postlist_out ">—and search index.php for that class. If still missing, move up to its parent <main class="main_body"> and search again.

Searching for main_body leads to article.php.

Open article.php, search for while ($this->next()), and you’ll spot the loop:

Save and you now have your very own “say something”. There’s no CSS yet, so you’ll need to write the styles yourself—out of scope for this article.