Chunk

Chunk is an ultra-bold slab serif typeface that is reminiscent of old American Western woodcuts, broadsides, and newspaper headlines. Used mainly for display, the fat block lettering is unreserved yet refined for contemporary use.

Calluna

Calluna supports a very wide range in languages and is a very complete OpenType typeface. Each font counts 723 glyphs.

Vegur

League Gothic

League Gothic is a revival of an old classic, and one of our favorite typefaces, Alternate Gothic No.1. It was originally designed by Morris Fuller Benton for the American Type Founders Company (ATF) in 1903. The company went bankrupt in 1993. And since the original typeface was created before 1923, the typeface is in the public domain.

Sansation

Quicksand

Mentone

Mentone is a new general purpose typeface, an attempt at extending the line of the great sans-serifs of the previous century, Frutiger – Stone Sans – Myriad. The font has round corners and subtle chamfers, which are all but invisible at text sizes, but add an upbeat, irreverent expression at display sizes. The typeface is named after the beautiful bayside suburb of Melbourne, Australia, where the designer lives.

Serif Beta

Goudy Bookletter 1911

Based on Frederic Goudy’s Kennerley Oldstyle.

Titilium

Junction

Junction is where the best qualities of serif and sans serif typefaces come together. It has the hand drawn and human qualities of a serif, and still retains the clarity and efficiencies of a sans serif typeface. It combines the best of both worlds.

Sovba

Sovba is an amiable rounded sans-serif inspired by handwriting. Sovba is useful for a look that is uniquely casual, fresh and smooth. Sovba simplifies character forms down to their basic characteristics, and has a strong, silky smooth forward motion.

I am going to cover a little bit from across the board as to what we can do to become WordPress developers. Some items take only a minute or two to complete while others might take a bit more initial effort. I promise though that through it all, we’ll get our development skills to a much higher level. The list does not go in order of importance, but I would say that all 10 of the tips could each be #1.

1. Build your own theme options panel for easier customization

If you’re watching the trends of premium WordPress themes, you’ll notice the growing trend of theme options panels. Everybody wants them and everyone (in my opinion) honestly needs them. They’re popping up in paid themes, custom themes and free themes, and for a good reason – they’re highly useful.

A theme options panel can give yourself (or your clients) the added benefit of being able to change a host of things on the WordPress theme without ever touching any codes. With items such as advertisement blocks, carousel boxes, newsletter & rss boxes and much more being required for a majority of theme developments today, a theme options panel is something that every theme developer should know how to create. You can read up on how to create your own WordPress theme options panels here.

2. Understanding short codes can go a long way

Short codes are another item that can make your theme that much more special in the hands of the end user because of it’s ease of use. Short codes are a simple alternative to adding tricky codes to a post/page over and over again. Giving your themes user the ease of use can ensure that you’ll be the person they go to for future work.

Creating a short code is easy. Simply open up your theme’s functions.php file and add the following code to it.

function wdl() {
     return 'Web Design Ledger rules!';
}
add_shortcode('wdlrules', 'wdl');

With the above saved in your theme’s functions.php file, you can now add your shortcode to any post/page on your WordPress powered website. Simply add [wdlrules] to your post and it will return the text “Web Design Ledger rules!”

To learn more about the custom things you can do with WordPress shortcodes, you can check out the following article from smashing magazine.

3. Mastering WordPress conditional statements

Conditional statements in your WordPress theme can really take your website from the feeling of normal blog to the feeling of holy crap how did they just do that! And the beauty of it is that with a little bit of know-how and a little bit of code hacking, you can achieve this effect. The base of conditional elements is rooted in basic php codes, so if you’re aware of php at all, you’re one step ahead of the curve. If not, don’t worry because it’s simple to pick up.

For instance, if you’re wanting to display a welcome box on your websites home page and nowhere else, the following code will take care of that.

if (is_home()) {
     echo 'YOUR WELCOME BOX CODES HERE';
} else { }

You can notice the basics of the code above as well as see how I added in the “else{}” piece, which can help you along the way if you’re wanting to even customize the theme further. Checking out this article by Web Design Wall will help you dive deep into the world of conditional elements and what they can do for you.

4. Streamline your development for faster results

If you could cut your theme development time in half, would you do it? If you’re sane, I am going to assume that you said yes. Well, it’s pretty simple to streamline your development and allow you to tackle more jobs in less time. The first thing you should make sure you’re well aware of are dummy posts. You can download dummy posts that someone else created (I released a dummy post file on WP Guerrilla recently) or you can take a few minutes to create one that fits your needs a bit better.

