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

WordPress: Combining Post Categories and Tags Into Same Unordered List

On one of my blogs I needed a way to combine both categories and tags into one unordered list—<ul>. Each item would of course be wrapped in its own list item—<li>. The design I came up with made this a necessary requirement. My initial attempts used the canned WordPress function calls—get_the_category_list() and get_the_tag_list()—which ended up outputting two unordered lists. Not what I wanted.

I searched a bit more, and found that I could get both arrays prior to outputting to the screen. I control the markup this way and wrap them in a single unordered list.

The PHP and HTML

function get_cats_and_tags_list()
{
	$html = '<div class="entry-cats-and-tags"><ul>';
	
	foreach((get_the_category()) as $cat) {
		$html .= '<li class="post-cat-item">' .
			'<a href="' . get_category_link($cat->term_id) . '">' . $cat->cat_name . '</a>' . 
		'</li>';
	}
	
	$posttags = get_the_tags();
	if ($posttags) {
	  foreach($posttags as $tag) {
	  	$html .= '<li class="post-tag-item">' .
			'<a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a>' . 
		'</li>';
	  }
	}
	
	return $html . '</ul></div>';
}

Notice that I added a special class to that of a category list item and that of a tag list item. This allows me to custom style the categories and tags as my design dictates.

Here is the CSS

.entry-actions .entry-cats-and-tags { max-width: 500px; }

.entry-cats-and-tags ul { list-style: none; margin:0; float:left; }
.entry-cats-and-tags ul li { float:left; margin-right:5px; line-height: 2.1em; }

.entry-cats-and-tags a { font-size: .9em; }

.entry-cats-and-tags li.post-cat-item a { background:#f5f5f5; color: #999; border:solid 1px #f5f5f5; }

.entry-cats-and-tags li.post-tag-item a { background:#fff; color: #999; border:solid 1px #ddd; }

.entry-cats-and-tags li.post-cat-item a:hover, .entry-cats-and-tags li.post-tag-item a:hover { color: #666; text-decoration: none; border:solid 1px #999; }

.entry-cats-and-tags ul li.post-cat-item a, .entry-cats-and-tags ul li.post-tag-item a { border-radius: 10px; padding:4px 10px 3px 10px; }

This technique allows me to easily float the <li>‘s so that they wrap nicely from one line to the next. This is the final result:

Screenshot: WordPress: Combining a Posts’ Categories and Tags into Same Unordered List

You can view it in action here: jibbywasmosthappy.com. I particularly like the mouse over treatment.

Update
After completing this task I noticed that on an individual posts’ page there were no categories or tags being output. So I moved the PHP / HTML code into its own function in functions.php. This allows me to easily make a one line call from any page.

<?php echo get_cats_and_tags_list(); ?>

Happy coding.

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

Launched: IHG Instagram Sweepstakes

IHG SweepstakesOver the course of June and early July I spent five weeks helping the development team at Possible Seattle crank out an awesome Instagram driven sweepstakes site for IHG. I was responsible for the gallery section, which is driven mostly by JavaScript, AJAX and jQuery. It was a challenge to devise a solution that worked for both mobile and desktop. From scrolling to searching to filtering to pagination—I had my hands full and learned a ton along the way.

So go ahead click around and check it out.
http://discover.ihg.com/

Posted in: Development, Portfolio  |   |  Leave a comment

Most recent work

  • Reductress Education Online satire workshops from the one and only Reductress.
  • Douglass Interior Products Since 1978, Douglass Interior Products has been providing exceptional materials for the aircraft, marine, automotive and interior design industries.
  • Betty Mills Betty Mills is an e-commerce store offering cleaning, sanitary & medical supplies.
  • Reductress I crank out on-going web projects for Reductress. Super fun as you can imagine.

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

  • How To Win At Feminism The badasses over at Reductress are at it again with their new book How To Win At Feminism.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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!
  • Christine Chaney Creative The online presence of Seattle artist Christine Chaney. Specializing in architecture, art and apparel.
  • 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.
  • 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.
  • Ginny Ruffner: A not so still life A site for a documentary film about Seattle artist Ginny Ruffner.

Blogroll