To pull the Tweets from the Twitter API I have created a PHP Function with a few parameters in order to give it some extra flexibility. You are for example able to change the username, amount of tweets to show and whether to show or hide the username that appears first in the tweet when it is pulled from the API.

The Code

Here is the function in question. If you are using WordPress you should consider turning this into its own plugin so that it is available regardless of the theme, however if you really just need it quickly, drop this into your functions.php file.

function latest_tweets($username, $amount = 2, $removeUserID = true){

    $doc = new DOMDocument();
    $feed = "http://twitter.com/statuses/user_timeline/$username.rss";

    $doc->load($feed); 

      $outer = '<ul id="tweets">';

      $i = 1;

      foreach ($doc->getElementsByTagName('item') as $node) {

        $tweet = $node->getElementsByTagName('title')->item(0)->nodeValue;
        if($removeUserID)
        	$tweet = substr($tweet, stripos($tweet, ':') + 1);

        $tweet = preg_replace('@(https?://([-\w\.]+)+(:\d+)?(/([\w/_\.]*(\?\S+)?)?)?)@',
              '<a href="$1">$1</a>', $tweet);

        $tweet = preg_replace('/@([0-9a-zA-Z]+)/',
              '<a href="http://twitter.com/$1">@$1</a>',
              $tweet);

        $outer .= '<li class"tweet">". $tweet . "</li>\n';

        if($i++ >= $amount) break;

      }

	$outer .= "</ul>\n";

    echo $outer;
}

Showing the Tweets

Having created the function, showing the tweets is very easy. The function that you just created can be called as follows:

<?php latest_tweets($username, $amount, $removeUserID); ?>

$username should be your Twitter username.
$amount should be replaced with a number.
$removeUserID can be set to true if you want to remove it or false if you don’t.

To have the function show the three latest tweets from @ErikBernskiold without showing my username for every tweet, this is how the function would look:

&ls;?php latest_tweets('ErikBernskiold', 5, true); ?>

Summing it up

This short and simple function is flexible enough to allow you to implement this wherever you need and in any content management system that you wish to use it in.

What ways are you using to show Twitter on your website? Sound off in the comments!

How To Add A Twitter Feed To Your Website published at XLD Studios

In the meantime, here’s a screenshot of the frontpage. Let us know in the comments what you think about it.

WordPress Theme Preview: Lucent published at XLD Studios

• Plupload (version 1.5.4), which WordPress uses for uploading media.
• SWFUpload, which WordPress previously used for uploading media, and may still be in use by plugins.
• SWFObject, which WordPress previously used to embed Flash content, and may still be in use by plugins and themes.

The release also addresses the following bugs (taken from the official blog post):

• Limited privilege escalation where a site administrator could deactivate network-wide plugins when running a WordPress network under particular circumstances, disclosed by Jon Cave of our WordPress core security team, and Adam Backstrom.
• Cross-site scripting vulnerability when making URLs clickable, by Jon Cave.
• Cross-site scripting vulnerabilities in redirects after posting comments in older browsers, and when filtering URLs. Thanks to Mauro Gentile for responsibly disclosing these issues to the security team.

As always we recommend that you update right away in order to keep your WordPress installation secure and prevent breaches. If you are on our maintenance plan, your site has already been upgraded.

WordPress 3.3.2 Available For Download published at XLD Studios

Creating the menu itself isn’t very hard in plain HTML. The theory is to add the code for the drop-down underneath the default unordered list menu and then display/hide it using the media queries in the CSS. Couple that with the simple javascript snippet to open a URL from a drop-down selection, the menu itself is no problem.

Creating A Custom Menu Walker

By default, WordPress outputs a menu in an unordered list. To change this, you need to create a custom meny walker function. While its name makes your head spin, it is basically a PHP function that extends and thus overrides the default menu creation function.

Here is the code that I used for BestApp Site which is to be placed in your functions.php file.

/**
 * Custom Menu Walker for Responsive Menus
 *
 * Creates a <select> menu instead of the default
 * unordered list menus.
 *
 **/

class Walker_Responsive_Menu extends Walker_Nav_Menu {

	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;		

		// Create a visual indent in the list if we have a child item.
		$visual_indent = ( $depth ) ? str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $depth) : '';

		// Load the item URL
		$attributes .= ! empty( $item->url ) ? ' value="'   . esc_attr( $item->url ) .'"' : '';

		$output .= '<form name="menu_selector" method="post" action="#">'; // Create the form wrapper for the URLs to work.
		$output .= '<select name="url_list" onchange="gotosite()">'; // Set up the select list and load the javascript function

		$output . = '<option value="" selected="selected" disabled="disabled">Please select...</option>'; // Create a default selected item.

		// If we have hierarchy for the item, add the indent, if not, leave it out.
		// Loop through and output each menu item as this.
		if($depth != 0) {
			$item_output .= '<option ' . $attributes .'>'. $visual_indent . apply_filters( 'the_title', $item->title, $item->ID ) . '</option>';
		} else {
			$item_output .= '<option ' . $attributes .'>'.$prepend.apply_filters( 'the_title', $item->title, $item->ID ).'</option>';
		}

		$output .= '</select>';
		$output .= '</form>';

		// Make the output happen.
		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

While the code looks fairly complex, it is really straight forward. I have commented what each section does in the code rather than breaking it apart here.

Applying The Walker

In order to display the new menu, we need to call it using the wp_nav_menu function. At the place in your code where you want the menu to display, simply use this code:

<?php wp_nav_menu(array(
	'theme_location' => 'primary-menu',
	'container' => false,
	'walker' => new Walker_Responsive_Menu())
); ?>

This is a basic implementation of the wp_nav_menu function that adds the custom walker to use for the output You want to change the theme location parameter to the name of the theme location that you have set up in the theme.

Conclusion and Note

It is not necessarily very complex to make WordPress generate necessary code for responsive sites as this demonstrates, all because it is well-built from the start and allows you to override default function outputs with custom walkers.

Do note that this is a very simple and almost crude walker function as it omits much of the variables required for all the array parameters for the wp_nav_menu function to work. It will however do this job elegantly.

Auto-Generating a Select Menu in WordPress With a Custom Menu Walker published at XLD Studios

From us here at XLD Studios, I want to wish you a very Happy Easter!

Happy Easter! published at XLD Studios

Unfortunately, many photographers neglect performance when building their own sites in WordPress, so this post is for you guys. Simple instructions on what you should do to speed up your site (if you are running WordPress that is…).

How long will this take you? Probably under 15 minutes!

Install the WP Super Cache Plugin

If you are only going to do one thing, log into the dashboard and go and search for WP Super Cache. This plugin is super simple to set up, all you need to do is to activate it and enable the caching and it will have improved your performance by a lot.

However, you can easily make the site even faster. By going into the advanced tab of the plugin setting, you will see a bunch of checkboxes that at the end of their description say “(recommended)”. Simply check these!

To see how much faster the site loads, log out and reload the page (or use another browser). Isn’t it wonderful?

Install the WP Smush.it Plugin

Another plugin you should install is the WP Smush.it plugin. It doesn’t come with a lot of options, in fact, it doesn’t come with any options. What it will do is run the images you upload through the Smush.it optimizer to scale the images down in size dramatically while retaining the quality.

I know you are a photographer and you must have the best possible image quality and save images at the best quality but give this a try will you. You will likely notice very little degrading in image quality from a before and after. What little you may loose in quality here, you gain in business.

Why Should I Care About Loading Time?

I could start by making the point that Google now uses loading time as part of their algorithm, but I’m not going to (oops, I guess I just did). Regardless of any search engine algorithms, the most important reason here is sheer human behavior.

Visitors are impatient. Don’t be fooled by your love of your own work. If someone goes to your site to see your photos, they want it to load fast. If it doesn’t, they will move on. As a direct result of them moving on, you loose a possible sale or client.

Sure, it might be okay when it happens to your best friend, but is it really as okay when the manager of the big company that is looking to hire you can’t get your site to load in good time? I’ll let you decide for yourself!

Do you like this post? Why not subscribe to our RSS feed, become a fan on Facebook or follow us on Twitter?

Hey Photographers, Do This Now To Speed Up Your WordPress Site published at XLD Studios

Placehold.it is a service that generates nice and tidy placeholder images on the fly (which can be formatted too if you like). By just using the format and their domain as your image URL, you get a nice-looking placeholder, much better than a blank image tag.

<img src="http://placehold.it/350x150">

Generate Placeholder Images On The Fly published at XLD Studios

The Benefits

Naturally there are many benefits to using a framework from the start, but this in particular instance, the Bootstrap has some nice benefits of its own.

Gorgeous User Interface CSS Styles

The first thing that struck me with the Bootstrap was that it looks very nice. When designing any clean and simple website that is so very popular these days, the users elements fit right in.

Included are styles for typography elements such as headings, quotes and lists; beautiful and flexible styles for tables and the best part: Very flexible and gorgeous form designs and buttons. The latter two are parts that I enjoy the least when coding a website and it is nice that I can get a good head-start on it with this framework.

LESS Support

Changing values in a huge CSS document isn’t my idea of fun. Luckily you can download a stylesheet file coded using LESS with variables for typography and color to compile into your very own and customized CSS file.

The benefit here is of course that the customization is only done in a few variables, making for a really speedy process.

Integrated JavaScript Plugins

Coming to the end of the markup and design process you have envisioned all sorts of cool javascript effects. While there are many plugins out there to simply include in your project, styling them and making them look integrated can take quite a long while.

What I like about Bootstrap is that it comes with everything from flexible alert messages to modal windows (think lightbox), tooltips, carousels and all the fun other JavaScript effects that are now quickly becoming must haves.

Where To Get Bootstrap?

The Bootstrap framework is available from its very own Github section along with demos of all the available styles and plugins. If you like you can view a series of forks and follow the project on Github.

Using the Bootstrap from Twitter To Kick Start Your Projects published at XLD Studios

Einar approached us in November when he had realized that building a site himself would have been too time consuming. His requests were clear. A clean and professional design that highlighted the gorgeous photography that frankly speaks for itself.

I could not have imagined how professionally Erik worked and how great our co-operation would be making the new FocusOnNature in Iceland website.

- Einar Erlendsson, FocusOnNature

WordPress With Custom Post Types

The new FocusOnNature website is built solely upon WordPress, our favorite content management system because it is simple to implement, very resource friendly and most of all, easy for our clients to learn and understand.

To complement the standard WordPress features we implemented several custom post types to allow easy adding of Workshops, Testimonials and Sponsors. A major goal for the project was to make it very easy to keep the site easily maintained for future workshop series which I would say we accomplished.

Registration, Newsletter and Dual Languages

One of the challenges of this project was to make the website work for two categories of visitors. English speakers who were looking for the main summer workshops and Icelandic natives who want to attend the local seminar series that FocusOnNature arrange during the winter.

For this to come together, we implemented different categorization systems for workshops allowing them to be entered from the same section all the time, but sorted differently depending on the workshop type. This does not force FocusOnNature to use one language for all posts but can mix and match as necessary for the workshops.

Registration was another area which was very important. We wanted to make it easy for prospective attendees to sign up for a workshop. We integrated the custom post types with a registration form powered by the advanced Gravity Forms plugin to pre-select the workshop from the page the attendee clicked on.

