Pro Blog Design

Why and How to Use Dropbox for Client & Blog Files

Michael Martin — Thu, 05 Nov 2009 17:00:00 +0000

We all know that our computers will crash someday, and we all know that we need to make backups of our files to keep our work safe.

The hassle is that a lot of backup methods are tedious and time wasting to keep going. We want to have a backup system that we can set up, and then forget about it.

We’ve already shown you how to keep a WordPress database safe, but in this post we are going to look at the rest of your blog and theme files, as well as client files or any other important documents you keep.

Here’s what we’ll be talking about:

What is Dropbox?
Securing your blog folder.
Why use Dropbox for backing up client files.
Creating symlinks to preserve your current folder structures.
Collaborating with others on blog posts, design files etc.

What is Dropbox?

There’s a good chance you’ve heard of it already, but anyway, Dropbox is a free service which offers you 2GB of storage space online.

You install the program on your computer, and it creates a “Dropbox” folder in your Documents folder. From then on, anything that goes in the folder gets copied up to Dropbox as well, instantly.

The nice part is that you can install Dropbox on as many computers as you want, so your files are accessible from anywhere (Including a regular web interface).

So, let’s start by signing up. If you use this link, you will get the free 2GB + 250MB of extra space. That’s because of Dropbox’s “Invite a Friend” program, which you may as well take advantage of!

Alternatively, here’s the regular homepage link. Just download and install the program, and you can sign up as part of the installation.

Securing Your Blog Folder and Client Files

When you installed the program, you specified a location for your Dropbox folder (Most likely; My Documents > My Dropbox, if you’re a Windows user). We’re going to copy our blog files into this folder.

With WordPress, upgrades now take place on the server, so the likelihood is, the core WordPress files on the server will always be different to the ones on your computer (Unless you’re very meticulous about keeping the two in sync).

Fortunately, those files aren’t important. You can always re-download them from Wordpress.org if the worst happens. For that reason, we’ll stick to just 3 folders.

Load up your FTP client, and download a copy of the following:

wp-content/themes/
wp-content/plugins/
wp-content/uploads/
Optional: You may want to download your .htaccess file if you have edited it, and your wp-config.php file for your database options.

These 3 folders combined with your database backup, mean that you’ll always be able to recreate your site exactly as it was.

Now simply copy all of the files into the Dropbox folder on your computer and Dropbox will take care of the rest.

Why Use Dropbox for Client Files

There are some great ways to backup all of the files on your computer, but the problem is that they have to be scheduled, e.g. to happen once a day.

So if your computer dies, you’ve lost at least 1 day’s work.

That can be a costly mistake, but one that Dropbox would avoid. While working on files saved in your Dropbox folder, every time you click save, the saved file is copied up to the server.

Dropbox as a Version Control System

Dropbox also keeps a record of previous versions of the file, so it works as its very own personal version control system.

Check out this screenshot; it’s of the web interface for a WordPress style.css file I’ve been working on. I can roll it back to any previous version I like if anything goes wrong in the current one (Like accidentally overwriting the whole file with a different one…).

Click to see in full size:

Setting Up Dropbox For Client Files

The best way to work with client files within Dropbox is to set up 2 folders for your client files:

Current Clients
Past Clients

Current Clients is where you put all of the files you are currently working on. This is the folder that you should put in your Dropbox.

Past Clients can then be backed up to an external disk, or any other normal backup method.

You are unlikely to go over the 2GB freebie limit this way, and Past Clients files won’t change often so a daily backup will cover them 99% of the time.

Creating Symlinks to Preserve Your Folder Structure

A symlink (symbolic link) is like a folder pointer. Let’s say your original folder is here:

My Documents/Work/2009/ABC

But you’d like to be able to access that folder just by going to:

My Documents/ABC

Then you could create a symlinks for My Documents/ABC that would take you to the real folder any time you clicked it (or any time a program accessed it).

Dropbox and Symlinks

If you have a nicely organized folder on your computer for all of your client files, or your blog files, then you may not like the idea of moving the most important folder from each to a separate location.

With symlinks, we can avoid that:

Cut and paste the folder (e.g. “Current Clients”) from the original location, into your Dropbox folder.

