Here is a selection of 10 Hi-res images for you to feast upon. 10 lovely vintage textile patterns. Use as a whole or enlarge to expose the detail of the fabric. Click on the link below each preview to download or download all the images in one zip file at the bottom of the post.

• Download hi res
• Download hi res
• Download hi res
• Download hi res
• Download hi res
• Download hi res
• Download hi res
• Download hi res
• Download hi res
• Download hi res

Starship $wpdb

Recently I’ve been adapting a plug-in to suit my needs and for the first time, trying to write something that interacts with the wordpress database, step up wpdb class!

The WPDB Class – Make it Global

To use the wpdb class we need to access a global variable $wpdb which is simple enough, but what you’ve got to remember is that it needs to be globalized before you use it in your custom function: -

global $wpdb;

Once that’s in place you are free to use it to perform SQL queries and function on your database.

The first thing I needed to do was to query the “commentmeta” table in the database, and save the results for later use: -

$comment_meta = $wpdb->get_results( "SELECT mydata FROM mytable WHERE mycondition = 'myvalue' ");

The above code uses ‘get_results’ to query the database and loads in to the the variable $comment_meta so it can be used in a ‘foreach’ loop later. Now I wanted to grab the meta_key, meta_value from table ‘commentmeta’ that was named ‘wp_1_commentmeta’. I could have put that value into the query but if I want to use the function on a different site on a wordpress network I’m not going to know the database prefix so I can use $wpdb to replace it: -

$comment_meta = $wpdb->get_results( "SELECT meta_key, meta_value FROM wpdb->commentmeta ");

That way I can use the query in a function on any wordpress blog and it will always knows what table to look at.

It’s an Object by default

One last thing to remember is that the results are an object so you can access the like this: -

foreach ( $comment_meta as $comment_meta_data )
echo $comment_meta_data->meta_key
echo '< br />'
echo $comment_meta_data->meta_value
}

And that’s what I wanted but if you want something different like an array then you can use OBJECT_K for an associative array of row objects, using first column’s values as keys, ARRAY_A for a numerically indexed array of associative arrays, using column names as keys or ARRAY_N for a numerically indexed array of numerically indexed arrays like this: -

$comment_meta = $wpdb->get_results( "SELECT meta_key, meta_value FROM wpdb->commentmeta", ARRAY_N );

for more information on the wpdb class check out the wordpress codex

Here’s a set of 10 Hi-Res dirty rust and grunge. Check out the previews and if you think you can use them, you can download all the textures zip files at the bottom of the previews.

Free Rust and Grunge Textures

Texture Previews set 1

Download rust textures part 1

Texture Previews set 2

Download rust textures part 2

How to add a wildcard entry so your wordpress mu subdomains resolve correctly

If you want to use sub domains for your wordpress mu blogs you are going to need to add a DNS wild card to get it to work. Thankfully if your host provides cpanle there’s a really easy way to do this. Here’s a screencast showing you how.

[screentoaster stUk9RREZIR11bSF5aXl5YVFZT]

Using tags in Shopify to create nested navigation is a great  way to help customers find products but once they’ve browsed to the tag page you need to let your customers  know what they’re looking at. A collection has the following property for this : -

{{ product.title }}

That works well for collections but tags are slightly different firstly a tag doesn’t have a title so you can’t have{{ tag.title }}. Tags are attributes of products and collections but if you use {{ collection.tags }} you are going to get a list of all the tags associated with the collection, which is not what we want. The function to use is : -

{{ current_tags }}

And voila this will output the current tag which you can use as a title by wrapping it in some <h2> tags or what ever you want. Nice and simple when you know how.

Hi-Res Textures for Designers

Extreme Underground Grunge Posters

Here are 8 free grunge poster textures. The images were taken on underground tube stations in London . I just loved the ultra distressed look of the many layers of posters and thought they’d make quite useful textures so here they are. You can download the hi res versions in 2 zip files at the bottom of the previews. Enjoy.

Download Grunge posters part 1

Download Grunge posters part 2

Design inspiration

Here are some examples of some really nice retro design and typography, I found in an attic. They are all pretty random, they pre-date 1980 and some of them are really grungy but I think they are all really interesting and will hopefully give a bit of inspiration for anyone who’s doing any retro typography.

I really Like the “Grand Cut” tobacco tins as you can see some logo development over the years.

How to use Liquid to create product navigation in Shopify

Shopify doesn’t have categories so to speak, but it does have collections and tag and you can combine them to make powerful and intuitive product navigation.

<ul class="collections"> {% for collection in collections %}
{% if collection.handle != 'frontpage' %}
<li><h3><a href="{{ collection.url }}" title="{{ collection.title }}">{{ collection.title }}</a></h3>
<ul class="tags"> {% for tag in collection.all_tags %}
<li><a href="{{ collection.url }}/{{ tag | handleize }}" title="{{ tag | escape }}">{{ tag }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}
{% endfor %}
</ul>


The above code will create a product navigation of all your collections and all the tags within the appropriate collection. The third line of code is use to exclude collection such as the frontpage collection which isn’t really appropriate in your product navigation.

Focus in on your typography with this simple WordPress plugin

