This is Week 5 of the “52 Weekly Websites” challenge (see http://dev.kobayashicoding.net), which was supposed to be published at noon on February 15, 2017. The update to the project website was uploaded before the deadline, but this blog post was neglected. So, here it is, a little late…
This week’s project is pretty recognizable and straightforward: a sliding carousel of photos for a website. The Bootstrap framework provides the capability for this, and it just needed to be customized a bit. Ho hum.
The impetus for this particular project was a request from a client to add a carousel to a page on their WordPress site. So after getting the Bootstrap carousel function to work quickly and easily on the project site, I thought, “how difficult could this be to integrate into WordPress?” Well, as these things often go, it took longer to get it into production than it should have.
Oops… in the “published” version the carousel did not work – the first photo was displayed properly, but it never changed. Hmmm. I changed the status of the page back to “draft” and previewed it again. Again, it worked flawlessly. Clicked the “Publish” button again, checked the result – carousel not working. After much head-scratching and investigation with both Firefox’s and Chrome’s built-in developer’s tools, I finally figured out what the problem was.
The problem turned out to be that when I’d originally added the code to include the files required for Bootstrap, I had used relative paths. Yes, I know, stupid mistake (but aren’t they all once you find them?). Even though I had used Bootstrap functions for the front page of the site, it worked there because the “root directory” was effectively the “working directory” for the front page. However, WordPress adds the short name of the page to the end of the URL when displaying a published page; it does not do this when previewing a draft page. Changing the header.php file in the child theme to use full paths for the Bootstrap-related files solved the problem.
I won’t make that mistake again.