(Important: the original must be put into Dropbox. If you do this the other way around, files will only be backed up each time Dropbox loads)

If you are a Windows user, continue reading here for how to set up the symlink. For Mac and Linux users, Dropbox themselves have a good guide on setting these up.

In Windows, go to Start > All Programs > Accessories > Command Prompt.

Windows Vista and Windows 7 users can then type, for example: (all on one line)

mklink /D "C:\Users\YOURNAME\Documents\Web\Clients\Current Clients" "C:\Users\YOURNAME\Documents\My Dropbox\Current Clients"

The first path in quotes is where you would like the symlink to be placed. The second is for the folder in Dropbox that you would like it to point to. And don’t forget to replace YOURNAME with your name on the computer.
Windows XP users will need to download Junction, and then type a similar command: (All on one line again)
junction "C:\Documents and Settings\YOURNAME\My Documents\Web\Clients\Current Clients" "C:\Documents and Settings\YOURNAME\My Documents\My Dropbox\Current Clients"

Now you can browse and find your clients folder in the same place it always has been, but you’ll actually be working on files in your safe and secure Dropbox folder!

Collaborating With Others

Folders can be shared with anyone else with a Dropbox account. Every person can edit and add to the files in the folder, and Dropbox will keep a copy of the revisions.

Just right click the folder, and select “Share This Folder” from the Dropbox menu.

You’ll be taken to a screen where you enter the email addresses of the people to share with, and it’s a simple as that.

There are a lot of options for collaborating online (e.g. Google Docs), but here are a few examples of where this could come in useful:

Working with authors on your blog who prefer to type their posts up in Word first.
Collaborating with another designer on a PSD for a client.
Working with another coder on a WordPress theme, so you both always have the most up-to-date versions of every file.

Conclusion

I love Dropbox. I use it primarily for backing up my client files and the occasional reversion to an older version of a file, but I also use it a lot for sharing files with people instantly (both for code files that other people are working on with me, and for sending over small files like images without resorting to emails or IMs).

What do you think of Dropbox? What uses have you put it to, or do you have a different tool we should look at?

40 Hand-Picked Themes For Joomla

Tehseen — Mon, 02 Nov 2009 16:00:15 +0000

Joomla is a CMS (Content Management System) that lets you create websites, blogs, web portals and online applications with a minimal amount of coding. It has a lot in common with WordPress.

We haven’t covered Joomla in any way previously on this blog, so we’re going to start by giving you a taste of the sites that can be made with Joomla. The following 40 themes are all free to use and show you the starting point you could have for your next site if you use Joomla with it.

If you’d like to see more Joomla coverage in the future, just let us know. Or of course, we can stick to good ol’ WordPress!

AdminPraise Lite

Afterrburner

IceMag

Xbox

Xbox Black

Medal Of Honor

Artik

Connect The Dots

Aqualine

Greenera 4.0

Somnia

Droppler

Mercury

News

Ink Kids Land

Manuscript

World War Craft

GetsWider

Sublime

Nuke Red

Elements

Hogwarts

L Cars

Vec Demo

Clean and Clear

Ytw Red Bah

Pink, White and Black

Orange Blog

Word Blog

Black and Orange

Field 2006

Contasi

Music Blog

Sun Burst

Art Colours

Star Craft

The Matrix

Spirit

Youloo

New Horizon

What do you think of the themes? Any great ones, or will WordPress be your steadfast favorite for the foreseeable future?

Design Review: Splashnology

Michael Martin — Thu, 29 Oct 2009 17:00:00 +0000

Splashnology is a community design site. Members join up and submit articles, which are then displayed in blog format on the website.

Today we’re going to take a look Splashnology’s design to see what has been done well, and what we would improve on. Lets start by opening up a new tab, and then on to the review!

NB – This is a sponsored design review. To see about getting one for your own site, email us.

What Has Been Done Well?

The first word that comes to mind when describing this design would be “clean.” The color scheme is largely black and white, and there is ample padding with few visual effects.

The subtle differences in shades of grey, combined with relatively large headlines and photographs take what could otherwise be a very simple appearance, into a nice, minimal design.

