Wordpress is blowing up, as the kids say, these days. It’s no wonder; the open-source authoring platform is super-powerful, flexible and – most importantly – customizable. We use Wordpress here at Paper Leaf to power our client sites, and we use it on our own blog of course. The more we use the platform, the more we learn about it. Just like anything, you pick up little tips and tricks to make the experience get better each time.

With that in mind, I’ve compiled 7 tools/plugins/tips we use on the regular when it comes to implementing Wordpress as a content management system (CMS). If you have experience using Wordpress and are looking for a few little tweaks to maximize your clients’ experience with it, look no further!

Custom Admin Branding

Let’s start at the beginning of your client’s user experience: the Wordpress log-in screen. You can stick with the tried-and-tested Wordpress-branded log-in and admin screens – but if your client is a small business or service, why not custom brand it for them? It looks slick, your clients will love it, it lets them know they’re in the right place, and it’s super easy to do with the Custom Admin Branding plugin.

This (stable) plugin has a very simple user interface to adjust colors and such; but the best part is that it comes with a PSD template so you can make sure your client’s logo won’t be cut off, etc. Follow the simple steps provided by the plugin author after you activate Custom Admin Branding, and you’ll have custom log-in and admin screens for your client in no time.

Adminimize

So your clients have logged in to through their custom-branded log-in page. Now they’re at their custom-branded Dashboard. While Wordpress is well-known for its ease-of-use, it can still be a little intimidating for your not-so-tech-savvy clients. Plus, there are areas that are much better left untouched by the non-tech-savvy – areas like Appearance, Settings, Plugins, even Posts if there’s no Post functionality being used in the website. A very simple way to remove some/any/all of these features is by using the Adminimize plugin.

This (stable) plugin is really quite robust; a basic row/column system allows the administrator (you, preferably) to show/hide elements of the Wordpress admin side. The best part: it’s role-specific. What I mean by this is that you can allow “Editors” to see one set of elements, “Authors” to see another, and so forth. This is great for small businesses who might have multiple people handling content on their website – they can be given a login and a role that only allows them to see – and thus edit – elements of the website that the administrator deems fit. Pretty slick for a plugin, I’d say.

Hit the jump for the rest of the post!

Custom Fields

Custom Fields are where it’s at. This little bit of functionality genius, located under the main content editor on any page/post window in Wordpress, allows any sort of content to be added anywhere within a page or a post by a user. When we’re talking a CMS, this means us web designers can provide simple, multiple editable regions on a single page to our clients.

For example, say you have a layout that has a banner image top left, a live-text headline top right, and page text below. The main page text can be controlled with the main Wordpress post/page editor, as per usual. But with Custom Fields, you can assign a key called “banner” and a key called “headline”. Provided your code is correct, your clients can put the URL to the image they want to use in the “banner” section in the value field, and the text they want in the headline in the “headline” value field. Hit update, and you’re good to go. Have a look at the images below for a visual example.

On the code side of things, you just have to make the custom field data show up in the proper place by using this hook:

<?php get_post_meta($post_id, $key, $single);?>

Where $key is the name (“banner” or “headline”, in our example). This will insert the code you have in the value field, so if you want an image to show up, you need to wrap the hook in the proper HTML tag. If you want to put in styled text, you need to wrap the hook in the proper HTML tag as well (H2, em, whatever you want). Hopefully that makes sense! If not, read the Wordpress Codex section on Custom Fields.

This is a fairly basic use of Custom Fields, but chances are it’ll be all that’s needed for most of your clients. If you want to see a pretty crazy example of the power of custom fields in Wordpress, check out Chris Coyier’s screencast about advanced uses for custom fields over on CSS-tricks.com.

Dashboard Widget Tip

So now your clients have multiple editable regions on their website, thanks to your newfound status as Custom Field Ninja. However, there are always a few rules to be followed by the client to make sure they don’t break the website, or make it look like your 13-year-old niece’s MySpace page – for example, rules like “Use Heading2 for all headings in Pages” or “Slider images must be 600px high by 300px wide”, etc. You could send these guidelines in an email and hope that your client doesn’t lose/delete it, and that your client forwards it to all parties who might be editing website content. However, that’s a somewhat risky – and passive – way of handling this issue. So how can we make this information constantly, easily accessible?

