This week at my Web Dev Fellowship at Center Centre – UIE, I was given a task that tested my skills as a PHP developer.
The Goal
The ad banner at the bottom of a specific article needs to be different than the ad banner on all other articles.
Dr. Leslie Jensen-Inman’s “Yes. And…” article needed to have the How to Win Stakeholders & Influence Decision ad banner, while the other articles needed to have the Advanced Approaches to UX Research ad banner.
Background
Center Centre – UIE has a page dedicated to articles that have been written by many different contributors. This is a WordPress site that uses an older version of WordPress. We update the articles in the WP Admin panel, but the page files are stored on our server. This is where we update the ad banner on the single.php file that loads each article.
The single.php loads the header, the posts (or article), and the footer. Within this logic, there is some simple HTML code that loads the ad banner.
This code retrieved the banner image from the server and it included some text describing the event that was being advertised.
This was a very simple bit of code that was updated regularly by the web dev fellows as needed.
At the bottom of the file, there was a bit of script that loaded a different image if the inner-screen width was less than 500px.
The Process
As this is a single.php file, I knew that I needed to use PHP, a commonly used scripting language and the one that is used by WordPress. I have some experience using PHP from the Codecademy course on PHP that I completed, but I had never had a chance to use this language on a live product. I was extremely excited to use the knowledge I had worked so hard to gain.
I began by identifying the article that needed to be targeted and how I could harness that information as a variable that I could use in a conditional statement:$title = apply_filters('widont', get_the_title(), 12);
I also created a variable to store a string of the title of the target article:$leslietitle = 'Yes. And...';
Here is where I ran into my first problem. When I used the stripos command to identify if the $title variable contained the $leslietitle string, it kept returning as false. Using console.log statements within a script tag and an echo, I found that the two strings weren’t exactly the same. I decided to find an easy work-around by checking to see if any other articles had the substring “Yes.” in them and determined this article was the only one.
The solution was to create a simpler string variable ($yes = 'Yes.';) and use that instead of the longer one. Now, I could use these variables to write an if...else statement to determine which banner would be loaded for the articles.
The Solution
After creating the two ad divs with different content, I wrote out my if...else statement. Basically, if the title contained a certain substring, it would load a specific ad banner. Else, it would always load the other banner.
Great! But what about the mobile view??? This is where it took a bit of crafting on my part to get the script to cooperate. I decided to change up the existing code. I switched the var variable to const and placed them outside of the if...else statement. Then, depending on the screen width, if the variable existed (or wasn’t determined to be null based on the currently loaded article), then that image id would be used to switch out the desktop image for a mobile-friendly image.
Check out the single.php file in my GitHub Repository.
Reflection
I enjoyed every minute of this task. As a Junior Web Dev fellow, the extent of my daily tasks rarely venture into actual programming or coding (other than coding emails, of course). Occasionally, I get to contribute to a landing page or update existing code, but for this assignment, I had the opportunity to write PHP code from scratch and use the skills I so carefully honed over the last couple of years. I’m extremely proud of this work and I look forward to more challenges in the future.
Leave a Reply