In the whole of the website, there are very few “graphical effects” as such to catch your eye. Instead this design relies on its very lack of those effects for its appeal, and some nice touches in smaller aspects of the site.

For instance, the article titles begin by naming their category, and then the title of the post. On a site with such a wide variety of categories, this could be a very nice of quickly scanning for the posts you want.

Another well made section of the website is the “Our Friends” blogroll of the sidebar. It is a simple list, but with the favicons of each website shown. In more colorful websites, this could end up causing clutter, but here it adds a spark of life to the site.

They may want to follow their own advice on these images and use CSS sprites though, cutting down by 19 HTTP requests.

One area of a website which rarely catches my eye is the navigation between results pages (The “1, 2, 3, 4…” etc. navigation at the bottom of a search). That changed on this site however.

The large “previous/next” makes it very easy to use. Too many sites have a tiny little arrow in a box that you have to hunt for (Or worse, a single arrow for the next page and a double arrow for the last page). Splashnology’s setup was very friendly and looks good.

What Could Be Improved On?

One big question needs to be answered; what is this site?

Load the homepage and you will be presented with what looks like a blog. You’ll see a line of tabs saying “Posts Blogs People Jobs Help”, which is a little confusing. You’ll even see the name Splashnology, which could mean just about anything.

You may or may not notice the tiny little slogan tucked under the title, “Web technology society.”

Whilst there is nothing wrong any one of those elements, when you put them all together, they just don’t mesh well. When I began this review I thought I was reviewing a blog with some unusual tabs I should check out later.

It wasn’t until later that I found the site is a community where anyone can sign up and submit articles. They even have rather extensive author pages.

If your site looks like a blog, that’s no problem. But if it’s not a blog and you really want me to sign up, to vote on articles, or anything else your members can do, then you need to make it clear.

We’ll talk about the header in a minute, but let’s just look at the social voting options for now.

Splashnology’s 2 boxes are hidden way down at the end of the post, those decimals could mean anything and even the 2 arrows aren’t that clear on their purpose (And yes, there is actually some sort of text in that blue box…)

Contrast that with Digg. One simple number which is clearly a number of votes, and the thumbs-up vote button is hard to miss.

If people are going to interact, it needs to be as simple as possible for them.

The other major area which could do with a rethinking is the header itself. This is the current header:

There is quite a lot going on here, without any one element truly taking precedence. The content includes the logo, login/register buttons, navigation tabs, a submit button, a search form, and some more navigation.

But what could be done about this all?

Let’s start with the “Login or Register.” The 2 are given equal prominence, but a user will only ever need one or the other. Now let’s assume that a user looking for the login button has been to the site before and knows it better than a user looking for the “Register” button would.

The returning user knows his link is in the top left. The new user doesn’t know where to begin and needs the “Register” to catch his eye. With that in mind, why not make the “Register” larger (or the same size), and the login a lot smaller but nearby to it.

Now onto the navigation. The large tabs divide the site into sections. Most are self-explanatory, except for the “Blogs” tab which instead of showing a list of blogs, it shows a list of topics.

This navigation is useful for people looking to get to other parts of the site, but the majority of users are going to be interested solely in the articles. The “Blogs” section already has a sidebar widget. Something similar could be made for the “Jobs”, and then the rest of the navigation can be moved somewhere less obtrusive.

The sidebar widgets will gather the attention to these sections (Better than the header could, because it will provide content from the sections, e.g. latest jobs), and users can then use the regular header links for navigation if they want to return to them a second time.

Now we’re starting to free up some space!

We’re left with the Submit button, the search bar and the 2nd navigation bar to sort out.

The Submit button is an interesting one though. Currently it is the only indicator of the social nature of this site, but for an un-registered users, it’s pointless because they have to register before they can use it.

That leaves us with a choice; we can remove the “Submit” button for non-registered users (freeing up more space), but we have to find another way to emphasize the social nature of the website.

If we highlight the social voting buttons around the post titles (With a new design, as we talked about earlier), then the social nature will become apparent. We can also use the header to help us out by increasing the size of our slogan. I’ll also take the chance to reword “society” to “community.”

When a user is logged in, they won’t have need of the “Register” or “Login” buttons, which frees up the perfect space for our submit button.