The idea of creating your own dummy posts is that you’re able to instantly load the file into WordPress and have all of the posts/pages/categories that you need within 20 seconds or so. First, you’re going to create everything in your WordPress test install (categories, posts, pages, ect) and then head over to your WordPress admin page and click the “EXPORT” link under your TOOLS sidebar. Export your posts. Now, any time you want to load those posts onto a new test WordPress install, you can do so by going to IMPORT under the same TOOLS sidebar section.

Another idea would be to create your own theme framework. Theme frameworks like Thematic, Thesis, WP Framework, Guerrilla Theme and many others help developers have a solid base to start from when building custom WordPress themes. I can personally attest to the fact that a theme framework has saved me hundreds of hours in the past few months alone. You can also build your own custom theme framework if you notice that you’re using the same items (header, nav, footer, sidebar, post wraps, ect) to save your time and also allow you to customize it easier.

5. Create theme specific widgets for easier use

Along the lines of the first tip I gave above, creating a theme specific WordPress widget can help allow your themes user more easily customize the look and feel of the theme. By giving different options like ad block widgets, related post widgets or various other widget blocks, your themes user can customize and rearrange the sidebars and other areas of your theme with ease.

For more information on how you can write your own WordPress widget, Justin Tadlock wrote up an awesome article on the subject.

6. The little things can really go a long way

When you’re building a theme for any reason, the little extras you put into it to polish it off will set it apart from some of the sloppy work out there that is clogging the web waves. Standing out by going the extra mile is a piece of cake when you follow the couple of items below and add them into your releases.

• Highlighting authors comments
• showing related posts without a plugin
• building an author bio box for each post
• showing sub categories on the main categories page

Can you think of other little items to add into your themes that will help set your work apart from everyone else’s?

7. Use php codes instead of plugins as much as possible

Doing this quick little trick not only saves the end user time from having to download/install plugins, it also gives you some extra added know-how for future work – which is what we’re after here right; becoming better WordPress developers?

Above I linked to an article that tells you how to show related posts in WordPress without using a plugin, but what about other items? What about if we wanted to show the tweet meme button without a plugin? Copy/paste the code below into your theme where you want the button to show and style the div accordingly, giving it float, margin, border, etc.

<script type="text/javascript">
     tweetmeme_source = 'webdesignledger';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

Starting to use your imagination, I am sure you can decipher a few other plugins and stick codes straight into your theme’s files -anything from the share this post boxes to the WordPress page navi codes and more.

8. Learn how to make WordPress as lean and mean as possible

The speed of your blog can be quickly bogged down by excess script files and codes that plugins and third part scripts create (like the tweet meme buttons, digg this buttons, facebook fan page boxes, ect). By simply applying a plugin or two to your theme and changing a few lines of code in a couple of files, you can turn your WordPress theme into a lean, mean, fast loading machine.

The first plugin I think that every blog should utilize is the wp super cache plugin. The plugin turns your dynamic pages into static html pages that it serves to your visitors which decreases load times significantly. Another plugin would be the Optimize DB plugin by Joost De Valk which does just what the name says – optimizes your database. For more hacks and tips on how to speed your blog up, WP Beginner has an awesome article on it.

9. WordPress hacks can be your #1 friend

WordPress is great for the blogging community. But with the right amount of hacks and adjustments, WordPress can be great for the web community as well. Turning your WordPress website into a CMS can be done with a few simple plugins. Below is a simple hack that will help reduce spam by disabling the ability to leave comments on your blog for anyone who comes to your blog with a NO REFERRER result (spam bots, ect).

function check_referrer() {
    if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == "") {
        wp_die( __('Please enable referrers in your browser, or, if you\'re a spammer, bugger off!') );
    }
}
add_action('check_comment_flood', 'check_referrer');

Smashing Magazine has a list of other great WordPress hacks you can read:

• 10 Exceptional WordPress Hacks
• 10 Killer WordPress Hacks
• 10 Custom Fields for WordPress

10. Keep up with the latest WordPress developments

One of the most important things you can do as a WordPress developer is keep up with the industry you are a part of. If you’re unaware that WordPress 2.9 is going to be released very soon, or unaware that there were some vulnerabilities in WordPress 2.8.4 and that is why they released 2.8.5, I would suggest checking in on some of the WordPress development blogs. Below are a list of a few of my favorite, which can not only keep you up to date on security and WordPress releases but also give you valuable tips, tricks and hacks for WordPress.

