A critical feature in web programming is the ability to seamlessly pass data from one page load to the next. It’s used most commonly when dealing with user logins, but also for passing error messages, shopping carts, etc.

Storing data across pages using PHP is done with two variables in the global scope, called $_SESSION and $_COOKIE, and although accomplishing the same end goal, the both go about it in very different ways. The purpose of this article is to give a brief look into the differences between cookies and sessions, when it’s better to use one versus the other, and the pros and cons of the two.

The difference is in how each store data. Cookies store data locally in the user’s browser, while sessions store data on the webserver.

Session Basics

Sessions are simply server-side cookies each with a corresponding client side cookie that contains only a reference to its server-side counterpart. When a user visits a page, the client sends the reference code to the server, and PHP will then match that reference code to a server-side cookie and load the data in the server’s cookie into the $_SESSION superglobal.

Pros

1. Can store very large amounts of data easily.
2. Save bandwidth by passing only a reference to the session each pageload. A client-side cookie has to pass all of its data.
3. Data is stored on the web server. This makes sessions secure, because the data cannot be viewed or edited by the client.

Cons

1. Ends when the browser is closed unless you’ve configured php.ini to extend sessions’ cookie lifetime. Cannot last forever.

Cookie Basics

Cookie data is sent to the web server every page load. PHP reads and stores the value into the $_COOKIE superglobal. When a cookie is created, you can give it a lifespan. After that lifespan runs out, it will expire.

Pros

1. Can last as long as the website needs. They will still be there even if the browser is closed and reopened.
2. Useful for “remember me” logins
3. Useful for storing temporary user settings. For example, if a user is browsing a paginated list of items, sorted a certain way, the sorting setting can be stored in a cookie.

Cons

1. Stored in the users filesystem. This means that the user can tamper with it and view it.
2. Can only store a limited amount of data.
3. Must pass all data to the webserver each pageload. This takes up more bandwidth.

Cookies in Action

Creating a cookie

The function definition:

bool setcookie ( string name [, string value [, int expire [, string path [, string domain [, int secure]]]]])

<?php
    if (!isset($_COOKIE['Ordering'])) {
        setcookie("Ordering", $_POST['ChangeOrdering'], time() + 31536000);
    }
?>

Using a cookie

<?php
	echo (isset($_COOKIE[‘ordering’])) ? $_COOKIE[‘ordering’] : ‘cookie value not set’;
?>

Deleting a cookie

<?php setcookie(‘favorite_color’); ?>

Setting a cookie with no value is the same as deleting it. This will not remove the file from the client computer. To do this, you can set the cookie expiration date to a time in the past, and the browser will take care of it.

Sessions in Action

Creating a session

<?php session_start(); ?>

This must be called near the top of your code before any output. When you call this function, PHP will check to see if the user sent a session cookie. If so, it will load the session data into $_SESSION. If not, it will create a new session file on the server and send the ID back to the client.

Setting a value

<?php $_SESSION[‘first_name’] = ‘Brian’; ?>

Reading a session value

<?php echo $_SESSION[‘first_name’]; ?>

Removing session data

<?php unset($_SESSION[‘first_name’]); ?>

Ending a session

<?php session_destroy(); ?>

The Bottom Line

Sessions are cookies where the data is stored on the server. Cookies are stored in the users filesystem (typically in their “Temporary Internet Files” folder). Both have their advantages, but on any given day, you’ll probably find yourself using sessions much more commonly.

PHP Documentation

1. PHP Manual: Sessions
2. PHP Manual: Cookies

Related posts:

1. Creating Your First PHP Application: Part 2 This post is the second part in a three part...
2. Creating Your First PHP Application: Part 3 In part 1 and part 2 we built the necessary...
3. Fundamentals of MySQL Query Validation Editor’s Note: This is a guest post from Christian Engel,...

As a designer that at one time had the ambition to become an illustrator, you can imagine I miss the hands-on work quite a bit. I look for any opportunity I can get to incorporate drawing in design. It’s an easy thing to overlook given the modern day design styles, but it’s important to go back to your roots sometimes.

I’m going to be bold and say social media is popular enough that I don’t need to justify making these. I tried to show some love to the top social media sites that I frequent across the Interweb.

• Every icon is a .PNG (making them easy to edit) and packaged together.
• The set includes four sizes for each icon: 16×16, 32×32, 48×48, 57×57.
• It also includes two sizes for each icon next to its type mark: 32px tall, 57px tall

Usage and Sharing

Released under this Creative Commons license. While it’s not required, if you end up using any of these graphics, a link to this post would be greatly appreciated.

Related posts:

1. Social Media is Bullshit Some of you probably clicked that link ready to defend...
2. A Bundle of Free Icons For Web Designers Dusk iPhone Style Icons PixelMixer Basic Set...
3. Totally Tweet Freebie – Replacement Tweetie Icon This freebie is a redesign of the existing icon for...

We’ve all had it happen before – you put a ton of work into a fantastic idea, proposal, and/or meeting with an awesome potential client and it goes swimmingly. You’re excited, they’re excited, you’re even more excited since they’re excited.  The endless cycle of excitement is the best right? When this situation has a fairytale ending paved with productivity, a portfolio builder and some cash, it’s awesome!