Simple. Put it right where they need to see it – when they log in to their admin end, right smack dab in their Dashboard. How? By making a custom Dashboard widget.

It’s really quite easy – the code can be found in the Wordpress Codex, and you just put it in your theme’s function.php file. Here’s the code (note: make sure all quotations are single – apostrophe style!):

// Create the function to output the contents of our Dashboard Widget

function example_dashboard_widget_function() {
// Display whatever it is you want to show
echo ‘When authoring content to ABCCompany.com, please follow these guidelines:’;
echo ‘<ul><li>No LOLCat photos</li><ul>’;

}

// Create the function use in the action hook

function example_add_dashboard_widgets() {
wp_add_dashboard_widget(‘example_dashboard_widget’, ‘Name of Dashboard Widget: ie. ABCCompany Website Authoring Guidelines‘, ‘example_dashboard_widget_function’);
}

// Hook into the ‘wp_dashboard_setup’ action to register our other functions

add_action(‘wp_dashboard_setup’, ‘example_add_dashboard_widgets’ );

Scan through the code for where to put the title of the dashboard widget (“ABCCompany Website Guidelines”) and the content of the widget (just above that). You can use HTML styling – unordered lists, anchor tags etc – and with this, you have a super simple rules & guidelines widget your clients will see when they log in.

Be careful with this though; make sure you have a backup or way to undo your changes, because screwing up your functions file screws up your site.

There is also a way to force this to the top of the Dashboard, above all other widgets. To read how to do this, and learn more, check out the Wordpress Codex on this function.

Wordpress Gallery Function

Clients looove photo galleries (dependent on the field they’re in, of course). They’re great for a variety of areas: showcasing work, showcasing product, showcasing a space etc. Luckily for us, Wordpress has had a gallery function since 2.5. I know! We just recently found out about it too.

The gallery function is simple to implement, which means your clients can manage their own galleries once you show them how. Here’s the breakdown: upload a series of images to a page/post via the Media uploader. Save all the images, and they show up in the Media Viewer under a “gallery” tab. Click on that link, and you have a few options for your gallery (amount of columns, etc). Click “Insert Gallery” and BAM! you have a gallery on your page/post.

Now, I should mention: customization of the gallery is very limited (read: nonexistent) unless you want to hack around, which I don’t. The gallery outputs thumbnails that are 150X150 I believe, and they look good. As well, some people have raised a stink that the code that the gallery puts out isn’t valid – I personally don’t really care, since the code works in all browsers and I’m sure it’ll be fixed in a future iteration of Wordpress.

Now that that’s out of the way, let’s make that gallery you just made shine with the next tip: the ShadowBox JS plugin.

ShadowBox JS

The basic gallery you just made in Wordpress is fine, but it opens the image in the window/in a new window – not as great-looking as it could be. This is where ShadowBox JS comes in. This plugin, which plays nice with others, will auto-magically turn your Wordpress gallery into a javascript-powered gallery, showcasing the full image in an JS image overlay (the same, very popular method you see everywhere). All you have to do is download the plugin, activate it, and check the settings to make sure everything’s the way you want it.

An extra awesome feature of Shadowbox is that it also has the functionality to play movies & mp3s in the same fashion.

Please do note: since this post is about Wordpress as a CMS, I imagine most of you who go on to use ShadowBox JS will be using it for commercial purposes. ShadowBox is free for personal use, but you have to buy a $20 license to use it for clients. As in, a one-time $20 fee to use as much as you want ($50 for a whole agency to use it, with multiple developers in-house). So please purchase the proper license; this plugin is awesome, and well worth it.

Google Analyticator

