Have you ever wondered how to use Parallax in WordPress? I am going to give you the skinny on how to implement Parallax into any of your future theme developments. After searching all over the internet, I never found a single article that told me the whole process. So I thought, “Wayne your readers need this!” And now here it is.
Earlier this week I wrote an article about how to link scripts and stylesheets correctly in WordPress. If you feel like you don’t know how to do this go ahead and read that article because we are going to use that knowledge here in this article.
If you are a web developer and build websites using HTML and CSS, you already know how to attach css and js files in the head of your webpage. Well there is a completely different way to link scripts and stylesheets correctly in WordPress. This is what we are going to solve today!
Hopefully you already have a good grasp on the page template hierarchy in WordPress, but if you don’t you can learn about it in the WordPress Codex. We need to access the functions.php file because we need to add some code into it to “enqueue” or call the styles and scripts. We will not be adding the below code into the head of our webpage:
In my last two articles I focused on How to use JQuery with WordPress and how to Use the Dollar Sign in WordPress instead of jQuery. These articles gave you jQuery techniques to use with WordPress. Today I am going to show you a super simple, super helpful tool to accomplish some really fancy css3 hover transitions in the websites you build. You won’t believe how simple it is to implement and use!
How To Use CSS3 Hover Transitions
Front-end developer Ian Lunn created a simple css library called hover.css. This file, when either linked to your site in the header or copied into your existing style sheet, automatically gives you the ability to add over 30 different transitions to use on elements in your websites. Once you have the css3 hover transitions linked, choose whichever animation you like best and remember it’s name. Next you add that class name to the element you want to apply it to. In addition, you must always apply the standard “button” class to make the transitions work correctly. Here is an example of the code and how it looks:
In my last post we discussed how to harness the power of JQuery in WordPress. What if you want to use the dollar sign in WordPress instead of jQuery? In this article I would like to show you how to properly mark up your JQuery, when to tell your script to run, and a quick tip on how to make the $() work instead of having to write out jQuery() in complicated functions.
The code example below shows you how to correctly start and end any scripts that you write. You begin with <script> and end with </script> just like a div. Then it is good practice to add any JQuery calls inside of an anonymous function as seen below:
Why Would Anyone Need To Know How To Use JQuery With WordPress
Anyone who has every worked on a pre-made theme or who is building a custom theme from scratch knows that there are some things in WordPress that are hard to get to. Whether it be plugins, widgets, or you simply can’t find where the developer put that piece of code. JQuery can help with this! Let’s give you an example. Recently while working on an e-commerce website, I stumbled upon a piece of code that for the life of me I couldn’t find. I really wanted to add the Responsive Columns classes from Twitter Bootstrap onto this specific div. So I leveraged the search and destroy power of JQuery and accomplished my goal.
Ok…great for me…now how did I do it so you can do the same thing in your themes. I promise you that the more familiar you get with this wonderful tool the more reasons you are going to find to use it!