Our next move now is to focus on the second navigation bar. Let’s consider what we currently have.

A “Popular” tab which lists the most popular posts. A “General Blogs” tab which showcases posts from other websites. A “Personal Blogs” tab which shows posts written for Splashnology, and a “Top” tab which display the most popular posts, with different options for date ranges (e.g. Top in 24 Hours etc.).

Each of those then has a “Positive” or “Negative” subnavigation option.

The first thing we can say is that Popular and Top should be the same thing, so let’s strike one off our list.

Now for General and Personal; the purpose of these tabs isn’t clear until you actually click them and try to work it out. And for a new reader, what difference does it make if the article they read was submitted in, or hand-written there on the site? That information doesn’t help them find what they’re after.

We could reduce this list down by putting the main categories in the top navigation, and the actual topics in the subnavigation.

You could experiment with grouping the topics into categories and listing those (e.g. Design would be a main topic, and Inspiration, CSS, Tutorials etc. would be a subtopic), but our goal here is to make it as clear as possible so we’ll keep it simple.

We will have one tab for “Home” and one tab for “Popular.” Both of those will then list the main site topics underneath.

When a user is logged in, this also leaves us with room for a “My Account” tab, giving them quick access to things like their profile, account settings and comments.

Last but not least, the red “Search” text stands out merely by having almost the only color in the header. Let’s take that out and all a little spacing to the header.

Now we’ll compare our finished product with the original.

Original:

vs. modified:

And that was all done without adding any sort of graphic effect or changing the style in any way. It’s amazing what some organization and layout can do.

All in all, the minimal Splashnology design is well done and the style needs no changing. The usability of the site and its clarity of purpose could be strongly improved though. Taking each aspect of the site one at a time and thinking “how could I make this clearer?” will take it a long way.

What do you think of Splashnology? Is there anything you would do differently?

And on a purely Pro Blog Design note, what did you think of the style of this review? Our previous reviews have always been shorter and snappier. A list of the good sides, then a list of the bad. Which do you prefer?

Help Us Out With Some FeedBack?

Michael Martin — Mon, 26 Oct 2009 17:00:00 +0000

It’s been a while since we last asked for some feedback about who you are and what you think of the site. If you could spare two minutes to answer the polls below, it would really help us make Pro Blog Design even better!

There is also a reward for anyone answering the question at the end! Absar from ShopHTML is offering 20% off their PSD to HTML services to anyone who does!

On top of that, I will choose one random winner from the list and give them a free design review, published here on Pro Blog Design. That means you get all the feedback on your website of course, but also a good bit of publicity as well!

Poll Questions

Competition Question

ShopHTML do PSD to xHTML conversions, but also to systems like WordPress as well. To receive 20% off your next shopHTML order, all you have to do is answer the following question:

“If you could change one thing about Pro Blog Design, what would it be?”

Leave your answer in a comment on this post, and Absar will get email you soon with your discount code! (If you’d rather not, just say in the comment and I won’t pass on the email address).

You’ll also be entered in the competition to have your site reviewed here on Pro Blog Design. One winner will get a full design critique published here.

Thank you for taking the time to answer the polls and the question. We really appreciate it and you’re helping us to build a much better website!

22 (Now 28!) of the Best Green Web Designs

Michael Martin — Thu, 15 Oct 2009 08:00:00 +0000

Update (17/10/09): We’re now up to 28 awesome green web designs, thanks to all your comments!

Today is the 3rd Blog Action Day, meaning that you’ll be bombarded by articles from all over the internet on helping our environment. We took part in the first two, and of course we’ll be taking part in the bombardment today as well.

Keeping in line with our regular topic, we’ve pulled together a collection of the best designed “green” blogs and websites out there.

As web and graphic designers, one of the easiest ways we can help out a green organization is to help out with their site’s design. There are a lot of big environmental websites out there with great information which could do with a facelift!

Hopefully the sites below will inspire you with what you can come up with for a “green” website, whether it’s green or not!

And more importantly, the content on all these sites is packed with information on the effects of issues like global warming and foresting, along with tips on how to reduce your impact.

Inhabitat – One of the nicest green color palettes in this list.

