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):

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.