Download v3.0 | Live Demo | Documentation

Design On the Fly With Google Chrome

First, Luke and I decided to try out some different looks using Google Chrome. Chrome is one of the most powerful free tools available to web designers, because it allows us to test out CSS and HTML changes in real-time. We used Chrome to play around with all sorts of different looks before deciding on one.

If you’ve never used Chrome for web design before, give it a try! Right-click on a web page and choose ‘Inspect Element’.

The left pane of the inspection window shows the HTML source, and the right pane shows all of the CSS rules that are being applied to whichever HTML element you click on. If you double-click on the CSS rules, you can change them or add new ones.

Draw Inspiration From the Web

Luke and I agreed that a darker background would give his theme some much needed contrast. Now we had to decide what to do with his header. In particular, his logo looked a bit subdued on a blue background and the navigation menu needed to stand out more.

Luke cleverly began showing me some websites that he really liked the style of. One of those sites (www.IGN.com) provided inspiration for the new header design we created.

We liked the idea of using a larger logo silhouette behind the actual logo. This worked perfectly with Luke’s branding, which also has a prominent graphic element.

Focus On the Fonts

In addition to re-designing the header and changing the background color, we made the text on the site easier to read by changing the font and text color. These simple changes made Luke’s blog much easier on the eyes, which resulted in a better user experience.

All of these changes, combined with our brainstorming session, took roughly two hours of billable time. Talk about staying under budget!

Before…

We began with a very washed-out theme that was difficult to read.

…and After

We ended with a bolder, more colorful site that is easier on the eyes.

What Do You Think?

Do you have an opinion on Luke’s new web design? Let’s hear it!

Responsive Web Design

The problem with designing for mobile devices is that there are so many of them, and they all have different screen sizes and resolutions. To make things worse, most modern devices can switch orientation from portrait to landscape on the fly.

The solution is not to design for the device, but for the width of the screen.

Smashing Magazine has a great article on responsive web design that helped me learn the ropes. I strongly recommend reading it to anyone who designs or maintains a website.

Rather than reiterate what is said in that article, I wanted to share an example of these techniques being used in a WordPress theme.

Determine Your Objective

My client’s website, www.seaportvet.com, is built using the Executive WP theme. We decided that any browser with a screen width of 320px or less, which includes the iPhone in portrait mode, should display a simplified version of the site. Anything wider than 320px, including the iPhone in landscape mode, should see the full site.

The simplified version of the site should not contain:

• any images except the company logo
• certain widgets, such as the PDF brochure download link
• any columns or form fields displayed side-by-side

Knowing what we didn’t want to appear in the mobile version of the site made it very easy to write new CSS rules specifically for the small screen.

Write Your CSS

Here is the CSS we added to the theme’s stylesheet:

/* MOBILE DEVICES */	

@media only screen
and (max-width : 320px) {

	/* Style the main page elements using % of screen size */
	body { padding: 0; }
	#wrap { width: 100%; }

	/* Hide these items */
	#slideshow,
	img,
	#info-menu,
	.map,
	.widget_categories,
	.widget_archive,
	.ewf_widget_brochure {
		display: none;
	}

	/* Scale logo image based on screen size */
	#logo img {
		clear: both;
		display: block;
		margin: 0;
		width: 90%;
		max-width: 300px;
	}

	/* Convert navigation menu to a vertical list */
	#dropdown-menu {
		clear: both;
		display: block;
		float: left !important;
		margin: 10px 0;
	} 

	/* Stack columns and content on top of one another  */
	#dropdown-menu li,
	#content,
	.col-220,
	.col-520,
	.col-700 {
		clear: both;
		width: 80%;
	}

	/* Prevent Gravity Form fields from appearing side-by-side */
	.ginput_left,
	.ginput_right,
	.gf_left_half,
	.gf_right_half {
		clear: both !important;
		float: left !important;
		width: 80% !important;
	}

}

And that’s it!

We identified the IDs and classes that needed to be changed, wrote new CSS rules for them, and enclosed them in a media query. Easy peasy.

