I use this note for all I’ve learned when I build again website math2it.com using Wordpress. Different from Note of Wordpress 1 and Note of Wordpress 2, in this note, I quickly note what I have used without clarify.

Install offline plugins to localhost. (cf) : Add following line to wp-config.php

define('FS_METHOD', 'direct');

Category template: in that order: category-slug.php → category-id.php → category.php → archive.php → index.php

• Default page template: page.php file.
• We can choose the template in the page editor.
• If page’s slug is gioi-thieu, we can create a template for that page only, the file is page-gioi-thieu.php.

Remove p tag from category description: Add below line to functions.php

remove_filter('term_description','wpautop');

Semantic element HTML5

• Webflow’s HTML5 tags include:

  • <header> defines a header for the document or a section
  • <footer> defines a footer for the document or a section
  • <nav> defines navigation links in the document
  • <main> defines the main content of a document
  • <section> defines a section in the document—the spec defines this as “a thematic grouping of content, typically with a heading,” so you can think of it as being like a chapter
  • <article> defines an article in the document
  • <aside> defines content aside from the page content
  • <address> defines the contact information for the author/owner of a document or an article
  • <figure> defines self-contained content, like illustrations, diagrams, photos, code blocks, etc.
• <article>: contains title and blog’s content.
• <main>: contains unique content of that web page (not duplicate across multiple pages). It can be only used once on each html file.

Automatically convert scss to css file. Using gulp

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

and then use

sass --watch <scss folder>:<css folder>

Just use app/sass is location of scss files and public/stylesheets location where you want to have css. It will automatically convert scss to css after each save of the sass files.

Gutengerg editor

• You may have noticed, reading the Gutenberg documentation, that there are two ways to add new blocks. There’s ES5 and ESNext.
• Add custom button to gutenberg block (official): here. Icon is chosen from here.