Planet Green – With a pretty brave logo! Seems to work though.

Pando.org – No green to be found, which is a nice change! This one’s all in the header photo.

The Greenists – Little details like the leaves in the nav and sidebar headings are done perfectly.

Treehugger – You *must* load up this site and check out their navigation trick on the right side.

World Changing – Organizes its content particularly well.

Ran.org – A lot more striking than most others in the list!

EcoGeek – Very relaxing and easy on the eye.

No Impact Man – The illustration in the header makes this one, great work!

The Daily Green – The header typography across the site looks great.

Apple and the Environment – Like all things Apple, this one is well designed.

Evergreen – The grey and white with the awesome background image give this site a very different feel to the others. Definitely one way to stand out!

Climate Progress – Not as graphically impressive as some of the others here, you still have to give them credit for doing something different with the green color scheme.

Clean Technica – All about green technology. Notice the clever design in the logo?

Alt.Energy – The design here is mostly in shades of grey, but color is used very effectively for splitting up the different sections (blue for hydropower, orange for solar etc.)

Take Part – Very cutting edge design with some great effects!

Greenpeace – Not as impressive as you would have liked from such a large movement, but if nothing else, it is quite neatly done.

Cool Green Science – Extremely minimal, and it works.

Earth2Tech – Another clever play on circuit boards and leaves, Earth2Tech also has a nice layout for posts on the homepage.

Carbon War Room – Stunning graphics work on the planet, and a pretty impressive script as well (Shows the scale of various emissions and green energy generation)

Earth Hour – Another excellent site maintained by the WWF.

Global Warming on Change.org – A social networking design with a lot of character.

What do you think of these designs? Have any favourites? What would you do for a “green” web design?

And if you want to learn more about Blog Action Day and the thousands of articles being written by bloggers around the globe, be sure to check out Blog Action Day’s official site.

Update (15/10/09): Thanks to Gopal Raju and Sunil, we have 2 more awesome green designs to add to the list! Thanks guys.

Green Ideas – A very peaceful design with a fantastic illustration!

Heroes of the UAE – It’s not often I say this, but the Flash video actually makes this design.

Update (17/10/09): You guys are amazing, thanks to Rich Sturim, Michael Hepher, Alex, and milo for sharing what yous have come up with for green web designs. Great work!

Brighter Planet has a very simple design with a perfect color scheme.

CB Green has a very “earthy” feel with the rich brown background, and a pretty cool logo to boot!

Be Green Chic is a theme for a green shopping site with plenty of strong graphic usage.

53 Mondays is an interesting one because it is a web design portfolio site first and foremost, but their unique selling point is that they are eco-friendly. Read more here!

33 Websites For Vector Image Downloads

Lee Ka Hoong — Mon, 12 Oct 2009 16:00:30 +0000

Vector images are a very popular style on designs these days. They don’t have a fixed resolution, instead they are flexible, which means you can still adjust any dimension without losing the quality of the image.

Many designers use them for print ads, flash animation and even web design because it gives awesome flexibility, you can play around with the images and produce quality images for your artwork. If you’re a designer looking for icons, clip-arts or images for your next design project, we’ve compiled a list of the best websites where you can download the vector images for free.

Adobe

Today-Free

Ndesign-studio

Snap2objects

Designers Revolution

Smashing Magazine

Vector Cartoons

Vibr8bros

Free Logotypes

Deviantart

Design Bum

Magic People

Vectorvault

Cool Vectors

Dr-Depot

Createsk8

Vector Stock

Vectors Workshop

The Pixlpusher

All The Flags of The World

SVG-Cards

BrainCorp

VectorJunky

Vector Portal

KeepDesigning

RoundPixel

FreeVectors

QVectors

Bittbox

Vecteezy

Vector4Free

GoMediaZine

Vector Wallpapers

Which sites are your favorites? Any great collections that we’ve forgotten?

Automatic Wordpress Thumbnail Without Custom Field

Fikri Rasyid — Mon, 05 Oct 2009 16:00:07 +0000

Let’s say you want to show thumbnails in your blog’s front page. A lot of blogs do that now and it’s a good way of making the page look more alive.

