Custom Post Creation Form

In my last post I put up some code for displaying a CPT as a “Pinterest type” wall using Wookmark. In this post I am going to put some code for creating a form for uploading a new post from an anonymous user.

Once finished it should look something like this (client name censored):
Screen-Shot-2014-10-17-at-9.25.39-AM

NOTE: Will look slightly different in IE8 but is still fully functional.

Because we are actually doing the validation ourselves for this instead of relying on a plugin like gravity forms I am just going to paste the entire page code so you can see it from top to bottom. I think it would be a little confusing broken up.

While I do include both javascript and PHP validation here please remember that there are a lot of smart assholes out there who may want to wreck your shit for no reason. Make sure you test the validation so it meets your standards.

Also, there are a couple javascript functions here and they are doing different things. If you read the function names and the comments it should be obvious what each part is doing. I included the needed code for <noscript> in case the user has disabled javascript since otherwise the form would not be functional.

Let me also draw your attention to the dropdown menu and the “Share an Image” section. The dropdown is a custom dropdown menu controlled with javascript. The “Share an Image” section is actually pretty neat and I am going to make a post explaining that by itself.

Screen Shot 2014-10-17 at 9.37.44 AM

There is a whole lot going on here and since this is not a tutorial site I am not going to walk you through it but hopefully it all makes sense.

We do have one more step to do of course. We need some Style. Here is some LESS

Notice I am setting some fonts to Futura. This is a font I have in my assets folder at the web root. You will probably have to figure out what to do with the fonts. I would check out Google Fonts which is what I normally use on my sites.

Hopefully this post can help you setup your own form for allowing users to upload their own content.

Wookmark (Pinterest) Wall

Wookmark is a jQuery plugin which handles the building of the familiar Pinterest wall. It is super simple to use and if you go to the plugin site you can see a bunch of examples: http://www.wookmark.com/jquery-plugin

Here is a screenshot of my Wookmark wall.

Screen Shot 2014-10-17 at 9.14.14 AM

Below you will find some code to setup the wall using CPTs. So before continuing make sure you have a CPT (or standard post or whatever).  I also setup some Advanced Custom Fields (ACFs) for information I needed.

Screen Shot 2014-10-17 at 9.11.47 AM

I also setup a ‘Featured Image’ ACF (but you could use whatever image you want) for the images. You may also want to add an new image size to your CPT to ensure you get the most efficient image sizes to work with. Just drop this in your functions.php file.

First, lets layout the elements we want to pin to the wall.

As you can see this is a fairly standard layout. All you really need for Wookmark to work is a container and one level of children.  Lists can also be used but I like divs more (for no good reason).

Now that the elements have been laid out lets setup our functionality.

Almost done, we just need to setup some basic styling for our tiles. Here is some LESS to get you started.

Hopefully at this point you will also have a working wall. In my next post I will paste some code to create a form for submitting a ‘story’ and setting up a post automatically.

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.

Target Every Element…Except One

Sometimes I need to have an action, like closing/hiding a menu, that requires the ability to click anywhere but the div/menu itself in order to take an action. Here is a neat way I found to do such a thing. Thanks Sandeep!

You will of course have to edit this to work for your project.

Simple Fading Carousel

Usually I am using bootstrap and it’s carousel works pretty well but sometimes I don’t want or don’t have access to the bootstrap carousel. Here is a sample of a basic carousel I have used in a few places.

HTML + PHP

Javascript

LESS

So if you are just visiting and are trying to use this…good luck. I don’t really want to explain some of the functions or what is going on…thankfully I already know 🙂

 

Slide In Mobile Menu

So this one will be a bit tricky and since I don’t intend to do a full length post to explain hopefully you can figure it out. This site is for my benefit anyway you don’t have to use this code.

This code will add a nice mobile menu which will slide in from the left and push the body of the page to the right at the same time. I set up my own tablet menu since I had a hard time working with the standard tablet menu scripts out there.

Note: I am building the ul > li structure in the menu using the WordPress wp_nav_menu($args); function so if you are not using WordPress this will require significantly more work...but if you are not using WordPress there is already a problem.

Note: I am also using FontAwesome icons to show the “direction” of the menu navigation. I am not going to tell you how to set that up but if you haven’t used it before just know it is awesome.

Note: You will need to find your own menu-btn.png. I also recommend checking out retina.js so that you can setup a menu-btn@2x.png image for retina users.

First we need to build the HTML

I just put this code right after the <body> using an include but you can figure out where you want to put it.

Create the Menu Walker

If you are not familiar with walkers, these classes are built into WordPress and basically just build the menus for you. I have had to setup some pretty crazy walkers to parse through the building of a menu but this one actually simplifies the default Walker a bit…I am not even sure it is needed.

Just place this code in its own file and call it Walker.php

 Setup the LESS Styles

If you are not familiar with LESS then I can’t really help you here. If you know CSS though you should be able to figure out what is happening here and build your own CSS from this.

 Setup the Javascript

This menu wouldn’t be very useful without the following Javascript.

I think that is all there is too it. Hopefully I didn’t miss anything. Good Luck!