See It In Action

Check it out:

www.seaportvet.com

Even if you don’t have a mobile device with a small screen, you can see what the website looks like by re-sizing your browser window.

Once the width hits 320px, the site automatically adjusts to fit the screen.

Discussion

Have you done anything cool with responsive web design? Share a link and tell us about it…

This article is intended to quickly teach WordPress users with a basic understanding of HTML how to create a WordPress plugin and generate custom shortcodes…

Overview

Here is a shortcode plugin I wrote for a client, followed by an explanation of the code.

<?php
/*
Plugin Name: Kirby's Custom Shortcodes
Plugin URI: http://mnsp.co/
Description: Custom shortcodes for Kirby's Kitchen
Version: 1.0
Author: Shaun Scovil
Author URI: http://shaunscovil.com
License: GPLv2
*/

function kirbys_address_block() {

	$location = array(
		'business_name' => 'Kirby\'s Kitchen',
		'street_address' => '440 Broadway',
		'city_state_zip' => 'Everett, MA 02149',
		'telephone' => '(617) 294-4135',
		'directions' => '<a href="http://bit.ly/wRidj7">Directions</a>'
	);

	ob_start();

	echo '<div>';
	foreach( $location as $line ) { echo $line . '<br />'; }
	echo '</div>';

	$content = ob_get_contents();
	ob_end_clean();
	return $content;

}
add_shortcode( 'address', 'kirbys_address_block' );

?>

Got all that? Good. Now let’s break it down…

Part 1: Getting Started

All you need to write a WordPress plugin, or any PHP file, is a text editor like Notepad. But a much better program to use is Notepad++, because it highlights syntax the way you see it above and makes it easier to spot mistakes.

So to get started, open your text editor and copy/paste the following:

<?php
/*
Plugin Name: My Custom Shortcodes
Plugin URI: http://mnsp.co/
Description: Custom shortcodes for my website
Version: 1.0
Author: Shaun Scovil
Author URI: http://shaunscovil.com
License: GPLv2
*/

// YOUR FUNCTION GOES HERE

?>

This is known as the plugin header, which tells WordPress (and the person using it) a little bit about your plugin.

The very first and last lines (with the question marks) are PHP open- and close tags. They identify everything in between as PHP code, so the computer knows what to do with it.

Part 2: Writing a Function

Now we’re ready to write the function that will generate the output of our shortcode.

Delete the line that says “// YOUR FUNCTION GOES HERE” and replace it with this:

function my_address_block() {

	$location = array(
		'business_name' => 'YOUR BUSINESS NAME',
		'street_address' => 'YOUR STREET ADDRESS',
		'city_state_zip' => 'CITY, STATE ZIP',
		'telephone' => 'YOUR PHONE NUMBER',
		'directions' => '<a href="YOUR LINK TO GOOGLE MAPS">Directions</a>'
	);

	// YOUR OUTPUT CODE GOES HERE

}
// REGISTER YOUR SHORTCODE FUNCTION HERE

