This is the first time I have used WordPress with such a complex process. Usually when I use WordPress, it is write simple blogs as documentation of the class’ notes assigned by the instructor. This is the first time that I learn the back-end process. The idea of PHP was quite frightening when I first discovered that was what I would have to deal with for the entire process of making my own website. The beginning of setting all the components up was quite confusing as well, as it was the first time I encountered all the MySQL database, MAMP, WP configuration steps. Nevertheless, I have a better understanding of what they are now, because of the struggles I faced in the process. The entire process of the website triggered countless all-nighters.
When this personal project was assigned, and that I could choose to make the personal site a portfolio website, I was quite excited. Before this semester, I wanted to create an online portfolio website for myself over the winter break using HTML/CSS and jQuery; however, I never had the chance to do so. After the first class when this project was assigned, I spent quite a bit of time to create a mock-up on illustrator. I was very satisfied with the way it looked at the time. After I found out that we had to use PHP in WordPress to create the site, I was a bit afraid. I was afraid that I could not code the site as exactly how I designed it in the mock up. I was trying to look for similar themes but I could not find any. I found this theme called Flatolio because it was parallax scrolling; however, the theme was quite confusing to use for me and did not seem to match what I learned in class. I was also very inexperienced at the time. As a result of that, I just continued using the default WordPress Twenty Fifteen theme as the parent theme and customized to match the mockup as much as possible. I grew more comfortable with the theme, as I also did a lot of googling and watching WordPress tutorials on Lynda.
I started the coding process with pure CSS because I could not figure out how enqueuing scripts in the function.php worked. The first jQuery I wanted to plug into my site was flexbox. I then discovered a pure CSS method to do the exact same effect, which was much easier and less code. Nevertheless, it took me a while to discover how to enqueue scripts because I found the WordPress Codex quite confusing. The problem was because I followed the way it was enqueued in the function.php from the parent theme, which was using “get_template_directory_uri()”, but the correct way was to use “get_stylesheet_directory_uri()”. I struggled quite a bit with javascript and jQuery. The only javascript I successfully enqueued at the time was the navigation bar scroll effect. I think my biggest problem was jQuery because I did not properly format the code. For the longest time, I struggled with it and later suddenly got it to work by adding “jQuery(document).ready(function($){ });” around the script. After successfully getting that to work, inputing jQuery into my site worked quite smoothly; however, I found myself having problems with enqueuing the more complex jQuery that arrayed another jQuery plugin script. It took me copious tries to finally getting it work. The one I used was hammer.js, which enables the swipe effect, which is mostly used in devices instead of the desktop computer. One of the reason I was confused was because of this website I found has a guide of how to use hammer.js in wordpress. Since the WordPress posted in 2012, they are not really updated, as some of their important links were broken. After following the guide to both register and enqueue the hammer.js script, the script still would not work. I later remove parts of the code from the guide and just enqueued hammer.js the normal way with no array, and enqueued the script that triggers the swipe effect, arraying both jQuery and hammer, and the swiping was enabled. I was not very confident or sure in what I was doing; however, it took several trial and errors to fix the problem.
The most frustrating part of the process, which I felt I struggled with the most was the very last part. All aspects of the site worked fine in the localhost; however, I underestimated the last step thinking it would be easy and quick. I followed every single step to migrate my localhost site up to my remote site, but once I dropped the original tables in myPHPadmin and imported the localhost tables, the remote website not only did not change and become like my localhost site, but it wiped out all the data and showed the very beginning part of the process—the WP configuration page. This problem gave me anxiety for the entire day because not only is this personal project due the next day, but also 2 of my other projects from other classes were sitting in the localhost. I was seeking help both from my instructor, Morten Rand-Hendriksen, who assigned this project, and another professor, Chris Hethrington, who is also my director for a front-end application development (UX/UI) research assistant job. Nevertheless, the problem was not resolved. I later returned home from school in the evening and tried the migration process over and over again. I restarted the remote website and reconfigured it a few times, as well as migrating localhost to the server multiple times. I looked at myPHPadmin again, and the tables from both localhost and the newly configured site tables were in the database. I then realized the prefix of the two were different, which was the main problem it did not migrate properly. I then went into the wp-config.php file in my ftp and changed the table prefix to match my localhost one. After that, the homepage was displayed, but other the migrated links lead to an error page. After seeking more help from Morten, the problem was solved by just clicking save for the permalink settings. Because the links on the navigation bar were not migrated, I manually went into the header.php file to change the links. The whole website seems to be working quite well, except that the image sizes are quite large, so the site loads a bit slow on the web.
Despite all the struggles and frustration I had in the process of making this site, I am very satisfied with the outcome, in which I am not only content with how the site looks, but also what I have learned from the experience. I genuinely value this challenge, because of how much extra knowledge it provided me. Even though countless all-nighters were pulled throughout the semester due to the making of this website, I valued every single aspect of the experience it has given me. The ending of this course will not stop me from continuing to learn more about WordPress, especially the PHP portion. I will persist to develop and enhance this website because I feel that there are areas that have space of improvement.
Thoughts? Questions? Comments?