Finally we worked with Einar and FocusOnNature to integrate the WordPress website and registration system with MailChimp, one of the most user friendly newsletter services available. This has resulted in FocusOnNature being able to keep better track of their newsletter subscribers and helping them keep their list up to date.

Conclusion

We are very pleased to have been able to work with Einar and FocusOnNature on this website project and are excited to being able to launch the website after months of hard work tweaking the site and getting it ready for the public.

Now that the site is out there we hope that it is being well received by the professional photographic community as well the world-class instructors that FocusOnNature brings to Iceland to hold workshops.

Launching A New Website For FocusOnNature published at XLD Studios

As always we recommend backing up your files and database before doing any update on your site. All of our clients on our WordPress Updating Plan have already been upgraded safely to WordPress 3.3.1.

Upgrade Your WordPress Installations to 3.3.1 published at XLD Studios

New now however is the ability to add a banner to your plugin page just above this. For now this is just an experiment which as Matt notes means that the size of the banner and the look can change at any time. Since it is being very well received, I would assume that the idea is not going away. Read on to learn how you can add a banner of your own and see some examples.

How Do You Add The Banner?

Adding one to your own plugin is very simple and requires just a few steps but makes a big difference for your plugin page.

1. Make an image that is 772x250px. This image should be saved in jpg or png.
2. Save the image that you just created into a new folder called “assets” in your main svn folder. Note that you shouldn’t create this assets folder in the trunk of your plugin but rather in the root folder. Name the file banner-772×250.jpg (if you’re saving as a jpg) or banner-772×250.png (if you’re using a png) and you’re good to go!

The next time the plugin directory refreshes (approx. 15 minutes) your brand new beautiful image will show up on your plugin make.

Examples Of Beautiful Plugin Pages

Here are some examples of beautifully made plugin page banners to get your creativity started.

Buddy Press

WordPress SEO by Yoast

ReciPress

All in One SEO

bbPress

Admin Management Extended

ManageWP

How To Add a Banner To Your WordPres Plugin Page published at XLD Studios

Extending Their Business To The Web

While much thought had gone into Kearns Brothers previous website it was lacking the style and extras to make it easy to navigate and easy to contact them in order to express interest in their services.

Launching last week, the new website helps customers quickly find the service they are interested in and contact Kearns Brothers for more information. It also helps educate customers on what product may be right for them and help them think their needs through prior to making a decision.

Being able to market directly to interested customers is something that we wanted to take advantage of for Kearns Brothers and therefore we integrated a form where users can enter their email address to receive specials from the company. Behind the scenes, this is powered by MailChimp.

Built With Modern Technologies

Naturally the new Kearns Brothers website is built using the latest HTML5 and CSS3 techniques while still making sure the site works fine in all modern browsers.

Apart from the new front end user experience, the new site has been created to run on WordPress making it easy for Kearns Brothers to update the website when they require with new specials, information and news.

What Kearns Brothers Is Saying

Our customers is what we value the most here at XLD Studios and we are only happy if they are happy. We are very pleased that Kearns Brothers is happy with their new website and what we are doing for them. Here is a note that we got from Kearns Brothers after launching the website.

I wanted to Thank you and XLD studios for the wonderful job on our website. While I am pleased that the site is developing into exactly what we had hoped it would become, it has been your wonderful eye for detail, creative suggestions, patience, expedient response time and effective communication that will keep us dedicated customers of your services.

We are not an easy company to work for. Our work is often complex and extremely multi-faceted and demands placed on us also require that we be able to work with individuals who are accommodating of those challenges and capable of quickly adapting to OUR work flow. XLD studios has been the ONLY company that we have worked with and have searched for (for YEARS) that has met those demands and proven to be our one-stop shop for everything related to our internet presence and communication savvy.

We feel so very fortunate to be recipients of your exceptional customer service and look forward to continually providing OUR customers a great end-user experience under your innovative direction.

- Sheree Kearns, Kearns Brothers

We Launch A New Website For Kearns Brothers published at XLD Studios

In this article I want to share with you ten CSS snippets that will save you from having to write the same code over and over again in the same project.

1. Simplifying The Navigation Code

This is based on a post over at CSS Wizardry that talks about The nav abstraction, Most projects I work on contains at least one horizontal navigation element and most of the time two if not three. If I could make an abstraction with the most common parts of the navigation element, I could save myself a ton of code if I just included that class.

.nav { list-style: none; margin: 0; padding: 0; }

	.nav ul { margin: 0; padding: 0; }

	.nav li { display: inline; }

	.nav a { display: inline-block; }

All that is now required is to append the nav class to any object that we want to make a horizontal list of items without the leading bullet.

2. Generalizing the Box Code

Each time you want to make a simple box with a background color for some objects within you will probably add both margin and padding to it. Why not abstract this into a .box class like so:

.box {
	padding: 1.5em;
	margin: 0 0 1.5em 0;
}
	.box > :last-child {
		margin-bottom:0;
	}

We also want to make sure here that the last child object inside the box doesn’t interfere with the padding of the main box by having its own bottom margin set. To fix this, we simple set it to zero, making sure it always looks consistent.

3. Using the Media Object Over and Over Again

Based on a post by Nicole Sullivan at her blog Stubbornella, the Media object is one of these types of objects that we as designers and developers like to use all over again in one form or the other. It is simple an image floated to the left and some text over on the right (that is not wrapping around the image).

The media object solves this neatly by abstracting this into a simple pattern:

/**
 * Media Object
 * Based on: stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
 * Markup:

 <div class="media">
   <a href="#" class="img">
     <img src="#" alt="Image!" />
   </a>
   <div class="body">
     Some text to go with this image.
   </div>
 </div>
 **/

.media {
	margin:10px;
}

	.media,
	.body {
		overflow:hidden;
		_overflow:visible;
		zoom:1;
	}

	.media .img {
		float:left;
		margin-right: 10px;
	}

		.media .img img{
			display:block;
		}

4. A Great CSS Reset Code

By being able to start your project with elements behaving as you would like them to is a great benefit. It also saves many lines of code where you otherwise would be resetting an object each and every time. As I have said before, I favor the Eric Meyer reset code which with a little tweaking for each project makes a great starting point for your design.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

5. Building In Adaptive Columns

While a system like the 960 grid system is perfect for you as a developer, your users may find it a bit odd and clunky to work with. The adaptive columns are easier to grasp and are easy to include in your project. All your users need to do is think about how many columns they want to fit within a space in terms of fractions.

/**
 * Adaptive Columns
 **/

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{position:relative;margin-right:4%;float:left;min-height:1px;height:auto!important}
.one_fourth{width:22%}
.three_fourth{width:74%}
.one_fifth{width:16.8%}
.two_fifth{width:37.6%}
.three_fifth{width:58.4%}
.four_fifth{width:79.2%}
.one_sixth{width:13.3333%}
.three_sixth{width:47.9998%}
.five_sixth{width:82.6665%}
.last{margin-right:0!important;clear:right}
.clearboth{clear:both;display:block;font-size:0;height:0;line-height:0;width:100%}
.one_half .one_half{margin-right:8.3333%;width:45.8333%}
.one_half .one_third{margin-right:8.3333%;width:27.7778%}
.one_half .two_third{margin-right:8.3333%;width:63.8889%}
.two_third .one_third{margin-right:6.1224%;width:29.2517%}
.two_third .two_third{margin-right:6.1224%;width:64.6258%}
.two_third .one_fourth{margin-right:6.1224%;width:20.4082%}
.one_half,.two_fourth{width:48%}
.one_third,.two_sixth{width:30.6666%}
.two_third,.four_sixth{width:65.3332%}

Conclusion

Saving these snippets in an application such as Snippets, TextExpander or right within Coda or your favorite editor is a good way to have them at hand for when you need them to save yourself a whole lot of trouble and bloat in your code.

5 Snippets To Speed Up Your CSS Coding published at XLD Studios

In this article I want to explain why we as a WordPress theme developers can and should not contribute to making theme options pages even more bloated than they are. In contrary, we need to step away from the current bad practice and start utilizing what comes with WordPress.

Using Bloated Theme Options Panels Makes WordPress Segmented and Unintuitive As A Platform And Community

Let’s start strongly right away. With everyone having different options layouts with different user interfaces (still within the WordPress frame) and the amount of settings varying so broadly across themes it contributes to the end user becoming increasingly confused. Instead of there being one standard way which you get when using WordPress, the entire WordPress experience is different from one theme to another.

Have you tried directing a user to a normal WordPress-workflow, only to realize that the theme they are using overrides it with a custom setting somewhere? The purpose of doing so is hard for me to grasp and it is very frustrating to be put in the situation, both as a designer/developer but also as the end user.

The worst part is that it fragments the community as a whole. Users have a much harder time moving from one theme to another because it changes the dashboard tremendously.

Not Using Native Features Requires More Work After WordPress Core Updates

Whenever you stray from using the functions that WordPress supports natively you will inevitably end up having to rewrite parts of your theme for new versions. Part of the beauty of WordPress is that the core developers have a very good way of thinking when it comes to building WordPress. There is a great chance that the theme you build today won’t have to be updated in many years. By using a bloated options panel though, you force yourself into more work when core updates.

Even though this seems to be only a problem for the developer that chooses this bad practice, it creates a problem for the users. You want theme updates to be as painless as the core update is today. Suddenly having to change a major way that your theme works is not user friendly.

It Blurs The Line Between Plugins and Themes And Makes It Harder To Disable Features

Currently the way I see it, there is a very clear line between what is plugin territory and what is theme territory. While it is as easy for a developer to write a plugin as it is to embed it in a theme, embedding a feature in a theme is a sure way of making it harder for the user to disable the feature if he or she doesn’t want it.

Some of the most bloated options panels lets the user do many things that is best served by plugins such as Caching, Analytics, SEO and more. The goal of a WordPress theme shouldn’t be to replace all possible plugins and save the user from having to install a plugin.

What Can We Do To Prevent Bloated Theme Options Pages?

As a community we can choose to adhere to the Theme Review guidelines that were drawn up for the free themes repository. These guidelines are very clear on what is best handled by themes compared to plugins and are very specific even down to how a theme should be coded.

Giving the users a consistent experience is something we can gain from, especially when there are core features present that can do the work and are already in the core codebase. Why reduce performance and usability by reinventing the wheel in this case?

Let’s take responsibility and make sure the standards don’t drop. If the WordPress community would remain high-quality and use the same practices, users would notice and keep choosing WordPress and ourselves for their websites, growing all of our businesses.

Why We As WordPress Theme Developers Need to Make Theme Options Pages Less Bloated published at XLD Studios

Once again from me and on behalf of every person we bring in to work on our projects, a very merry christmas!

Merry Christmas! published at XLD Studios

Instead, check back here by the end of the week and there should be something cool ready and waiting for you.

Something Is Coming This Week! published at XLD Studios

Of course it is completely useless but it does prove just how powerful these new technologies are getting and let’s face it: It’s pretty cool!

Watch the demo »

An iPhone 4 Built With Pure CSS3? Yep, it is true! published at XLD Studios

Showing the content is just a matter of using a little PHP snippet that looks for the URL of common search engines from the referrer agent that is passed along to the server. If it matches, we display the content that you want and if it doesn’t, we don’t: Simple!