• WordPress Beginner
• WordPress Recipes
• WordPress Tavern
• The Official WordPress Blog

So what about you? Do you have any tips or tricks that the other readers here on Web Design Ledger can learn from? If so, drop them in the comments. I’m always up to learn some new tricks, and I hope you learned some in this article as well.

About the Author

Mike Smith is a blogger who writes about social media and marketing and he’s a blog designer at Guerrilla.

For more premium textures check out PremiumTextures.com.

There are 20 textures in all. Here is a preview:

Download Light Grunge Textures

About the Artist

Caleb Kimbrough is the man behind PremiumTextures.com, a store that sells high quality textures for designers, photographers, and creatives alike.

Make no mistake about it, you will recognize the ideas behind these trends. Although this list isn’t a drastic departure from what was popular in 2009, it marks different trends that will be expanded upon and made better as a result. As you think of how you will incorporate new trends into your designs, focus on the main idea of each trend. Be encouraged to dabble into these trends so that you become part of the movement.

1. Oversized Logos/ Headers

Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.

Main Idea: Huge headers that make your visitors remember you.

2. Sketch/ Hand-drawn Design

Hand-drawn design is not exactly new on the horizon, but we all know that it is still on the fringes of web design. Many designers admire the style but are afraid to create their own sketches because of the “I can’t really draw” attitude. If you look at the most popular hand-drawn websites (and relative to other types of trends, there are only a few), you will notice that most of your fellow designers can’t draw. These designs are not exactly headed to an art museum, but they do convey a sense of whimsy, and blur the line between cold web and personal interaction– the ultimate goal of the internet. If you can doodle, you can sketch for web design.

Sketch in 2010 will become more elemental, and not as much the main focus of a web design. It will be used to personalize standard web copy in new and exciting ways.

Main Idea: Sketch becomes an elemental part of corporate design.

3. Slab Typefaces

Slab typefaces are relatively new, although they’ve been around for over 200 years in traditional media. To get a good visual definition of slab typefaces, think of the old Wild West “Wanted” posters. Those bold letters are slab typefaces. Slab typeface is commonly all capital letters and are bold and imposing. Many designers have shied away from slab typefaces in the past because logos and headers were smaller and more understated. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice.

Main Idea: Slab typefaces is used to bravely express who you are.

4. Typography

Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. The idea of mixing varying font sizes together is completely unthinkable. Fonts are meant to be explored, twisted, and molded to fit your purposes. With the correct placement, a website that utilizes Typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos.

Main Idea: Typography is young, but will continue to be a part of web design.

5. One Page Layouts

One pay layouts challenge you to edit away what’s unnecessary. In 2010, this trend will move away from the quirky navigation and become more minimal in its approach. Think of these websites as business cards. These websites will be more of a one-stop-shop for how to locate you and your work on various other sites– your blog and your social media hangouts.

Main Idea: One page layouts will be more about personal profiles and less corporate.

6. Huge Images

A close relative to the oversized logo/ header, the huge image does much the same thing. It creates an visual impact that the visitor won’t soon forget. Unlike the oversized header from above, huge images are not part of the site’s branding. Instead, these images draw the visitor into your site, if not for their content then for their humongous size. In 2010, web designers will find themselves more comfortable using these big statements in their design to convey the site’s tone.

Main Idea: Huge images will be used to invite visitors in.

7. Change of Perspective

As we’ve discussed before, the desktop perspective has been done to death. 2010 will see a definite change in perspective to a more realistic view. There may also be a move toward side-shot aerial.

Main Idea: 2010 will play around with different perspectives.

8. Interactive/ Intuitive Design

Flash has seen better days. There was a time when you couldn’t visit a website without running into an annoying Flash interface. These days Flash is a lot more relaxed and much more professional. Although some designers prefer jQuery for forms and popups, Flash still has its place in design, especially when done subtly. Flash still has no equal to its interactivity. In 2010, web designers will move toward the more redeeming elements of Flash. Because the average visitor is more web savvy these days, designers will also create sites that are slightly more intuitive than in the past.

Main Idea: Interactive design will make a come-back.

9. Modal Boxes

Modal boxes are a trend that’s picking up steam and will be virtually everywhere in 2010. A modal box is like the popup’s more sophisticated older brother– it’s smooth, good looking and popular. Modal boxes are so easy to design and easy to use, making them the perfect solution for any designer concerned with usability.

