Categories
Miscellaneous Guides

WordPress Post Markup Cheat Sheet

As I type this, I am using the Block editor. However, sometimes, I also want to create and edit posts from VIM, and the extremely useful wp-cli tool. However, before you can do that, you need to already know that markup WordPress makes for its blocks.

I searched far and wide, all over the net, for a WordPress post markup cheat sheet, but all I got was shortcuts to other features, and Markdown cheat sheets. Side note: WordPress does not use Markdown unless you enable a special plugin for it.

I have decided to publish a list of the codes for the most common formatting blocks, so that other fellow script-bloggers and type away at their terminals.

I should note that some of these blocks require Jetpack to be installed. In particular, LaTeX block is actually just a paragraph, with special formatting as displayed below. But you must enable the specific setting in Jetpack called “use Latex” to enable the LaTeX formatting.

I broke up the wordpress commends with a space after the "<" character, and also at the beginning of each open and close tag, so that they don’t render inside the code blocks too. When using these blocks, make sure that you delete the space I put after it, for the block to work.

Without further ado, here is the cheat sheet.


Formatting Codes Cheat Sheet

H3 heading will be used to separate sections.

Paragraph


< !-- wp:paragraph -->
< p>The < strong>quick brown fox < em>jumps< /em> over the lazy dog. < a href="https://notatether.com">Ali Sherief's blog< /a>. < a href="https://notatether.com" rel="nofollow">A no-follow link to my blog< /a>. < a href="http://google.com" target="_blank" rel="noreferrer noopener">A link that opens up in a new tab< /a>. < a href="http://google.com" target="_blank" rel="noreferrer noopener nofollow">Both< /a>.< /p>
< !-- /wp:paragraph -->

The quick brown fox jumps over the lazy dog. Ali Sherief’s blog. A no-follow link to my blog. A link that opens up in a new tab. Both.


Advanced paragraph formatting


< !-- wp:paragraph -->
< p>The < mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-accent-color">quick< /mark> < code>brown< /code> < sub>fox< /sub> < sup>jumps< /sup> < kbd>over< /kbd> the lazy dog. < img class="wp-image-1526" style="width: 60px;" src="https://notatether.com/wp-content/uploads/2021/07/cropped-Webp.net-resizeimage-4.png" alt="">< /p>
< !-- /wp:paragraph -->

< !-- wp:paragraph -->
< p>Don't < span style="text-decoration: underline;">underline< /span> text or use < s>strikethrough< /s>. WordPress devs don't like that.< /p>

The quick brown fox jumps over the lazy dog.

Don’t underline text or use strikethrough. WordPress devs don’t like that.


Heading (h2/h3/h4/h5/h6)


< !-- wp:heading -->
< h2 id="h-the-quick-brown-fox-jumps-over-the-lazy-dog">The quick brown fox jumps over the lazy dog.< /h2>
< !-- /wp:heading -->

< !-- wp:heading {"level":3} -->
< h3 id="h-the-quick-brown-fox-jumps-over-the-lazy-dog">The quick brown fox jumps over the lazy dog.< /h3>
< !-- /wp:heading -->

< !-- wp:heading {"level":4} -->
< h4 id="h-the-quick-brown-fox-jumps-over-the-lazy-dog">The quick brown fox jumps over the lazy dog.< /h4>
< !-- /wp:heading -->

< !-- wp:heading {"level":5} -->
< h5 id="h-the-quick-brown-fox-jumps-over-the-lazy-dog">The quick brown fox jumps over the lazy dog.< /h5>
< !-- /wp:heading -->

< !-- wp:heading {"level":6} -->
< h6 id="h-the-quick-brown-fox-jumps-over-the-lazy-dog">The quick brown fox jumps over the lazy dog.< /h6>
< !-- /wp:heading -->

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Lists


< !-- wp:list -->
< ul>
  < li>Bullet list one< /li>
  < li>Bullet list two
  < ul>
     < li>Level two< /li>
  < /ul>
  < /li>
< /ul>
< !-- /wp:list -->

< !-- wp:list {"ordered":true} -->
< ol>
  < li>You can mix and match< /li>
  < li>ordered and unordered, anywhere
  < ul>
     < li>Whether there is {"ordered":true} in the tag or not.< /li>
  < /ul>
  < /li>
< /ol>
< !-- /wp:list -->
  • Bullet list one
  • Bullet list two
    • Level two
  1. You can mix and match
  2. ordered and unordered, anywhere
    • Whether there is {“ordered”:true} in the tag or not.

Separators


< !-- wp:separator -->
< hr class="wp-block-separator has-alpha-channel-opacity"/>
< !-- /wp:separator -->

Spacers


< !-- wp:spacer -->
< div style="height:100px" aria-hidden="true" class="wp-block-spacer">< /div>
< !-- /wp:spacer -->

My advice is to just leave the spacer settings at the default, since they can be hard to check from a terminal.


Preformatted Text


< !-- wp:preformatted -->
< pre class="wp-block-preformatted">Five boxing wizards jump quickly
Another line< /pre>
< !-- /wp:preformatted -->
Five boxing wizards jump quickly
Another line

