A New Skill Added

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.

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.