About a week ago I came across two great articles on the Themeshaper website, The Ultimate WordPress Theme Test and Hide all your links.  If you develop WordPress themes or do any web design I suggest you read them. I just loved the idea of getting rid of everything from your theme so you can concentrate on what is important; the content. And as the the content of most blogs is primarily delivered in text, good typography is at the heart of every good blog and every great theme. You can simply add a bit of css to your style sheet when developing your theme as suggested in the articles or you can use this plugin to add and remove the css dynamically.

The wpdc Typography Tester plugin simply add 2 buttons to the bottom of your page (when an administrator is logged in). Simply click the first button to hide everything in your theme except the main content. Click the next button to put all the other stuff back.

Download: wpdc Typography Tester

Installation instructions:

1. Download and extract the plugin
2. Upload the wpdc_typog_tester folder to your plugins directory eg. /wp-content/plugins
3. Activate the plugin in the plugins section of you admin page
4. When you visit your blog as and admin you’ll have two buttons at the bottom of your browser window which will turn the typography tester on and off.

html Theory for Designers Who Want to Make Websites

So it was 1997 when a friend of a friend gave me a copy of html for dummies so I could learn how to make websites with the intention of securing a job that I am still currently employed in.  So it’s safe to say  I owe a fair bit to that book and to the simplisity of the html language. But like most people coming into the world of computer languages from another area, in my case it was art and design, I didn’t really understand why I was using this code to make pretty website layouts, I just followed the rules because that’s how it was done. In fact it wasn’t until 2005 that I really came to understand what it was I was doing with all these html tags. So for any designers who want to understand what html is and why it’s so important that it forms the foundations of your sexy website design, here’s my take on the basics of semantic html.

What is a Web Page?

As a front end web designer you build web pages and put simply a web page is a document displayed over the Internet. By document I mean any text based information. A document could be a poster, a box of toothpaste, a newspaper, a bank statement anything that communicates information by text and design.

Examples of documents

Click the images to enlarge

The problem with documents

If you take a look at the images above you’ll see some fairly familiar information communicated by text and design. Now it’s easy to read the information and understand it but there’s also a hell of a lot of stuff human beings understand that’s not communicated in the written language.

timeout shortlist the slickest city guide publishers the times
dubrovronik what is new what is on what is best sights and
sounds itineraries nightlife arts and leisure shopping eating
and drinking hotels

The paragraph above is the same textual information that is displayed on the cover of the Time Out guide that I scanned, but with the layout and formatting removed, it’s almost impossible to understand.  We take this area of communication for granted because we are so familiar with it, it’s literally second nature to us humans, but if you break it down there’s loads of stuff we are understanding without really thinking about. In the three scanned documents there a several company logos, product names, unordered lists, ordered lists, a definition list, sub headings, paragraphs, emphasized text, quotes, citations, urls, addresses and so on, and so forth. I’ve probably missed some stuff out because my brain is so powerful I understand this communication without even trying (that’s not just my brain by the way)

Humans 1 Computers 0

What we do with effortless ease, my relatively powerless CPU finds almost impossible,  buts that’s not surprising if you try to define how we understand the none textual information. Visually what makes a heading a heading, or a list a list. If we compare the hotel special offers flyer to the timeout travel book you can clearly see lists of information but they look completely different. We all probably recognize the Colgate logo, the Timeout logo because we know the companies and the the text is big and bold and near the top of the document  but I’m guessing you’ll be able to spot the company name on the hotel flyer, despite it not following any of those rules, even if you haven’t heard of the company.

Why do we need semantics html?

The simple answer to that question is we don’t. We understand a document just fine without it, that’s what I’ve been talking about throughout this post. The question should be; Why do computers need html? And the answer is again quite simple; computers are a bit thick! Well that’s not the whole story, a more accurate answer is your document (your webpage) will be delivered, on the internet through a whole load of technologies of varying “thickness”.
Firstly there are browsers Firefox, Internet Explorer, Safari, Crome, Opera they’re just the big 5 there are lots of others and several different versions of each. Then there are search engines, Google, Yahoo and Bing. Screen readers and operating systems also need to understand your document as well as programming languages like javascript and php. All these technologies, to a greater or lesser degree, need a simple way of understanding what your document is about, so with that you should understand the importance of writing good html.

html to the rescue

html stands for Hypertext markup laguage. Now hypertext just means we can traverse the web with none linear links eg from one page we can move to several different pages. Language, means exactly what you would expect. The important part is markup. Markup means to give meaning, so this language (html) gives meaning to your document, not so you can understand it but so that computer technologies can understand it. Without it your document is meaningless. So for a computer, html turns a confusing string of text into a meaningful document that can be universally understood, it can be indexed by search engines, displayed in browsers, converted to speech by screen readers, manipulated by other languages and can be the foundation for visually appealing websites.

An example of how you could markup the timeout book cover

<h1>Dubrovnik</h1>

<ul>

<li>What's new</li>

<li>what's </li>

<li>What's new</li>

</ul>

<h2>TimeOut</h2>

<blockquote>the slickest city guide publisher</blockqoute>

<cite>The Times</cite>

<ul>

<li>Sights and Sounds</li>

<li>Itineraries</li>

<li>Nightlife</li>

<li>Arts & Leisure</li>

<li>Shopping</li>

<li>Eating & Drinkink</li>

<li>Hotels</li>

</ul>

Further Reading

W3C html Tutorial

Web Semantics wiki