@ authors - post your tutorial here and we can create a nice list of help resources to address some of the common tech support questions we get.
Everything worked before I uploaded, but it doesn't work on my website?
Chances are there are some files missing online. Here’s a video that shows how to troubleshoot this.
Uploading zip file fails when trying to install WP plugin
Get this quite a bit. Step 1) read installation instructions. If that doesn't work: Step 2) please unzip the CodeCanyon file to your desktop. Inside this zip file will be the WordPress plugin (along with other files, such as help docs and source graphics). Install this inner file as the plugin, not the entire download file.
Q: My WordPress plugin doesn't work and I can't figure out why?
A: Your theme may be using an outdated version of jQuery!
First check the html source of one your pages to see if the jQuery version being loaded is outdated:
If so, your theme is forcing WordPress to use an outdated version of jQuery. This usually takes place in the theme’s “functions.php” file. In this example, I’ve opened “functions.php” in the WordPress Theme Editor and have commented out the two offending lines:
And that’s it. Your theme should now use the default jQuery version that comes packed with WordPress.
Things to consider
- If your WordPress version needs to be updated, update it!
- You may have a plugin installed that also forces WordPress to load an outdated version of jQuery. If the above fix still doesn't work, try disabling your plugins one by one to help identify the offending plugin.
- Your theme may not be compatible with the latest version of jQuery! If this is the case you have two options:
- Not use the plugin that requires a more recent version of jQuery.
- Install a new WordPress theme.
Q: The jQuery plugin I bought just doesn't work!
A: Your web page might be loading two versions of jQuery!
To determine if this is the case, open the html source of your web page, do a keyword search for the word “jquery”, and cycle through all of the cases where the word “jquery” appears inside the code.
Scripts that look like this are “plugins”, and are not what we’re looking for.
Scripts that look like this represent the core jQuery library, and are exactly what we’re looking for.
Each of the examples directly above represents an instance of the jQuery library. And in the above example, only one of the scripts should be used while the other two should be deleted.
But if you happen to find multiple instances of jQuery, how do you know which one to keep and which one's to delete?
Usually it’s best to just use the latest jQuery version. For example, if the following two scripts are found on your page, the “1.9.1” version is the better choice.
However, your website or plugin may not be compatible with this particular version of jQuery. When this happens, you’re left with the following choices:
- Choose not to use the plugin
- If the plugin is using an outdated version of jQuery, ask the plugin author if they can update the plugin
- If your website is only compatible with an outdated version of jQuery and you built the site yourself, update your code. Otherwise, if the site is a template that you've purchased, ask the author of the template to update it.
One last thing to keep in mind when working with jQuery plugins:
jQuery plugins “hook” into the core jQuery library, and because of this, the jQuery library always needs to be loaded before the jQuery plugin. Loading the jQuery library and jQuery plugin scripts in the wrong order will render the plugin dysfunctional.
Q: When I download the (non-WordPress) plugin I purchased test the examples that came with the download, everything works. But then when I add the plugin to my website it doesn't.
A: If the plugin works as is, there's no reason why it can't work once it's added to your site.
Because all websites are different, making a plugin work inside your website isn’t the responsibility of the plugin developer. Think of it like this:
You go to the store and buy a television. It worked fine in the store, but when you brought the television home, it didn’t work due to an electrical problem in your wall.
Plugins can be viewed the same way. Plugin authors can only sell you something that works out of the box. Once it’s added to your website, if there’s a problem with the wiring, you’re going to need to hire an electrician (i.e. a web developer).
The good news is that most plugin authors are available for freelance, and are more than happy to help solve your problem for a reasonable fee. If they aren’t available for work, you can also try FreelanceSwitch, and Microlancer +.
+ At the time of this post, code services are not currently available on Microlancer, but are coming very soon.
Q: I'm using a tool/plugin/gallery that displays full-screen images. But my images are getting cut off. How can I fix it?
A: This is always a tricky question to answer, because you have to first understand how image resizing works to understand the nature of full-screen images.
For this example, we’ll pretend the image below is our computer monitor
And this is the image we want to use full screen
Problem is, the image of the woman is not the same size as our computer monitor. So what are our options?
Technically we could just resize the image to the same size as our monitor. But because the original image and our monitor are two different size ratios, we’d have to severely distort the image to accomplish this, and it would end up looking like this:
Obviously the above result is a bad solution. How can we avoid image distortion?
One way is to use the “cropping” method. Here’s an example:
The above example covers the entire screen, but as you can see, it also crops, or cuts off a large portion of the image. So how can we display the entire image without distorting it and without cropping it either? By resizing the image so it fills as much of the screen as possible, while making sure no portion of it is cropped. Here’s the result:
As you can see, the above example creates white space on the sides of the image. So how can you display a full-screen image without distorting it, without cropping it, and without creating white space? Technically, you could just make the image the same exact size as your computer monitor, but because there are so many different monitor sizes, that isn’t the greatest solution. Instead, you’ll have to decide which one of the above examples is best for your project:
- *Distort the image:* almost always a bad choice
- *Crop the image:* a good choice when you want to avoid "white space"
- *Fit without cropping:* usually creates "white space", but a good choice when showing the entire image is most important
This is great thread! How can we help you make it even better @mcelwaine?