For us developers and techies the out of the box capabilities is more than we ever need to manage, edit, and add content in any shape or form. However many of us don’t simply build website for ourselves, and we have to think about our clients as well.

While Wordpress has a user friendly interface it is still blogging focused, and there are some usability enhancements that could be desired when those who are not technically savvy (which fits the bill for most clients) will be the primary users.

In this situation there are a few steps to improving the interface to make it easier for our clients.

1. Tweak the Admin Panel

The administration panel is with out a doubt focused on blogging, which makes sense since Wordpress is a blogging platform. Any time you aim to create more content, “Post” is always listed before “Page” and even the labeling “Write” feels more journalistic than page focused.

While it is not a perfect solution, there is a great plugin out there that greatly enhances the layout of the latest versions of Wordpress called Leopard.

With icons and a simple sidebar it will likely be more familiar to non techies or journalists.

If you like the existing interface just fine, you might want to look into the Simple CMS plugin instead. Simple CMS is a quick and easy way to change the focus from Posts to Pages.

If you want to take it a step further, and wish tweak all labeling and names to feel more “CMS” focused, the Admin Menu Management plugin will let you configure a lot of the dashboard elements to be more client friendly.

Finally cleaning up the interface can go a long way. By default Wordpress has a lot of irrelevant information on the dashboard. Information that the average client doesn’t need to be bothered with. The dashboard editor plugin lets you remove some of these unnecessary elements.

Hopefully when Wordpress 2.7 is finally released we won’t need to install these types of plugins as the interface is greatly improved.

2. Extend Capabilities of Navigation Control

If you are building Wordpress CMS sites then chances are you are using the wp_list_pages(); method of creating navigation. This is an excellent way to let clients extend their site and add pages to the site architecture with out any editing of code.

The function does leave much be desired. There are times where you don’t want particular pages to show up in the main navigation, or only include the top level of pages. Normally this requires code tweaking, which is not client friendly. Additionally your client may want several different types of navigation? For example top navigation, utilities, footer navigation, etc... these all might be slightly different.

Again you could do some hard coding, but that makes it difficult for the client to control. So ideally we would like to give some of that control to the client.

The Navigation List plugin gives you complete control over your navigation, including graphics, styling, ordering, etc.. You can create several different navigation blocks and it all done through a great drag and drop interface.

Now clients can have powerful and easy control over their navigational blocks and areas.

3. Create Custom Write Panels

Some web sites only need a homepage and a typical text/image page for content. However many sites do need “custom content” types. Typical examples may be “houses for sale” or “product pages.” Clients could try and craft the pages in the same way for every page, but that is extremely difficult and cumbersome. It would be much easier to take some of the work away from them and simply have them fill out the details (product title, cost, description, and add a picture) rather than trying to do it manually through the write panel.

There are two ways you can create custom write panels to make creating specific types of content easier for clients.

You can do some manual hard coding, like this tutorial

Or take a look into the flutter plugin

Flutter also has some great front end editing capabilities that you could look into as well.

4. Allow More Control Over the Templates

While Wordpress does make it easy to have additional templates for different types of content, allowing clients to customize templates as needed is a nice touch. A common need for example, is to allow clients to pick which sidebar to use on any given page that they are creating.

Additionally a major drawback with the format of Wordpress style pages is that you can edit / modify a pages main content but there is no easy way to edit any other areas of content. The most typical area would be a sidebar.

Side Content is another plugin that lets you have and define different sets of widgets as “side content” that can be edited on a per page basis.

The PageMash template lets you select and customize sidebars based on widgets as well as providing an easy to use interface. It features a drag and drop ajax interface for ease of client use.

5. Create Great Revision Control

Many clients love the idea of revision control. There is a sense of safety that comes with being able to revert back to a previously flawless page/post. Many clients who are not tech savvy are worried about making a change that breaks the site. Being able to switch back to a working page in a worse case scenario is very reassuring.

There are two great plugins that extend the capability of Wordpress revision control.

Revision Control

Revisions

6. Improve the Easy of Linking