<?php
   if (preg_match(’/^http:\/\/(\w+\.)?(google|bing|yahoo|aol|ask)\./’,$_SERVER[’HTTP_REFERER’]) == 1) :
?>
Content that you want displayed to search engine visitors only should go right here.
<?php endif; ?>

Show Content Only To Visitors Coming From a Search Engine published at XLD Studios

All of the bundles have some really nice books in them and I’d consider getting one which is in an area where you want to learn more, maybe the corporate bundle tomorrow.

Check Out Smashing Magazine’s Book Bundles published at XLD Studios

As usual make sure you backup at least your database (preferably your files too) before pushing the update button to be able to roll back if anything unexpected happens.

WordPress 3.3 Now Released! published at XLD Studios

What Is A CSS Reset And Why Do I Need One?

By default all browsers apply some styling to the basic HTML elements. You will notice this if you just create a simple html page with some content on it, marked up by common HTML elements. It will not look very pretty, but all elements get styled in one way or another.

Since the very nature of CSS is to inherit properties from previously loaded stylesheets you will also inherit the basic styles applied by the browser, or the user agent stylesheet to be precise. Occasionally these styles contain default values that you want to keep intact but most often you find yourself overriding some common element all over your normal stylesheet.

A good example of this is margin and padding. Most elements have a pre-defined margin or padding around them and in order to place objects properly in your design, you will need to “reset” these to zero. Doing this all over again in your stylesheet not only takes up more space but creates a mess.

Instead we bring out what is called the CSS Reset, a section in your stylesheet where you “reset” the styles for the default HTML tags to be unstyled, leaving you completely free to work on them yourself.

In essence, a CSS reset is designed to reduce browser inconsistencies and help bridge the gap between the different user agent stylesheets as well as reducing the clutter in your stylesheets.

Note: For HTML5, a CSS Reset section typically includes a part that defines the new tags such as aside, section and article to be displayed as block to make sure older browsers interpret them properly if they do not exist in the user agent stylesheet

Using A Wildcard Reset

It is possible to reset each and every HTML tag that may or may not have a style attached to it with a wildcard CSS statement. While this is quick and easy it may also have undesirable effects.

By removing all default formatting from all HTML tags you force yourself to have to create custom styles for these tags. Remember, you may only think about div, span, ul, li and other common elements, completely forgetting about abbr, pre and cite.

Because of this, I would urge you to just skip thinking about the wildcard reset. It does far more harm than it does good because a lot of the time you just need to reset a handful of styles that you will be customizing and working closer with in your design.

Instead, let’s have a look at a proper CSS reset.

Using A Proper CSS Reset Snippet

Frameworks are really popular on the web today and most CSS framework you will find (such as Blueprint which I like a lot) will include its own reset section. The most commonly used reset snippet is the one originally crafted by Eric Meyer. Let’s have a look at his snippet:

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

As Eric himself advocates, you shouldn’t feel a need to just stick this in your next new project and not touch any of the parameters. The idea of the CSS reset is to tweak it to your needs, including colors and backgrounds.

Personally I usually use a 1.5 line height and therefore adjust the reset style accordingly. If there are elements that you would prefer to keep using the user-agent stylesheet, you can easily remove them from the reset, giving you ultimate flexibility over how you begin your project.

This brings us to the core of the reset philosophy (that sounded deep!), to create a common starting point where your tags behave the same across all browsers, regardless of what the user-agent stylesheet says. By starting off with a reset stylesheet you have the freedom of building a website out of your ideas and in my opinion much faster since you won’t be dealing with bugs due to these default inconsistencies.

Conclusion

Using a CSS reset is a powerful way of quickly achieving a good starting point for your design, allowing you to save time and clutter when coding. Instead of blatantly resetting everything you should find the tags you commonly want to reset and choose default values that work well according to each project individually.

Whether this means crafting your very own reset statement (which I can highly recommend) or using and tweaking one of the ones that have already been made, you have much to gain from using this in your projects.

Using a Proper CSS Reset vs. Quick Blunt Wildcard Reset published at XLD Studios

Just click on the preview image or the title of the font to go to a site where you can conveniently download a package of the font. All of them are free in at least one variation while some are free in some weights and payware in others.

Museo

Fontin Sans

Homestead

Jura

Quicksand

League Gothic

Lane

Franchise Bold

Neuton

Powdah

10 Free Modern Fonts You Just Need To Have published at XLD Studios

So with that, I’d suggest that you take a look at the Mojo Themes Bundle because it expires in just a few days!

WordPress Theme Bundle—Save Some Money Off Good Themes! published at XLD Studios

I’ve just uploaded a seasonal twist to our header, including some snow around the logo which goes perfect with December. Who knows, maybe you’ll see fireworks appearing closer to New Years. *hint*

Tip: A seasonal tweak is always a good way to play around and change your design slightly a few times a year. Most visitors appreciate seeing the twist too!

Updating The Site With A Seasonal Feel published at XLD Studios

The highlights today include some changes that do make some impact for websites and overall are nice changes which I urge you to read at the official Google blog.

Google Announces Changes To Algorithm published at XLD Studios

Does that sound like a reality for you? Even if it doesn’t yet you can take some precautions to prevent this from happening. While you could use another plugin and create a custom role for your client to use, many of our clients like their accounts to be the full administrator account and they also want to be able to install new plugins and disable them at their wish.

Luckily, there is another way to go about this. Below is a small snippet of code thanks to Steve Taylor, that removes the disable link from the plugins you insert. Let’s have a look at the code:

add_filter( 'plugin_action_links', 'disable_plugin_deactivation', 10, 4 );
function disable_plugin_deactivation( $actions, $plugin_file, $plugin_data, $context ) {
	// Removes edit link for all plugins
	if ( array_key_exists( 'edit', $actions ) )
		unset( $actions['edit'] );
	// Removes the deactivate link for the plugins you specify
	if ( array_key_exists( 'deactivate', $actions ) && in_array( $plugin_file, array(
		'facebook-open-graph-meta-in-wordpress/fbogmeta.php',
		'wp-pagenavi/wp-pagenavi.php'
	)))
		unset( $actions['deactivate'] );
	return $actions;
}

The snippet, which should be placed in your functions.php file will go through and remove the deactivate link if the files specified in the latter array exists in the plugin list.

The paths to the main plugin files are relative from the /wp-content/plugins/ directory and you can just add to the array as needed.

Note: Naturally, this does not prevent the client from finding out the deactivation link by him-/herself and running it anyway, or just signing in to the FTP and removing the plugin from there. However this has never been an issue for me personally.

Stop Clients From Disabling Plugins in WordPress published at XLD Studios

We built the website using the latest standards both by using HTML5 but also by using some of the new features in WordPress 3 to create a powerful yet easy to use backend. Let me a take a few moments to go through the new website with you.

Built Using the Latest Standards

The Grill’s new website is built using HTML5, using the Modernizr framework to allow older browsers to see and recognize the website properly, supporting all browsers apart from Internet Explorer 6.

For flexibility, two grid systems are used throughout the website. Firstly, the main structure is built up by the 960 grid system which makes it easy to quickly develop a website. In order to make it easy for the client to continue updating the website, we use a second, fractional (percentage based) grid system to create and build columns for the content pages.

Running on WordPress

For this website, we decided that WordPress would be a good fit for the client since it is a smaller Content Management System (CMS) that is easy to learn and also isn’t too heavy for a simpler website.

Thanks to the new custom post types in WordPress 3, we have set up a custom section for posting and managing ongoing specials.

Making the site easy to update and maintain was crucial and the WordPress Shortcodes API helps us build some useful shortcodes for the client to be able to add elements such as columns to posts and pages without having to write any code.

The Grill’s website is the first website we launch based on our own Ilmenite framework. This framework is solely used inside of XLD Studios for all of our WordPress themes, giving us a good starting base for themes, allowing us to start from a pre-packed bundle that contains what we normally use in a WordPress theme.

Launching A New Website for The Grill in San Fransisco published at XLD Studios

If you are unfamiliar with the Open Graph Protocol, I encourage you to go back and read my earlier post about it.

Did you came here just to grab the code? Skip the article and go right to the bottom!

There Are Three Ways…

You can go about adding the Open Graph Protocol tags to your WordPress theme in three different ways:

1. Right into your header.php.
2. Into your functions.php and calling the header hooks.
3. Using a plugin to do the work.

For this tutorial, we are going to use the second way, creating a function that adds these tags by calling the wp_head hook. Why you ask? By adding the code in functions.php, it is easier to change your header file out and keep this snippet when creating new themes. It is ultimately more flexible and cleans up your header.php file.

As an added bonus, it helps you if you have more than one header.php file by just hooking into the wp_head(); function. Instead of adding it to many files, you only need to change this once.

So Let’s Create The Functions!

To add the Open Graph Protocol tags, we need two functions. One for the language attributes, hooking into the <html> tag, and one for the actual meta tags themselves, hooking into the wp_head section which has to be called in the header.php file.

Adding The Language Attributes

When it comes to the language attributes, the code is very simple and straightforward. All we are doing is creating a function (so that we can pass it on to the language_attributes hook) and having it output the correct piece of code.

/**
 * Adds Open Graph Language Attributes
 **/

function add_opengraph_lang($output) {
	$output = 'xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"';
}

add_filter('language_attributes', 'add_opengraph_lang');

Dropping this code anywhere in your functions.php will make sure the two xmlns attribute definitions show up in the file source of all pages.

Adding the Open Graph Protocol Meta Properties

The code for the meta properties is slightly longer but isn’t that much more complicated. The only reason why it is longer (apart from containing more fields) is because we need to use some logic (if-statements) to customize the output depending on three factors:

• The page is a single post or page
• The page is the front page
• The post/page has/hasn’t a custom thumbnail

Making It Look Good

First in the function, I make sure to add a line break and a comment just to clean up the code and make it nicer to view in the source.

Setting The Tags That Don’t Change

Next up, there are a few meta tags that do not depend on the three factors. The first of these tags is the compulsory Facebook user ID which you will need to replace with your own ID. You can find our your ID by going to this link, replacing erikbernskiold with your own Facebook username.

Single Pages/Posts Require Specific Tags

Now begins the logic. For single posts or pages we want Facebook to display the post or page title as well as setting its “type” parameter to be “article” in accordance with their guidelines.

Front Pages and Main Blog Page Needs Custom Treatment

For the front page however, we want to make sure it just doesn’t simply say “Home” when viewed on Facebook. This would be the case if a custom front page is used on the site. In addition to this, we are checking to see if the page is the home page, a denomination used by WordPress to indicate the blog listing page. Should we just get “the_title” on the blog page, we would end up with the title of the first post.

Finally here we define the content type to be “website”, a generic term that is used for the home page without a clear focus.

Checking For Post Thumbnails

If your blog post has a custom post thumbnail added to it, this next snippet automatically grabs that to use as the preview image. If you do not however, as will be the case with many pages, including the home page, a default image must be specified to be used instead.

Making It Look Nice Again

Finally we finish up with a closing comment and a clean line break.

The Code For This Function

Now that I’m done explaining what the code does, here it is:

function add_opengraph() {
	global $post; // Ensures we can use post variables outside the loop

	echo "\n <!-- Start Facebook Open Graph Protocol --> \n";

	// Start with some values that don't change.
	echo "<meta property=\"fb:admins\" content=\"YOUR FACEBOOK USER ID\"/>\n"; // Insert your Facebook user ID in here
	echo "<meta property=\"og:site_name\" content=\"". get_bloginfo('name') ."\"/>\n"; // Sets the site name to the one in your WordPress settings
	echo "<meta property=\"og:url\" content=\"" . get_permalink() . "\"/>\n"; // Gets the permalink to the post/page

	if (is_singular()) { // If we are on a blog post/page
        echo "<meta property=\"og:title\" content=\"" . get_the_title() . "\"/>\n"; // Gets the page title
        echo "<meta property=\"og:type\" content=\"article\"/>\n"; // Sets the content type to be article.
    } elseif(is_front_page() or is_home()) { // If it is the front page or home page
    	echo "<meta property=\"og:title\" content=\"" . get_bloginfo('name') . "\"/>\n"; // Get the site title
    	echo "<meta property=\"og:type\" content=\"website\"/>\n"; // Sets the content type to be website.
    }

	if(has_post_thumbnail( $post->ID )) { // If the post has a featured image.
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo "<meta property=\"og:image\" content=\"" . esc_attr( $thumbnail[0] ) . "\"/>\n"; // If it has a featured image, then display this for Facebook
	} else {
		$main_image = "http://example.com/image.jpg"; // Replace this with a link to a default preview image.
		echo "<meta property=\"og:image\" content=\"" . $main_image . "\"/>\n";
	}

	echo "<!-- / End Facebook Open Graph Protocol --> \n \n";
}

add_action( 'wp_head', 'add_opengraph', 5 );

I Just Want the Code!

If you came to this article and just want the code to copy and paste, this section is for you. Just paste the following code into your functions.php file, setting your Facebook User ID and default image where told to.

/**
 * Adds Open Graph Language Attributes
 **/

function add_opengraph_lang($output) {
	$output = 'xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"';
}

add_filter('language_attributes', 'add_opengraph_lang');

/**
 * Adds Open Graph Tags to Header
 **/

function add_opengraph() {
	global $post; // Ensures we can use post variables outside the loop

	echo "\n <!-- Start Facebook Open Graph Protocol --> \n";

	// Start with some values that don't change.
	echo "<meta property=\"fb:admins\" content=\"YOUR FACEBOOK USER ID\"/>\n"; // Insert your Facebook user ID in here
	echo "<meta property=\"og:site_name\" content=\"". get_bloginfo('name') ."\"/>\n"; // Sets the site name to the one in your WordPress settings
	echo "<meta property=\"og:url\" content=\"" . get_permalink() . "\"/>\n"; // Gets the permalink to the post/page

	if (is_singular()) { // If we are on a blog post/page
        echo "<meta property=\"og:title\" content=\"" . get_the_title() . "\"/>\n"; // Gets the page title
        echo "<meta property=\"og:type\" content=\"article\"/>\n"; // Sets the content type to be article.
    } elseif(is_front_page() or is_home()) { // If it is the front page or home page
    	echo "<meta property=\"og:title\" content=\"" . get_bloginfo('name') . "\"/>\n"; // Get the site title
    	echo "<meta property=\"og:type\" content=\"website\"/>\n"; // Sets the content type to be website.
    }

	if(has_post_thumbnail( $post->ID )) { // If the post has a featured image.
		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo "<meta property=\"og:image\" content=\"" . esc_attr( $thumbnail[0] ) . "\"/>\n"; // If it has a featured image, then display this for Facebook
	} else {
		$main_image = "http://example.com/image.jpg"; // Replace this with a link to a default preview image.
		echo "<meta property=\"og:image\" content=\"" . $main_image . "\"/>\n";
	}

	echo "<!-- / End Facebook Open Graph Protocol --> \n \n";
}

add_action( 'wp_head', 'add_opengraph', 5 );

Adding the Open Graph Protocol to Your WordPress Theme published at XLD Studios

If you haven’t played around with it, jQuery Mobile can do some pretty amazing things all for free and with minimal development time. For businesses that need a quick web application or an internal application, we would recommend jQuery Mobile because of its simplicity and reduced cost.

jQuery Mobile Has Gone Final. Version 1.0 Is Released! published at XLD Studios

What you might not be aware of is that Facebook easily allows you to do this using their Open Graph tags that you can embed on your page. In this article I will explain how to include them and what each tag does.

What are Open Graph Tags?

Open Graph Tags are nothing special in terms of HTML. They are just a series of custom meta tags that Facebook itself reads when scanning a page. Here is what Facebook says in their developer documentation:

The tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future.

The main benefit of these tags is that you get to customize how Facebook reads the links that people like or share from your site. You get to control the title, description and featured image instead of leaving that up to the person sharing your content. This gives you consistent control over branding.

The Tags Your Must Include

Facebook has chosen to require you to use a minimum amount of tags if you are going to use them at all. Fortunately, they are all tags that you would want to use. In no particular order, the tags are: og:title, og: type, og:image and og:url. Facebook also asks (forcefully) that you include fb:app_id or fb:admins.

In addition, Facebook recommends that you also add og:site_name and og:description to the header.

Furthermore, to make sure the tags are easier understood, include the following in your <html> opening tag, following the type specification: xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml"

This would make the head look like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
   <head>

What Do The Tags Do?

Now that we have gotten down the basics of what open meta tags are and what Facebook requires of you, let’s have a look at what each of these tags do specifically and what the markup is to add them. All of the tags are prefixed by og: (for open graph) and the word following is usually pretty self-explanatory.

og:title

Consider this as an equivalent of your HTML <h1> tag or whatever tag you are using for your page headline. This is used to grab the title of the link when sharing a link to Facebook. The benefit of specifying this in an open graph tag is that you can exclude your site name if you’d like, something which likely is in your page <title> tag.

<meta property="og:title" content="5 Time Saving Notebooks and Sketchbooks for Web Designers"/>

og:type

One of the less self-explanatory tags is the og:type tag. Basically, since Open Graph is a protocol used to interact with your Facebook profile and experience, types are a number of pre-defined, real-life objects that say something about the contents of the page. If you are posting a review of a book you would want to use “book” as the type as an example. Facebook offers a comprehensive list of support type objects on their developer page.

<meta property="og:type" content="article" />

og:image

The preview image that shows up when you share a link on Facebook can be fully customized. Not a lot of people are aware of this and even fewer take advantage of it. By default, if this tag isn’t specified, Facebook will load all of the images on the site and give the person sharing the link a choice. This means that ads can definitely be used to share your article, something far from ideal.

Instead make sure that you include this tag on your page and control how it appears. Square images work best, although any will suffice.

<meta property="og:image" content="http://www.xldstudios.com/wp-content/uploads/2011/11/p2-large-200x200.jpg"/>

og:url

There’s not much to say about this tag, other than the fact that it does what you think it would do. When specifying this in your header, it should indeed contain a link back to the article that you are sharing. It’s just another way of making sure Facebook gets the right metadata for your link.

<meta property="og:url" content="http://www.xldstudios.com/2011/11/02/5-time-saving-notebooks-and-sketchbooks-for-web-designers/"/>

fb:app_id/fb:admins

Facebook really likes to know which of their users or pages are connecting with Facebook to use the open meta tags. If you want to use all the power of a Facebook application as a base for your website sharing, you should go ahead and use the fb:app_id tag and enter the ID of the app that you create.

If you on the other hand just like to connect your website with Facebook’s sharing functions via your personal account, using the fb:admins tag and your own User ID (not your username or nice name, but the numerical ID) will be just enough.

<meta property="fb:admins" content="2618000377458"/>

og:site_name

Another tag that is rather self-explanatory is og:site_name. Just fill it with the normal name of your website as Facebook uses this as a base to write from where a user shared the content.

<meta property="og:site_name" content="XLD Studios"/>

og:description

Finally, just like any search engine needs a good description, so does your page that is destined to be shared on Facebook. By specifying a custom description, you can control what appears when a user shares the content on Facebook and can try to tailor it so that more users click on the link and read your article, or keep sharing it.

<meta property="og:description" content="Explore 5 different notebooks and sketchbooks perfect for the designer wishing to do sketches away from the computer."/>

WordPress Users: How Do You Do This?

If you are using WordPress you need to think in a slightly more dynamic way if you choose to add the tags by hand to your header.php, or through your functions.php, hooking into the WordPress wp_head(); function.

Later this week, I will be showing you how to set your theme up for the Open Graph tags in a good way, using proper WordPress coding principles and supporting all of the parameters discussed here today, including setting an image tag that will for blog entries be the same as your featured image and for your home page be a custom logo that you can set. Stay tuned for the article.

If you would rather use a plugin, basic support (the tags discussed in this article with the exception of the image tag) is included in the WordPress SEO plugin by Yoast. This is currently the plugin that we use on new websites that we build here at XLD Studios and favor it over competing solutions such as All in One SEO and SEO Ultimate.

Conclusion

Adding Open Graph Tags to your page header will help ensure that your content is shared in a more favorable way on Facebook. If you dig deeper into Facebook’s Open Graph protocol though, you will find all sorts of more advanced use for it, where sharing is just the tip of the ice berg.

Given how easy it is to gain control over how links from your site appears on Facebook, it is something you ought to consider just doing.

Don’t forget to use the Facebook developer site article on the Open Graph Protocol as a reference.

Add Facebook Preview Image, Title and Description with the Open Graph Protocol published at XLD Studios

Here’s the plea from the WordPress team themselves:

As always, plugin and theme authors, PLEASE test your code against the beta so you can catch any incompatibilities now rather than after your users update their WordPress installation and find bugs for you. This time we really mean it, especially if your plugin uses jQuery. We’ve now updated to jQuery 1.7 in core, so please please pretty please check your plugins and themes against beta 3.

Time To Try WordPress 3.3 Beta 3 published at XLD Studios

However, you should try! Here is the code which detects the purpose of the loading of the page and sends you (if it is previewing your page) to a custom HTML page that has the custom preview logo.

<script>if(window.navigator&&window.navigator.loadPurpose==="preview"){window.location.href="https://www.icloud.com/topsites_preview/"
};</script>

Custom Safari Topsites Preview like iCloud, Is it possible? published at XLD Studios

Disclaimer: The advice on clothing in this article is targeted at men. I would love to hear from women on the equivalent clothing for you to include in this article with attribution to you.

Clothing Shows Seriousness

The way you dress clearly shows how serious you are about their business. If you are the business owner or CEO of your own or a small company, you are still the top person. In other companies outside the creative sphere it is the norm to see executives dress in a suit (with or without tie) or at least a suit jacket. Given that this is business standard today, you should do the same. This shows your prospective client that you are serious about their business and that you value their company and business.

Additionally, we perceive humans by the way they dress and people dressed in suits or similar often come across better than people in the casual T-Shirt when it comes to business. Take advantage of this notion when dressing and get a head start directly.

Show Creativity Subtly

Wearing a suit doesn’t have to be boring. There are plenty of ways to show creativeness while wearing a suit jacket, without resorting to weird color combinations, or buying a suit with bright orange button holes. Spice it up with other accessories while still keeping the professional feel.