A nice-looking and functional website is great and all, but it’s sort of useless if you can’t tell how effective it is. The best way to follow a website’s effectiveness is to use Google Analytics. The easiest way to do this is by using the Google Analyticator plugin. From the author: “Google Analyticator adds the necessary JavaScript code to enable Google Analytics logging on any WordPress blog. This eliminates the need to edit your template code to begin logging. Google Analyticator also includes several widgets for displaying Analytics data in the admin and on your blog.”

Sounds pretty good to me. Price is right too – free. This guy is just as easy to implement as all the other quality Wordpress plugins out there – however, if you have any issues, here’s a great FAQ.

There you go – 7 tips & tools to maximize Wordpress as a CMS. Any that you find useful? Please share in the comments. Also, would you like to see a series of posts on how to turn an HTML/CSS design into a functioning Wordpress theme? Let us know via this poll here!

Hopefully you found this post useful; if so, please spare a minute to retweet or vote this up on your network of choice below. I’d appreciate it!

Welcome to Vol 3 of Found Fridays! This week’s finds include a great article summing up the basics of CSS3, a cool project involving t-shirts designed by bands for charity, a fun little chalkboard notebook, a website showcasing designer’s workspaces, and a brilliant article on what a brand is and what it isn’t. Read on!

BASICS OF CSS3

CSS3 has gotten a lot of coverage from a bunch of design blogs, and thus it’s been a little overwhelming just to figure out the basics and what we should know as a starting point. Luckily webdesignerwall.com came through with a timely & easy-to-digest article for all you web designers out there.

YELLOW BIRD PROJECT

This awesome Montreal-based nonprofit works with a variety of bands, asking them to design t-shirts with the proceeds going to a charity of their choice. Not only a cool idea, but some great tees in there too. Check it out!

Hit the jump for the rest of this week’s finds!

CHALKBOARD NOTEBOOK

Quirky – a notebook which you can write in (obviously), but also one you can write on the OUTSIDE of. With chalk. So all your drawings like ME + ROBERT PATTINSON = TRU LUV 4EVA can be erased later before your clients come over. (via swiss-miss)

WHERE WE DESIGN dot COM

Designers workspaces are usually something to behold, as most designers are as equally anal about workspace design as they are about their own client designs. Here’s a site that is focused solely on showcasing cool design spaces from around the globe.

YOUR LOGO IS NOT YOUR BRAND

Something every logo designer, identity designer, brand manager, etc etc should read. I’ve been guilty of misusing the terms brand/logo/identity before; not anymore, thanks to this reminder. Read it or be scorned by your design brethren.

Enjoy, and tune in Monday for a fresh new post – and Friday for another Found Friday installment.

Recently, Paper Leaf Design was offered the opportunity to rebrand 3rd Street Beat Entertainment – a group that offers hip-hop dance instruction, as well as show promotions and other related services. It’s always a nice break to get away from corporate design and be able to work with a company based in the arts, whatever branch of the arts that might be. New challenges present themselves, and it’s a good way to avoid getting into any sort of design rut, so we were all over it.

The challenge with this redesign was to make an identifiable & timeless logo for the overarching “parent company” of 3SB, as the gents behind 3SB also run Hip Hop for Hope, Santa’s Kids, Artists Emerge and more under this brand. We needed a logo that maintained a professional look-and-feel, but still spoke a bit to the nature of what 3SB does (without being too literal). The goal was to create something that balanced strength & confidence with movement. Here are the old 3SB identities:

As you can see, the old logo made use of the easy-to-remember acronym 3SB. However, the design suffers a bit with the combination of a harsh radial gradient in the background, along with a dated 3D effect and questionable typeface choice.

Another version of their logo (how this was used, I’m unsure):

This version just has too much going on to be effective. The legibility suffers thanks to the busy nature of the design, and while the radial gradient was carried over, it still doesn’t look very good. There’s no 3SB acronym, and while the silhouettes in the background make it clear that 3rd Street Beat has something to do with dance, the design isn’t the strongest.

Here is the new logo, designed by Paper Leaf:

Hit the jump to see the black on white version!