If you have ever had to teach a client how to link to another interior page in Wordpress you will know how difficult the linking interface of Wordpress can be. It would be much easier to get a list of links to pages that exist for selection, rather than having to type it in manually.

AWS Easy Page Link lets you do just that.

7. Enhance Multimedia Support with Utilities

The web has become a rich multimedia experience, so it is no surprised a lot of websites not only need the ability to have multimedia on the site, but also add multimedia over time.

Two of the most common multimedia needs are the ability to add video, and to work with images. In a perfect world all clients would have the tools and knowledge to open, edit, resize and save images. However rarely is this the case.

So the Scissors plugin is a perfect fit for all your basic image editing and resizing needs, all through the administration panel.

And for those sites that need video the all in one video pack makes working with and posting video extremely easy.

8. Give them Control Over Contact Forms

It is rare to come across a site that doesn’t have at least one contact form. Many sites now have several contact forms. Beyond that, simply working with contact forms can be a pain.

Why not give the client control over their contact forms? Contact Form 7 makes it easy to create different contact forms and insert them into posts and pages. It features some worthwhile CAPTCHA spam protection.

9. Do Some Branding and Customization

I just wrote an article about branding your administration area. What came out of that were some great suggestions for plugins to brand the login / registration panels and the administration panel.

The Custom Admin Branding plugin will let you swap out logos in the administration panels for your own, or your clients (depending on how you want to brand Wordpress).

WP Admin Theme Extended will let you easily adjust and tweak the color scheme of the administration panel. Again this will let you either pick your branded colors, or your clients for the administration panel.

10. Ensure Everything is Backed up Regularly

You never know what, when and why something will happen to a website. You can’t count on clients to backup their site themselves, and I doubt you want to be in the business of managing backups for all website you create.

The DB Backup plugin has auto scheduling with a wide variety of options and methods for backing up your important Wordpress database.

Simply put it is the grouping of two typographical elements, then using different methods of traditional design to create contrast. The contrast places emphasis on the important element of type, letting the secondary element command less attention. The result is an improvement in the communication of the overall design message.

You can read it here: Improve your typography with “typographic contrast”

I have found that many clients like the nice subtle touch of branding their wordpress administration panel. There used to be a plugin that made this process easier but it doesn’t seem to work with the latest versions of wordpress. Luckily this process is simple even with out it.

What are we customizing?

By default, in wordpress 2.6+ there are two spots that the Wordpress logo shows up. At the footer in the administration panel, and the login / logout page.

The first step is easy, we simply need to find those images and change switch the logo to our own. This is merely a matter of downloading the images, altering them, then re-uploading them to the server.

Both images are located in the /wordpress/wp-admin/images directory, you are looking for:

logo-ghost.png and logo-login.gif

They look like this:

Let's start with the login page. Open up logo-login.gif in your favorite image editor.

At this point all you have to do is replace these files with a copy of your logo. To keep things in proportion relative to the rest of the design, I recommend that you keep the width the same size as the original (290px) but you could make the image taller and still have a nice login page composition.

Once you are finished, save your file and upload it back into your /wordpress/wp-admin/images directory.

If you save the file with different dimensions you will need to do some minor editing to the CSS to ensure all of the logo is visible. This can be done via the following:

Download and open /wordpress/wp-admin/css/login.css

You are looking for this code:

h1 a {
	background: url(../images/logo-login.gif) no-repeat;
	width: 292px;
	height: 187px;
	text-indent: -9999px;
	overflow: hidden;
	padding-bottom: 15px;
	display: block;
}

Simply alter the width and the height to match the dimensions of the file you just saved.

Save your changes, upload, and navigate to your login page to see your new logo in all of it’s glory.

The next step is to alter the footer logo which resides on every page in the administration panel. For this logo I recommend keeping the dimensions the same, as their is not a whole lot of room to tweak the size.

Simply open up the file in your image editor of choice, drop your logo in and save. (Make sure you save it as an index color png for consistency.)

If you did want to alter the size you will likely want to login to your admin panel and see how it looks. The logo we changed is a background image so there is a chance no alteration will be needed.