But, how many times has that excitement turned into disappointment when further talks go nowhere? Next thing you know, the client has simply said “No” or “Sorry, we’re no longer doing this project” or even the classic, “We’re going with someone else on this one”? Well, whether you’re in digital design, marketing, or any sort of sales, it has probably happened more times than you count. The client rejection is the nature of the beast, but what does a rejection really mean? No means no, or does it?

You can take “No” the way everyone else does…

Taking a “No” as if it means “No” goes something like this: The client opportunity falls through, and you inform your support system. You know, friends, family, Twitter, your significant other, whoever. Your friends and family will tell you it probably has nothing to do with you and that the rejection happened for a reason. Your colleagues will tell you that the client wasn’t worth working with anyway and that your time is coming.

As laughable as it is, your significant other will be the one to come up with as many negative things to say about that potential client no matter how ridiculous they might be – come on, admit it, you’ve been there! Some of what your support system tells you will be true however, most of it is just a pillow for your ego to land on. Oh well, they said “No”, right? Wrong.

You can take another “No” approach…

Similar to how a toddler takes the answer “No” and finds a way to change the answer, there is an approach that seem crazy but can seriously work. The approach? Ignore the word “No”. What does this mean? Well, it doesn’t exactly mean ignoring the word “no” and doing the client work anyways without their consent – it means, “try again”. They’ve said no to your first plan, so you’re going to send them something new.

You’ve already poured hours upon hours into the proposal, so simply send them something adjusted based on their reason for “no” or your gut feeling for what went wrong. If they actually liked your proposal but it was something as simple as budget, see where you can cut costs, and send them a new revision. If it was relevant references, see where you can dig up some more references through clients of clients or even someone you might have missed. If it was a portfolio problem, see where you can respond with other capabilities or more work that might weigh on their decision. If you feel like the client felt you were not capable, send them a compelling one-pager addressing their concern upfront and prove yourself.

Did I mention budget? Sometimes, the budget can “fix” other problems, if you know what I mean. If you were too expensive and the portfolio simply can’t justify, but your idea was really solid, you may find that the client is more willing to take a small risk at your lowered pricing. Cutting monetary corners isn’t just something you can do as a offensive move – cutting monetary corners is a defensive move potential clients can do to get the job done at a lower risk from a 2^nd choice contractor.

Nothing to lose, everything to gain

As mentioned above, you’ve already put the work in, so what do you have to lose? The only thing you need to do is figure out a new approach and give it another shot. What’s an hour of contemplating your bottom line, making a few calls, or putting a couple more pieces together? Certainly don’t try a second time if you were certainly off-base, but don’t miss an opportunity to make things right if you felt like you were almost there. With nothing to lose, you’d be making a huge mistake and missing an even bigger opportunity by not trying again. The worst that could happen is another “No” which you’ve already digested once – is it really going to hurt the 2^nd time? The best that could happen is that you’ve got another client under your belt and a huge opportunity to prove yourself.

The odds of success

Ignoring “No” and trying again does not mean you’re betting on a sure thing. In fact, you might not even get a response. It’s more like a game of roulette – it’s a black (let’s talk), a red (another no), or a green (straight up yes). If you know about roulette, you’ll know hitting green is rare, but hitting black is nearly 50-50. If your services or ideas were spot on and the potential client has a lot of candidates to chose from, you’ve got a great shot.

You’ll find that more often than not, a client is willing to listen if you got something new to show them especially if they liked you. Like your family said, it’s nothing personal – they should give you a 2^nd listen. Take a chance. Your odds are great, in fact, not sending a 2^nd try is just as bad as not sending a first.

Related posts:

1. Watch Your Language: Clients & Pricing // Want more pricing help? This is day two of...
2. 6 Ways to Get the Email Response You Need Have you ever sent out a crystal clear email only...
3. When Clients Take Too Much Design Control “Looks great. Let’s just move the main content down and...

I was inspired by the vast number of Twitter birds out there and decided to provide my own entry the internet’s collection of our feathery friend.

Everything is neatly packaged in transparent .png format, which means the bird will have no difficulty nesting in whatever site you place him in.

Feel free to leave a link in the comments if you end up using any of the illustrations for a project – enjoy!

Inside the Bundle

Usage and Sharing

Released under this Creative Commons license. While it’s not required, if you end up using any of these graphics, a link to this post would be greatly appreciated.

