Marta Lynx

Demo Project
Technologies Used
Wordpress
PHP
Javascript
SCSS
Gulp

Project Overview

This demo project was a good learning process and helped me greatly improve my understanding of Wordpress and PHP. I developed a custom Wordpress theme from Underscores using Custom Post Types, Advanced Custom Fields and Contact Form 7.

Backend and CMS

For this project I developed the Wordpress instance locally, created and tested the Custom Post Types, Custom Fields and populated with Dummy content. I completed and tested the site locally before moving to a live server.

I setup and configured a live Apache server and transferred the site using SFTP. I have since stopped paying for this Apache server so no longer have a hosted version of this demo project but the codebase is available on Github at the link above.

Custom Post Types, Books and Short Stories

This was developed as a theme an author could use so I created 2 Custom Post Types. One for Books and another for Short Stories. This allows the user to upload a book cover, short description and full article post for each.

The cover and short description are used for the index pages for each Post Type. The Index page of books for example displays a list of all the books in the database showing the book cover and short description for each. The cover thumbnail would lead to a detailed entry page for the particular book when clicked.

Contact Form Integration

I created the Contact and Newsletter Forms and integrated them with Wordpress using the Contact Form 7 and Flamingo plugins. This allowed a user to send a contact form and the contents of the form would be sent as an email as well as being saved in the Wordpress backend.

Pure CSS Popup

I created a custom popup using only pure CSS with no Javascript. The Newsletter Signup Nav icon in the top right opens a popup modal containing a signup form when clicked. This popup effect is achieved using the CSS :target Pseudo Class. I would usually choose Javascript for this kind of functionality as closing the popup requires a reload of the page however this pure CSS version was a good learning experience.