Solution: Boilerplate Theme for WordPress + Dig Labs Stripe Plugin jQuery Issues

I am currently working on a subscription-based WordPress installation. For this project I am using a theme called Boilerplate. Users signup, pay their monthly fee (recurring or single payment) and get access to a set of restricted documents. After much research I settled on the follow plugins to handle payments and subscriptions.

The Problem
After installing both of them I ran into a problem where both the theme and the plugins were including jQuery at different times and different places and sometimes not at all. This broke jQuery for the entire site. The Stripe plugin payment form didn’t display correctly and you couldn’t submit it to run a payment. Also, some custom jQuery I had written stopped working too.

The Solution
After some back and forth with the Boilerplate theme developer (Thanks Aaron!) he came up with the following solution.

  • In Boilerplate Admin, enable and keep your custom JS (script.js) in the footer. Do this even if you don’t have any custom jQuery.
    Script.js settings for Boilerplate Admin
  • Do not use the Boilerplate jQuery (leave those checkboxes unchecked in the Boilerplate Admin).
    jQuery settings for Boilerplate Admin
  • And instead put the following at the very top of your custom JS file:
    if (!jQuery) {
    	document.write(unescape('%3Cscript src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"%3E%3C/script%3E'));
    }
    if (!jQuery) {
    	document.write(unescape('%3Cscript src="http://your.domain.com/wp-content/themes/boilerplate/js/jquery.js"%3E%3C/script%3E'));
    }
    
    window.$ = $ || jQuery;
    

Explanation
So, by default no jQuery is loaded by the Boilerplate theme. Once the custom JS file is included, it checks to see if jQuery has been defined. If not it loads it from the Google CDN. If that fails then it loads in your local copy. If you are on a page that uses either plugin listed above, then jQuery will have already been included. In this case when your custom JS file loads it checks and will see that jQuery is already loaded and will not include it again.

So that’s about it. I do believe this solution would work for any plugin in general that conflicts with the Boilerplate theme. If you’ve run into similar issues with any plugin please do share your experience in the comments. Happy WordPressing!

Posted in: Code Samples  |  Tagged with: , ,  |  Leave a comment

Launched: Christine Chaney Creative

Christine Chaney Creative

I was in Ballard. At the Ballard Market, to be exact, food shopping for a summer camping trip. I was in the grocery section—because it’s more than just an isle—and I ran into a friend. We chatted for a few minutes, about, you know, the usual banter: I’m going camping—and I do love your new shoes!

I digress.

During our banter session my friend mentioned that her friend’s friend’s cousin’s (don’t lose me here) former college roommate, a talented artist, needed some web work. Well, ok, it’s actually just my friend’s friend and I like Spaceballs, but not all of this is necessary factual. How about it’s based on a true story? Yeah, we’ll leave it at that.

I saved my friend’s friend’s information and we went our separate ways. The friend’s friend’s name was Christine Chaney. We met and instantly hit it off. We worked together for the last few months building an online presence that fit her style of artistry: bold and mathematical, sparse yet emotional. Her style is only enhanced by the shear number of mediums in which she creates. From architecture to fashion, from wall art to photography. She’ll sew you a dress and design you a building and artwork to match. And then she’ll compile all these connective art pieces into a book, which is yet another art form in itself. Yup. These are the people I love to work with. Anything goes. The sky’s the limit. And inevitably these creative creatures become my friends.

So after many meetings from a chance encounter at my neighborhood market, I am pleased to announced that not 24 hours ago we launched Christine’s new website. It is a sparse, clean and fully responsive experience, so try it out on all your devices. Leave us a comment and let us know what you think. Good day.

Posted in: Development, Portfolio  |  Tagged with:  |  Leave a comment

How to Change WordPress JetPack Contact Form Success Messaging

Today I ran into some ugly styling using the Contact Form that comes with the WordPress JetPack plugin. After a quick search on the world wide web I came across this post on the WordPress support forum.

It’s pretty simple to update. Click on the link for more info.

Update 6 Jun 2015: I found a more comprehensive and update-to-date how-to on modifying Jetpack styles. Check out this article.

From the first link here are the changes I made.

add_filter( 'grunion_contact_form_success_message', 'nmm_change_contact_form_success_message' );
function nmm_change_contact_form_success_message( $msg ) {
	global $contact_form_message;
	return "<h3>Hey, you're sweet! Your message has been sent. <br />We'll message you back really soon.</h3>" . wp_kses( 
		$contact_form_message, 
		array( 'br' => array(), 'blockquote' => array() )
	);
}