Main Idea: Modal boxes will continue to pop up in 2010 designs.

10. Minimalism

Forget the old school minimal websites. Websites of 2010 will continue to feature lots of white space but with bold typology and surprising color schemes. Not all minimal websites will agree with the notion of black and white simplicity. Although minimalism is by nature muted, it will also showcase fresh colors. Minimalism isn’t cold, it’s warm and too the point.

Main Idea: Minimalism will venture into typology.

11. Oversized Footer

Oversized footers may be everywhere already, but 2010 will find them even more exaggerated. The footers of tomorrow will be less of an after-thought and more of an integral part of the design. Look for footers that feature contain random information, such as feed updates from various social media, daily polls, and Flickr feeds.

Main Idea: Oversized Footers will feature less important, but more personal information.

12. Retro

Retro designs are here to stay. Although a lot of the design community admires retro web design, it can be difficult to fully embrace this style without coming across “undone.” The key to retro designs is to be inspired by its tone and underlying playfulness. In 2010, retro design will be expanded as designers find new ways to honor vintage art.

Main Idea: Retro is new.

13. Intro Boxes

“Hi, my name is…” will find an even bigger stage in 2010 as designers recognize the beautiful simplicity of introducing yourself to your visitor. If you’re struggling with making a creative “About” page, the intro box will be your best bet. It forces you to condense who you are into a relatively small about of space. In 2010, intro boxes will push its own boundaries. Instead of the boring hello, designers will find new pick-up lines. And, instead of the left-flanked intro block, 2010 will see boxes in unusual placement, perhaps even in the middle of a page.

Main Idea: New ways to say “hello.”

14. Magazine Layouts

As more and more people migrate from the comforts of traditional press to online infotainment, designers are challenged to welcome them in with an easy transition. There is a move toward the magazine layout, where information is carefully organized on a single home page, giving the visitor an opportunity to explore as interested. The familiar layout will appeal to appeal to anyone who’s ever read a magazine or newspaper, but it will also be easier to use– no flipping pages! In 2010, magazine layout will become very huge for blogs in particular.

Main Idea: Magazine layouts will be used for infotainment sites.

About the Author

Jacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.

Enabling Photoshop to Do More

Out of the box, Photoshop is a robust graphics package with a powerful set of tools that enable designers to work their magic and create visually stunning web designs. In a typical web site creation workflow, when the design process is finished, so is Photoshop’s role. However, if you’re using SiteGrinder 2, Photoshop becomes a fully functional web page building solution. It’s a plugin that makes the transition from design to code seamless.

SiteGrinder 2 also ensures that the integrity of the design is maintained. This is so important for designers. Often times in a typical web site creation process, important aspects of a design have to be omitted because they require complex coding. SiteGrinder 2 makes sure that your design will look just as good in the browser as it does in Photoshop.

The main aspect of SiteGrinder 2 that designers will love the most is the fact that no coding knowledge is required. All of the code is generated by the plugin and it happens behind the scenes. And if you are the programming type, SiteGrinder 2 is going to be a huge time saver. There’s no longer a need to switch to Dreamweaver or TextMate after your design is finished. SiteGrinder 2 does all of the coding for you, leaving you more time to tweak your design.

So How Does it Work?

This explanation of how SiteGrinder 2 works is going to be short, because it’s such a simple process. It’s all about how you name your layers in Photoshop. The plugin requires special “hints” that tell it what each layer should be. For example, if you have a button in your design, just add “-button” to the end of its layer name, or “-rollover” to define its rollover state. Of course, for some designers this will mean actually being organized with their layer naming and overall PSD structure, but this is something that web designers should get in the habit of doing anyway. Plus the time saved by using this plugin makes it a non-issue. These hints are also used to create more complex web site elements, such as drop down menus, forms, multi-media content and more.

Basic or Pro

SiteGrinder 2 comes in two flavors: Basic and Pro. The right version for you will really depend on the functionality requirements of your sites. The Basic version gives you all the standard features, but does limit you to using solid color backgrounds. Going Pro will give you more options for background images and the added ability to easily create photo galleries, include Flash media, and add forms to your pages.

When products come along that claim to make difficult and complex tasks “push button” easy, it’s natural to be skeptical. However after using SiteGrinder 2, I’m convinced that this is a powerful plugin that can make a web designer’s job much easier.

Visit the official SitGrinder 2 site to learn more about this product.