The only problem though is that using custom fields can be complicated and time-wasting. This post will show you how to make your theme generate thumbnails automatically, based on your post’s first image.

This trick is done by mixing some wordpress hacks and a php script. The PHP script is Darren Hoyt’s timthumb.php, the hack is WpRecipe’s how to get the first post image.

Together, they’ll grab your image and resize it for you! Let’s get started.

1 – Get the TimThumb.php Script

Get the timthumb.php script and place it on your theme directory. You can either download it, or create a blank timthumb.php file on your theme directory, open the script here, copy, paste it into your timthumb.php file, then save it.

2 – Edit Functions.php

Open your theme’s functions.php file (Or create a file with that name if it doesn’t have one), then paste the code below into it. This will retrieve the URL for the first image in your post. The code written here is based on WpRecipe’s original post.


// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, ');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, ', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;  
 
$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);
 
}
if(stristr($image[$num],')) { echo $imgThumb; }
$more = 0;
}
//retreive image ends
?>

3 – The Thumbnail Code

This is the thumbnail code. This code has to be written inside the_loop. Since the most common use of thumbnail is to be shown beside the excerpt, in this tutorial we’ll paste this code above the_excerpt(); or the_content(); in index.php or home.php file.


 the_permalink(); ?>" title=" the_title_attribute(); ?>">
 bloginfo('template_directory'); ?>/timthumb.php?src= getImage('1'); ?>&w=150&h=150&zc=1">

The code above will create a 150×150 pixel thumbnail. If you want to change the size of the thumbnail, just change the ‘w’ and ‘h’ parameters. For more info, read the timthumb post here.

4 – Add some CSS Rules

You can style the thumbnail in any way you like, for example, you might add the following to your style.css file:

1
2

.thumbnail a:link, .thumbnail a:visited {display:block; float:left; padding:5px; background:#e2e2e2; width:150px; height:150px; margin:5px 5px 0 0;}
.thumbnail a:hover, .thumbnail a:active {background:#C4C4C4;}

And the result would be something like this:

No more custom fields, no more uploading images purely for the thumbnails, no more pain. What do you think? Is the time saved worth it, or do you prefer to craft your thumbnails more carefully?

13 Great Wordpress Plugins To Power Up Your Admin Area

Tehseen — Thu, 01 Oct 2009 16:00:51 +0000

Wordpress plugins are a great way to enhance and optimize your blog. In addition to adding more features to your actual blog, there are also a lot of plugins that can give you more control and power over the wordpress admin area.

Using these plugins you can do everything from hiding unnecessary elements to customizing the look of your admin area.

1. Admin Management Extended:

Traditionally, you would have to open a page/post to edit any properties. This plugin adds certain icons to the Manage post/page view so you can make changes without having to open the edit screen. You can change post/page title, edit post slug and change publication date with a neat pop-out calendar.

This plugin also allows you to toggle post/page visibility, toggle comment status open/close, changing page order with drag and drop, inline category and tag management, hiding draft posts and a lot of other functions that would otherwise need you to go through a number of hierarchical clicks.

Download this plugin here.

2. Pop Menus For WP Admin:

How would you like pop-up menus for all the Wordpress admin features? You can get them with this plugin and speed up your admin area navigation. It adds a pop-up sub-menu to the main WP menu items in your left sidebar and works even when the menu is collapsed. So, no need to collapse or hide the menu items anymore to save space since the plugin takes care of that automatically.

This plugin is based on jQuery and CSS and can be downloaded here.

3. Ozh Admin Drop Down Menu:

This plugin makes you super productive by bringing all the admin links to a neat drop down menu. No need to go through multiple hierarchies any more, now you can jump to any admin page by selecting it from a CSS driven drop down menu.

In addition to smoother navigation, this plugin also saves you a lot of screen real state and makes your admin area simpler. You can further customize this plugin by switching on/off the header, choosing a color scheme, display/hide icons in the drop down menus and a number of other tweaks that would let you create a compact admin area.

Download this plugin here.

4. Simply Tags:

Get more out of tags with this plugin. It allows you to mass edit tags for a large number of posts, offers an auto-completion feature for entering tags and displays quick tags that you can click to select. The plugin also offers an auto-tagging feature where some tags are automatically entered based on the keywords in your post.

This plugin is specially useful if you want to add, rename or delete tags from a large number of posts. Imagine renaming a tag in hundreds of posts without this plugin, it would literally take hours. Whereas, with Simple Tags it takes less than a minute.

Download it here.

5. Pre-publish Reminders:

A simple plugin that displays reminder items you should consider before publishing. You can put a check-box against each item and check it off as you complete. These reminders are displayed on the write post page. Specially useful if you are running a multi-author blog and people tend to forget one thing or another. Moreover, you can also customize the text color and background to make the reminders more prominent. All these settings can be handled from an administration panel under the Manage Posts section.

Download this plugin here.

6. Wordpress Tweaks Plugin:

A simple yet powerful plugin to control the admin area of your blog. Offers various tweaks including turning off auto-complete for tags, disabling flash uploader, disabling self-pinging , disabling the dashboard and setting various SEO and security options to further optimize your blog . You can also use the plugin to control the nofollow options for your blog.

Download this plugin here.

7. Adminimize:

Adminize lets you get more out of the admin area by visually compressing and hiding many items. You can hide unnecessary items from the main menu, the sub menu and even the dashboard. You can move the dashboard to the menu or even remove it completely from the back-end. Different settings can be selected for different users based on the requirements. All input fields can be scrolled so you don’t need to make them bigger. The plugin also offers various features for tweaking the write page, the media, links and even the plugins.

It is probably one of the most comprehensive admin area plugins that give you complete control over your blog settings.

You can download this plugin here.

8. Wordpress Admin Bar:

Gives you an admin bar similar to Wordpress.com. You can access the admin features of your blog without going to the dashboard. Simply access the desired feature from any page of your blog, as long as you are logged in as the admin. You can display or hide any of the menu options to make it more productive.

You can get the Admin Bar plugin here.

9. Easy Admin Color Schemes:

Customize the colors of your admin interface with this plugin. You can switch between various color schemes without editing a single line of CSS. You can even add or import your own color schemes and the plugin would generate a stylesheet for it. These color schemes can also be previewed, copied and exported to use with a different blog.

While creating a color scheme, all you have to do is choose 4 primary colors from a color chart and the CSS would be edited accordingly. If you like an existing scheme but want to change a couple of colors, you can do so by editing the scheme and choosing new colors.

Download this plugin here.

10. Wordpress Admin Quick Menu:

This plugin adds quick menu items to your wordpress sidebar. Using this, you can access external pages like analytics and shopping carts from within your admin area. It works by adding a new menu to the left side of your control panel where you can add links to various internal and external pages.

To add new item, you simply need to provide the URL of the webpage and give it a menu title. You can also adjust the security level of each menu option for different user-roles.

Download it here.

11. Admin Expert Mode:

Are you tired of the inline documentation included on the admin pages? If you have been blogging for a while you no longer need paragraphs explaining to you what are Excerpts or TrackBacks. If you are familiar with all the different features of wordpress, this plugin can remove the verbose description and text included with different fields.

For example, this is how the write post area usually looks, with inline descriptions for various features.

However, using this plugin has removed all the descriptions and cleaned up the space.

It does NOT remove field labels, section headers or anything containing actual data. Moreover, after you have activated this plugin, every user must go to their profile to enable expert mode.

Download this plugin here.

12. Wordpress Admin Notepad:

This plugin creates a simple notepad in your admin area that you can use to save notes. You can hide/show the notepad with a single button and have different permission settings for each user role. It is a good tool to have if you often jot down things related to your blog.

Download the notepad plugin here.

13. Admin Trim Interface:

This plugin allows you to trim the interface by removing certain elements. You can remove different elements including the visit site button, the dashboard link, the “howdy” greeting, the wordpress version from the footer e.t.c. Each element has to be selected manually in order to be removed. However, all these changes are global and would effect all users.

Download this plugin here.

Have you used any plugins on your admin area? What about any of the above?

Elegant Themes New Theme Options Page

Michael Martin — Wed, 30 Sep 2009 00:00:00 +0000

Options pages are becoming a core part of WordPress themes, particularly in premium ones where the competitive edge it gives is an essential.

Back in June we looked over the state of theme options pages at the time and found a lot of good things were happening. They make working with themes much easier by removing the need to delve into any theme files or code.

Elegant Themes (Who we have reviewed before) are one of the top premium themes sites around and have just recreated their options page entirely.

This is a sponsored review, and as always, we’ll be focusing more on the design than the functionality to see what we can learn from it.

What Makes It Different?

The design of this page is stunning. It looks every bit as good as the theme itself, take a look and see (Click to see full size).

The vast majority of theme options pages and plugin settings pages try to mimic the WordPress admin panel design, with varying degrees of success. The result is rarely cohesive though, we normally end up with a few input boxes and a paragraph or 2 that stretch all the way across the screen.

ePanel (The name for this options panel) is very different to the normal WordPress admin design, but still fits in nicely.

Color Scheme – The colors chosen suit the default admin background perfectly. They aren’t used in the exact same way, but the same white, grey, blue set is there and it looks great.
Sidebar navigation options – As with the main WordPress navigation, the ePanel navigation is held in a sidebar on the left. No inconsistencies there.

But of course, it improves on the default settings page design in many ways:

Stronger background colors – The grey and blue backgrounds could well be overpowering if the entire screen was using them, but with the white WordPress admin panel surrounding it, it looks great.
Subtle gradients and careful effects – Every button and box is beautifully designed and always so easy on the eye. Few control panels on the internet look this nice.

AJAX everywhere – The only time the page has to be reloaded is when you save your changes. Navigating using either the sidebar or the tabs on top is done with AJAX, which makes getting around all the different settings a much more pleasant experience.
Help icons for everything – The little red circles (With question marks) you see in the screenshot above are all clickable help buttons. Every option in the panel has them, taking you straight to the information for that one option. Much easier than opening up an entire support document!
And of course, it’s using JavaScript to pop up gracefully (Shown below).

What About the Functionality?

The fantastic new design is what really caught my eye, but of course the functionality to back it up there is there as well.

Two of my favorites features are:

Color picker – The Colorization page allows you to set the colors for 12 different aspects of the design, as well as specify a child stylesheet. At the top of the page though is a color picker to help you easily work out the hexcodes you want.

Postinfo controls – This little tool lets you specify what info you would like displayed on your post pages. The fun part? You click the 4 options to enable/disable them. It’s just a very nice user interface touch.

Aside from these 2, all of the options you would hope for (and a few more!) are present. Things like FeedBurner integration, page navigation controls, and code sections for the head and footer are all there.

For more info on what’s covered, check out the Elegant Themes blog post.

Conclusion

The new options page looks great and it’s going to be a real treat for all current and future Elegant Themes customers. But more so than that, it’s a perfect example of how a settings page can be done well.

With so many plugins and themes trying to create a pleasant admin experience, maybe they can learn something from what has been done here.

Nick from Elegant Themes is in the middle of adding this options page to all of his themes. Obviously this takes some time to do, so he’s rolling out the updates in batches of 6 themes at a time. The first 6 are done now, and of course, you can expect all future themes to come packed with this page as well.

If you want to join the Elegant Themes club and get full access to Nick’s whole collection of 26 beautiful themes, you can do it for just $19.95 a year. That’s less than $1 per theme, so it’s hard to beat the value. The signup page is here if you’re interested!

So what do you think of the page? Is the entirely custom design a step up from the normal theme and plugin settings pages we see? Or will it get annoying if every plugin and theme starts coming up with their own designs?

Top 50 High Quality Twitter Icons for FREE

Toan Nguyen Minh — Mon, 28 Sep 2009 16:00:14 +0000

Currently, Twitter is one of the most popular social networking sites. Most blogger are therefore interested in adding some twitter icons to their blog, so that their readers can submit their article to Twitter quickly, or just find their Twitter account and follow it.

Here we’ve collected together some of the best twitter icons we’ve come across online. Surely you’ll find one that suits your site!

For the code to add a twitter button to your blog, read Social Bookmarking Link Codes. And if you want to add some RSS buttons to your blog, you can visit the RSS Icons and Best Free Icons that we collected together to choose a great icon for your blog.