I recently began development on a responsive web design using a WordPress theme. As I’ve touched upon in previous posts a responsive design can be an effective option for a website that wants their primary site to be viewable on mobile devices. The important thing to note is that just because a theme/template is noted as being “responsive” it does not mean that it will be entirely responsive, or that it will work on all mobile phones/devices. There is also the concern that a responsive design will typically have numerous images, large blocks of text, sidebar content/widgets, and other considerations which will likely make the website a challenge to view on some mobile devices, albeit less of a challenge than a standard website might be. My suggested option of course is to create a mobile-only version of your website, but in case you are sold on having a responsive design I wanted to share a recent experience with a responsive theme I am currently in development with.
Ok, so the chosen WordPress theme has 5 slider options. Of these only one is responsive, the “Flex Slider”, … the Circle Slider, Nivo Slider, Kwicks Slider, and SlidesJS Slider are not responsive, so won’t resize per the viewing device. This of course limits our development options, but assuming you like the Flex slider then all is good right? Well, yes and no. The Flex slider uses what is known as TimThumb. This is a php file (script for dynamic images resizing) that will resize the images, but since TimThumb is known to be vulnerable to exploits many hosting companies have a mod-security setting in place. What you will need to do is to contact your hosting company and ask them to “whitelist” it (allow the script to work on their server). Some may do this, but not all will so I would contact your hosting company, browse their forums, etc. before you choose a design with timthumb.
Another potential concern is that the hosting company needs to have the “GD Library” compiled for its version of PHP, which for current WordPress version and themes will require PHP5. Next you will need to ensure that you have the correct permissions set (CHMOD) for both files and folders. These will vary a bit for each hosting account, but typically this will be 755 or 777 for the theme “cache” folder, 644 for “timthumb.php” (though 755 or 777 maybe be needed), and that the other files/folders will need to have their permissions set appropriately as well (755 for folders, 644 for files).
At this point I assumed all should work, but the images for the slider and thumbnails didn’t show? What I discovered is that the “whitelisting” will work for a domain name, but not for an IP address since this site was hosted on a shared platform. Since the site was in development and was not linked to a domain name the URL to access it was by way of the IP address (https://204.11.246.1/~example). The solution to this is to modify your hosts file, from which you can then use the domain name to get to the site. I use “hostgator” for hosting, and their support page on change the host file follows, but note that this change will be the same for any hosting platform since the edits are made on your local computer. In short, the article explains that you set the IP address to show as the domain name, so when I type in www.example.com the page will load with this URL even though it is not linked to the actual domain name (Note that while the home page will load with the domain name URL, the other pages created will still link to the IP address so you would need to manually change each link accordingly to view the page).
HostGator Support Link on Changing Host File:
https://support.hostgator.com/articles/specialized-help/technical/how-do-i-change-my-hosts-file
At this point I’ve made all the changes, but still the images don’t show on the page? This is the fun part of web design, … ever a mystery to solve. Ok, so I look at the source code of the page and I note that the IP address is shown in all of the image linking. What is needed is to copy the entire page source, paste it into a notepad document or your WYSWYG editor, and then remove/replace the IP address link (https://204.11.246.1/~example) with the desired URL (https://www.example.com). Now view this page you created in your browser and yes, the images for the slider and thumbnails are finally shown!
Hopefully this helps!
