Gearing up for the 20th anniversary of WordPress

WordPress, as you may know, is the world’s preeminent platform for web content creation and management.

May 27, 2023 marks the 20th anniversary of WordPress’s founding – and the beginning of a spectacular evolution, from a creativity and hosting environment for bloggers, to a technologically advanced foundation for building awesome web experiences.

WordPress 20th anniversary banner

Today, there is about a 4-in-10 chance that a web you’re visiting at any given time is powered by WordPress technology.

As a giant open-source community of software developers, content creators, marketers, and website agency owners, WordPress has been celebrating this occasion with online and in-person events all over the world.

Marking the occasion in a personal way

I had been celebrating this special 20th anniversary, by using it as an incentive to make a series of design enhancements to my WordPress-powered blog.

In particular, I’ve been creating new website elements using the latest and greatest WordPress content creation and editing tools, collectively known as Gutenberg. It offers a visual site editing experience that’s user-friendly and easy to learn, similar to the intuitive capabilities that have made Squarespace, Wix, and other site builders so popular.

The video clip below gives you a small idea of the visual creation workflow in Gutenberg.

With Gutenberg, I’m able to craft my own, customized visual elements much faster and way more streamlined than coding and web development, or having to rely on a proprietary WordPress theme or plugin.

Here’s what I have created with Gutenberg – through a visual editor, and little or no hard coding.

Article summary

I’ve always wanted a section at the beginning of an article that provides a bulleted summary. This is great for longer-form blog posts that gives the reader an idea of the article’s content before diving in.

Key Points
  • This would be the first summary statement.
  • This is where the second summary statement would be.
  • Additional statements can be added if necessary. I’ve designed the section to allow multiple lines.

Pull quote

This is my design for a presenting a quote. It was inspired by a pull quote design I saw on another blog, and then decided I wanted to emulate it.

This reusable block was created to allow presentation of pull quotes.

Perry Sun


It’s often the case that when writing a blog post, you want to get into a side discussion that’s separate from the flow of the main article. I created a sidebar for this purpose.

This is the heading for the sidebar

Here is main text to go within the sidebar. The sidebar may include one or more paragraphs of text.

This is another paragraph of text for this sidebar. One thing to note: if you want to add a hyperlink, here is what it will look like.

  • If you want a list, that’s possible too.
  • You can choose between ordered or unordered list. The choice is totally up to you.

For the final paragraph of text, the bottom margin needs to be zeroed out.

Code presentations

This is actually a carryover from a legacy project that involved quite a bit of hand coding to create – and then having to dig around for it whenever I wanted to use it in a blog post.

I used Gutenberg to recreate this project into a simple visual module that I can easily call up whenever I want to show code with some nice color formatting.

div.meter {
	width: 250px;
	height: 22px;
	background-color: #fff;
	border: 2px #333 solid;
	border-radius: 22px;

Additionally, I used to Gutenberg to create standardized formatting whenever I want to mention code elements inline within a paragraph. Take, for example, the HTML tags <section> and <aside>.

Footer with “About Me”

Finally, I created a new section to go at the end of a blog post. It’s just to introduce me to a reader who (very likely) is coming over from one of my social media posts.

Happy 20th anniversary, WordPress!

Headshot of Perry Sun

I am Perry Sun, a product marketing professional, and this is my personal blog. I like to write about content creation, personal development, and technology. Please visit my website to learn more about me.