I'm going to try to fill this up with some blog posts about things I've figured out or learned in programming and development, or photo/video hacks and tricks, that kind of thing. Hope it's useful!


jQuery Accordion: add hash to URL, send Analytics event on open

Recently I had an intense project launching a buddy’s site in Hubspot on a short timeline. Along the way, we created an FAQ page, the Custom Module for this accordion uses jQuery UI Accordion (https://jqueryui.com/accordion/), and so the tricks in general apply far and wide, I think.

The goal:

add a URL hash (https://thesitename/faq#thisistheahash) when a question is clicked open, and remove it when closed. Primarily so someone can copy a link to the page with that hash in it
make the accordion open if someone comes to the page with the hash in the URL, like if it were emailed to you that way
send Google Analytics event data when the question is opened so we can get a sense what questions people are really concerned with.

Read More ▶

Update: Nikon D800 and Cineflat profile, Neat Video de-noiser

I have to make due with what I have for now, and that means squeezing the best video I can out of my Nikon D800. The video that I get is really hard to work with when shooting indoors, but recently I installed CINEFLAT, a custom profile that allows me to preserve details in the shadows and highlights, giving me much greater flexibility when grading in Premiere Pro. Also, I finally tested out Neat Video to de-noise the footage at higher ISO’s and found it to be impressive.

Read More ▶

Launch a lightbox pop up from a menu link

I had a few clients who needed to launch some pop up lightbox content from a link on the site. In this case it was a menu item. I was using a child theme of Enfold in both cases, which I know already has Magnific Pop up in it so I wanted to simply leverage that. Here’s how it went. If you don’t have Enfold as your theme, you can get magnific (or another lightbox system) and do a similar thing. This is one of the sites: bluboxrooms.com. Notice the Contact link in the menu, it launches a popup lightbox with their MailChimp signup in it. In the functions.php file, put some code to tell the site to use the rel tag to activate the magnific (the first snippet) and then write a function to create the content that will pop up. Inside the #popup div, I pasted the HTML of the MailChimp embed code, which I tweaked and styled to suit the site. On another site, that was simply an image with a link to one of their other pages (where they were doing a giveaway/signup). You could also show an iframe in the pop up of course. In the case of Enfold+Magnific, it’s important to have the classes on the #popup div to work properly and that’d be true of prettyPhoto or another lightbox too.

Read More ▶

Child Theme – it’s easy! and necessary

If you are building a serious WordPress site, it’s likely you have bought a good theme, either because it looks good, or is easy to use or both. I’m a fan of Enfold, I like the visual page builder than the others I’ve seen, and I know that handing it off to clients who don’t spend their days on Stack Overflow evaluating code snippets. Your theme, if it’s good, will be getting updated from time to time, and you want to protect whatever customization you make to the theme. Therefore, a child theme is essential. Luckily, it’s so friggin easy. Part One, super easy: Steps (I do this in my sleep now for new projects): get set up with FTP access to your site make sure your parent theme is there, and note the name of the folder it is in. The folder name is important here not the name in the heading of the stylesheet. in the wp-content > themes folder, create a new folder for your child theme. I usually name it for the client and the year, so we can track how old it gets, so something like “clientname2016” In that folder create two files: “styles.css” and “functions.php” Put a header in the style.css file that looks like this. It needs a minimum of 2 things: the child theme name, and the template (parent) theme name, but if can have more lines in it (see below). Put this in the functions.php file: Now you can go back to your WP Admin dashboard and activate the child theme you made. You can, of course, but in a .png as a preview for your themes page, and of course take off and running with your customizations. Part Two, get off and running… The child theme allows you to make modifications to your theme without being affected when you update the parent theme. Adding CSS to that styles.css file will override parent theme styles, and functions added to that functions theme will be added to the parent functions used in the site. Furthermore, files you add to the child theme folder will replace the ones in the parent. For example, if you want to customize the header.php you can copy the one in the parent, and paste it in the child theme in the same relative position. Feel free to edit the file, changing php and html code as you wish. More complicated themes often have various template parts or files in subfolders, and once you identify one you need to modify, set up the same structure in your child. Say, in a folder called “includes” there is one called “helper-main-menu.php”. Simply create a folder in your child theme called includes, and paste that file in it, then hack away!

Read More ▶

Adding page name to the body classes in WordPress

I seem to always have to remind myself of this one… whether it is someone else’s theme I’m dealing with, or an Underscores starter, or for whatever reason the body classes seem insufficient, I always like having the page name in the body classes. This makes it easy to target something that may need to happen on a particular page, and safeguards against the client deleting and re-establishing that page. In any event, if you need the same this is a simple fix. The body_class() function can be filtered and elements added to the array there. You can of course use the page slug or any other detail from the $post object.

Read More ▶