Categories
Responsive YouTube Videos In WordPress

Make YouTube Embeds Responsive In WordPress

If you build a responsive theme it is important that you know how to make YouTube embeds responsive in WordPress. There are a lot of solutions out there for this but most of them use a plugin that either makes you enter your videos through a shortcode or wraps all of your Iframes in a responsive wrapper. How about we take a little time to build it into our theme so that we aren’t cluttering our site up with more plugins. It is actually really simply!

The Problem

So you have built a beautifully responsive WordPress theme that works on all devices. Then you or your client adds a YouTube video into their content…ya know for better SEO…and it shoots out the right side of the screen! Now it looks completely broken. You, as a detail oriented web developer, want to make sure that any YouTube video will be responsive inside your theme. But you also know the importance of keeping your site as lightweight as possible so we don’t want to just go add ANOTHER plugin.

Parallax for WordPress developers

Use Parallax in WordPress

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.

The Solution

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.

Dollar Sign JQuery

Use the Dollar Sign in WordPress instead of jQuery

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:

Using JQuery in WordPress

How to use JQuery with WordPress

JQuery is a very popular Javascript library that provides simple yet powerful tools to simplify client-side scripting of HTML. It can be an asset to know how to use JQuery with WordPress. For those developers who know it through and through, it can transform a website from being good to being great. Because we all know that a website that is interactive is a website that people stay on longer and re-visit frequently. I will admit that I’m no where near a JQuery master but I have learned enough to use it’s capabilities within WordPress.

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.

The Solution

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!