Creativity is as much about a perfect and well balanced combination as sticking out. It is a common misconception that you must stand out with colors when you dress. Instead you could just as easily stand out by choosing each part of your outfit carefully, making sure it matches perfectly. Trust me, it will show.

How Should I Dress?

First of all, strongly consider wearing a suit if the company you are meeting with would wear it. You could very well leave the tie out of the suit, although wearing one is good if the company you have a meeting with usually wears ties.

If you want to dress down a bit from the suit, you have the option to taking a dress shirt and suit trousers, once again with or without a tie. Leaving the suit jacket out makes it more casual while still keeping a professional approach.

Another option is wearing dark blue jeans together with a matching darker suit jacket. Remember that blue is a good business color both for shirts and suits. When it comes to suits though, keep it dark for formal business.

For more direct dress advice, consider listening to this two-part podcast (Part 1, Part 2) by the folks at Manager Tools who definitely know what they are talking about.

Conclusion

By dressing appropriately for your client, you not only show them that you are serious about their business but it gives you a head start. Not dressing up could make it much harder for you to land the bigger clients, who might expect a CEO of a firm to dress the way CEOs normally dress.

Invest in your clothing and you will begin to see the results directly, even in your bottom line.

Dress Right For Client Meetings And Close The Deal published at XLD Studios

Our collection here includes both different and similar types of notebooks and sketchbooks so make sure you look at them all to find the one(s) you like the most!

Do you like this post? How about subscribing to our RSS Feed or following us on Twitter?

Moleskine

Moleskine makes some of the most loved notebooks by creative people in the world. They are beautifully designed in that they are very simplistic. Another bonus with the Moleskine is that they come in a wide range of formats depending on what you need. I like to keep a plain notebook around simply because I can both write and draw in it.

You might also want to consider their storyboard version which can easily be adapted for webdesign drawing.

Web Design Sketchbook

The Web Design Sketchbook contains pages for both drawing and planning. First in the sketchbook are design and content planning questions to help to nail objectives and structure while then featuring brainstorming pages with browser chrome and grids.

What’s particularly neat with this is that they offer you a full downloadable version of it if you want to print it out yourself. If you prefer to get it spiral bound, you can buy the printed sketchbook directly from them.

UI Stencils

Another option with a sketchpad including a browser chrome on each page is the UI Stencils Browser Sketch Pad. However, it isn’t the paper pad that gets me the most excited, but their Website Stencil Kit that includes stencils of nice UI icons to use in your sketches.

While the Stencil Kit is fairly expensive, it is nice to work with and for someone who can’t draw very well, it ups my sketches and makes it easier for my clients to see what I have in mind.

960.gs Sketch Sheets

As part of the 960.gs download, you get a folder with sketch sheets that you can print out using your own printer. They include two versions of all their column layout. One page with a big browser chrome and space for notes and one four-up display with the same info.

Paper Browser

Paper Browser is another print yourself wireframing tool. It has two types of pages, one quick sketch with just a dotted grid and some base guidelines for helping you get the main wireframe done. A second browser sketch page is offered with a grid layout and full browser chrome to help you design the finer elements of the website.

They are also taking pre-orders for a physical notebook if you want to carry something bigger with you. It looks elegant and is one that I am definitely ordering once it comes out.

Conclusion

There are many notebooks to choose from and you might need to try a few before finding your own favorite. Do you have another favorite than anyone that we listed? Let us know in the comments!

5 Time Saving Notebooks and Sketchbooks for Web Designers published at XLD Studios

What Characterizes Odd and Even Numbers?

The key to making this function is realizing what makes odd and even numbers be odd and even. Thinking about it for a minute, even numbers are even because they can be split in half or to put it mathematically correct, they can always be divided by two. Odd numbers are the numbers that cannot be divided by two, or simply the remaining ones.

Writing The PHP

Using the basics of odd and even numbers, we can easily conclude that the following if-statement will check whether a number (here contained in the variable $number) is even or not:

$number = 2;
if ($number % 2 == 0) { echo "Even!"; } else { echo "Odd!"; }

We can however take this one step further to help ourself be more efficient.

Turning It Into A Function

By tweaking the above if-statement a bit, it can be turned into a function, allowing us to reuse it across projects and save space and clean up our code.

function is_half($num) {
  if ($num % 2 == 0) {
  return false;
 } else {
    return true;
  }
}

This function is a very basic snippet of PHP that is designed to be used in an if-statement later like this:

if(is_half("2")) { echo "Even!" }

Check For Odd/Even Numbers in PHP published at XLD Studios

Projects start before the contract is signed. Don’t limit your thinking to just the project itself but broaden yourself to include the project proposal and estimate phase. Don’t wait to evaluate this until the project is completed. Immediately after signing a deal, go through the steps here. If a client is slightly unhappy with the proposal experience, why not take the opportunity and change it for the rest of the project which is likely to be a longer period of time anyway.

1.Don’t Wait. Do It Now!

Procrastination just has to be side-stepped. There is no reason to wait with the evaluation and block of a time every month when you sit down and do evaluations. This is dangerous. Waiting with evaluations ultimately results in less than ideal conclusions because you have forgotten much about the experience. Right after the project is completed or after a proposal is accepted, start doing your evaluation.

Keep a file together with the projects (in the business world this is called a delta file) which you can open at any time and quickly jot down a note about something that didn’t go well or that you want to change in the future. Not only will this improve your business in the future, but it will help you right now to remember it until later. Do it not and don’t wait. You will forget, I promise.

By being attentive you have an extra benefit to gain. Clients will be impressed by the fact that you constantly evaluate yourself and do it quickly and swiftly. Not only will you provide a better service in itself but being impressive in the way you do business never hurts.

2. Don’t Make a Fuss About It

Please don’t turn your evaluations into a selling-point by proudly pointing out how attentive you are and that you constantly try to improve and evaluate the project and proposal processes. Even though you might think that this is positive, it is not. By making a fuss out of something that clients will think of as obvious you end up looking like a fool.

Additionally, by making a fuss out of it you shift the focus from the result of the evaluation to the evaluations themselves which just sends the wrong signals. Plus, it makes it seem like another big task that needs to be completed.

3. Think Like Your Client

Much of the evaluation can be done by trying to put yourself in your client’s position. Questions like: How would I have reacted to this email? Would I have understood the meaning of this if I didn’t do this for a living? are good questions to start with. Not only do these provide you with an excellent base for evaluating yourself you can improve instantly by asking such questions before communicating with a client.

Be wary of assuming too much. Just do the basics of communication. Don’t try to ask yourself: “How would I have liked this design?”. You will just end up with a headache and a result that isn’t particularly helpful to you.

4. Don’t Be Afraid To Ask

When you have tried to think like your client, which I advise you do first, ask them. As before, don’t make a big fuss about it. Just ask them a few questions about the project. Make it easy for them. Keep the questions themselves short and try to craft them for a short answer. You don’t want to bother your client with a lot of questions that have very open ended answers. Your client will be impressed that you do ask them about their opinion but don’t abuse their time. The keywords are few, short, targeted with short answers.

5. Collect, Summarize, Review and Improve

Finally, continuously collect the material as a base for your review into a folder or file and then at the end of a project (or proposal) summarize the material you have. By no means should this be long. Again, keeping it short will help yourself. A summary could consist of a few paragraphs just highlighting some improvements that you and your client has put forward.

Once you have a summary, review it and think about how an issue can be addressed and the problem solved. When you do this, clearly write down a short goal for yourself in proper delta file that you review at least every week. This way you don’t forget what you need to do to improve.

Conclusion

You have much to gain from evaluating your projects and proposals as an ongoing process. Not only will it impress your customers but it will help you grow as a person and business by offering a better service. In turn, offering a better service means that you will sign more deals and can end up charging more for the same work, simply because you are better.

5 Steps To Successfully Evaluate All Client Projects And Make Clients Happier published at XLD Studios

However, there are WordPress plugins for everything. So far, a plugin called “Front-end Editor” is the best one I have found, however I want your input. Do you use a frontend editor plugin? If so, which one do you use?

WordPress Front-end Editor Plugin published at XLD Studios

First we are going to set up the shortcode code in the theme and finish off by adding some CSS styles for it to work well on the site. Remember that this is a good asset for you to have across different projects as well.

Crash Course in WordPress Shortcodes

Before getting into the code for this specific shortcode I want to tell you about the WordPress Shortcode API and how it functions. If you already know it, please scroll down to the next section.

You have probably seen plugins use shortcodes all the time. Inserted into posts they look like code but is just normal text which doesn’t mess with the formatting in the editor. Example of such a shortcode is [photo_gallery] or [photo_gallery id="1"].

There are some special attributes required to create shortcodes with options that is not necessary in this tutorial, instead we are going to move right to shortcodes that look like this: [column]My text[/column].

Codes like the last one are called enclosing shortcodes, compared to the self-enclosing codes in the first example. They are used to apply some type of formatting to a block of text or images in-between.

What We Are Going To Create

In order to make some columns that can be used in any area on the site served by the post editor, we are going to turn to making a series of divs that each apply a class to a piece of text. This class is going to be controlled by some CSS to turn the layout into columns.

To allow for different widths, we will create the following fractions: halves, thirds, fourths, fifths and sixths. There is no point in continuing to sevenths as this will be a very small area (just under 15% wide).

Here is where you need to watch out and put your mathematical thinking cap on. We are talking about fractions here, which means you can save yourself some trouble. Instead of creating: one half, two halves; one third, two thirds, three thirds; one fourth, two fourths, three fourths, four fourths; you simply realize that a lot of these fractions are the same thing.

For example: two halves, three thirds and four fourths are all one whole, which defeats the point of a columns as it is. Secondly, two fourths is the same as one half, eliminating the need for that shortcode.

As a result of this, here are the codes that we will need to create: one half, one third, one fourth, one fifth, one sixth, two thirds, three fourths, two fifths, three fifths, four fifths, five sixths.

The Shortcode Code

With the thinking all done (almost), we are ready to get into the actual PHP code. Open up your functions.php file and get ready to create a function.

function theme_shortcode_column($atts, $content = null, $code) {
	return '<div class="'.$code.'">' . do_shortcode(trim($content)) . '</div>';
}

What you have above is a normal WordPress function that is slightly smart. First of all, we create a function that has three variables going into it. These are all standard variables in the Shortcode API which are going to get populated when we define the shortcode.

The Function Itself

First we have $atts which represents arguments going into the shortcode.

Secondly, we have $content = null. This bit pulls in the content of the shortcode and is used for the enclosing shortcodes to define where to place the content between the shortcode opening and closing tags. By setting it to equal null, we set the default value for the content variable, should nothing be sent from the post editor.

Normally, these two are all that would be required to create a simple enclosing shortcode. However, doing it the simple way would force us to create one function for each of the columns. Instead, we are going to introduce a final variable: $code.

The $code variable simply contains the name of the shortcode we write in the post editor, when it equals the name of the shortcode as defined in the functions file. Simplified you could just say it echos the name of the shortcode. We use this to our advantage here to save space, only having to create one function for all our column shortcodes.

Returning The Result

The next line in the function returns the result. Simplifying this and removing all PHP code would turn this into a standard div, with the class of for example: one_third.

