Lewin.io WordPress Theme

Words "lewin.io" in brackets

Overview

In the process of redesigning my personal website, I developed a WordPress portfolio theme to display my development work and writing. I used a combination of JavaScript, PHP, CSS and HTML to design and develop this theme.  I created this theme in accordance with the WCAG Guidelines for web accessibility.

The Challenge

When I set out to redesign my portfolio website I had two goals in mind. First, I wanted to give myself a platform I could use to write about my work and my process as a front-end developer. I also wanted to make a more modular site that could be iterated upon and added to more easily.

Second, I wanted to improve the accessibility of my website. To do so, I targeted three areas:

  1. Better adherence to the WCAG guidelines for accessibility.
  2. Improved color contrast on all content.
  3. Improved compatibility with legacy browsers.

I sought to do this while maintaining a simple, modern design.

My Process

I started by determining the desired content and layout of my front page. To do this, I sat down with a pen and paper and made a list of all the necessary information for the page, as well as possible layouts for this content.

I then made a static HTML version of my front page. I focused on both using semantic HTML5 and using ARIA labels to assist with visitors using screen readers. I also worked to ensure that my content adhered to WCAG AA contrast ratio of 4.5:1 for text content. During this stage, I also wrote the majority of my CSS and JavaScript. For layout, I used a standard 12-column, float-based responsive grid in order to aid compatibility with Internet Explorer and older versions of ios Safari and Android Chrome. I also ensured that any new CSS rules I used could fail without breaking the layout or preventing content from displaying.

I then used Automattic’s excellent Underscores starter theme as a base for my theme. I turned my HTML prototype into a front page template and a reusable header and footer. I then reused components from the front page to make a template for a blog page and for individual posts. I also used the Advanced Custom Fields and Custom Post Type UI plugins along with custom PHP in order to more easily add, subtract and edit content on my website directly from the WordPress dashboard.

The Finished Product

A screenshot of my new theme for portfolio websites.
The front page of the finished theme.

The final product achieved my goal of increased adherence to web accessibility standards. Additionally, the creation of a custom-themed WordPress site will allow for smoother and alterations and enhancements going forward due to WordPress’s modular template structure. Finally, the addition of WordPress’s content management system to my website gives me a platform to better document my projects and progress.

The code for this project is available on GitHub, and I intend to continue updating this theme as my needs for this site change.

Get in Touch

Interested in working together? Click the big button below.

Send me an Email