If you want to share this file with anyone, please link directly to this post ( http://buildinternet.com/2010/06/freebie-fiesta-twitter-bird-egg-illustrations/ ).

*The font used in the above graphics is called Johnny Quest Classic.

Related posts:

1. Sketchy Social Media Icons Freebie As a designer that at one time had the ambition...
2. Share Feedback with Twitter and the Bit.ly API Regular blog readers probably notice the wide range of social...
3. Totally Tweet Freebie – Replacement Tweetie Icon This freebie is a redesign of the existing icon for...

Even though CSS3 has brought a lot to the table in regards to drop shadow effects, there are still plenty of reasons to use image alternatives. The drop shadows generated by CSS3 are relatively uniform, and don’t deviate much past size and transparency. In some cases, you might want to give a page some extra depth.

I ran into a similar situation in a recent client project, and decided to use a recent trend of warping drop shadows to help add some extra excitement to the page. You might have seen similar effects in other tutorials involving deleting a circular section, but this method will keep the edges from being too sharp. It also allows you to work with non-rectangular shapes because all points are editable in the warp tool’s grid.

Setting Up

Start a new Photoshop document. The size doesn’t matter because all of the elements will scale accordingly. I recommend changing the background color to something that will make a white box stand out, but not drown out a black shadow. We’ll use a light blue for the example. Draw up a white box and we’re ready to start on the shadow.

Add the Shadow

You might be tempted to use blending options right now. Resist the urge, because we’re aiming for something much more distinct.

Start by making a new layer that is positioned between the background and content box from the previous step. On the new layer, draw a rectangle selection that is just slightly smaller than the width of the content box. Fill this area with black.

With the black rectangle layer selection go to Filter>Gaussian Blur and set the radius to 6 pixels.

Love the Warp Tool

Photoshop’s warp tool is wildly underrated. It’s good for much more than messing around with celebrity faces or other random attempts to doctor photos. It’s particular good at taking specific shapes and molding them into another shape without ruining the appearance. This point is exactly why we’ll use it to shape our new drop shadow.

With the shadow layer selected, head to Edit>Transform>Warp to bring up the warping grid. Use the handles on this control to give a curvature to the blurred rectangle. Feel free to shift the layer around to get the best positioning.

Once the shape is set, simply lower the layer’s opacity down to about 15% and you’ve got a finished shadow that simulates a subtle page curl. Nice work!

Wrapping Up

There you have it, a drop shadow that gives content areas a feeling of “coming off the page” depth. As you might have guessed by now, this is a perfect footer background for content areas throughout the page. Not bad!

Related posts:

1. Light and Shadows – Feathering Gradients in Photoshop The Overview The Basics of Feathering and Getting Started So...
2. Quick Tip – Use Layer Masks to Erase in Photoshop We’ve all had to work with photos that need to...
3. Flexible Color Schemes in Layouts with RGBa This will be an experiment in transparency. CSS has come a long...

Good software enables us to take a lot of niceties for granted. Intelligent interfaces handle all the simple tasks so that we don’t need to worry about them. For example, when I type “www.desktopped.com” into an email or an instant message, I expect that it will be clickable on the other end without having to manually add in HTML tags. Another example is parsing text from a twitter feed. For example, “@desktopped is a blog about the #computers“, we expect both @desktopped and #computers to be links.

The ability to “linkify” text is a great tool to have when developing a blog or website. Possible uses include:

• Turning URLs clickable in content, comments, and anywhere else
• Turning valid email addresses clickable
• Turning twitter text clickable so that @desktopped, #computers, www.desktopped.com all become links.

To search a string for patterns, such as strings that begin with “http://” or “@” is an ability that can be applied in almost endless ways to improve the way we process and display data.

How can we do this? The best way with PHP is to use a universal pattern matching syntax called regular expressions and some useful PHP functions.

Regular Expressions Basics

A regular expression is a pattern string that represents a set of strings by using a variety of special characters.

The Basic Special Characters

• | connects two possible values and will turn up a match if the string matches either. For example hi|hello matches the strings “hi” and “hello”
• () are used to group values and set order of operations. For example, br(i|y)an will match both “brian” and “bryan”.
• [] are used to match a single character that appears inside the brackets. [abc] will match “a”, “b”, or “c”, but not “d”.
• * will turn up a match if there is zero or more of the preceding element. The string go*gle will match “ggle”, “gogle”, “google”, “gooogle”, etc.
• + will turn up a match if there is one or more of the preceding element. The string go+gle will match “gogle”, “google”, gooogle”, etc.
• ? will turn up a match if there is zero or one of the preceding character. The string desktopp?ed will match both “desktopped” and “desktoped”.

Other Common Special Characters

• \w will match a “word” character, which translates to any character alphanumeric or ‘_’
• \n \r and \t will match a new line, carriage return and tab respectively.

A full reference for special characters can be found here:

http://www.php.net/manual/en/function.preg-replace.php#89364

PHP Function: preg_replace

The preg_replace function in PHP will take a regular expressions pattern, a replacement string, and the text to be examined as arguments. It will check the input text against the pattern and then if there’s a match it will place certain pieces of the input text into the replacement string.

The pieces that are placed into the replacement string are determined by what is in parenthesis in the pattern string. They are then referenced in the replacement string by using $0, $1, $2, etc., where the $n matches the nth parenthesized pattern.

A Simple Example

$text= 'My name is Brian';
$pattern = 'My name is (Brian|Sam|Zach)';
$replacement = '$1 is a pretty cool guy.';
echo preg_replace($pattern, $replacement, $text);

The code will output “Brian is a pretty cool guy.” If $text was “My name is Zach”, the output would be “Zach is a pretty cool guy.” If $text was “My name is Nick”, there’d be no match and the original text would be returned; “My name is Nick”.

Useful Regex Functions

This function will turn all URLs in a body of text into clickable links

function link_it($text)
{
    $text= preg_replace("/(^|[\n ])([\w]*?)((ht|f)tp(s)?:\/\/[\w]+[^ \,\"\n\r\t<]*)/is", "$1$2<a href=\"$3\" >$3</a>", $text);
    $text= preg_replace("/(^|[\n ])([\w]*?)((www|ftp)\.[^ \,\"\t\n\r<]*)/is", "$1$2<a href=\"http://$3\" >$3</a>", $text);
    $text= preg_replace("/(^|[\n ])([a-z0-9&\-_\.]+?)@([\w\-]+\.([\w\-\.]+)+)/i", "$1<a href=\"mailto:$2@$3\">$2@$3</a>", $text);
    return($text);
}

This function will turn all pound signs (#) and at-sign (@) into hash tag and @reply links in a twitter feed.

function twitter_it($text)
{
    $text= preg_replace("/@(\w+)/", '<a href="http://www.twitter.com/$1" target="_blank">@$1</a>', $text);
    $text= preg_replace("/\#(\w+)/", '<a href="http://search.twitter.com/search?q=$1" target="_blank">#$1</a>',$text);
    return $text;
}

This function finds strings in your post body that you’ve identified with the pattern :tagname: and turns them into tag searches on your blog. For example: “This post is about :PHP:.” will result in “The post is about PHP“.

function tag_it($text)
{
    $text= preg_replace("/:(\w+):/", '<a href="http://www.buildinternet.com/tag/$1/" target="_blank">$1</a>',$text);
    return $text;
}

This function will highlight search terms in search result titles on your WordPress blog. Pass an array of keywords and it will do the rest. (Must be used inside the loop)

function highlight_terms($keys_array)
{
    $title = get_the_title();
    return preg_replace('/('.implode('|', $keys_array) .')/iu', '<span class="highlight">$0</span>', $title);
}

The function will take any string (usually a page title) and generate a URL slug.

function create_slug($string)
{
    $string= strtolower(trim($string));
    $string= preg_replace('/[^a-z0-9-]/', '-', $string);
    $string= preg_replace('/-+/', "-", $string);
    return $string;
}

Further Reading

Regular Expressions Resource:
http://www.regular-expressions.info

PHP pre_replace Manual:
http://php.net/manual/en/function.preg-replace.php

Related posts:

1. Automatically Shorten URL on Page Load in WordPress A few weeks back, we posted a tutorial using the...
2. An Introduction to Object Oriented PHP – Part 3 Introduction Welcome to the third and final part of a...
3. Fundamentals of MySQL Query Validation Editor’s Note: This is a guest post from Christian Engel,...

A recent round of client work at One Mighty Roar has got me thinking a lot more about successful interface design. Specifically, how can we build pages that send a clear message without losing aesthetic or professional edge? The question turns out not to be “How does it look?” but, “What is it saying?”

Dazzling graphics can lose the thrill over time, but a clearly worded page has lasting power.

I came to a realization. There are very few group interactions with the internet. It’s rare for more than one person to use the same computer and browse a website together. There are obviously times when everyone in your office gathers to watch a cute cat video on YouTube, but you get the idea. This one-to-one relationship has a few important implications:

1. The site can typically speak directly to a single person rather than an entire organization. Instead treating the visitor like a faceless representative, they are now an individual.
2. You can start by addressing individual needs, then (if needed) the needs of the visitor’s group. This means that a site could have “You and your team will benefit” as opposed to “Your Company”. This is a subtle change, but as we’ll discuss later, it can pay to appeal to individual ego.

You only have to care about one person at a time. That’s a powerful direction.

Interaction is Personal

A one-to-one interaction with a visitor is low risk. With nobody is watching over your shoulder and rating your interactions, there is no pressure to fake understanding. It’s like asking your best friend to explain something to you — they’ll be direct and conversational. With this type of relationship, a visitor’s ego and reputation can stay untouched. This is why blogs are such a great way to learn new skills, the process is judgement-free and failing doesn’t hurt.

In recent years, the trend has been to replace the standard “Welcome” to a more personalized “Hello”. This is a step in the right direction. As Darren Hoyt recently wrote about in “Designing with Social Skills“, interfaces should be designed for humans.

A large company probably won’t want to greet visitors in the same way that a designer does on his portfolio. There’s a level of professionalism that needs to be maintained, and the larger the entity represented, the more important the tone. I firmly believe that it is possible to show professionalism without sacrificing a personalized conversation with the user. Not every visitor is going to be a potential investor with an MBA. But if they were, would it even matter? Business professionals are people at the end of the day too, after all.

Readability Matters

Jason Fried said it best with “Copywriting is Interface Design“. A button’s label has just as much (if not more) impact as the design of the button itself. In the one-to-one relationship that visitors have with a site, phrasing and reading level can be considered convienences of an interface. This is why tools like After The Deadline are so important with web copy. These kinds of services consider the implications of grammar on comprehension, and not just technical mistakes.

It’s always suprised me how more service-oriented sites don’t include a “reading level” button right next to the font size options. Isn’t it just as important to understand the content as it is to see the letters clearly? The message of “If you don’t understand this, you shouldn’t be here” is a barrier to interface design. It’s a free excuse to ignore real problems.

The “About Us” page is not a collegiate thesis paper nor is it a first-grade picture book. The problem is that of those two extremes, sites are more likely to fall into the “professionalism” trap of overdesigned sentences. On the other hand, when’s the last time you wished a site used bigger words?

How to Chart Readability

Readability of the English language can be measured using a number of tests. For example, the Flesch-Kincaid rates readability by grade level and is calculated using a combination of words, syllables, and sentence structures. The Automated Readability Index is another popular method.

Try This: Google Docs has a few of these measures built in by default, but for a quick test try using this online tool. Put some of your own work to the test. Are you overdesigning sentences?

Wording Can Be Selfish

When I’m on a website, I don’t care about “The Site Policy”, but I do care how it affects me. Headings and copy can afford to be selfish, because that’s probably what they care most about. Be self-centered on behalf of the visitor, and you’ll be surprised at how well the results come out.

Lessons from FAQ

The average Frequently Asked Questions page is a great reference for this. One of the reasons that FAQ pages work so well is because they phrase problems in terms of the user. Rather than “Billing Policy”, the FAQ becomes “How will I be billed?” Wording is concrete and in relation to the user instead of some abstract idea. It’s all about you.

Let’s use Beanstalk’s service documentation as an example. They make heavy use of personalized language to present common questions. Would their documentation be as effective without it? Most likely, but the real added value is much more subtle. The Beanstalk folks have shown that they realize people (not robots) use the service. These are people that would rather get things done instead of feel a false sense of professionalism from decoding overdesigned sentences.

If an idea can be done in a single sentence, why not?

What About You?

What’s your take on successful interfaces? Assuming a page layout is successful, how do you keep communication clear? If you have feedback or suggestions that you’d like to share on this, please let us know in the comments below.

Resource & Further Reading

For those interested in a little more.

1. After The Deadline
2. Understandable Interface Principles from the W3C
3. 30 Ways to Improve Readability
4. Focus on Goals, Not Actions
5. Writing User Friendly Content

Related posts:

1. Effective Pitch and Registration Page Design This post is supported by Webdesigner Depot, a popular web...
2. Don’t Click Here! – Placing Links in Context If you’re interested in reading this article, click here. On...
3. What NASA Can Teach You About Web Design Today we’re going to talk about space. What does space...

Tumblr has done a lot of growing over the past few years. Recently I’ve had to develop a few themes inside of Tumblr for part of a larger overall campaign. Coming from WordPress, I appreciated the platform’s simplicity, but wasn’t sure about how customizable it would actually be. I was under the impression that custom theme design was a lot more complicated than it actually is.

This post goes over a few of the basic questions that I’ve come across in starting with custom theme development for Tumblr blogs. It’s not a definitive list, but should help get you moving the first time through.

Tumblr is not a typical content management system. It’s a simple way to put categorized types of information online in blog format. You will probably not be able to teach your theme new tricks by expanding the API. The focus is on rearranging the blog’s content using basic HTML and CSS, just like the CSS Zen Garden project started years back.

You can still customize, just within the limits of basic check boxes, text inputs, and color swatches. If you think about it, that’s really all you need.

Where Do My Images Go?

Unless you’re a typography purist, you’ll probably use a few images in theme design. In the past, posting images to “closed” systems had involved an upload to a third-party (e.g. Image Shack) and then linking images that way. As it turns out, you don’t have to host your own theme files. Tumblr offers a static file uploader for use with custom themes. Just make sure to respect the uploader, and keep it limited to theme assets only. If you turn it into a personal dumping ground, your account can get banned.

Build in Blocks

Content types break down into blocks. You can specify a photo post using Block:Photo and a quote using Block:Quote. Your theme’s HTML is really just a single page with all possible options on it. When a visitor loads the page, the content displays according to the structure defined by its block. All post types are encapsulated by the {block:Posts} tag.

A Sample Block

<div id="wrapper">
	<!-- Start of Post Type Blocks -->
	{block:Posts}

		<!-- Sample Quote Block -->
		{block:Quote}
			<div class="quote">
				{Quote}
				{block:Source}
		 			<span class="source">{Source}</span>
				{/block:Source}
			</div>
		{/block:Quote}

		<!-- Sample Photo Block -->
		{block:Photo}
			<div class="photo">
				{LinkOpenTag}
					<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
				{LinkCloseTag}
				{block:Caption}
					<p>{Caption}</p>
				{/block:Caption}
			</div>
		{/block:Photo}

	{/block:Posts}
</div>

You Start with Some Basic Variables

The theme HTML declares Tumblr variables using a special markup that looks something like this:

{MetaDescription}

In most cases, these variables represent options available within the customize menu in Tumblr’s dashboard. In the snippet above, the “MetaDescription” will load whatever the Info>Description box contains. MetaDescription is an example of one of the basic variables that every theme starts with. Think of it like a simplified version of WordPress’ template tags.

Custom Options are Easy

Most Tumblr users will probably not know HTML and CSS like you do. If you plan on developing a theme to release to the general community, it’s a good idea to make as much of the theme controllable from the customize menu as possible. The default code editor is not the most elegantly designed, and it’s definitely not something users should have to change font colors from.

If you have to use an API that isn’t already supported within Tumblr’s initial tags, you can do so with some JavaScript and a custom field. As mentioned above, server-side scripting is off the table.

Defined via Meta Tag

You declare all custom options using a meta tag in the top of the theme’s HTML. If we wanted to specify a field for favorite book, the code might look something like this:

<meta name="text:Favorite Book" content=""/>

This would cause the following option to display inside the theme customization screen:

You display the option’s value within the theme using a custom Tumblr tag:

<p>{text:Favorite Book}</p>

Notice how the prefix “text:” designates the type of field to display, and the content attribute specifies the default value. Spaces in the option’s name do not matter. The full documentation has a complete list of available options including color swatches, image uploads, and checkbox IF statements.

Comments Work Differently

One of the most frustrating things to WordPress developers about Tumblr is the lack of comments. Users can certainly respond to posts, but not in the traditional “Type Message Here” way. Tumblr comments come in a few flavors of responses, and they take some getting used to for theme development.

If I like another Tumblr blog’s post, I can reblog (post it to my page) with more comments in the post body. I could also “Like” a post without reposting it myself. In either case, Tumblr places a trackback line into original post that summarizes your action.

If you look at a few active posts on Tumblr, you see how posts can get away without have direct comments through this type of sharing. The staff blog announced a new “Notes” feature to add another option for post feedback, but not many themes support it yet.

Other Expansions

In the past 6 months, the Tumblr team has continued to expand the platform’s capabilities. They’ve added the ability to ask questions, get user feedback, and integrate Twitter accounts into themes. Before reinventing the wheel with JavaScript inserts, make sure that it doesn’t already appear within the growing documentation.

A Growing Trend

These are just a few starting points for people starting out with Tumblr customization. The official theme documentation has a more technical overview of possible theme routes, and it’s a great place to start with any questions. There’s still a learning curve (especially for the type of customization seen in the premium theme section) but like most things on the internet it just takes some time to get used to. The folks at MetaLab have done quite a few compelling designs for Tumblr, including a few of the new premium options available in the Theme Garden.

Based on Google searches, custom theme development is a topic that is only starting to get the coverage and tutorials it needs.  Nettuts recently published a full walk-through guide for its premium subscribers, but it was difficult to find many other widely available tutorials. Is this something you would like to see Build Internet focus on in upcoming posts? Let us know in the comments.

Related posts:

1. Create Custom Option Panels with WordPress 2.9 WordPress is a powerful engine in itself, but sometimes themes...
2. How to Add an Announcement Box to Your WordPress Theme If you’ve been following this blog for over a month,...
3. Quick Tip – Separate Page Templates in WordPress Sometimes not every page on a blog can fit the...

This is a guest post from the talented Joseph Hinson. Interested in seeing your name up here too? Get in touch!

In this post I’m going to talk about how to use WordPress’ attachment functionality to automatically detect and wrap mp3s in a player.

If you want to your mp3s to automatically be wrapped in a player, you can incorporate that functionality into your theme by using the JW Player (or any other embeddable player) and WordPress’ get_children() function.

Before we get started, let me explain why this might be a better option than using a plugin:

1. All you have to do is upload the mp3(s) and the theme takes care of the rest.
2. You get to learn more about get_children(), which you can do a lot with.
3. The JW Player can handle video and audio, so with a slight code modification, you’re in business for playing movies as well as music.
4. You don’t have to install a plugin that might break in a future version of WordPress.

The Player

There are several embeddable mp3 players that you can use. I was using google reader’s player for awhile until I realized it doesn’t work well in IE, so I decided to go a different route here and use the jw-player. Longtail Video’s JW Player is free for non-commercial use and works in seemingly every browser. It’s even got an easy setup wizard if you need help getting your embed code worked out. And though I use the term mp3 throughout this tutorial, the JW Player supports m4a as well.

The embed code for a single song looks like this:

<object width='470' height='24' id='single2' name='single1'>
	<param name='movie' value='player.swf'>
	<param name='allowfullscreen' value='true'>
	<param name='allowscriptaccess' value='always'>
	<param name='wmode' value='transparent'>
	<param name='flashvars' value='file=PATH-TO-YOUR-MP3'>
		<embed
		  id='single2'
		  name='single2'
		  src='player.swf'
		  width='470'
		  height='24'
		  bgcolor='#ffffff'
		  allowscriptaccess='always'
		  allowfullscreen='true'
		  flashvars='file=PATH-TO-YOUR-MP3'
		/>
</object>

In Action

The player looks like this:

I’m going to download the player and store all the files in a subdirectory of my theme called “jw”, so I’ll use the WordPress function template_url /jw/ to point to that directory. In reality, it’s http://my-site.com/wp-content/themes/my-theme/jw/.

The Code

In your template file (index.php or single.php), we’re gonna use the get_children() WordPress function to get the attachments that match a specific mime type (of audio – that will handle mp3s and m4as). The function returns an array that we’ll loop through using a PHP foreach. So, here’s what we’re gonna do:

1. Store the array that’s generated from the function in a variable called $mp3s
2. Check to make sure the variable $mp3s isn’t empty (that an mp3 is present as an attachment)
3. Loop through the mp3s attached, showing each mp3 in the embedded player.

The following code should take place inside the loop:

<?php $mp3s = get_children( 'numberposts=-1&post_type=attachment&post_mime_type=audio&post_parent='.$post->ID );

	if (!empty($mp3s)) : ?>

		<?php foreach($mp3s as $mp3) : ?>
			<object width='470' height='24' id='single<?php echo $mp3->ID; ?>' name='single<?php echo $mp3->ID; ?>'>
				<param name='movie' value='player.swf'>
				<param name='allowfullscreen' value='true'>
				<param name='allowscriptaccess' value='always'>
				<param name='wmode' value='transparent'>
				<param name='flashvars' value='file=<?php echo $mp3->guid;?>'>
					<embed
					  id='single<?php echo $mp3->ID;?>'
					  name='single<?php echo $mp3->ID;?>'
					  src='<?php bloginfo('template_url'); ?>/jw/player.swf'
					  width='470'
					  height='24'
					  bgcolor='#ffffff'
					  allowscriptaccess='always'
					  allowfullscreen='true'
					  flashvars='file=<?php echo $mp3->guid; ?>'
					/>
			</object>
		<?php endforeach; ?>

	<?php endif; ?>

A few things to notice here:

1. I’m passing a parameter to get_children of post_parent = $post->ID. This passes the ID of the page/post you’re on to the function. As long as you’re inside the loop, this will work, otherwise, you have to somehow get the ID then pass it in a different way.
2. The parameter numberposts is set to -1, which means it will show every uploaded attachment that matches the mime type of audio. You can change this to a number if you would like to limit the amount of songs that show.
3. I’m using $mp3->ID (the ID of the mp3 attachment itself) to make sure that each instance of the player has a unique ID, otherwise the players will break each other.

Once more, this time with Gusto!

This works well for showing the players, but what about the title and description? You can also pull that info from the attachment. In the next example we’re going to wrap each mp3 that’s attached in an li with the attachment title and description also being shown.

<?php $mp3s = get_children( 'numberposts=-1&post_type=attachment&post_mime_type=audio&post_parent='.$post->ID );

	if (!empty($mp3s)) : ?>

	<ul>

	<?php foreach($mp3s as $mp3) : ?>
		<li>
			<?php if(!empty($mp3->post_title)) : //checking to make sure the post title isn't empty ?>
				<h4 class="title"><?php echo $mp3->post_title; ?></h4>
			<?php endif; ?>

			<?php if(!empty($mp3->post_content)) : //checking to make sure something exists in post_content (description) ?>
				<p class="description"><?php echo $mp3->post_content; ?></p>
			<?php endif; ?>

			<object width='470' height='24' id='single<?php echo $mp3->ID; ?>' name='single<?php echo $mp3->ID; ?>'>
				<param name='movie' value='player.swf'>
				<param name='allowfullscreen' value='true'>
				<param name='allowscriptaccess' value='always'>
				<param name='wmode' value='transparent'>
				<param name='flashvars' value='file=<?php echo $mp3->guid;?>'>
					<embed
					  id='single<?php echo $mp3->ID;?>'
					  name='single<?php echo $mp3->ID;?>'
					  src='<?php bloginfo('template_url'); ?>/jw/player.swf'
					  width='470'
					  height='24'
					  bgcolor='#ffffff'
					  allowscriptaccess='always'
					  allowfullscreen='true'
					  flashvars='file=<?php echo $mp3->guid; ?>'
					/>
			</object>
		</li>

	<?php endforeach; ?>

	</ul>

<?php endif; ?>

Take Note

• I’ve wrapped the p and h4 tags in if statements that check to see if the values of the title and description actually have content before the elements are created. If nothing is filled in for a description, the paragraph tag doesn’t get created.
• Helpful Tip: You can find out what is stored in any array by using the PHP function print_r(the_array_name). It will print out a list of values stored in the array. It gets a little jumbled in the content, so view source for best results if you use this.

Done and Done. But don’t screw up now.

Once you’ve inserted the code in your theme, all you have to do to to take advantage of your new found functionality, is upload an mp3 using the “Add Media” button through the WordPress Add Post page. Once you’ve uploaded your mp3, just click “Save All Changes” and close. Don’t click “Insert into post”. For some reason, the mp3 doesn’t get registered as an attachment if you insert it into a post.

Before you guys give me crap about liking Carrie Underwood, let me just disclaim that this is for my daughter’s blog.

I’ve tested this with mp3s and m4as. For some reason, my WordPress install gave me a bit of a fit when I tried m4ps, but I’m pretty sure the JW Player supports them.

Even if this functionality isn’t something you specifically need, it is still a good exercise to try this if you’ve never learned about get_children(). You can do a lot to enhance your theme with it.

What about you? Do you currently use get_children() or something similar to beef up your theme? If so, tell me about it.

Further Reading

1. Longtail Video – Home of the JW Player
2. WordPress Function Reference – get_children()
3. More About Mime Types

Related posts:

1. Automatically Shorten URL on Page Load in WordPress A few weeks back, we posted a tutorial using the...
2. How to Change the Default Gravatar in WordPress As much as I love seeing the mystery man appear...
3. Create Custom Option Panels with WordPress 2.9 WordPress is a powerful engine in itself, but sometimes themes...

The gradient has become a universal crutch. Hypocrisy, we know, considering parts of this blog’s current design. Gradients have a habit of decorating since the design trends introduced by Web 2.0 gloss. The starburst badges and text reflections may have faded into obscurity, but the brash gradient stuck it out.

Please don’t read this as a “you’re doing it wrong” post, because there have been far too many of those in the design community lately. Consider this a demonstration of alternatives with a low risk invitation to try it out.

You don’t need to quit gradients completely. This is just a call to reconsider if they are necessary in each design. Rather than taking a bland design and making it more “exciting” with gradients, why not play with the typography? Adjust the page hierarchy! Bring in some rich photography!

Learn to Leave Out

Many web design blogs periodically give tutorials guiding through the Photoshop process of page design. It’s given a weird impression that gradient-based designs are a universal way to making brilliant web pages. I’ll be the first to admit, we’re guilty of writing posts that ended up being read in the wrong way too.

The majority of bloggers are not trying to force conformity, but the posts leave often leave out the discussion of judgement. In one of our “Five Minute Upgrade” series posts, one of the biggest misunderstandings was from an assumption that all of the techniques presented should be used together. Web design is not a cookie cutter checklist of design trends to include, it’s also about learning what to leave out and arrange whatever remains. WeFunction had a great article about these marks of quality in their post “How to Spot Quality in Web Design“.

You’re not doing it wrong, but you can do it differently.

Fundamentals Stay in Style

You don’t have to be an elite art school graduate in order to design well, but it does take some breaks from the typical “How to Design an Awesome Site in Photoshop” in order to learn the technical stuff. The technical aspects of design don’t go out of style. Font kerning and color theory are not trends that will look dated a year from now, but the average Photoshop tutorial will. Many of the trendy design techniques from a couple years ago look laughable by today’s standards.

Meaningful Design Elements

What do designs without gradients focus on? These are the types of design that would shine in black and white. But even that’s vague, so what specifically can you focus on designing the hell out of? I’ve included a few points below that I think are important in distinguishing between decorating and design progress.

Typography

There are a limited number of web-safe fonts available, but typography is more than just which typeface – it’s about how that typeface is used. You could play with italics, uppercase, and bold versions of web fonts and get interesting mixes. If a design calls for more font diversity, you can always replace some headings with text as images or use JavaScript replacement options like TypeKit.

Visual Hierarchy

If a certain element is important, how do you let people know about it? Hierarchy can come in form of color, size, weight, or location. If text is large and at the top of the page, it’s likely an important piece. Decorators like gradients have a hard time expressing hierarchy without the help of other concrete design elements.

The Economy of Line

This is an interesting concept I first learned about in Jason Beaird’s “The Principles of Beautiful Web Design” a few years back*. The concept is simple: If your design keeps its primary shape with only line tracing, it’s good to go. It’s a simple test for your design, and it helps identify layouts that rely on subtle changes in order to designate visual areas.

You can see a simple example of the test in action below on Art In My Coffee, a Tumblr run by Jina Bolton and Meagan Fisher. Incidentally, both of them have site designs with typography to die for.

Gradients alone are not a good way to differentiate between sections in a web layout. Because gradients do not have any rigid boundaries, they can reinforce existing design elements, but they shouldn’t be the primary indicator.

*If you haven’t read Jason’s book already and are interested in the type of formal design that most blog design tutorials gloss over, I highly recommend you get moving! It’s the type of gem that gives tangible concepts that carry across everything you design.

Subtle is Powerful

What if a gradient makes sense to include? Is there a more effective way to use them? Try practicing subtlety.

I believe that the best designs are those that take some time to figure out. This doesn’t mean in a “I’m confused” usability issue way, but rather a “This looks smooth, but I can’t quite figure out why” sense. The atebits product page for Tweetie (soon to be Twitter) is a good example of subtle gradients in action. The menu goes from a solid white of #FFFFFF and ends up at a slightly grayer tone of #E7E7E7. The transition is simple, subtle, and doesn’t demand extra attention.

We’ve reached a point with CSS3 where basic gradients can even be simulated without images. The button style Google uses in a number of its web applications is actually built using three different bands of solid colors. Doug Bowman did an extensive writeup explaining the button design process that’s well worth a read.

Your Challenge from Here

Your challenge (optional, of course) is to make a small sample of design without the use of gradients. Dribbble has demonstrated how a small piece of design can speak volumes for the big picture. Even though we haven’t managed to land an invite yet (subtle hint), we can still take some inspiration for this exercise. Post a link to what you come up with in the comments below! We’d love to see what you can create.

Related posts:

1. Light and Shadows – Feathering Gradients in Photoshop The Overview The Basics of Feathering and Getting Started So...
2. Five Minute Upgrade – Making Your Design Pop // 1. Brighten Colors If you have a design that...
3. Five Minute Upgrade – Variety in Title and Body Fonts Are you a one font wonder? Contrary to what you...