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;
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;
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.