I designed and programmed custom styles and components for a WordPress child theme for the Center for Artistic Activism (C4AA).
Team & Timeline
3 months freelance commitment working in a remote team of 3 designers/developers
A new website with custom WordPress blocks that met C4AA’s branding guidelines
Problem and Context
C4AA is a New York-based arts non-profit that uses arts to bring social change. In 2019 their brand had outgrown their current websites, leading them to redesign their website.
What I did
My role involved refining the design visual during programming. C44A had branding guidelines, but not all my assignments came with detailed specifications. For example, I received a rough mock-up on how to design the posts’ meta-data. To improve the idea, I chose to change the background color of the meta-data from red to black to give a more distinct separation between the hero image.
My most significant contribution was creating custom, randomized polygon-shaped headings and buttons to match C4AA’s print materials.
To begin, I established the fundamental polygon and rotation styles on the buttons. More specifically, I:
- Gave all headings the polygon form using the CSS clip-path property
- Used CSS Custom Properties to set the values that would later be randomized, such as the clip-path corners, and the rotation
- Using custom properties to pull in the established brand colors
To randomize the polygon shape and the rotation, I created the functions
The main drawback with my original functions was that they selected headings at an element level instead of selectively at a class level.
Next, I used the Gutenberg API to create custom blocks for content editors to add the polygon effect at a class level.
With the custom blocks available, polygon clip-path styles could be applied more selectively.
If I could go back, I would have made the custom block more identifiable on the visual editor’s toolbox.
On the upside, once someone uses the clip-path style, the visual editor shows a visible difference, as the image below suggests.
This difference allows the content editor to see where they have applied the polygon style on a draft without going into preview mode.
This project introduced me to a remote development workflow and collaboration. I also learned to use semantic commits to provide concise and meaningful context around my pull requests.
Because C4AA loved the headings and buttons, they requested me to apply similar styles to other elements in the site. The modularity of my code simplified this task. My commitment to C4AA ended before the site launch. However, their new site launched in November 2019 with the rotated polygon styles.