Pods CMS

Pods is a CMS framework for WordPress. It’s a plugin that sits on top of WordPress, allowing you to add and display your own content types.

Flutter

Flutter is a plugin that gives the administrator custom write panels with the ability to add radio buttons, file uploads, image uploads, checkboxes, etc. Another key feature of this plugin is simplified templating.

WP-CMS Post Control

WP-CMS Post Control not only allows you to hides unwanted items like custom fields, trackbacks, revisions etc. but also gives you a whole lot more control over how WordPress deals with creating content! This helps you use WordPress more like a CMS, alowing you to totally customise what your authors see and use.

PageMash

PageMash give you an Ajax interface allows you to drag-and-drop the pages into the order you like, modify the page structure by dragging a page to become a child or parent and toggle the page to be hidden from output.

Role Scoper

Role Scoper is a comprehensive access control solution, giving you CMS-like control of reading and editing permissions. Assign restrictions and roles to specific pages, posts or categories.

CForms II

CForms II is a powerful and feature rich form plugin for Wordpress, offering convenient deployment of multiple Ajax driven contact forms throughout your blog or even on the same page.

Scissors

Scissors adds cropping, resizing, and rotating functionality to Wordpress’ image upload and management dialogs. This plugin also allows automatic resizing of images when they are uploaded and supports automatic and manual watermarking of images.

TinyMCE Advanced

TinyMCE Advanced adds 15 plugins to TinyMCE: Advanced hr, Advanced Image, Advanced Link, Context Menu, Emotions (Smilies), Date and Time, IESpell, Layer, Nonbreaking, Print, Search and Replace, Style, Table, Visual Characters and XHTML Extras.

Side Content

Side Content enables you to define a set of widgets which are effectively placeholders. Each one is empty until you assign content to it when editing a page. This enables you to extend the content of the page into the sidebar.

Multi-level Navigation

Multi-level Navigation adds an SEO friendly, accessible dropdown/flyout/slider menu to your WordPress blog.

Dashboard Pages

Rather than have a majority of the dashboard widgets focused on new blog posts and comments, Dashboard Pages puts the sites page listing front and center in the dashboard for easier and quicker content management.

Custom Admin Branding

The Custom Admin Branding Plugin allows you to re-brand the Wordpress login screen, the admin header and footer with your own custom images.

Pixlr

Pixlr is a powerful online image editing application. Although it can’t do everything Photoshop can do, it has some very impressive features considering it is all done within the browser.

Google Analytics

Google Analytics is probably the most popular free analytics tool available. It has loads of features including custom views and reports, access sharing, and integration with adsense.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

CSS Type Set

CSS Type Set allows you to visually and interactively style text and it generates the CSS.

net2ftp

net2ftp gives you a fully featured ftp client within your browser. There’s even a skin designed for the iPhone.

WhatTheFont

WhatTheFont allows you to scan in or provide the URL of a font and it will tell you what it is.

Color Scheme Designer

Color Scheme Designer has been around for a while, but was just recently updated with a brand new interface and a new color scheme generating engine.

Fontstruct

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Kuler

Kuler is a community driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders.

Bespin

Bespin is an online code editor by Mozilla. It allows you to write and edit code, share projects, and connect to existing open-source projects.

Adobe BrowerLab

Adobe BrowerLab gives you the ability to preview and test your websites in multiple browsers and operating systems. Since building a website to be cross-browser compatible is one of the more annoying aspects of web design, this should be a valuable web app to all of us.

W3C Markup Validation Service

The Markup Validator is a free service by W3C that helps check the XHTML and CSS validity of Web documents.

ViewLikeUs

ViewLikeUs allows you to check out how your website looks in the most popular resolution formats. It’s all powered by Ajax & PHP.

ColoRotate

As well as being a useful way to choose colors, ColoRotate looks cool and is actually fun to use. Instead of using two dimensional viewers, it presents color palettes to you in 3d and in real time.

Pingdom Tools

Pingdom Tools allows you to run load time tests on your web pages. It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars. You can view the list of objects either in load order or as a hierarchy. The hierarchy view allows you to see which objects are linked to in for example a CSS file.

There are 35 vectors in all. Here is a preview of some of them.

Download Doodles Vector Pack

About the Artist

Go Media is a well known design studio with a lot of passion for what they do. This passion definitely comes through in their Arsenal, which is a collection of high quality, hand crafted design elements that they’ve made available through an online store.