This portfolio piece highlights my front-end and WordPress expertise, showcasing my ability to design and develop WordPress themes while integrating various APIs.
For this project, I utilized the “OMDB,” “Google Custom Search,” and “YouTube Data V3” APIs.
In this blog post, I’ll walk you through some of the key features and sections of the website.
At the end, you’ll find a link to view the website in your browser and access my GitHub repository for the code.
Feel free to leave comments, ask questions, or share suggestions. Enjoy the read!
Introduction
Imagine Netflix, but with a different twist—this website is an alternative version where users can discover movies, series, TV shows, and more. The index page is divided into seven sections, each displaying posts relevant to a specific category.
Each post includes data such as the title, release year, and in some cases, a poster image and IMDb rating. While the titles are manually added, the rest of the post data is fetched from the OMDB API.
You’ll see green and blue buttons next to each post type title. The blue shows the total number of posts, while the green indicates how many were uploaded that day.
You might be wondering how the titles are added manually.
Within the WordPress dashboard, under the settings, I’ve created a page called “Movie Settings” and registered seven different sections, corresponding to the post types on the index page (such as “Virus Movies,” “Latest Movies,” “Latest Series,” etc.).
Within the “Movie Settings” page, there are seven text boxes, one for each post type, where you can manually enter the titles.
Category & Archive Pages
The category page has a slightly different layout, showcasing the six latest movies at the top with larger posters.
All the posts in the screenshot were uploaded manually. In the WordPress dashboard, I created six post types (Movies, Series, Anime, Animation, TV Shows, Documentaries) using the “Custom Post Type UI” plugin, with custom fields set up via the ACF plugin.
I opted to upload posts manually because the OMDB API has a daily limit on the number of movies it can retrieve.
Post types
When uploading a new post type, you’ll find two title fields: the standard WordPress title field and a custom field labeled “Title.”
The custom field displays the movie title, while the WordPress title field fetches data from the OMDB database. This distinction is important because some titles with special characters could disrupt the data retrieval process.
Single Post (Post Type – Detail Page)
When a visitor clicks on any post, they will be redirected to the “Post Type – Detail Page.” This page includes relevant information such as cast, director, release year, and synopsis, all fetched from the OMDB API. Although the posts are uploaded manually and contain some information, that data will not be displayed on this page.
This page also includes features relevant to the post type, such as a voting system, background image, and video trailer.
Voting System
Each post includes a like and dislike button, which operates through an AJAX process. The likes and dislikes are stored in the WordPress options table using the get_option() and update_option() functions.
Background Image
Each post features a background image automatically pulled from the “Google Custom Search API.” In the backend, the function takes the movie title and appends the word “Movie” to it, resulting in a Google search for the “Movie title” + “Movie.” To ensure the images aren’t too small, I’ve added an if statement that only displays images with a resolution of 1920px or higher.
Video Trailer
Each post features a “Watch Trailer” button. When clicked, a pop-up appears on the screen showing the relevant video trailer, which is fetched from the YouTube Data API v3. In the backend, the function takes the $movie_title and $movie_year data and appends the word “trailer” to the end for the search query.
3 Level Submenu
Mobile View
The website in mobile view features fewer data fields, smaller poster images, and only a two-level submenu.
Portfolio Details
- Explore this portfolio piece in your web browser by following the links below.