And from the second link here are the CSS changes I made. It’s SASSified for those who aren’t familiar with this syntax.

	#contact-form-25 {
		
		h3 {
		
			text-align: center;
			color: $site_color;
			font-weight: normal;
			font-size: 1em;
		
			a {
				
			}
			
		}
		
		blockquote {
			
			margin: 0;
			
		}
		
	}

Posted in: Development  |   |  Leave a comment

Targeting IE10

Today I was browser testing one of my clients new sites. When I got to IE10 the normal conditional comments didn’t have any effect on it. Strange, I thought. After a quick search I found this StackOverflow question that provides many solutions. Of all the solutions this is the one I chose.

/* ie10 styles */
@media all and (-ms-high-contrast: none) {
...
}

It doesn’t require any jQuery, JavaScript or browser detection. It still is, however, a hack, but whatever.

Posted in: Development  |  Tagged with: ,  |  Leave a comment

Those Damn Pesky Mac OS X .DS_Store Files on Network Resources

I’m currently working on a project where we’re developing directly on the development server. It’s not my preference to develop this way, but alas it’s necessary for reasons I won’t go into.

I work on a MacBook Pro running OS X 10.8 (Mountain Lion). One problem we’re running into is OS X loves to continually write the .DS_Store files to each folder I view. And I view most every folder on a daily basis. Needless to say it writes a lot of them.

I searched around and found that you can disable this for network resources. Simply open terminal and execute the following command. Make sure to log out or restart your machine for the change to take effect.

defaults write com.apple.desktopservices DSDontWriteNetworkStores true

Check out this Apple support article for more info.

Posted in: Code Samples, Development  |  Tagged with: , ,  |  Leave a comment

C#: Simple .NET Console App To Loop Through CSV, Download Images

I recently had the need to write a .NET console app which opens up a CSV file and does some stuff. This app loops through each row, downloads an image from the URL in column two and saves it with a unique file name provided in column one.

I want to remember this. So here it is.

using System;
using System.IO;
using System.Net;

namespace Download_Images
{
	class Program
	{
		static void Main(string[] args)
		{
			try
			{
				string root = @"C:";
					
				Console.WriteLine("Press any key to start.");
				Console.ReadLine();

				string[] records = File.ReadAllLines(root + "urls.csv");

				string destination = root + @"images";

				foreach (string record in records)
				{
					string[] fields = record.Split(',');
					string guid = fields[0];
					string imageUrl = fields[1];
					WebClient fileReader = new WebClient();
					string newFile = destination + guid + ".jpg";

					Console.WriteLine("Starting download: " + imageUrl);

					try
					{
						if (!File.Exists(newFile))
						{
							fileReader.DownloadFile(imageUrl.Trim(), newFile);
							Console.WriteLine("File saved: " + newFile);
						}
						else
						{
							Console.WriteLine("File exists. Skipping. " + guid + ".jpg");
						}

					}
					catch (Exception ex) {
						Console.WriteLine("Failed: " + ex.Message);
						if (ex.InnerException != null)
						{
							Console.WriteLine("Inner Exception: " + ex.InnerException.Message);
						}
					}

					Console.WriteLine();
				}

				Console.WriteLine("All done. Press any key to exit.");
				Console.ReadLine();
			}
			catch (Exception ex) {
				Console.WriteLine("There was an exception:");
				Console.WriteLine(ex.Message);

			}
		}
	}
}

Posted in: Code Samples, Development  |  Tagged with: , ,  |  Leave a comment

jQuery: Custom Recursive Blink Function

I recently wrote a recursive function to create a blinking effect on a given div. I’m totally geeking out on it right now. I know this can be done via jQuery UI, but I didn’t want the overhead on my clients site of pulling it in just for this.

So here’s the code. You can customize the delays and colors as you need.

function doBlink(id, count) {
    $(id).animate({ backgroundColor: "#fee3ea" }, {
        duration: 100, 
        complete: function() {

            // reset
            $(id).delay(100).animate({ backgroundColor: "#ffffff" }, {
                duration: 100,
                complete: function() {

                    // maybe call next round
                    if(count > 1) {
                        doBlink(id, --count);
                    }
                }
            });

        }
    });
}

Of course you’ll need the color plugin to get backgroundColor to work with .animate().
https://github.com/jquery/jquery-color

And to provide a bit of context this is how I called it. I needed to scroll the page to my target div and then blink it.

$(window).load(function(){
    $('html,body').animate({
        scrollTop: $(scrollToId).offset().top - 50
    }, {
        duration: 400,
        complete: function() { doBlink(scrollToId, 5); }
    });
});

The site is not live yet or I’d post it. Stay tuned.

Posted in: Development  |  Tagged with: , , , ,  |  Leave a comment

Launched: Microsoft Hardware Healthy Computing Tool