If the logo looks off, you will need to open up /wordpress/wp-admin/colors-classic.css or /wordpress/wp-admin/colors-fresh.css (depending on what color scheme you are using) and find the following CSS:

#footer {
	background: url(../images/logo-ghost.png) #464646 no-repeat 20px 10px;
	color: #999;
}

the 20px and 10px alter the background position of the logo. You can tweak and play with those until the logo looks like it is placed correctly. If the logo is larger than the footer you will most likely have to give #footer a height: ###px; equal or greater than the size of your logo.

The Color Scheme

The last step is to alter the color of your administration panel to fit the colors of your brand. You can do this by editing the same style sheet we just downloaded (/wordpress/wp-admin/colors-class.css or /wordpress/wp-admin/colors-fresh.css). I recommend altering the colors-fresh.css file so you can always switch back to default if necessary.

This is simply finding the colors and changing the hex codes in CSS. Hopefully you know enough about CSS where I don't have to spell out every step. However the main areas you will likely want to edit are:

#adminmenu 

#sidemenu 

#wphead 

#rightnow and 

.tablenav

I found it easiest to do a search and replace for specific colors and background colors, otherwise you could spend quite some time hunting through the CSS.

The Result

And their you have it! Here are a few shots of our results, pretty nice isn’t it?

As the lucky new owner and want to give myself a quick introduction. I want to start off by saying that I only decided to approach Dejan about purchasing the site after I made sure that I could stay true to his readers in terms of the type and quality of content that came out of this blog.

I was excited to find that Dejan wrote about a lot of topics that I myself have written about on my blog. Up until now, all of my writing has been about a broad range of topics on the 3.7CREA.TV blog (hopefully some of you have come across some of my more popular articles). Stylized Web presented a great opportunity to focus my writing about wordpress, css techniques, and other development related posts where I could keep 3.7CREAT.TV focused on design instead.

So a quick background on my credentials, and then I would love to hear what topics and posts you enjoyed the most from Dejan so that I can continue to create content that you want to read.

My name is Ross Johnson, and I own a small three person web design / development company called 3.7 DESIGNS out of Ann Arbor, Michigan. I teach web design / development / UX related classes at a local college. I have pioneered various different CSS techniques and tricks, which I write about on my 3.7CREAT.TV blog. I am co-host of the WebAxe podcast, and co-founder of Refresh Detroit (from the Refreshing Cities movement). So I hope to produce valuable web design and development information for all of you existing readers of this site.

I don’t want to make this post too long, so any feedback on what you would like to read about would be wonderful. I plan to keep the quality of this blog just as high as ever.

From the version one of WordPress (blogging itself, will refer to it as WordPress) you'll have to agree that nothing much is changed, no intention to change a purpose of it, showing pots and writing stays the primary goal of course. So all the themes go like this, some posts, categories, latest stuff (comments, tags etc..) right oriented sidebar... Ok, now let's think of the list of things what a usual theme should have, same as above posts, list categories, list archives, list comments, blogroll a place to advertise, subscribe.

Times are changing, as the design, but the structure stayed the same (you might show featured post, put your latest posts in like a grid or something no difference...) and now we have more and more magazine style websites offering lot's of content-news, daily updated with teams of writers so original structure doesn't work anymore, for example let's say you have 2-3 new posts a day in different categories with different authors. I hope you can see the problem here.

The solution is listing categories with recent and popular stuff, and highlighting the latest in every category (see images). So how does the structure look? Since lot's of content requires many categories and sub categories menu will be category oriented. You have to show latest post/s (in global, no specific category) and you have to list categories (and subcategories) with latest posts from each category featuring the one on the top (ordered by latest modified - recently commented etc...) that's the original idea. Standard sidebar on home page is out, as well as archives listing inside pages (archives page itself is required of course) so we're focused on content and everything else should be clever designed into some tabs or something to save space. Also very important part is allowing people to subscribe to specific category also buy listing categories.

I hope you get the idea. The first theme with this kind of structure is Gemini from Theme Galaxy (see the screenshots above)

