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

Start with just a link exactly as you would make it for any other purpose, and make sure to give the link an id so that we can use that to apply our styles:

<a href="http://bluedogwebservices.com/" title="Professional WordPress Development" id="bluedog-logo">BlueDog Web Services</a>

That’s all the (X)HTML you’ll need to make your background image clickable. Your link should look something like this: BlueDog Web Services

So, how can we make a background image a clickable link? It turns out it can be done with a clever CSS trick. Let’s get started by adding the background image and make the link the same size as the image (so you can see the whole image). Since an anchor tag isn’t a block level element, we need to force it to display as “block” so that we can specify the size:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	display:block;
	height:116px;
	width:250px;
}

At this point it should look something like this: BlueDog Web Services

Now all we need to do is hide the text. This can be done using “text-indent” to indent the text just outside the containing box, using “white-space” set to nowrap to keep the text from wrapping back into the box, and using “overflow” to hide content outside the box like this:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	display:block;
	height:116px;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width:250px;
}

And the finished product looks like this: BlueDog Web Services

And there you have it – a quick CSS trick with clean markup that turns your background images into clickable links. The best thing is, these don’t adversely affect your SEO and can even be easily used inside of header tags if needed!

Update:
I was asked how to add a border. Here it is with a CSS border:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	border:1px solid #CCC;
	display:block;
	height:116px;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
	width:250px;
}

BlueDog Web Services

That obviously works, but the border is too close for my liking and adding padding causes our image to be out of place. Here’s the solution:

#bluedog-logo {
	background-image:url(/bd-content/uploads/2009/11/BlueDogLogo-250x116.png);
	background-position:5px 5px;
	background-repeat:no-repeat;
	border:1px solid #CCC;
	display:block;
	height:116px;
	overflow:hidden;
	padding:5px;
	text-indent:100%;
	white-space:nowrap;
	width:250px;
}

Basically we’re adding 5 pixels of padding all around, re-positioning the background image to 5px in from the top and left, then setting the background image to not repeat. Now our border looks nice:
BlueDog Web Services

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'];
	else
		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.

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!

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.

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!

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.

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!

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.

Onsite

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

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.

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.

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 - Notice the handcuffs hanging over Chelsea's name badge?





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!



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.

]]> http://bluedogwebservices.com/wordcamp-phoenix-2011-a-developers-take/feed/ 3