Here is where we call the $code variable to print the shortcode variable. This means that the name of the shortcode is going to end up being the name of the class that we use to position our columns.

Instead of just echoing the $content variable by itself, we use another neat WordPress function to make sure that we can use other shortcodes within this shortcode. This function is called do_shortcode and ensures that WordPress recognizes its shortcodes inside of the content being echoed in $content.

Registering the Shortcode

With this smart function created, we just need to make WordPress recognize a new shortcode and use this function as a template for outputting it.

add_shortcode('one_half', 'theme_shortcode_column');

This short snippet tells WordPress to add a shortcode by the name of one_half (making this the shortcode we use) and have it use the function theme_shortcode_column to control how the content appears.

This snippet needs to be repeated for each of the shortcodes we want to add but with just one function.

A Function Variation And Double The Fun

I haven’t been quite honest saying that we only need one function. In fact, we need two. To be able to control the styling and clear the floats used for positioning, a series of “last” shortcodes need to be created. The syntax stays the same, with the addition of just a little div clearing and another function name:

function theme_shortcode_column_last($atts, $content = null, $code) {
	return '<div class="'.str_replace('_last','',$code).' last">' . do_shortcode(trim($content)) . '</div><div class="clearboth"></div>';
}

Also adding the _last appended shortcodes as a new series:

add_shortcode('one_half_last', 'theme_shortcode_column_last');

The Final Code

For your reference, I am pasting the full PHP code here as well as the CSS code required for styling below.

PHP Shortcodes Code

function theme_shortcode_column($atts, $content = null, $code) {
	return '<div class="'.$code.'">' . do_shortcode(trim($content)) . '</div>';
}
function theme_shortcode_column_last($atts, $content = null, $code) {
	return '<div class="'.str_replace('_last','',$code).' last">' . do_shortcode(trim($content)) . '</div><div class="clearboth"></div>';
}

add_shortcode('one_half', 'theme_shortcode_column');
add_shortcode('one_third', 'theme_shortcode_column');
add_shortcode('one_fourth', 'theme_shortcode_column');
add_shortcode('one_fifth', 'theme_shortcode_column');
add_shortcode('one_sixth', 'theme_shortcode_column');

add_shortcode('two_third', 'theme_shortcode_column');
add_shortcode('three_fourth', 'theme_shortcode_column');
add_shortcode('two_fifth', 'theme_shortcode_column');
add_shortcode('three_fifth', 'theme_shortcode_column');
add_shortcode('four_fifth', 'theme_shortcode_column');
add_shortcode('five_sixth', 'theme_shortcode_column');

add_shortcode('one_half_last', 'theme_shortcode_column_last');
add_shortcode('one_third_last', 'theme_shortcode_column_last');
add_shortcode('one_fourth_last', 'theme_shortcode_column_last');
add_shortcode('one_fifth_last', 'theme_shortcode_column_last');
add_shortcode('one_sixth_last', 'theme_shortcode_column_last');

add_shortcode('two_third_last', 'theme_shortcode_column_last');
add_shortcode('three_fourth_last', 'theme_shortcode_column_last');
add_shortcode('two_fifth_last', 'theme_shortcode_column_last');
add_shortcode('three_fifth_last', 'theme_shortcode_column_last');
add_shortcode('four_fifth_last', 'theme_shortcode_column_last');
add_shortcode('five_sixth_last', 'theme_shortcode_column_last');

CSS For Styling The Columns

For speed and ease of use in a project, I have compressed the code to single-line format.

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth { position:relative; margin-right:4%; float:left; min-height:1px; height:auto!important; height:1px; }
.one_half { width:48%; }
.one_third { width:30.6666%; }
.two_third { width:65.3332%; }
.one_fourth { width:22%; }
.two_fourth { width:48%; }
.three_fourth { width:74%; }
.one_fifth { width:16.8%; }
.two_fifth { width:37.6%; }
.three_fifth { width:58.4%; }
.four_fifth { width:79.2%; }
.one_sixth { width:13.3333%; }
.two_sixth { width:30.6666%; }
.three_sixth { width:47.9998%; }
.four_sixth { width:65.3332%; }
.five_sixth { width:82.6665%; }
.last { margin-right:0!important; clear:right; }
.one_half .one_half { margin-right:8.3333%; width:45.8333%; }
.one_half .one_third { margin-right:8.3333%; width:27.7778%; }
.one_half .two_third { margin-right:8.3333%; width:63.8889%; }
.two_third .one_third { margin-right:6.1224%; width:29.2517%; }
.two_third .two_third { margin-right:6.1224%; width:64.6258%; }
.two_third .one_fourth { margin-right:6.1224%; width:20.4082%; }

Conclusion

Using shortcodes is very powerful and especially for creating columns in WordPress, this is a user-friendly way and much more foolproof than entering and preparing divs in the HTML editor.

Have you used shortcodes before? Is this useful for you? If you have any ideas on how to make the columns shortcode better or improve upon this, or have a good example of how you used this shortcode, please share it with us.

Create Columns in the WordPress Post Editor With a Custom Shortcode published at XLD Studios

Quality is King

Regardless of which tips you use below, one this is for certain.Don’t even try to add low-quality images that are heavily compressed or scaled up from a small size. All you are doing is planting a bad feeling with your visitors. If you are going to use images (and you should), make sure they are tack sharp!

It isn’t enough with images that are technically right in exposure and sharpness though. A common snapshot isn’t enough. Hire a professional photographer to take engaging photos specifically for your site that capture the feeling that you want to convey.

Show Your Physical Location

Obviously, this point only applies if you have a physical location such as a store or showroom or if you provide services dependent on a location. Don’t be afraid to show off your offices on your website as this can be a big selling point. Example: You sell flowers. Showing a well decorated store full of flowers will have your potential customers wanting to go to your store because it looks nice. Another example: You are a law firm. Displaying your modern offices to clients will fill them with a sense that you are professional and want to visit you.

You don’t want to place these photos anywhere on the site. Inserting them on a page specifically describing your store/showroom/offices is perfect. If you don’t have a page like that, consider adding them to your “about us” page.

Staff Photos Can Make a Difference

Read carefully. This first bit is very important. Some industries should be very cautious about taking this advice. If your company does medical care or deal with unstable people, you might want to consider not having staff photographs on your website. Instead of being a positive element, it may put employees at risk. Before making a decision to put photos online, speak to your employees and see how they feel about it.

That being said, business is built on trust. Humans are going to trust a face more easily than a name. By having photos and descriptions of your staff on your website, you help to connect the expertise that you want to show with your potential clients. Instead of only reading about whom they are about to deal with, they can see the face of the person. At the end of the day, you are much more likely to gain a client this way.

Use Faces To Your Advantage

Following from the previous point, faces are good in general on your website as humans react to human faces. People spend more time looking at your site when they are able to connect with a fellow human being, even if it is through an image.

In a little experiment, Usable World tracked visitors eye movements across sites with faces. Interestingly enough, it is not just the presence of an image that matters but where they are looking. People tend to look where the person in the photo is looking. Use this to your advantage. Place a photo on your website that looks over where you want your visitors to look and watch the conversion rate go right up.

Conclusion

Images are truly powerful in making your pages more engaging. Perhaps the most interesting bit is that people look where a subject in a photo is looking.

While the concept of images are easier implemented on some types of websites, most companies online today should be able to take advantage of images to raise the conversion rate of their pages.

These are just some tips on how images make your site more effective and we know there are more. Do you have a good example of how images made a site better? What has your experience taught you? We’d love to hear your stories!

Make Your Website More Engaging With Good Images published at XLD Studios

Note: WordPress 3.3 beta 2 is unfinished and unstable software that should only be used for testing purposes and not on live, production websites.

• Updated the Blue theme
• Fixed IE7 and RTL support
• Improved flyout menu styling and fixed several glitches
• Finished the Pointers implementation
• Landed the dashboard Welcome box for new installs
• Improved contextual help styling
• Tweaked the admin bar a little more
• Fixed a bunch of bugs

WordPress 3.3 Beta 2 Is Available published at XLD Studios

Visit Subtle Patterns and search and see what you might be able to use on there for your next project.

Another Freebie Resource: Subtle Patterns published at XLD Studios

The Open Source Exchange Rates API works great though, providing a JSON formatted API which is easy to pull in and use in a number of programming languages. It is as you understand, fully free and also updated every hour with the latest currency data. On their website they have proper documentation on how to use the API.

Open Source Exchange Rates API published at XLD Studios

Just head over to his website and download the Photoshop file.

Freebie Resource: iOS 5 GUI PSD for iPhone published at XLD Studios

The free webinar will be live on October 18 at 2p.m Eastern Time (what time is this for me?) and a replay will be available afterwards if you cannot make it. As always though, the live webinar will have time for your questions so it is more beneficial to join in live.

Join Our Free “Boosting Your WordPress Site’s Performance” Webinar on October 18 published at XLD Studios

The Javascript

It isn’t really that hard of a javascript snippet. First we set up a variable (named URL here) which grabs the value of our selected url list based on the class applied to the list. Finally it loads this URL into the address bar and submits it. I have bolded the two bits of the snippet that needs to be replaced with the name of the form in the HTML code.

<script language="javascript">
	function gotosite() {
		var URL = document.event_type_selector.url_list.options[document.event_type_selector.url_list.selectedIndex].value; window.location.href = URL;
	}
</script>

The HTML

This is really just a standard drop-down box in a form element that calls the javascript function. The only thing to pay attention to is the name given to the form which is used in the javascript selector above (bolded).

<form name="event_type_selector" method="post" action="#">
	<select name="url_list" class="event-type-selector-dropdown" onchange="gotosite()">
		<option value="" selected="selected" disabled="disabled">Please select...</option>
		<option value="?id=1">Option 1</option>
		<option value="?id=2">Option 2</option>
		<option value="?id=3">Option 3</option>
	</select>
</form>

Using these two snippets together will render you a nice HTML drop-down box that upon selection takes you to a new URL very useful when filtering results in a sorting list for example.

Javascript Snippet: Go to Site Selected in Drop-down Menu published at XLD Studios

Watch the episode »

Guest Appearance on the Adobe Creative Suite Podcast published at XLD Studios

5 WordPress Plugins Every Site Should Have published at XLD Studios

While it is free to watch it online (as many times as you want) you can purchase a downloadable version for just $14.95 (special introductory price) that you can store locally and watch wherever you are, on any device that you have.

Our Free Basics of Using WordPress Webinar Now Available OnDemand published at XLD Studios

Well, CSS Button is a free beta service that lets you choose from a pre-defined template or start from scratch to create/modify a button. It is much quicker than having to do it manually. Plus, the pre-defined templates are pretty nice and offers a good start for a lot of button needs.

CSS Button Generator Saves Time published at XLD Studios

The free .htaccess redirect generator lets you generate the code for your .htaccess file based on a number of different settings. It is then easy to duplicate and create more rules should you need to. In short, it just helps you get the job done quicker.

Helpful Site: .htaccess Redirect Generator published at XLD Studios

So, today I wanted to share a few of the new really cool things that have been added to WordPress 3.3 that is coming out soon.

Interface Tweaks in WordPress 3.3

Interface Tweaks

