Work

The 10K WordPress Theme

To participate in the 10K Apart contest, I redesigned and recoded my personal blog, which runs on WordPress. The first challenge is that I must rebuild my WordPress theme to deliver a compelling experience in 10 kilobytes. In addition, I write in both English and Vietnamese; therefore, my theme must support Vietnamese characters.

Like the web, WordPress theming has become bloated with front-end frameworks and JavaScript dependencies. When I first learned WordPress back in version one, its Classic theme was simple and easy to grasp because it only contained ten files. In contrast, a modern theme like Twenty Sixteen has fifty-one files. WordPress theming has become too complex over the years. To get back to the basics, I scrapped my previous themes and started a brand new one from scratch with just two files: index.php and style.css. I wanted to control every markup that goes into the theme; therefore, I applied PHP functions to only dynamic contents and used as much static components as I can to improve the processing time. The result was a lightweight template that accommodated my design.

The other half of the battle was to support the Vietnamese language. If I used a custom typeface that has Vietnamese subsets, the filesize for the fonts alone will be over 100 kilobytes. I had no choice but to go with the system fonts. For body text, I count on Times New Roman as my first choice. If Times New Roman is not available, I fall back to Times, and system serif if all failed. Headlines are set in Tahoma and fall back to Verdana and system sans-serif. The wordmark is set in Impact and fall back to Haettenschweiler, Arial Narrow Bold, and system sans-serif.

In addition to typography, responsive design and accessible played an important role; therefore, I took advantage of CSS Flexible Box for layout and ARIA Landmarks for screen readers. Of course, the goal for the 10K Apart contest is performance. For my submission, I put a static demo, which is under 10 kilobytes, on Github. To experience the live version, visit Visualgui.