CSS Trick: Turning a background image into a clickable link – Take 2

My previous solution to this was built on Phark’s “Accessible Image Replacement” technique. It works by pushing the text really far to the left (9,999 pixels) which makes sure it’s there for screen readers but hidden from users (unless someone has a display that’s able to show nearly 10,000 pixels to the left of the container in question). The problem seems to be that some browsers, like the one on the iPad, render a 9,999px box even though it’s not visible. This affects performance, especially for animations.

Well, there’s a better way. It works similarly, but instead of pushing the textual content so far left that we’re sure it’s outside the visible area, we push it just outside the box to the right. The advantage is that even without knowing how long the text is, we know exactly how far to push it to make sure it’s completely out of the box. So if you’re asking “How do I make a background image clickable?” This is the new answer. It’s easy, just follow these steps and I’ll show you how to make a clickable background image like this:

BlueDog Web Services

Continue reading

Posted in CSS | Tagged , | 20 Comments

Different Post Formats per Post Type

WordPress has had post formats for a while now, and it’s a really useful feature. However, what if you want to allow different post formats for different post types? Well it’s actually pretty easy, but if you’re unclear on the difference between post formats and post types, then you should really start by reading Post Formats vs. Custom Post Types by Mark Jaquith.

A site I was recently working on wanted to use the “video” post format for regular posts and the “quote” post format in their “news” posts (these posts show like a news ticker). Here’s what I did to get it working:

function bd_remove_twentyeleven_options() {
	// We only support "quote" for News Items and "video" for posts
	add_theme_support( 'post-formats', array( 'quote', 'video' ) );
add_action( 'after_setup_theme','bd_remove_twentyeleven_options' );

function bd_adjust_post_formats() {
	if ( $post_id ) {
		$post = get_post( $post_id );
		if ( $post )
			$post_type = $post->post_type;
	} elseif ( !isset($_GET['post_type']) )
		$post_type = 'post';
	elseif ( in_array( $_GET['post_type'], get_post_types( array('show_ui' => true ) ) ) )
		$post_type = $_GET['post_type'];
		return; // Page is going to fail anyway

	if ( 'news' == $post_type )
		add_theme_support( 'post-formats', array( 'quote' ) );
	elseif ( 'post' == $post_type )
		add_theme_support( 'post-formats', array( 'video' ) );
add_action( 'load-post.php','bd_adjust_post_formats' );
add_action( 'load-post-new.php','bd_adjust_post_formats' );

First, we set the post formats like usual. These will be overridden on the new post and post edit pages, but everywhere else we will say that we support both quote and video post formats.

Then we hook in to the post edit page and the new post page. The first chunk of if/elseif statements gets the post type by first checking the post (if we’re editing), then checking the $_GET variable.

Last we simply alter what post formats our theme says it supports based on the post type. In this case for news we change it to just ‘quote’ and for post we change it to just ‘video’. For now I leave other post types alone.

Simple, effective, and REALLY useful.

Posted in Wordpress | Tagged , , , | 2 Comments

WordCamp Phoenix 2012 – E-Commerce

It’s here! This is the video of my talk on e-commerce from WordCamp Phoenix 2012 and here are the slides to go with it. The slides are built in a WordPress theme file, and completely hosted on this WordPress site. Click on any slide or press F5 to start the slideshow, and use the arrows to navigate between the slides.


Posted in WordCamp | Tagged , , , | Leave a comment

Shame on GoDaddy

Update: I have good news and bad news. The good news is that GoDaddy says they no longer support SOPA! The bad news is that it seems GoDaddy are liars.

The Stop Online Piracy Act (SOPA) is a horrible idea. It threatens the Internet in the US, and thus it directly threatens my livelihood. I like how Adam Savage of MythBusters fame put it in SOPA Could Destroy the Internet as We Know It:

Make no mistake: These bills aren’t simply unconstitutional, they are anticonstitutional. … If we allow Congress to pass these draconian laws, we’ll be joining nations like China and Iran in filtering what we allow people to see, do, and say on the Web. And we’re better than that.

Well, I found out yesterday that GoDaddy supports this awful legislation. At first I assumed it was a mistake. No tech company could get behind something like this. However, after doing my due diligence I found that it is unfortunately true. If you want to contact GoDaddy, send your emails to oop@godaddy.com (This is the “office of the president”, the highest non-corporate level you can talk to) and/or suggestions@godaddy.com.

I may not be a big customer with my 32 domains, but definitely put my money where my mouth is. I just spent $256.38 to move 30 of my domains to Namecheap using the promo code BYEBYEGD and the other two will move as soon as they’re 60 days old (01/30/2012). I encourage you to do the same.

Update: Huge props to Ben Huh of the Cheezburger Network for his stance against GoDaddy.

You rock Ben!

Posted in News | Tagged , | 1 Comment

Stop Internet Censorship Legislation in the US

I hate politics. I value honesty, morality, and personal responsibility, all of which seem to be overwhelmingly lacking in nearly every area of politics and law making.

Having said all that, I still try to follow what’s going on. Why? Well, because I need to know what’s going on if I plan to vote, and how can I expect things to get better (or not get worse) if I won’t do anything about it. The Protect IP Act is a perfect example. It needs to be stopped because it threatens our free speech and the internet as a whole. The video below sums it up pretty well.

Go to Fight for the Future and American Censorship to send a message to congress.

Posted in Community | Tagged | 3 Comments

Speaking at WordCamp San Francisco 2011

I'm speaking at WordCamp San Francisco 2011!So it seems I’m speaking at WordCamp SF this year, which is awesome! I’ve attended for the last few years, and it has been instrumental in getting me involved more with the WordPress community and specifically with the development of WordPress.

Andy Stratton and I will be presenting Getting Involved: Contribution & Courtesy A conversation about methods of contributing to WordPress and the community, why you should do it, and how it benefits everyone – including you. Do you think you don’t have time to contribute to WordPress? Are you unsure what makes contributing worth it? Do you not know how to contribute or how to interact with the community as a whole? Then don’t miss this!

Posted in Community | Tagged , , , | Leave a comment

WordPress Dream Theme

James Pearson has always been an inspiration to me. Recently we had a chance to talk about chasing dreams and how the pursuit of dreams has had such a drastic impact on history. As we discussed dreams I spoke of big picture dreams. The life changing stuff. It was inspiring, but that’s for another post. This post is actually about my smaller dreams that I realized later.

I want a WordPress theme that is built and maintained like WordPress. I want it to be licensed under the GPL, completely free, maintained by a group of lead developers, worked on by a larger group of contributors, lightweight, fast, flexible, and extremely extensible. I’m not talking about a new default theme. Twentyten and Twentyeleven are awesome for new users to be able to start a great looking site quickly and easily. Instead I want something that is more like WordPress in that it’s basic and powerful, but mostly extensible. I call it Essence.

My dream in a nutshell:

  • The development would be guided by a small group of trusted developers
  • Anyone would be welcome to contribute code based on a meritocracy much like WordPress.org (and probably closely tied to it)
  • It would use the same 80/20 and “decisions over options” approach to development
  • More advanced functionality would come from plugins that the theme is designed to work with. For example, I’d love to see the theme fully support Joost’s WordPress SEO plugin, giving it the hooks it needs to be as effective as possible.
  • I’d like to see it support BuddyPress, forums (like BBPress), even E-Commerce (like Shopp)
  • People that work in a niche (like publishing) would be able to make plugins that make developing a theme for their niche easier.
  • It needs to be well coded, secure, and fast
  • The most important thing is that someone should be able to easily create a child theme that inherits all this amazing functionality. It should not only make it easier to make a theme, it should make it easier to make a powerful theme that supports nearly everything WordPress supports.

There are some great theme frameworks out there (like Genesis), but as far as I know none of them are community ran and completely free like I envision.

I’ve started on the theme and submitted it to the themes repository. I call it Essence because I want it to be “the most significant element, quality, or aspect of” other themes. However, I need help. It can’t be community developed without the community. If you’re interested in helping out, contact me.

Posted in General | 4 Comments

WordPress 3.2 is available

WordPress 3.2 has officially been released. You can either update right from your dashboard or download it from WordPress.org. The main focus of this release was to speed everything up. Lighter and faster was the goal and we definitely accomplished it. The dashboard loads faster than ever before, as does every other admin page.

The speed difference is amazing and you can expect it to get faster still in the versions to come. The main reasons are that we have stopped supporting ancient (in internet time) software. The WordPress admin no longer supports Internet Explorer 6 (a 10 year old browser that even Microsoft wants to see disappear) and bumped the required PHP version to 5.2.4 and the required MySQL version to 5.0. Well over 90% of all WordPress installs will be completely unaffected by these changes in the system requirements, but for those of you on older versions a quick E-Mail to your hosting provider will probably get you what you need.

Additionally in 3.2 Distraction Free Writing was introduced. You can now go full-screen when writing a post and see nothing but the text you are typing. All the extra things that normally distract you simply fade away, letting you really focus on your writing. I honestly wasn’t very sure about this feature during the planning phases of 3.2, but having used it and tested it throughout the process, I can say that I was converted. I definitely recommend everyone try it out and see how much time you save while writing your posts!

There are a ton of other small enhancements in 3.2, but the last ones I want to mention are a couple new links in the footer of WordPress admin. One says “Freedoms” and one says “Credits”. WordPress is licensed under the GPL and the Freedoms link takes you to a page that explains in relatively simple terms how you benefit from this particular license. The Credits link will show you who you can thank for WordPress 3.2. Well over 100 people contributed to making WordPress 3.2, and here you can see who those people are as well as see a list of third party libraries that WordPress uses. If you get a chance, thank these people for helping to create a great product that you can use for free!

Posted in Wordpress, WordPress News | Leave a comment

Search Engine Optimization (SEO) in Simple Terms

First let me say that search engine optimization is a very complex subject. There are people who really know what they are doing and plenty of people that don’t. This writeup will not get you to the point where you really understand it all, and I highly recommend that you budget for a professional, but this will be a good start for people that are just starting and need to know what they can do.

Search Engine Optimization, in simple terms, breaks down into two sections; onsite and offsite. Onsite is well within your control and is the first thing you should focus on. Offsite is harder to control and is something you will focus more on later.


First, make a list of key phrases that you want to rank well for in search engines. Usually these should be two to five words long. It is not realistic for you to think that your site will rank for a term like “jewelery” (you’d be competing against Jared, Tiffany, Kay, etc), but you may rank very well for something like “vintage typewriter jewelry”. Make sure to be reasonable about what you can and cannot compete for.

I recommend using a something like Google’s Adwords Keyword Tool to research your terms. Obviously more traffic is good, but remember to check who you are competing against and always ask yourself “will my perfect client really search for this term?”. Also try to keep an open mind. Take a look at other terms that Google things are related to the one you put in. Remember that you are likely far more knowledgeable about your products/services than your clients, which means they will likely be using different terminology when searching.

You need to also try to understand what I call key phrase clusters. For example, when I checked out “Vintage Typewriter Jewelry” I found that it is searched for 140 times per month. That’s not a lot. However, I also saw that “Typewriter Key Jewelry” is searched 880 times per month (seven times as often). I also saw that “Vintage Typewriter Key Jewelry” is searched 91 times per month and immediately I saw a key phrase cluster. Basically, there are three phrases that are all basically the same, and if we are careful we can target them all at once. How? Well, we use the all inclusive “Vintage Typewriter Key Jewelry” phrase. Take a look:

  • Vintage Typewriter Key Jewelry” = “Vintage Typewriter Key Jewelry” which is searched 91 times per month
  • “Vintage Typewriter Key Jewelry” = “Typewriter Key Jewelry” which is searched 880 times per month
  • Vintage Typewriter Key Jewelry” = “Vintage Typewriter Jewelry” which is searched 140 times per month

By using the one phrase regularly on a site you can actually target all three. Search engines can easily understand that someone searching for “Vintage Typewriter Jewelry” may be interested in “Vintage Typewriter Key Jewelry”.

This takes time. Quite a bit of time. It takes time to build a list of key phrases (or key phrase clusters). There’s really no way around that. The thing is…it will pay off.

So, once you have your list, when/where do you use these? The answer in short is…everywhere. You don’t want to “keyword stuff” which basically means to put them where they don’t make sense, but you do want to use them regularly. When you write articles, when you write product descriptions, even when you write something on other sites and link back to yours. These are supposedly phrases that describe something you are an authority on, so be authoritative!


Offsite is something you have less control over. The basics are that you want other sites to link to you. These are called “inbound links” and are a metric that search engines use directly to rate your authority on any given phrase. Often getting a link can be as easy as asking. Sometimes a site would link to you if they just knew about you. Asking is simple and effective, but remember that buying inbound links will get you penalized in search engines (I cannot be more clear than this: Do not buy links to your site).

The simplest way I can explain it is this: An inbound link is worth more to you if the site it’s coming from has content related to yours. It’s worth even more if the page it’s on contains one or more of your target key phrases, and more still if the link itself contains one of your key phrases. For example, this is ok: “I saw some great vintage typewriter key jewelry today, click here to see it.” This is WAY better: “I saw some great vintage typewriter key jewelry today!”

You can help to curate incoming links by doing a few things:

  • First and foremost you get incoming links by creating good content. If someone sees a good article on your site, they will link to it. I cannot stress enough that this is the absolute best thing you can do. If you take nothing else from this entire article, please just remember that quality content is the key.
  • Approach sites whose users would be interested in your content and ask for a link. Make sure to be specific when you ask. It’s ok to say that you’d like the link text to be _____. The worst they can do is say no.
  • Become active on other sites and link back to your own site. I don’t mean spam, I mean really be active.
  • Other sites are looking for content too, so consider doing a guest post for another site that links to yours.

This is by no means a definitive or exhaustive guide, but hopefully it’s enough to not only get you started, but carry you through for a while.

Posted in General | Tagged , | 26 Comments

WordCamp Phoenix 2011 – A Developers Take

WordCamp Phoenix was amazing. The event was huge and well organized, thanks to Amanda Blum and Chuck Reynolds. I didn’t experience the event like most people, but here’s my take on it.

Design/Developer Speed Meet

Thursday there was a brand new event. Basically, it applied the speed dating concept to connecting clients with designers/developers. It was held at Co+Hoots and went pretty well. Designers and developers were separated based on whether they usually worked on projects over or under $3000, and the hirers were divided up likewise. Chairs were positioned in lines facing one another, with developers/designers on one side and potential clients on the other. Every five minutes the designers/developers moved one seat left. All in all I thought it went quite well. There were several problems, but only one could really be fixed. The issues I had:

  1. Five minutes is really short
    • This was actually someone I heard a lot of people saying, but this is the whole point of the event. My recommendation is just to show up early and stay late. Use the time before and after to augment your five minute segments.
  2. People talk big
    • There were people that weren’t truthful about their budgets. I’m assuming (although I wasn’t hiring so I don’t know for sure) there were developers that misrepresented their usual project size as well. There’s not a lot you can do about this (at least no that I can think of). People lie. Still, it didn’t seem like an excessive percentage of the people. Most seemed pretty legitimate.
  3. Loud music isn’t helpful
    • I know that the music was supposed to help break the ice and keep things upbeat, but unfortunately it made it nearly impossible to communicate well. There is already a lot of noise just from all the voices going at once, so adding the music made it extra difficult. To be fair, I happened to be on the side of the room with the speakers (this wasn’t by choice, it’s where I was supposed to be), but less music would be better.
  4. Friday Free Classes

    There were several class options. I dropped in on the class Boone Gorges was teaching and it looked like things were going well, but I was only there for about two minutes. However, I spent the first half of the day at the Intro to WordPress for Beginners class taught by Shayne Sanderson. I had several friends local to Phoenix, who would consider themselves beginners, that attended the class as well. The classes were quite long (both the teachers that I talked to were concerned about that), but the most difficult thing seemed to be that the audience was so diverse. For example, even though my friends all considered themselves to be beginners, they seemed to be more advanced than the majority of the people there. When we went to lunch they were saying that they really hadn’t got anything out of the class up to that point and were worried that unless the pace drastically changed they wouldn’t. The solution seemed simple. We went back to the hotel lobby and I have a mini-class. It seemed to work out quite well.

    I do want to stress that there was nothing wrong with the class. Shayne was doing a great job, and most of the people in the class seemed to be learning a ton. Maybe next time we could list things you can expect to learn from the class, so people can make sure it’s something that would work well for them.

    Pub Crawl

    Friday night there was a pub crawl. The idea was great, but the location was a bummer. My wife and I had a blast hanging out with Andrew Nacin, Daryl Koopersmith, Matt Martz, Aaron Jorbin, and Pete Mall. The only bummer was that we ended up at a bar that was about 30 minutes away from the hotel, where everyone else was. It ended up spitting the group in two, which was a bummer.

    The Main Event

    I was at the Chandler Center for the Arts at 6am to help set up. All the volunteers were absolutely amazing. There was a lot to do in order to make this event happen, and everyone did it with smiles on their faces (once they woke up completely). Chairs were moved, equipment set up, food prepared, coffee made, check-in organized, etc.

    Once check-in started, I started my main job for the day, which was running the genius bar. The genius bar actually went REALLY well. We had enough geniuses to go around, so even though we helped around 60-80 people, only 3 people ever had to wait for a genius! The geniuses answered questions about everything from setting up your first WordPress site, to Shopp specific questions, to CSS, to traffic building.

    Photo Booth at WordCamp Phoenix After Party

    Photo Booth at WordCamp Phoenix After Party - Notice the handcuffs hanging over Chelsea's name badge?

    JJJ Handcuffed at WordCamp Phoenix After Party

    Next time JJJ will watch out for Sally...she handcuffed him to the tree, then made him do shots from the ice luge to get out!

    The After Party

    You really have to hand it to Amanda and Chuck. Not only did they pull off a truly great after party, but it was held at the Chandler City Hall! There was plenty of alcohol and food, thanks to Four Peaks Brewery and Famous Dave’s BBQ…and of course plenty of partying. They set up a red carpet style photo booth, with plenty of props. At first it was just photos, then the photos got funny as people continued to drink, then the props began to circulate (there were some really interesting red glasses with LEDs on them), and finally the handcuffs started circulating. I saw no less than 4 people handcuffed throughout the night.

    At midnight we cleaned up and headed out.

    The After After Party

    With the official after party over, several of us headed over to San Tan Brewing Co next door to the hotel. Many of the WordPress developers (myself included) only get to meet up a few times a year at various conferences, so we sat outside in the cold and continued the party until we closed down San Tan at a little after 2am.

    Dev Day – How to Contribute to WordPress

    Sunday afternoon we held a developer day. The purpose was to show designers and developers how they could begin contributing to WordPress. People learned about SVN, TRAC, etc, and even how the WordPress community works. Hopefully we’ll have some brand new contributors soon!

    WordCamp Phoenix Speaker/Organizer Appreciation Dinner

    The WordCamp Phoenix speaker/organizer appreciation dinner was held at this really cool urban farm in Central Phoenix

    Speaker/Organizer Dinner

    The event ended on a high note. There was a speaker/organizer appreciation dinner that was held at MyFarmYard, an urban farm in Central Phoenix. The vegetables came from the urban farm, the meats were locally sourced, and even the wine was from an Arizona Winery. The chef does pop-up restaurants all over Phoenix, offering amazing themed one-time menus at each location. We dined outside, and there was a fire that made the crisp night enjoyable. It was great food and great company, and a great way to end WordCamp Phoenix.

Posted in Wordpress | Tagged , | 3 Comments