Decoded
Development // Design
Dec '24 ‐ Sept '25
Overview
A project built of passion
A project built as part of a univeristy module, inspired by my passion and love for hip hop music, Decoded is a platform for users to explore the intricacies of hip hop lyrics to better understand and connect with the music.
Tech stack: html css javascript php wordpress
The final project of the masters programme, Decoded is an introduction to CMS and development of frontend coding skills. Decoded is an original project, from inital concept to research, design and user testing and was built using a fully custom WordPress theme.
The project was an opportunity to:
- ‣ Learn a CMS and explore new coding languages
- ‣ Implement UX, inclusive, sustainable and visual design principles to a complete project
- ‣ Practically work through a full design and development process
Decoded took multiple stages of development to refine the overall concept before proceeding with the build of the custom WordPress theme.
A custom WordPress website, Decoded uses PHP, HTML, CSS & JavaScript. It was built to work dynamically with the WordPess database and uses WordPress functions and custom PHP loops & queries to retrieve and display data.
<?php get_header(); ?>
<main id="main">
<h1><?php the_title(); ?></h1>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_content();
endwhile;
endif;
?>
<?php
$posts = get_posts(array(
'post_type' => 'glossary_entry',
'posts_per_page' => 4
));
if ($posts) :
foreach($posts as $post) :
setup_postdata($post);
// get custom fields and taxonomies
$term_types = get_the_terms(get_the_ID(), 'term_type');
$entry_type = $term_types[0]->name;
$rap_index_page = get_permalink(get_page_by_path('rap-index'));
$term_link = $rap_index_page . '#entry-' . $post->ID;
?>
<article class="glossary-entry" data-type="<?php echo esc_attr($entry_type)?>" data-term="<?php echo esc_attr(sanitize_title(get_the_title()));?>">
<div>
<a href="<?php echo esc_url($term_link);?>">
<p class="title"><?php the_title(); ?></p>
<p class="type"><?php echo esc_html($entry_type); ?></p>
</a>
</div>
</article>
A key takeaway was learning to develop a fully custom WordPess theme that is unique to Decoded, in addition to building the database that holds the relevant reuseable data for Decoded's content. A steep learning curve, experimenting and exploring JavaScript, PHP and WordPress functions to achieve the desired website functionality explored in wireframes and prototypes.
The project taught the importance of testing UX and continually developing design — users are central to the project. Practically implementing accessibility and inclusivity principles whilst managing multiple design considerations.