Added in WordPress 3.3 is a bunch of smaller, but powerful interface tweaks. The admin bar has lost its gradient which I think is a nice tweak. It has also been cleaned up and offers in general a bit more value in both the site view and in the dashboard. It’s just nice.

What’s perhaps the best interface tweak from a productivity standpoint is the fly-up menus. When you hover over a collapsed sidebar menu, you get a menu right away. Instead of having to click and expand the menu (keeping it there), you can quickly access sub-menu items that you may only want once and don’t want to expand the menu permanently for. Brilliant time saver.

Additionally, the main dashboard theme and layout is being changed to an adaptive one that means it will be more usable on small devices and screen resolutions as its layout will change depending on device, both in terms of functionality and design.

The New Drag-And-Drop File Uploader in WordPress 3.3

Drag-And-Drop File Upload

The media uploader has been pretty much the same through many WordPress versions now and I’m happy that they have decided to give it some love because frankly, it is one of the few parts of the post creation process that isn’t too well liked by many of our clients.

Once again it is a time saver thing. Instead of having to select files from a browser upload window, you can simply drag-and-drop them into an area on the screen and WordPress will upload them right away. Neat and effective.

Another benefit to the uploading process is better handling of scaling images as they have integrated Plupload into WordPress for the uploading process overall, which is what brings you all sorts of goodies.

The New Admin Pointers in WordPress 3.3

Pointers To Help You Get Around

One of the most helpful new features as a theme designer and developer is to see a new pointers feature. This gives developers the ability to guide users around a theme (or WordPress itself) the first time you activate the theme. It is very exciting to think what we are able to do for new clients by integrating a walkthrough at their own pace right in WordPress.

It is probably even more helpful when looking at themes that are being released where users can be given a quick walkthrough when activating, saving the developer some support questions about usage.

Performance Enhancements

As with every new version, there are a bunch of performance enhancements to help WordPress run faster. This is as usual very much appreciated as a CMS unfortunately does load much lower than pure HTML equivalents (nothing weird about that). Every bit of enhancement that can be made towards better performance is a welcome one.

Conclusion

It is good to see that the WordPress developers are implementing some really useful features into this release. In fact, I can’t wait to be able to roll the new WordPress version out on several of our clients’ pages as well as implement the new admin pointers for new themes to help users get to learn how to use it.

Currently there is no scheduled date for when WordPress 3.3 is coming out, but my guess is that we will see it in a couple of months as it is currently still in nightly build versions, changing pretty rapidly.

4 New and Exciting Features in WordPress 3.3 published at XLD Studios

What makes this helpful is that you get to design your graphic while seeing right away how it looks on Facebook’s design. What’s more, they are promising that with every change to the Facebook UI, this file will be reproduced 24 hours later.

Design Resource: Facebook Fan Page GUI PSD published at XLD Studios

A Few Other Solutions and Why I’m Not a Fan

The key to achieving the desired result is basically to single out the posts that need to be on the front page in such a way that they can be filtered in a page template. Perhaps the first way of doing this people think of is categories and tags.

Using a special “frontpage” tag works perfectly until someone inadvertently tags a post about the old Microsoft Frontpage application with “frontpage” and it shows up on the frontpage. While the example may seem far fetched, the risk for inadvertent tagging is obvious.

Getting around this by using a dedicated category is a more secure way but draws attention to the other negative aspect of both these methods: It shows for the user. As a general rule, I like tweaks like this to be invisible to the end site user which rules out using both categories and tags.

The Solution: Sticky Posts!

Let’s get on with the solution that actually works fine and is logical to most webmasters. The idea is the following:

• Whenever a post should appear on the frontpage, mark it as sticky.

However, this brings an interesting problem to the blog listing. Because the sticky posts will appear at the top of the blog listing the solution to the first problem will create a second one. Don’t worry, WordPress has a function you can pass to the query to solve this. Let’s get started.

Frontpage Template

The code that I use for the front page template is basically a standard WordPress loop, making sure to include the template naming comment at the top.

What is a little bit special is that I create a new custom query using the WP_Query function, passing the post__in option and having that equal posts that are sticky. This is done through the following bit of code: ‘post__in’ => get_option(‘sticky_posts’);

Note that the have_posts() etc. functions change to have $query in front instead of $this.

<?php /*
Template Name: Frontpage
*/ ?>
<?php get_header(); ?>

		<?php $query = new WP_Query(array( // Creating a custom Query
			'post__in'  => get_option( 'sticky_posts' ) // Only including posts that are sticky
		)); ?>

		<?php if($query->have_posts()) : ?><?php while($query->have_posts()) : $query->the_post(); ?>

			<?php get_template_part('content',get_post_format()); ?>

		<?php endwhile; ?>

		<?php else : ?>

			<h1>No Content Could Be Found</h1>

			<p>No content could be found for your query.</p>

		<?php endif; ?>

	<?php get_sidebar(); ?>

<?php get_footer(); ?>

You can use the code here yourself if you like, however the best is to modify your own template so that you don’t miss out on any special tags or features.

Template For Blog Page

For the blog page, you don’t need to be working on a special page template as WordPress will automatically use the index.php file if applicable. In the code example below I am only including the start of the loop:

<?php $query = new WP_Query(array(
					'ignore_sticky_posts' => 1
				)); ?>

				<?php if($query->have_posts()) : ?><?php while($query->have_posts()) : $query->the_post(); ?>

For the index page, I choose to go the same route by creating another custom query. The importance is that you pass the option ‘ignore_sticky_posts’ => 1 to the query. With this enabled (set to 1), all sticky posts will appear sorted by post dates and have their stickiness ignored on the blog page.

Conclusion

This is my favorite way of doing this even though it has one major flaw of itself. If the blog in question plans to also utilize the sticky posts feature, you would have to go with one of the other workarounds for this such as setting a custom field value and checking for that on the front page.

How-to: Manually Select Posts on Frontpage Using Sticky Posts published at XLD Studios

The BuddyPress team has released the latest version of BuddyPress, version 1.5, adding considerable improvements especially in the integration part. If you don’t know about BuddyPress, it is a major social plugin for WordPress, allowing you to use the user system in the front end of the website, complete with groups, forums and profiles.

New in 1.5 is apart from the usual ton of bug fixes and minor enhancement are a few more major features. First of all, they have reworked the default theme to behave and look better. Additionally, the integration with WordPress core is much tighter. BuddyPress now has support for the built in menu system and the admin bar.

Other news are a brand-new installation and update wizard as well as improved profile field management.

BuddyPress is freely available through the WordPress repository (you can install it from your dashboard like any other plugin). They also have their own plugin website with support and a community which provides both help and plugins for BuddyPress itself.

BuddyPress 1.5 Is Available—Major Integration Improvements! published at XLD Studios

It feels like I am constantly wading through image slider plugins in search of the most versatile one for me. This time I feel like I have gotten closer to being able to stick with one. Orbit is a neat jQuery plugin that out of the box looks great on your page and uses a very simple markup.

After including the orbit files in the header of your page, all you need is a very simple markup that actually goes very well with the markup you might already have written prior to implementing the slider. Since Orbit is coded in a way that it determines the width and height of your images automatically you don’t need to add any special CSS to your stylesheet (other than including the orbit css).

What I like the most about Orbit so far is that it is simple and doesn’t interfere. I normally write my code first and include the slider later and I hate having to go in and add the necessary slider container CSS myself. With orbit, I don’t need to worry about that as the plugin will do that for me.

You can go and check out Orbit over on its project website where you’ll also find all documentation and instructions.

Orbit: A Simple and Slick jQuery Slider published at XLD Studios

In this WordPress webinar will learn how categories, tags, posts, pages and media work and how you can add and manage them. Additionally, you will learn what some of the WordPress set up settings do and what happens when you change them.

It is free to register but as places are limited, we ask that you do register in advance here.

Free Basics of Using WordPress Webinar on September 14th published at XLD Studios

To make the including easier, I usually create a simple function and leave in my functions.php for projects when I need to include custom fields, either to print them out or use in an if-statement. In this article, I’d like to show you how that is done.

First of all, the Standard Code

Let’s start by having a look at the piece of code that is normally used to retrieve a custom field value from a WordPress template:

<?php $custom_field = get_post_meta($post->ID, 'custom-field-key', true); ?>

The second part of the code, the get_post_meta(); function is what loads the value of the custom field. To make this easily used in an if-statement or to echo while being able to hide the, relatively long, function, I choose to save this to a variable.

Making the Function

Looking at the code above, there are only two things that will change each time you load a new custom field, the variable and the custom field key. By having the key also be the variable name it can easily be simplified to a function and then printed.

<?php
function print_custom_field($custom_field) {
	global $post;
	$custom_field = get_post_meta($post->ID, $custom_field, true);
	echo $custom_field;
}
?>

This is just a basic PHP function, passing in the variable $custom_field for use anywhere in it. In order for it to pull the custom field from the correct post, you need to make sure to include the $post variable as a global. I choose here to name the variable after the key to keep it simple. You can name the function anything you want, as long as it doesn’t clash with the built in functions in WordPress.

Calling this function would be done like this:

<?php print_custom_field('author-information'); ?>

This would grab the information from the “author-information” custom field and print it where you call the function.

Tweaking for Use in IF-clause

Since the function above will as a final step, echo out the value of the field, it cannot be used in an if-clause. A slight tweak to the function however, will allow it to.

<?php
function get_custom_field($custom_field) {
	global $post;
	$custom_field = get_post_meta($post->ID, $custom_field, true);
	return $custom_field;
}
?>

By simply removing the echo part and renaming the function, you can have one function to print a custom field and one to simple get it. The usage of this would be like this if you want to check whether the custom field is set to a specific value

<?php
if(get_custom_field('application') == "Photoshop") :
    echo "Do Stuff!";
else :
    echo "Do Other Stuff!";
endif;
?>

If you just want to check whether the custom field has a value or not, you can do like this:

<?php
if(get_custom_field('application')) :
    echo "YES!";
endif;
?>

Conclusion

This is perhaps a function that ought to be available in WordPress by default, but is easily created for quicker use in your theme files and is going to save a lot of lines of code and make your template cleaner.

Simple WordPress Function That Prints Custom Field Value published at XLD Studios

In this roundup, we take a look at 15 pricing table designs that all look gorgeous and drill down to what the main features of the tables are before finishing up with a conclusion on the current popular trends in pricing tables and what you should consider doing when in charge of designing such a table.

You can use this post in two ways, either as a source of inspiration for your project, or to learn what techniques are out there or why not combine the two reasons?

Big Cartel

Over at Big Cartel, they have a pricing table that cleanly lays out what is included in each package with one feature per line. The table has a gradient from blue to green, indicating growth in the plans to the right. The use of black for the free plan and the subtly faded feature indicate that it is not as good as the paid plans, which Big Cartel wants to highlight to the customer.

Crazyegg

Crazyegg have a reversed table, going from the most expensive plan to the cheapest in the normal left to right reading order. They are highlighting one of their plans by making its box slightly larger than the other, causing the eye to fall on it right away. With a slight outer glow, it draws attention to the featured plan while not taking over the design. Each feature has its own line, giving a clear comparison of each plan.

Dropbox

Dropbox has a different approach. With a vertical table they highlight the three different plans available. Instead of putting emphasis on the different features, they highlight the plan name which indicate the space difference for each of the different plans. This makes for a very clean pricing table.

