The idea for this project came from hiring assignments I found online. I considered this as a more accurate way to simulate real-life client requirements by implementing things that other agencies have already asked when hiring developers. This way I was breaking outside of my comfort zone and forcing myself to further develop my problem solving and critical thinking skills.
In order to clearly understand this project, it was important to understand the functional requirements. The diagram below shows the PSD designed mock-up of the final website. This image has been annotated to show all the functionality that is needed for every area of this project. The assets were sliced from the main PSD and placed into an images folder. Information on all colors and fonts are also gathered ready for the development stage.
HTML Bootstrap 4 Static Version
Here are the static HTML and Bootstrap 4 versions of the project. I considered it important to get this project fully functional as a Bootstrap site before the WordPress conversion process. By taking this approach, I was able to make the development of this project far more efficient and the WordPress stage much easier to implement. One could build the WordPress version of this site inline with the HTML, however, this seemed a more systematic approach that could help in avoiding any strange WordPress behavioral issues later on.
WordPress 5 Theme – Final Version
With the fully functional static version of this site up and running it was time to convert it into a WordPress theme. This process did not prove to be as challenging as I thought it might. The HTML had to be broken down into various template files in order to function in the WordPress way. These included:
There are many more templates that can be used in a WordPress site, but these are the main ones. If using a starter theme like underscores, a lot of templates will come pre-loaded that can be customized and cut down development time. For this project, I created the template files from scratch in order to better understand how things work under the hood of a WordPress website. Understrap is another starter theme option that comes preloaded with Bootstrap that could be used.
Below is the final fully working version of the WordPress build. The conversion went fairly smoothly. The most complex areas were the slick slider and the hover to reveal the sub-pages section. By getting those working in the static version of the site first things were easier, but custom PHP needed to be added such as queries and WordPress loops in order to get the required result in WordPress format.
The social media widget in the footer was made into a plugin that could be used with any theme. Doing so was not a requirement but was considered a good way to push myself even more with my development skills and make a more polished final project. One functionality was not to show a social network icon and link if no URL is entered into the link field within the widget admin area.