The client expressed a desire to use a black/white/grey color scheme, which we were down with. I love black & white designs – they ensure that the shape, the logo itself, is strong & not relying on any color treatments to be effective.

We played with the idea of negative space to create a symbol, using a strong gothic sans-serif font as the basis & modifying it for the symbol. The bold strokes of the symbol speak to the ideas of confidence & strength, with the diagonal lines showing the movement I wrote about earlier.

The logo works as any good logo should – at large sizes, at small sizes, black and white (obviously). As well, the logo’s strength, confidence and professionalism appeals to the parents of the kids who enroll in 3SB’s dance classes (because, let’s face it – they pay the bills), and the logo also has appeal for the teenagers who make up most of 3SB’s actual clientele. It was interesting defining the target market and figuring out how to design to two separate ones; I think we succeeded here.

The nature of this design would lend itself to some pretty stellar collateral (website, business cards, letterheads, envelopes, marketing materials etc); however, it remains to be seen if the client will roll out new collateral any time soon. If that happens, we’ll update this post. I envision some sort of use of a pattern using the symbol – hopefully we get to try this idea out.

What are your thoughts on the redesign? What do you like? What would you have done differently? And, if you liked this article, here’s another that goes more in-depth about a logo design for a recording studio in Edmonton.

March is here. That means February is over, which means time is going mega fast. You gotta love March; it starts warming up outside, people start to think about getting outside a bit more – it means winter is on the way out. While that sucks for lack of snowboarding, it is good for post-work libations on a patio. Enough rambling; here’s this month’s desktop wallpaper. The theme is all in the color; teal is a mix of blue & green. Blue = cold, green = growth (this is what the Color Theory Reference Poster tells us!): a good combination for the month of March, as we’re starting to sneak out of winter & into spring, but we’re not there yet. Enjoy!

Click to download the March 2010 Desktop Calendar Wallpaper in 1920X1200, 1680X1050, 1440X900, and 1280X800. Share away!

Welcome to Found Friday Vol 2. This week’s finds include a collection of awesome Macbook cases, a beautiful & fun letterpressed card, a list of Mac & web apps for graphic designers, and a great article on why being a designer is awesome. Enjoy!

CTRL + Z Card

If you’re a designy nerd, and you did something to upset a fellow designy nerd, what better way to apologize than with a beautifully designed & printed CTRL + Z letterpress card? Found on swiss-miss.

Macbook Cases

Jacob, over at Just Creative Design, asked his network for suggestions for a potential cool case for his Macbook. He got inundated with suggestions; here is his list. If you’re looking for an awesome case for your laptop, look no further!

Hit the jump for the rest of this week’s finds!

5 Reasons Why I Love Being a Web Designer

There are a lot of articles out there on how to deal with difficult clients; sites like ClientsFromHell; web design comics complaining about this & that etc. It’s refreshing, then, to read a positive article from a fellow web designer on why he loves what he does. I’m calling for more of these!

10 Great Tools to Create a Mobile Version of Your Site

Various web sources pinpoint sales of the iPhone at 40 million – and that’s just up to 2009. Blackberries and other mobile web devices are very popular too. With this growing popularity comes the question: is your website mobile-friendly? Here is a list of 10 tools to create a mobile version of your site – most free, with a few paid options. One omission: if your site or blog is powered by Wordpress, check out the WPTouch plugin. We use it on the Paper Leaf blog – simple to use & looks great on an iPhone.

Killer Mac & Web Apps for Maintaining a Graphic Designer Lifestyle

It seems there are 10 solutions for every 1 problem out there – it can be difficult to know which solution is best for you. One method is to see what the pros are using; chances are, if they’re using it, it’s a good solution. Here’s a list from Brian Hoff about a few of the applications he uses – some of which I use, and the rest I’ll be checking out.

That’s it! Tune in next week for a new post on Monday, and another Found Friday on … well, Friday. If you liked this post, I’d love a vote (below) for whatever site you use – and why not subscribe to the RSS so you can stay in the loop? Thanks!