Making a Wordpress theme 101 draft

Last modified 3 years ago / Edit on Github
Danger icon
The last modifications of this post were around 3 years ago, some information may be outdated!
Danger icon
This is a draft, the content is not complete and of poor quality!

In this note, wp theme's components are supposed to be placed in folder wp-thi.

👉 Note: All notes of Wordpress.



  • Theme is placed at ./wp-content/themes/
  • WP needs at least 2 files to exist: style.css and index.php.
  • Admin page

WP theme components


echo get_bloginfo('template_directory'); // theme directory


get_bloginfo( 'wpurl' ) // url
get_bloginfo( 'name' ) // name
get_bloginfo( 'description' ) // description


the_content() // content
the_title() // title
the_date() // date
the_author() // author


the_author_meta( 'description' ); // description

KaTeX for Wordpress

I don't like 2 available plugins (WP-KaTeX and KaTeX). The former doesn't support dollar symbols ($) to display equations, the latter doesn't support inline math.

We will use directly KaTeX.

  1. Put below code inside <head></head>,

    <link rel="stylesheet" href="[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
    <script defer src="[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
    <script defer src="[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body, {delimiters: [{left: '$$', right: '$$', display: true},{left: '$', right: '$', display: false}]});"></script>
  2. In Wordpress, for display mode, switch to html block. For inline mode, use $$ as usual.

💬 Comments

Support Thi Support Thi