WordPress

Passing Variables in PHP and JavaScript

So a client previously asked me to create an interactive mobile element for thier website (which I also previously developed). The site was powered by WordPress and used the ever popular Advanced Custom Fields plugin. As they wanted the ability to update and edit without coding knowledge I had to build it using a mixture of ACF, PHP and Javascript.

Futhermore the section in question would allow users to click on one of six orbiting icons and it would automatically update the screen on the mobile phone in the center. Heres a gif of it in action;

Creating the above in HTML was a fairly straight forward process, however the client wanted the ability to update the screenshots (and all other content) on the fly.

Building the backend

Due to the amount of edittable content in above section I ended up creating a whopping 31 fields in the Custom Fields section to link to each element of the phone section – heres the breakdown below;

  • 6 Image fields for the standard icons
  • 6 image fields for the hover/active icons
  • 6 fields for the titles
  • 6 fields for the text
  • 6 fields for the mobile phone screens
  • 1 field for the “learn more” URL button not seen in this screenshot.

You can see how the end user populated the fields here;

Getting jiggy with JavaScript

The HTML/PHP build of the actual element is fairly straightforward and I won’t post it here (unless specifically asked?) but for the actual phone screen itself I used jQuery and JavaScript to update the background-image css  when a user clicks on an icon.

My first attempt featured me ‘echoing’ the PHP variable inside the jQuery – however due to the closing and opening quotes, both ” and ‘ I was getting null errors and other syntax problems;

Consequently after a bit of trial and error I came up with this solution;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php $phone1url = the_field('icon_1_image_phone'); ?>
<?php $phone2url = the_field('icon_2_image_phone'); ?>
<?php $phone3url = the_field('icon_3_image_phone'); ?>
<?php $phone4url = the_field('icon_4_image_phone'); ?>
<?php $phone5url = the_field('icon_5_image_phone'); ?>
<?php $phone6url = the_field('icon_6_image_phone'); ?>


<script type="text/javascript">

jQuery(document).ready(function($) {

	var phone1 = '<?php echo $phone1url; ?>';
	var phone2 = '<?php echo $phone2url; ?>';
	var phone3 = '<?php echo $phone3url; ?>';
	var phone4 = '<?php echo $phone4url; ?>';
	var phone5 = '<?php echo $phone5url; ?>';
	var phone6 = '<?php echo $phone6url; ?>';

	  $( "#icon4" ).click(function() {
	    $(".phone-screen").css ( "background-image", "url(" + phone4 + ")");
		$(this).find(".circle-content-header").css( "color", "#43b9ba")
	    $(this).css ( "background-color", "#43b9ba");
	    $(this).css ( "border", "5px solid #43b9ba");
	    $(this).find("img").css ( "display", "none");
	    /* Reset */
	    $('.circle-container li').not($(this)).css( "background-color", "#ffffff");
	    $('.circle-container li').not($(this)).css( "border", "5px solid #b3b3b3");
	    $('.circle-container li').not($(this)).find(".circle-content-header").css( "color", "#848484")
	    $('.circle-container li').not($(this)).find("img").css( "display", "block" );
	  });

However there was something wrong… ACF veterans out there probably spoted my mistake within seconds however I haven’t dabbled in WordPress PHP enough and it took me a good half hour to realise I’d used “the_field” in the PHP variables rather than “get_field”! After switching that up the code begun to work! Success!

There might be a more elegant soloution out there but this works and allows the client to update without my input.