Update: This would be reply on Johns question.
Yes this can be used for regular (personal) blogs, maybe even better than for magazines. For example let's say you have 50+ articles in 6 categories, and right now you can show less than 10 right, just on home page, so let's say that you create a grid 3x2 and put those 6 categories in it with latest updated posts titles (and excerpts if you want, with thumbnails etc..) so now you'll be showing 30+ articles right. Why? B/c you are writing that stuff so people would read it and your goal is to promote it the best you can, how often people open page 10 from your archive?

About ThemeGalaxy.net. Theme Galaxy crafts beautiful WordPress Themes that are not only professionally designed but are also affordable, with prices starting from $60 for single and $120 for developer licenses. All themes are of course compatible with he latest WordPress versions.

How to enter a contest?

All you have to do is to leave a comment here on Stylized Web with a name of the theme you would like to win and why would you like to win that theme. We'll pick four random numbers and lucky winners will get a single license copy!
Contest is open for 5 days, so it ends on October 24 2008., winners will be announced on the same day. Be sure you leave a correct name and email, good luck!

Winners announcement
Here's the list of lucky winners, congratulations! (for the ones who didn't get it subscribe on Theme Galaxy, because there will be similar stuff later on, but now hosted on Theme Galaxy. Comments without explanation weren't counted as i said.)

1. Garrett Gladden - Cassiopeia
2. Simon - Gemini
3. Andrea Di Marco - Andromeda
4. John Maskell - Draco

Now here's a tutorial how to make a author description with link, image and everything in two ways. You can see similar thing for example on Gemini Theme

Let's get started! You'll use this on single.php and the usual structure for it goes something like:

 
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...
<?php the_content('Read the rest'); ?>
...
          <?php comments_template(); ?>
          <!--
          <?php trackback_rdf(); ?>
          -->
 <?php endwhile;  endif; ?>
 

And now we'll add some template tags to show author description (small note, there are probably some plugins for all this, so fell free to look for them). Most common things you would like to show are author image, name, url and description. Here's new code

 
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
...
<?php the_content('Read the rest'); ?>
...
<div class="author">
              <?php   echo get_avatar( get_the_author_id(), '65' );   ?> <strong><a href="<?php the_author_url(); ?> "><?php the_author(); ?></a></strong>
 
 <?php the_author_description(); ?> 
</div>
 
<!-- author -->   
 
          <?php comments_template(); ?>
          <!--
          <?php trackback_rdf(); ?>
          -->
 <?php endwhile;  endif; ?>
 

