Portfolio Website: SatDar WordPress Theme

SatDar is a complete, original WordPress theme developed on the Zurb Foundation front-end framework. It is a fully responsive layout, designed to present a clear and pleasing layout in whatever context it is loaded, re-flowing satisfactorily from portrait to landscape, and back.

Project objectives

Although WordPress as a system is fairly agnostic about its end-use, themes tend to be designed with an objective in mind. SatDar’s principle objective is to present itself as an online companion-extension to a traditional CV. It is not just a portfolio, it was built to demonstrate my (admittedly somewhat eclectic) skill base to an arbitrary, potential employer. To that end, the theme particularly focuses on tagging projects with skills, such that if an employer is looking for evidence of a particular skill, they can find examples merely by following a tag. The whole site was designed to orient the user towards useful content from the page in which the user finds themselves. This means that the category, contact, search result, and 404 pages where all designed to move the user on productively from that point, as opposed to over-relying on the navigation tree.

I planned the site to take advantage of my active social media presences and incorporate content from them via widgets and plugins. This approach has several advantages. It delegates the storage and sorting of specific content — especially images — to a service provider that specialises in that information type. It also increases the number of links back to this website, a crucial aid to good SEO. This increases the likelihood that someone interested in hiring someone with a skill featured on that platform will discover my work.

The theme takes advantage of the Jetpack plugin’s Portfolio custom post type. I have, however, added a plugin to extend the plugin: the Project Type Image is an additional feature.


A feature of a personal project like this is that it allows me to experiment, demo, and practice ideas and techniques. Future updates will include:

  • More original illustrations: some of the banner images will feature site-specific illustrations, not just examples of my own photography.
  • CSS animations.
  • A custom, back-end theme admin page, partly for managing global microdata elements.
  • “Human element” data tables will be managed by shortcode.
  • In-post microdata snippets managed by shortcode.

How to name a WordPress theme

The theme name is a contraction of “Satyadarshin”. My goddaughter struggled for some months to learn to pronounce the names of her adult, Buddhist friends and family: “SatDar” was as close as she could get to mine until she was well on the way to being 3 years old. This Theme is my first, fully fledged theme. Given the many little hurdles I’ve had to overcome in order to get fluent in WordPress, a name that reflects the sort of journey felt right.

Related projects

The Rocketship emblem has its own project page in the Graphic Design section of the site.

The human elements
Website www.satyadarshin.com
Client Satyadarshin
Published February 2017
Status Active. The project receives feature upgrades.
Project lead Satyadarshin Perry
Design Satyadarshin Perry
Photography Images taken by Satyadarshin Perry, unless otherwise stated
Graphic elements All original graphic elements by Satyadarshin Perry, unless otherwise credited
Programming WordPress theme by Satyadarshin Perry
Toolbox Code editor: Brackets
FTP Client: Cyberduck
SASS compiler / package management: Codekit
Test environment: Firefox Developer Edition
Vector illustrations: Adobe Illustrator
Digital darkroom: Adobe Photoshop

Further information

A full introduction to themes can be found on the WordPress website. If you’re unfamiliar with the Foundation front-end framework, check out the Zurb website.

Project Highlight

Rocketship branding element for Satyadarshin

Feature element in the graphic identity and branding project for Satyadarshin.


This project demonstrates the application of WordPress Zurb Foundation, CSS, HTML5, SASS, JavaScript, jQuery, PHP, Responsive Web Design, Editorial development, and SEO. Follow the links to see more projects using these skills.