Eleven2

To highlight the different web hosting solutions offered by Eleven2, they have decided on a table that shows the main features of each type of solution in a row that makes it easy to compare the three. By adding tags to the top of certain solutions, they manage to draw attention to it as something special.

Floom

Floom also chooses to highlight their plans in the reverse order from most expensive to least expensive, with their target plan enlarged, making the eye fall immediately on it.

Getquantify

Doing the classic approach with least expensive to most expensive is Getquantify who choose to highlight their recommended plan with a lighter background and green corners. It doesn’t make it stand out quite as much as the enlarged examples however offers a very kind approach to upselling.

Launchlist Pro

Launchlist Pro by default has two of their plans subdued and highlights their recommended one to you. When hovering over any other plan that one gets highlighted. When you draw the cursor away, it goes back to highlighting the featured plan. Doing it this way is another subtle way of selling a special product to the customer while still being effective.

LightCMS

At LightCMS they have chosen not to highlight a specific plan but instead present them each with a color from the spectrum/rainbow. By doing this, they naturally make the reader want to progress to the right and learn about the more advanced plans, focusing more on what they offer than their price per month.

MailChimp

Because of the nature of email list provider MailChimp, they have chosen to go with a basic table that clearly lays out the different tiers and how much they cost. Contrary to many other services, MailChimp focus on their free plan as a way to get new customers using their service hoping that their needs will grow beyond what the free plan offers.

onehub

onehub choses, like many others, to present their plans in the reverse order, starting with the most expensive one. To attract interest and focus the customer’s eye, they have chosen to put a light blue background on their featured plan which works well with their overall design.

PressJack

PressJack makes use of two techniques here. First of all, the two non-featured plans are slightly subdued. Secondly, the main plan is not just fully opaque but also highlighted in a much lighter color, drawing your attention immediately to it.

Shopify

Shopify offers customers a standard pricing table with easily compared features along with a nicely colored green to blue gradient. They also make use of the plan highlight by subtly adding a drop-shadow to each side of the featured plan, making it rise above the rest in a surprisingly effective way.

Squarespace

Squarespace has chosen to simply add a little banner at the top of their “Most Popular” plan to indicate that this is the one they want you to go with. To highlight the savings for multi-year contracts, they use a set of buttons above the table that interactively change the pricing and savings when you activate the view. Simple, clean and effective!

Webpop

Webpop goes all in with their pricing table. Not only do they subdue the non-featured plans but the highlight their recommended plan with a banner, color and size. Perhaps it is on the more obtrusive side, but it is one way of designing your pricing table and it does indeed work.

Zendesk

Zendesk, as a final example, has a very elegant display of their plans, using both size and a clever drop-shadow to highlight their most expensive and recommended package, making the rest seem smaller in comparison. By using a splash of color and more text, it makes it seem like the plus package offers much more than the other.

Conclusion

There are many ways of successfully designing a pricing table. The most important factor is however how the customer perceives the tables. When designing these tables, try these different techniques to see which best suits the particular website in its overall design. Don’t be afraid to ask around and do a little survey on what potential customers feel about the different presentations. The last thing you need is a table that invokes irritation with customers.

15 Examples of Gorgeous Pricing Table Designs published at XLD Studios

Even though there are auto-tweet plugins aplenty, none that I have found is quite as extensive as WordTwit Pro. This plugin gives you pretty much what you need to share your links more effectively and saving you more time.

Scheduling Multiple Updates

WordTwit Pro will offer you the option of tweeting your post to the world multiple times of the day. You can choose, on a post-per-post basis, how many times you want it to be tweeted out and, if more than one, how long time that should pass in-between. You can also have your tweets delayed from the start.

It would be thoroughly useful if WordTwit Pro allowed you to set a default setting for this in its settings. Currently, you can only set this per post, which is slightly more time consuming than ideal when you usually use the same time settings for posts.

Post to Multiple Accounts with WordTwit Pro

Tweet to Multiple Accounts

While many freely available plugins allow you to tweet to one account, fewer allow you to set-up more than one account to tweet to. By default, all accounts are selected for each post but this can be customized per post in the WordTwit box.

Even though I typically publish to all accounts that I select, I could see a setting similar to what should be there fore multiple updates. This would be a setting that allowed you to change which accounts it tweets to by default. Maybe there is an account you only occasionally use?

Tweet Controls for a Post

Hashtagging, Tweeting and Short URLs

As you would expect any auto-tweeting plugin to do, WordTwit Pro manages hashtags easily and will of course allow you to customize the tweet for each post.

The plugin has settings that lets you add tracking links for Google Analytics, as well as choose a URL shortening service of your choice and also use the APIs of these service providers. This means that if you have a custom URL set up with bit.ly, WordTwit pro would use this in your tweets.

Conclusion

WordTwit Pro is a paid WordPress plugin but at $39 for a single site license, it is very fairly priced. If you are a developer, you may get a 5 site license for $69 or opt directly for a Pro Unlimited version at $99 that gives you installation rights on an unlimited number of sites, including WP MU installations. There is a free version available which provides a much limited feature-set.

If you need to be able to tweet to multiple accounts or want the added comfort of being able to tweet automatically multiple times of the day, WordTwit Pro is a good fit for you. Even though it does lack some default settings that would highly improve the plugin, it still is a very nice plugin as it is that is far superior to other auto-tweet plugins currently available.

Review: Automatically Tweet Your WordPress Posts with WordTwit Pro published at XLD Studios

Given that WordPress 3.2 is a major upgrade, the risk that it breaks certain themes and plugins is more present than smaller upgrades. Be extra careful if you are using plugins that are mission-critical to your website. Check that the plugins that you use are set as compatible with the new version, or try the upgrade on a test installation before upgrading your production website.

What’s new in 3.2?

It is always nice to see what new features are included in a new WordPress version and this one has quite a few news.

New Dashboard Design

New Dashboard Theme in WordPress 3.2

The Dashboard has been tweaked in terms of design to make it faster and easier to use. Unfortunately the entire dashboard redesign feels a little undone and not near as tidy as the design was in 3.1, where they had fully nailed it.

It is however very nice to see that some wording has been cleaned up, mainly in the menu, to decrease confusion of what a certain selection does.

Distraction Free Writing

New Distraction Free Writing Mode

Maybe the most great new feature in WordPress 3.2, distraction free writing lets you take the post editing full screen. You will end up with the title of the post as well as the post content and a small formatting bar up top. For everyone writing post directly in WordPress, before moving on to formatting after they are written, this new mode should prove to be extremely useful. My one wish is that I could get easy formatting support here with paragraph and heading support.

New Default Theme: Twenty Eleven

The New Twenty Eleven Theme

It is wonderful to see that the WordPress team is keeping its promise to release a new theme every year. With WordPress 3.2 comes Twenty Eleven, a much more modern approach to the Twenty Ten theme featuring some beautiful interface enhancements.

The theme comes with full theme options which by default lets you select a color theme (dark or light) but will offer theme authors a much quicker start to building theme option pages for their themes, if they start with Twenty Eleven as a base.

Updates Only Touch Changed Files

The WordPress auto-update system has been wonderful to work with over the past few years. With WordPress 3.2, the team is taking it a step further to make it better and much faster. From now on, the updater will only modify and replace files that have been changes, leaving unchanged files as they are.

Since this has been a common practice for software developers for many years, it is certainly about time that this came to WordPress as well.

More…

Naturally there are a bunch of speed and performance enhancements included in this release as well as many bug fixes and other neat additions. One extra thing to note is that the requirements for WordPress has been increased to PHP 5.2.4+ and MySQL 5 (which we at XLD Studios fully support).

WordPress 3.2 Released. What’s new? published at XLD Studios

What is it and what does it offer?

Baseline is quite an extensive framework, offering styles for most typography tags as well as forms and tables. As an addition it also offers a grid, which to me is not as useful given the extensive 960 grid system that I tend to lean towards using.

This is a quote from their website:

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

Not All Things Golden Are Gold

I have one issue with the Baseline framework. While it offers some excellent styles, specifically the tables which I find excellent, I am not convinced that this framework is all that I want as a base. The reason is not so much the rarely used tags which are mainly good but rather the main headings and paragraph tags. It takes a while to recover from its reset code and the way the paragraphs are set up.

If you like an indent as a paragraph starter, this should fit you perfectly, if you don’t you will have to work around this to be less “old book style” and more modern.

Conclusion

For the right project I will try to use Baseline, at least a few parts of it such as the tables. In the short time I have had playing around with it so far, I am torn between impressed and finding it useful and finding it a pain to use.

Baseline—A CSS Framework published at XLD Studios

My.XLD Studios is what we use to provide support to web hosting customers and is used for all of our billing to all customers. The upgrade is part of a bigger structural change to be able to provide WordPress templates for sale in the near future.

Alongside the upgrade, it has been fully integrated into the new website design with a slightly new design to the main system itself.

Updates to My.XLD Studios, Our Online Client Center published at XLD Studios

Normally these stock photos are quite inexpensive for projects even though you probably will not purchase them just to use as sample content.

What you can do is to take advantage of the stock photo websites’ free weekly downloads. Each week my to-do list alerts me to the fact that I need to download the free weekly offerings from both iStockPhoto and Shutterstock, two high-quality websites that each offer free photos and illustrations every week. All you need is to become a member which is free.

What are you waiting for? Increase your stock photo library with some free downloads!

Take Advantage Of Free Weekly Stock Photo Downloads published at XLD Studios

I also wanted to take this moment to highlight the HTML5 camps that Adobe is putting on for free. You’ll catch it in San Francisco on July 22nd, Tokyo on August 4th, New York City on August 5th and Berlin in mid-October.

Adobe Simplifies HTML5/CSS3 Animations with “Edge” published at XLD Studios

What does it offer?

The first question to ask is what the boilerplate offers you. The answer is solely speed and efficiency. By using this template as a start, I have found that it is much easier to get going with the main coding, instead of having to do the necessary preparation and base code which stays the same for most projects.

Customize Your Package

While the package comes in a standard package, it also offers a page to customize what you want to download specifically, depending on the need of a specific project.

You are able to select whether you want the conditional IE classes in there, whether to include a special handheld (mobile) stylesheet, whether to include jQuery, which HTML5 enabler script you wish to run, any server configuration file you wish to thrown in and finally whether you want a Google Analytics code.

All of these options may change in your projects, and the Boilerplate website makes it easy to customize what you need, grab it and use it.

Conclusion

Here at XLD Studios, we use the HTML5 Boilerplate currently on every new project that can be done in HTML5. Currently I feel it is the best package out there and is helpful enough and saves a good amount of time, also compared to building your own template. Since it is free to use, I’d suggest you go and play around with it!

HTML5 Boilerplate Makes For Quick Start published at XLD Studios

Keep checking back here on the blog for design and development related articles and videos from us, perfect if you want to learn a little more about the web.

Welcome To The New XLD Studios Website! published at XLD Studios

The new website is designed closely around the Lightroom interface, featuring similar UI conceptions and colors. On the backend, the site is powered by WordPress which is easy to use and appropriately sized for her website. In addition, the website features advanced book templates which makes adding new books simple.

View the website in our portfolio »

Launching New Website for The Lightroom Queen published at XLD Studios