If you have used "get_avatar" you will notice that we are using a different parameter than in comments ("get_comment_author_email()"). 65 is an image size, and here's how get_avatar function works (you can read more about it on codex)

 
<?php
   echo get_avatar( $id_or_email, $size = '96', $default = '
<path_to_url>' );
?>
 

So, this will generate and image with author info, and of course you should give that image some styling, in this case you can't use class because of the functions so you'll have to define it in CSS, something like .author img { border, float.... }

Here's another way if you are not using gravatars and you want to use some custom images made by kailoon http://themetation.com/2008/07/08/how-to-display-author-photo-in-wordpres/
Of course there's a third way by using custom fields, but we'll do it some other time

Further reading WordPress codex, and further idea, you can put some if-else so if there is not description to show some text etc..

All themes are of course compatible with he latest WordPress versions and have affordable prices starting from $60 for the single license just this month!

Themes are ordered in four categories for now, Business, Magazine, Personal and Portfolio so be sure you check it all out, you can browse them all here. And if you have any questions go to about or support page with theme documentations and forum.
And if you are looking for press materials or releases there's a press page available here

Today, I present to you: a WordPress mini loop to output the author description info in any place among your template files (in the sidebar for instance). The author description is the biographical info you set in your Wordpress user configuration menu. If you don’t know what WordPress is, this tutorial might not be for you, but you could start reading more about what a CMS is, and about Open Source CMS’s.

 
<?php query_posts('author=1&showposts=1'); // query for the loop ?>
<?php while (have_posts()) : the_post(); // the loop itself ?>
<?php if (is_author('admin')) { // another condition ?>
<li id="adminbio">
<h2><?php the_author_posts_link(); ?></h2>
 
<?php the_author_description(); ?></li>
 
<?php } else { // what if there is no author? ?>
 
No info available
 
<?php } ?>
<?php endwhile; //end wp loop ?>
 

Detailed explanation

If you are unfamiliar with the WordPress Loop, I would suggest you read a bit more about it, though it is not necessary for the code to work, just if you want to understand how it works.

The comments in the above code are very illustrative, but if you haven’t understood completely here it goes.

 
<?php query_posts('author=1&showposts=1'); ?>
 

This line tells WP to make a query to gather database info to display in a loop, in this case, I am limiting the query to get only posts from the author whose id is 1 (which is set for admin in a default WP installation), and to show only the latest 1 post (you could add more, if you wanted to use the loop for a different purpose, but for our intentions this will do). You can edit the author id to suit your context.

 
<?php while (have_posts()) : the_post(); ?>
 

Normal WP beginning loop conditional cycle tags, or however it’s called.

 
<?php if (is_author('admin')) { ?>
 

The previous line is an additional condition, I am not sure why if I remove it, the code does not work as expected, but it also allows you to display a no info message in case something goes wrong with the author (for example: not finding an author named admin). You can surely edit this to fit your needs.

 
<li id="adminbio">
<h2><?php the_author_posts_link(); ?></h2>
 
<?php the_author_description(); ?></li>
 

Most of these are normal XHTML tags. I wrap everything inside a list item tag, to display it accordingly in my sidebar, but you might drop it if you don’t need it. I also added an id for CSS purposes. The PHP code inside the h2 tag displays a link to all the author posts, and the_author_description WP tag displays our precious author information (edit the output information in the WordPress admin backend menu, under each user settings).

You could also add a small variation of the author link (the code inside the h2 tag), like this:

 
<?php the_author(); ?>
 

Basically, it displays a link to the author’s URL, also set in the user configurations. This URL might be, for example, a link to my main site if I am blogging in a sub domain, for example, in my own particular case: the URL I set in the WordPress installed in this sub domain (academic.lozbo.org) points back to just lozbo.org the root (of all evil). Remember that this info is available for you to edit in the WP administration panel, in the user options (top right menu, in a default latest WP version, 2.6 as of now).

 
<?php } else { ?>
OMG! Admin does not seem to have info available!
<?php } ?>
 

These lines tell WP, in case no author named admin is found, it should display the previous paragraph. Edit accordingly.

 
<?php endwhile; ?>
 

The WP loop finishes here. Depending on how many loops (or mini loops) you have, you might also need to set this at one point, for example, right after the previous code, add the following line:

 
<?php rewind_posts(); ?>
 

As I say, it is not always necessary; if you only have the main loop and this, and this second loop is put in a file which comes after the first loop, it is not necessary (or so I understand, though I am not sure, please correct me if I’m wrong!).

Additional Notes

Anyway, I developed it with a one user (admin) author only self hosted installation of WP (lots of long words), in mind, though it should work in a multi user environment, as long as the author login name is admin and the user id is 1 (which are the default settings, but a lot of people likes to add a new user with another custom name, instead of admin, and then delete the admin user… well at least that is what I like doing anyway).

Also, I tested it in the latest version of WP (at the time of writing this post: 2.6), but it should work in all the 2.x branches I think, and as I am not familiar with WP legacy template tags and code (I never designed a complete template from scratch before) I don’t know if it works in earlier versions of WordPress, though if you are running an older version you should upgrade anyway. It’s really easy with SVN.

If you do not know what am I talking about here, probably this will work for you perfectly, just copy and paste it on your sidebar.php template file, or wherever you want to display it (in the footer perhaps?).

If you decide to use it please let me know, leave a comment or email me and again thank you all for donations, have fun!

Demo
Here’s the demo HTML page

Download
Download aqueous theme (Downloaded 825 times)

Donate
If you are considering using this theme please make a small donation

How to Install
1. Download the aqueous Zip.
2. Unpack, and upload to the wp-content/themes/ directory on your server.
3. Login to your admin area and set aqueous as the current theme.