20130906-085814.jpgThis is a little tool I worked on earlier this year for Microsoft Hardware. It’ll help you pick the best keyboard or mouse for your ergonomic situation.

You may check it out over here.

Posted in: Development, Portfolio  |  Tagged with: , ,  |  Leave a comment

WordPress: How To Update Site URL And Home URL Using SQL

I do this often enough. You think it’d be committed to memory by now. Alas, my memory doesn’t need to be bothered with things like this. That’s what my blog is for. So here blog, remember this.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldurl', 'http://www.newurl') WHERE option_name = 'home' OR option_name = 'siteurl';

I also, like the safe version of this, you know, just to see what is already in there. Or what you updated it with.

select * from wp_options WHERE option_name = 'home' OR option_name = 'siteurl';

Thanks to this article for the reminder. I have found myself there a few times.

Posted in: Development  |  Tagged with: , , ,  |  Leave a comment

jQuery: Click Anywhere But Some Element

jquery-logo-post-headerPicture it. I have a clickable main navigation. This click expands a sub-menu. It’s all styled and looks great. However, if you click outside of an already expanded sub-menu, said sub-menu is still shown.

So the problem is I need to attach an event to a click anywhere but my main navigation. Simple? I did a little searching and found this article over at StackOverflow. The solution is not only simple, but elegant as well.

Consider this jQuery

$(document).click(function(e) {
  if ( $(e.target).closest('.navigation').length === 0 ) {
    // hide menu here
  }
});

I had not heard of the jQuery .closest() method before today. Not sure how I missed it, but it’s an incredibly useful tool. It crawls up the DOM looking for the next “closest” element with the passed in selector. If it finds it you’ll have a list with one element, if not you’ll have a list with no elements.

So the code above tests to see if our .navigation was somewhere up the DOM from our currently clicked target element. If it didn’t find it, then a click occurred outside the navigation, therefore we’ll need to call code to retract all sub-menus. If it did find it, well that means a click occurred inside the main navigation somewhere and our reset code will be ignored.

Read up on .closest() right here.

Posted in: Development  |  Tagged with: ,  |  Leave a comment

Most recent work

  • Our Restroom Our Restroom is an (inter)national crowdsourced campaign who’s goal is simple: compel businesses to make their single occupancy restrooms gender neutral. Championed by Kristin Russo, designed by Allison Weiss, built by me on WordPress.
  • How To Win At Feminism The badasses over at Reductress are at it again with their new book How To Win At Feminism.
  • Reductress I crank out on-going web projects for Reductress. Super fun as you can imagine.
  • Everyone Is Gay Everyone Is Gay is an indispensable question and answer resource for the LGBTQ community. Hell, it’s great advice for anyone with a body with an emotion or two. I made the site responsive among other things. Give it a look see.

Need hosting?

  • Media Temple My go to hosting provider. You get rockstar hosting and I make a little cash. No pressure, just clean honest fun.

Past work

  • Christine Chaney Creative The online presence of Seattle artist Christine Chaney. Specializing in architecture, art and apparel.
  • Get Your Shit Together This is a site dedicated to helping you get your shit together before an unexpected tragedy, like the loss of a loved one.
  • IHG Instagram Sweepstakes An awesome Instagram driven sweepstakes site for IHG.
  • Trivial Beersuit A site that provides professional pub trivia to bars and restaurants.
  • Audi YouTube Channel This site was a quick turn-around hair pulling adventure for the Super Bowl: revamping Audi’s YouTube Channel.
  • Teach.org The new Teach.org. Providing tools to help students become teachers.
  • Valhalla DSP A one man Seattle based company, writing pretty sick professional audio plugins. Check ’em out!
  • Microsoft Visual Studio 2012 Launch This sweet new Visual Studio 2012 Launch website sports a mobile first, responsive web design architecture and comes in 14 different languages.
  • Nice Manners Music Nice Manners is an LA based recording studio offering their clients all sorts of digital audio services. This is a demo of an internal genre based music search & player I built for them. I am ecstatic about launching this project—check it out.
  • Holiday Inn Tumblr A quick, fully responsive update to the Holiday Inn Tumblr page.
  • Microsoft's Art of Touch An artful HTML5 Microsoft website. Sadly, this site is no longer live.
  • Microsoft Hardware Healthy Computing Tool A useful little tool to help you find the perfect Microsoft mouse or keyboard.
  • Pella Professional Pella manufactures high quality doors and windows. This is their professional site.
  • Imaging the World A non-profit dedicated to providing ultrasound services in remote areas of the world.
  • Ginny Ruffner: A not so still life A site for a documentary film about Seattle artist Ginny Ruffner.

Blogroll