What we have done here is created an array of string variables, each containing one line of text that our shortcode will output. Just after:

 $location = array( 

…you’ll see a series of key => value pairs. The first part, or the ‘key’, is a variable name. It can be anything, but should be something that tells you what information will be stored in the variable.

The second part, or the ‘value’, is the text you want to display. You can use HTML tags in a value, like you see in the ‘directions’ value above. Just be sure you use single quotes at the beginning and end, and double quotes within the HTML.

Go ahead and replace all of the ‘values’ with your business info, being sure to contain them with single quotes. If your business name contains a single quote, like ‘Kirby’s Kitchen’, put a \ before it (ex: ‘Kirby\’s Kitchen’).

Part 3: Generating Output

Now that we have an array containing the text and HTML we want to display, we need to tell the computer to actually send it to the screen.

Delete the line that says “// YOUR OUTPUT CODE GOES HERE” and replace it with this:

	ob_start();

	echo '<div>';
	foreach( $location as $line ) { echo $line . '<br />'; }
	echo '</div>';

	$content = ob_get_contents();
	ob_end_clean();
	return $content;

First, we tell the computer to buffer our output, or store it in memory, using the function:

 ob_start(); 

Think of this as hitting the record button on a video camera. If we don’t buffer our output, it will appear at the top of our page or post rather than in the exact spot we place our shortcode.

Next, we use echo commands to display our HTML. Each echo command should be followed by a ‘value’ and end with a semicolon. So you see the first and last echo contains an opening- and closing div tag, respectively.

Between the div tags, we could just write something like:

echo 'My Business Name<br />Address<br />City, State, Zip<br />Telephone<br /><a href="http://maps.google.com/">Directions</a>';

…but that’s just messy and will be more difficult to update later on, if you need to make a change.

So instead we assign a new variable (called $line in this example) a value that is equal to each value in our array (which we called $location when we defined it in Step 2) using a loop.

In the loop, we echo each variable in sequence and add a line break HTML tag to the end of it.

After echoing our output, which has been buffered (or ‘recorded’), we save the final product by storing it in a new variable called $content using the function:

 ob_get_contents(); 

Then we stop recording and clear out the memory (waste not, want not) using the function:

 ob_end_clean(); 

And finally, we return the $content variable that contains our output.

Last Step: Register Your Shortcode

The last easy step is to tell WordPress that, whenever a specific word appears between two brackets (ex: [address]), it should run the function you just wrote.

Delete the line that says “// REGISTER YOUR SHORTCODE FUNCTION HERE” and replace it with this:

add_shortcode( 'address', 'my_address_block' );

The first value in the parenthesis is the word that, when placed between brackets, will trigger your shortcode. And the second is the name of the function you just created.

Congratulations! You just wrote a shortcode plugin for WordPress. Pretty simple, yeah?

Now just log into your WordPress admin page, go to Plugins > Add New, click the ‘Upload’ link at the top, and install it.

Any Questions?

Post your questions as comments below and I’ll do my best to answer them.

This was surprisingly difficult, because I don’t have a clue when it comes to Regular Expressions (aka: ‘Regex’). A quick Google search turned up plenty of different Regex patterns for detecting URLs, and at least one for spotting email addresses, but nothing that covered both…

My Solution

After some Frankenstein-like experimentation, this was the best solution I came up with: http://pastebin.com/t5md1FEG

Using this code, if you start with a text string:

$text = "Visit use online at: www.MyNewSitePreview.com or contact us at: info@mynewsitepreview.com"

…you end up with a converted text string:

$text = 'Visit use online at: <a href="http://www.MyNewSitePreview.com">www.MyNewSitePreview.com</a> or contact us at: <a href="mailto:info@mynewsitepreview.com">info@mynewsitepreview.com</a>'

Challenge

Think you can do better? Leave a comment below, and use PasteBin to share your code!

Everyone knows social media can be a powerful marketing tool, but a lot of business owners are unsure where to begin. To them, I say start with these three steps:

1. Identify your audience
2. Decide what to share
3. Create a publishing schedule

Step 1: Identify Your Audience

More than anything, the purpose of social media marketing should be to compel others to spread your message for you. And the people who are most likely to do that are those who already share your core beliefs and principles. They should be your target audience.

In the attached video above, Simon Sinek gives a brilliant lecture on creating messages that inspire action by clearly identifying why an organization does what it does, rather than just stating what it does and how it does it.

During his lecture, Simon makes three key points:

• “People don’t buy what you do; they buy why you do it.”
• “If you talk about what you believe, you will attract people who believe what you believe.”
• “The goal is not to sell to people who need what you have; the goal is to sell to people who believe what you believe.”

In terms of social media, I would translate this as:

• “People don’t share what you post; they share what they think about what you post.”
• “If you tweet about what you believe, you will attract followers who believe what you tweet.”
• “The goal is not to friend people who need what you have; the goal is to friend people who will share what you share.”

Social media marketing is not advertising. It’s recruiting. Your target audience should consist of people who are likely to endorse your brand because they share your core beliefs.

Step 2: Decide What to Share

Now that you know who your target audience is, you need to decide what sorts of useful information you can regularly share with them. This is called Content Marketing and is a crucial ingredient that many social media campaigns lack.

For example, if your business is an insurance agency it would make sense to share information about risk management. You could break this information into categories, such as:

• News about government regulations that could impact insurance costs or coverage;
• Cases in which disaster struck and those with insurance came out on top;
• Ideas about new risks that may stem from economic, political or technological changes.

Once you have your content, you can post it on your blog and then syndicate it on sites like Facebook and Twitter. If your website doesn’t have a blog you can create one using Blogger or WordPress, but you’ll miss out on the organic search benefits of hosting it on your own website.

Writing original content is great, but most small business owners don’t have enough time in the day as it is. Luckily, corporate blogging doesn’t have to be that time-consuming. In fact, 80-90% of what you share could be articles and news found elsewhere on the web.

Use resources like Yahoo! News and Google Alerts to find interesting content to share. Then link to an article, discuss it briefly on your blog, and pose a question to your readers. This can lead to more sharing, as well as audience participation (if you allow comments).

Step 3: Create a Publishing Schedule

A well-thought-out publishing schedule can be the difference between success and failure for a social media campaign. Without discipline and regimen, you are likely to spend too much time online achieving too few results.

Start by identifying certain times of day when your target audience is likely to be slacking off. Folks who work 9-5 are probably easiest to reach at 9am (just settling in), 12pm (lunch time) and 3pm (break time). Get in the habit of being social every day around those times.

Then figure out what sort of information you will share at each time, each day of the week. Using the insurance example above, you might decide to share News in the morning, Cases at lunch time, and Ideas in the afternoon.

Finally, set specific and measurable goals for your social activities. For example, attempt to drive traffic to one of your web pages every Tuesday and Friday, or make a personal connection with one new fan or follower every day of the week.

The Bottom Line

Social media marketing takes time and effort, but mostly effort. Your goal should be to build a fan base that shares your organization’s core beliefs. Put some thought into it, find relevant ways to add value, and use discipline to stay productive while being social.

I’d love to hear what you think! Post your questions, comments, and social media wisdom below…

While Google has clearly stated that it will delete profiles for “non-user entities”, there is hope in sight…

No G+ Business Profiles Allowed Just Yet

On July 6th, Christian Oestlien – Group Product Manager at Google – said: “We have a great team of engineers actively building an amazing Google+ experience for businesses, and we will have something to show the world later this year.” However, he also warned that Google is “discouraging businesses from using regular profiles to connect with Google+ users,” and they will “actively work with profile owners to shut down non-user profiles.” (Read the full article here.)

So for now, there is no way to create a business page on G+. However, if you want to be involved in the testing phase of G+ for businesses (and other non-user entities, such as a places and brands) you can submit an application here: http://goo.gl/zq95C

In the meantime, I highly recommend signing up for a personal G+ user account as soon as possible. This will allow you to check out the interface and offer feedback to the development team.

What G+ Marketing Features Do You Want?

What features could G+ offer that would benefit your business or organization? And what would you like to see Google avoid doing to prevent spam and over-commercialization?

If you’ve upgraded to WP 3.2 and need a quick fix, try this…

The Quick Fix

Go to your wp-admin page and navigate to Appearance > Editor. Along the right side of the screen you’ll see a list of theme files. Click on Theme Functions (functions.php).

Insert the following code on its own line, just after the opening <?php tag:

// Downgrade to jQuery 1.4.4 in order to support jQuery Tools
function downgrade_jquery() {
        global $wp_scripts;

        // We want to use version 1.4.4 of jQuery, but it may break something in the admin so we only load it on the actual site.
        if ( !is_admin() ) :
                wp_deregister_script('jquery');
                wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4');
        endif;
}
add_action( 'wp_head', downgrade_jquery() );

Keep in mind that this is a patch, not a solution. Going forward, other WordPress plugins, themes, etc. may require a newer version of jQuery.

Hopefully jQuery Tools will be compatible with jQuery 1.6.1 soon…

Questions?

Post them here as comments, along with a link to your site.

It took a bit of research, but I found the necessary code here. However, the example on that forum was for a shopping cart and, for non-technical WordPress users jQuery can be confusing, so I thought I’d give you my Nerd-to-English translation and explain how to easily make your WordPress sidebar stay visible when you scroll…

Getting Started

To keep things simple, I’m going to start with some Basic Instructions that should work for most WordPress themes. Then I’ll touch on Troubleshooting for themes that don’t cooperate right away, and finally I’ll open up the Comments section to your questions.

Basic Instructions

First, go to your wp-admin page and navigate to Appearance > Editor. Along the right side of the screen you’ll see a list of theme files. The file Stylesheet (style.css) should be highlighted; if not, click it.

Scroll all the way to the end of your style.css and add this code:

.fixed { position: fixed; top: 20px; }

Click Update File to save your changes, then click Header (header.php) in your list of theme files.

In header.php, search for this line of code:

<php wp_head(); ?>

If it’s not there, find this instead:

Right above it, insert the following code:

jQuery(document).ready(function($) {
	$(function() {
		if( !(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') ) { // check where the sidebar div is
			var offset = $('#sidebar').offset();
			$(window).scroll(function () {
				var scrollTop = $(window).scrollTop(); // check the visible top of the browser
				if (offset.top < scrollTop) $('#sidebar').addClass('fixed'); else $('#sidebar').removeClass('fixed');
			});
		});
	});
});

Click Update File to save your changes, and you should be done! Check out your website and see if it worked. If not, continue reading…

Troubleshooting

Didn’t work, eh? Not a problem. There are a couple of obvious reasons this won’t work with some themes…

1. Your sidebar is not identified by the ID #sidebar. This can be solved by editing the jQuery code above and replacing #sidebar with your theme’s sidebar ID (e.g. #widget-container). Note that you need to change it in three places within the jQuery code.
2. Your theme has jQuery disabled for some reason. Edit your function.php and header.php and search for this: wp_deregister_script(‘jquery’);. If you find it in either place, kill it.
3. Your sidebar is on the left and your page content is not styled to float right, causing an overlap. Try adding #content { float: right; } to the end of your style.css.

If you still can’t get it working, leave a comment with a link to your site and I’ll try to point you in the right direction.

Questions?

Post them here as comments, along with a link to your site.

The lesson was simple: When things come in three, people remember. In the case of martial arts, doing things in groups of three is a bad habit because the idea is to remain unpredictable. However, in most other situations the third time is a charm…

Omne Trium Perfectum

Over the years, I’ve come to realize that the ‘Rule of Three’ applies to just about everything in life. We talk about time in terms of past, present and future. We describe the size of things as small, medium or large. We even categorize matter as either gas, liquid or solid.

In terms of religion, the holy trinity and the three wise men come to mind…as does the ‘Holy Hand Grenade of Antioch’ bit from Monty Python and the Holy Grail (see attached video clip).

Just about every anecdotal joke ever written involves three people of varying races, religions or hair colors (see what I just did there?).

There’s even a Latin phrase, omne trium perfectum, which means: everything that comes in three is perfect.

So what does this have to do with building websites? Three things, actually…

1. Your website should immediately answer three questions: “Who are you?”, “What do you do?” and “Who do you do it for?”.
2. Information on your website should be presented in groups of three whenever possible, so people remember what you have to say.
3. It takes three people (or one person wearing three hats) to build a great website: A graphic designer, a copy writer, and a web developer to handle the coding.

Whether you’re building a website on your own, or hiring someone like me (wink, wink) to do it for you, this universal rule will come in handy throughout the process.

Discussion

How does the ‘Rule of Three’ apply to your work, or your everyday life?