Code


< !-- wp:code -->
< pre class="wp-block-code">< code>#include <stdio.h>
/* Be careful when writing inline code.
 * AND characters should be replced by "&amp;".
 * Then you should replace less-than characters by
 * "&lt;".
 * Note that I did not escape the &lt;'s in this code,
 * so if you are copying from a browser,
 * you must perform this substitution yourself.
 * Otherwise, weird things will happen to your post content.
 * Quotes and greater-thans don't need to be replaced.
 */
int main() {
    printf("Hello, world.");
    char nul = '\0';
    return 0;
}< /code>< /pre>
< !-- /wp:code -->
#include <stdio.h>
/* Be careful when writing inline code.
 * AND characters should be replced by "&amp;".
 * Then you should replace less-than characters by
 * "&lt;".
 * Note that I did not escape the &lt;'s in this code,
 * so if you are copying from a browser,
 * you must perform this substitution yourself.
 * Otherwise, weird things will happen to your post content.
 * Quotes and greater-thans don't need to be replaced.
 */
int main() {
    printf("Hello, world.");
    char nul = '\0';
    return 0;
}

Regular Quotes


< !-- wp:quote -->
< blockquote class="wp-block-quote">< p>And the best thing about our independence is, no one can take it away from us.< /p>< cite>Ali Sherief< /cite>< /blockquote>
< !-- /wp:quote -->

And the best thing about our independence is, no one can take it away from us.

Ali Sherief

Pull quote


< !-- wp:pullquote -->
< figure class="wp-block-pullquote">< blockquote>< p>And the best thing about our independence is, no one can take it away from us.< /p>< cite>Ali Sherief< /cite>< /blockquote>< /figure>
< !-- /wp:pullquote -->

And the best thing about our independence is, no one can take it away from us.

Ali Sherief

Images


< !-- wp:image {"sizeSlug":"large"} -->
< figure class="wp-block-image size-large">< img src="https://i0.wp.com/notatether.com/wp-content/uploads/2021/08/[email protected]?resize=300%2C58&ssl=1" alt=""/>< figcaption>This is an image added with a link. You should refrain from fiddling with your gallery from the terminal. That's just my style.< /figcaption>< /figure>
< !-- /wp:image -->
This is an image added with a link. You should refrain from fiddling with your gallery from the terminal. That’s just my style.

Audio


< !-- wp:audio -->
< figure class="wp-block-audio">< audio controls src="https://chtbl.com/track/282487/traffic.libsyn.com/secure/whatbitcoindid/WBD271.mp3">< /audio>< figcaption>This is a direct audio URL.< /figcaption>< /figure>
< !-- /wp:audio -->
This is a direct audio URL.

Button


Verse

Do not go gentle into that good night,
Old age should burn and rave at close of day;
Rage, rage against the dying of the light.

Though wise men at their end know dark is right,
Because their words had forked no lightning they
Do not go gentle into that good night.

Markdown

This is authentic markdown for the masses.


LaTeX (requires Jetpack)

\frac{n!}{k!(n-k)!} = \binom{n}{k}

Size 4 is recommended when inserting this in paragraph blocks, otherwise the equation will look tiny even in normal size. The LaTeX parsing will break if you include any HTML tags in between, so don’t include any and use only LaTeX codes (for example use _{} and ^{} instead of < sub>< /sub> and < sup>< /sup>).

Youtube embed


Twitter Embed


Spotify


< !-- wp:embed {"url":"https://open.spotify.com/episode/6FFDyC5nCLqe0nMj8rPznm?si=ljxEEDFoSw-6plunf7gcDw","type":"rich","providerNameSlug":"spotify","responsive":true,"className":"wp-embed-aspect-21-9 wp-has-aspect-ratio"} -->
< figure class="wp-block-embed is-type-rich is-provider-spotify wp-block-embed-spotify wp-embed-aspect-21-9 wp-has-aspect-ratio">< div class="wp-block-embed__wrapper">
https ://open.spotify.com/episode/6FFDyC5nCLqe0nMj8rPznm?si=ljxEEDFoSw-6plunf7gcDw
< /div>< figcaption>This is a Spotify embed.< /figcaption>< /figure>

This is a Spotify embed. They are not open to all countries, so you may see an error message instead. I recommend you embed SoundCloud where possible.

SoundCloud


< !-- wp:embed {"url":"https://soundcloud.com/what-bitcoin-did/becoming-a-bitcoin-core-developer-with-amiti-uttarwar","type":"rich","providerNameSlug":"soundcloud","responsive":true} -->
< figure class="wp-block-embed is-type-rich is-provider-soundcloud wp-block-embed-soundcloud">< div class="wp-block-embed__wrapper">
https ://soundcloud.com/what-bitcoin-did/becoming-a-bitcoin-core-developer-with-amiti-uttarwar
< /div>< figcaption>This is a SoundCloud embed.< /figcaption>< /figure>

This is a SoundCloud embed.

Conclusion

That just about wraps up my WordPress post formatting cheatsheet. Hopefully, you find it useful.

By Ali Sherief

Editor-in-chief and serial coder & blogger.