Inked and Faded: A Custom WordPress Theme for a Tattoo Guide Site
A full redesign for a site of tattoo aftercare, tattoo and removal guides: a dark, photo-led look, a custom theme, five free tools and sources that readers can see at a glance.
A guide site for tattoo aftercare, getting a tattoo and tattoo removal.
A full redesign, a custom theme, a mega menu and five interactive tools.
A custom theme in PHP, CSS and JavaScript, with no page builder.
Designed, built and launched within the month.
Where It Started
Inked and Faded publishes guides on tattoo aftercare, getting a tattoo and tattoo removal. Its previous design, built with a page builder, set a white page around a dark center band, with a sliding image banner and article cards of uneven heights, each with a short excerpt and a Read More link.
The articles were being rewritten to a higher standard, with a source behind every health claim. The design had to catch up: look like a publication readers can trust, make the evidence easy to see and load quickly on a phone.
What the Redesign Had to Do
- Give the site a distinctive look that suits the subject
- Keep every article card the same size, on every screen
- Show readers where each claim comes from
- Answer practical questions with tools, not just articles
- Load fast on a phone, with no page builder
The Old Design Next to the New One
The homepage and the Tattoo Aftercare archive on a desktop screen. The before shots show the old design; the after shots were taken from the live site in September 2026.
The Homepage
A centered logo and a sliding banner gave way to a photo hero with the headline, search up front and three topic cards.
A Topic Archive
Two columns of cards became a grid of equal cards, twelve to a page, so every row fills whether it shows three, two or one.
The Redesign
The new theme is custom: every template built once, in PHP, with a single small script and no page builder. A guide site repeats a handful of layouts across every article, so each one was designed around how people read on a phone. Tap the numbered points on the screens below to see why each part is there.
- One dark color scheme: charcoal, near-white type, a steel-blue accent and red for labels
- A wordmark with the INKED letters cut out of a solid block, so one logo file works everywhere
- A full-width photo hero and equal article cards with properly sized images
- A mega menu with photo cards for each topic
- A Recommended carousel in every article's sidebar
The contents list stays in view as you scroll and highlights the section you're reading, so a long guide is easy to move around.
The byline counts the sources an article cites and links to a Sources list at the end. In the text, each citation is a small pill that names who said it, such as AAD or FDA.
Every featured image follows one template: a product cutout over a softly blurred photo, carrying the wordmark.
Square slides for the site's main product guides, with a red pill across the top edge. It plays on its own and pauses on hover, on focus or with its own pause button.
Related articles, each with its reading time, so the next read is one click away.
Tap a numbered point, on the image or here, to see why it's there.
Search and the menu tuck behind two buttons. The menu opens each topic as an accordion with article cards you swipe sideways.
The blur is baked into the image file, in three WebP sizes of 17 to 45 KB, with a dark shade in CSS so the white headline always reads.
Search sits right under the headline, with an example query that shows readers what to type.
Browse by Topic cards, each with its own photo and a count of the articles inside.
Tap a numbered point, on the image or here, to see why it's there.
Aftercare, Getting a Tattoo and Removal each open a full-width panel. It opens on hover after a short delay, or from the arrow with a keyboard, and Escape closes it.
One button to the whole topic, with the number of articles it holds.
Five articles from the topic as photo cards: a lightly blurred WebP photo under a dark overlay, so the white titles always read.
Search sits in the header on every page on a desktop, and behind its own button on a phone.
Tap a numbered point, on the image or here, to see why it's there.
Five Free Tools, Built Into the Theme
Readers arrive with practical questions, so the redesign added tools that answer them. Each one works with JavaScript switched off, because the server works out the answer, and updates live when JavaScript is on. Every rule and figure links to its source, with the date it was checked.
- Healing Timeline Planner: healing stages as real dates, with a calendar file to download
- Aftercare Ingredient Checker: paste a soap or lotion label and see if it suits a healing tattoo
- Removal Session Estimator: laser sessions, months and cost from the published Kirby-Desai scale
- Printable Size Guide: tattoo sizes at true scale, calibrated with a bank card or printed
- Tattoo Cost Calculator: the artist's quote plus the minimum, deposit, tip and extras
Built to Load Fast and Read Well
Every page carries only what it uses. The homepage loads in 29 requests, photos included. A tool’s script loads on that tool’s page and nowhere else.
- No jQuery on the front end, and one small deferred script shared by every page
- WordPress's block styles removed, around 100 KB the theme never used
- Photos in WebP, with sizes to suit each screen
- A skip link, visible keyboard focus and menus that open from the keyboard
What Inked and Faded Has Now
- A custom WordPress theme with no page builder
- One dark, photo-led look on every page
- A mega menu and a Recommended carousel
- Five free tools that show their sources
- A Sources list at the end of every article
Currently taking new projects
Let's Work Together
Have a site whose design hasn’t kept up with its content? Tell me about it. You’ll hear back within two working days.