Set PHP variables with Javascript

I recently had to work on an OLD legacy site (omg, it was painful). Besides EVERYTHING that was wrong with it, they were using MooTools…god why! (I know it isn’t that bad, but really…just use vanilla JS at that point). I ended up needing to have some javascript actions set some PHP $_SESSIONs and $_COOKIEs.

Here is the Javascript you will need:

Now just make sure to have a PHP script waiting to respond to this information being sent to it:

 

Using the WP Media Uploader

Mostly stolen from Mike Jolly. Thanks Mike! He is the lead developer for Woocommerce too which is pretty awesome.

So everyone is going to have different uses for this and every situation is going to likely be very different so here are the bare essentials for getting this working.

I needed to set this up for a Profile admin page. The profiles were custom posts but the admin page which administers these posts was custom and not part of the standard edit.php / post editor. I had originally set up just a regular file upload from the PC (which was actually WAY more complex than this so I guess looking back I am not sure why I did it that way except that I was not aware of this approach yet).

On your admin page you are going to need some kind of action trigger, in my case I just used a button like Mr Jolly did.

You’ll notice I included a hidden field which I will later assign with the image attachment ID.

Next let’s make sure we include the our javascript in the admin enqueue process. You may want to setup a check for whatever page you are actually using so you don’t go around loading this on every admin page. Your hook is going to be different than mine.

If you are already on an admin page which is enqueuing all of the media scripts (like if it is already using a media uploader) then you do not need to use wp_enqueue_media().

Now for the meat of the code which is the Javascript which controls the media uploader.

You should refer Mike Jolly’s page for more details about what this code does but I think it is commented well enough to follow along.

You will also need to handle this. If you are like me and working with a non wp_table just make sure to store the attachment id as the image location. Then you can use that at any time in the future by calling either wp_get_attachment_image( ) or wp_get_attachment_image_src( ). Example below:

Custom File Input Field

So we all know that every browser has their own way of displaying file fields and they all basically suck. Google is doing some neat things with their new Blink engine but unfortunately we cannot just develop for a single browser (someday…). Here is how I went about setting up a custom File Input Field with an image preview.

The end product looks something like this:
Screen Shot 2014-10-17 at 9.40.37 AM

First lets setup the HTML.

NOTE: This is only a part of the form. Remember, you will need to wrap this in a form tag with the enctype=“multipart/form-data” in order to work with files.

Couple things going on here. Take note that I am laying out a separate file field AND calling a different function when working with IE browsers. This means that this will not look or work quite the same in IE. The biggest difference being that no image preview will appear.

Now lets setup the Javascript functionality.

Hopefully none of this looks too strange. If you are at all familiar with jQuery and Javascript you should be able to figure out what is going on here. Notice that in the Non-IE MIME check there is a loop…that is because you COULD setup a multiple=”true” file input and it should still work more or less the same. However this exact code will not work with a multiple file field but it will get you 90% of the way there.

Lastly we are going to need some styling. Here is some LESS.

This less is taken out of context but it should be all you need.

NOTE: You will need to get your own cover image. I didn’t think it would be right to share mine but as you can see it can be anything you want.

Nifty Animated Carousel

I recently needed to setup a carousel for a client with specific functionality. I looked around online for a while but never really found a carousel with the right functionality so I ended up needing to build my own (Image Below).

Screen Shot 2014-10-15 at 1.25.20 PM

You can probably see by the look how this carousel will operate. The correct image will move to the front and move the front image to the side. When the new front image is in place the content area is updated. The mechanics are simple but it was a little tricky to get working correctly cross browser (IE8 included).

The information for this slider comes from a CPT called “History”. First thing first, make sure you have a CPT setup (or I guess you could use posts or pages too if you want). For my purpose I setup an Advanced Custom Field (ACF) for the featured image instead of using the native featured image, it is a habit at this point, but you don’t have to do that and can just use the standard featured image instead.

Second, we need to build and display the content. Here is how I did that.

NOTE: This is inside a wrapper and a container to keep it centered in the screen. Don’t just drop this on a blank page because it wont work right.

By itself that is going to be really ugly so lets add some CSS

If you were to display this now you would have the basic layout ready but it wouldn’t actually do anything. Lets fix that with some jQuery.

As long as you did everything right you should now have a working carousel (although unless you had the exact same images and everything it will probably look like garbage).

For those of you who think I should have done this in a  more object oriented / open source way so that it could be controlled and updated more easily…go download one of the hundreds of open source carousels out there.

NOTE: You will need to get yourself some control images.

NOTE: You will also need a ‘darken’ image. IE8 does not handle CSS transparency but it DOES handle png transparency. Since all my images were the same size and dimensions I just needed one darken image which was the same size as the images. I just set it up as black with about 40% transparency. If you aren’t worried about IE8 you could do this using CSS in a variety of ways.

NOTE: This carousel is NOT responsive or mobile friendly. You want a responsive or mobile friendly carousel? Build it yourself or download one of the hundreds online.

Javascript Foreach

This probably seems silly but sometimes I want to loop through a javascript array whose keys are not in sequential order. In PHP and some other languages this is as simple as a foreach loop but javascript only uses for loops.

 

Parallax Scrolling

There are a million really good examples and tutorials for parallax stuff. I really like Skrollr.js

Thanks to ihatetomatoes.net for the demo on how to use Skrollr.

Here is some code for a single element parallax example. I left in some other classes and I am not including the styling for the element…figure that out yourself. In fact I found it easy to setup and get the div looking pretty THEN go back and add the parallax stuff.

Some Inline CSS. (Does not including non Skrollr Styling)

Javascript…this is literally all you need to use after including the script. (NOTE: If supporting IE < 9 make sure to get the skrollr.ie.js file as well.

A couple important notes:

1. I ended up needing to wrap the entire page in an element with an id of ‘skrollr-body’ in order for skrollr not to break on mobile. If you notice that the page doesn’t move at all on mobile you probably need to add this id somewhere.

2. iOS devices in particular DO NOT WORK with skrollr. This is because in order to save battery life iOS devices turn of Javascript when the page is scrolling…this makes parallax implementation impossible.

3. If your site is responsive or changes sizes for any reason make sure to include the forceHeight : false parameter when initializing skrollr or else you will end up with extra space at the bottom of your page.