Enhance WordPress for clients

Many clients require the ability to be able to edit or add content and media on their website, through a content management system.

Below are 3 way to enhance the experience for clients while they are using WordPress.

1. Add styling to the Visual Editor

The default styling of content in the WordPress visual editor is not very appealing. The font is serif, black and runs all the way along the screen. When editing content like this, it is difficult to determine how the finished product will actually look. Luckily, there is a way to add styles from your website to the visual editor, meaning that what you see in the admin area matches what you will see on the website.

Add the following code to your functions.php file.

add_editor_style();

Create a new .css file in your theme folder called editor-style.css.

Add the styles which your content will be using. Below is an example of styles used on this site.

html .mceContentBody {max-width: 640px;}

* {font-family: Georgia, "Times New Roman", Times, serif;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
h1 {text-transform: uppercase; font-size: 70px; line-height: 119px; letter-spacing: 7px; text-align: center; color: #111;}
h2 {font-size: 24px; line-height: 38px; margin: 0 0 30px 0;}
h3 {font-size: 18px; line-height: 29px; margin: 0 0 23px 0; border-bottom: 1px solid;}
h4 {font-size: 18px; line-height: 29px; color: #444;}
p {font-size: 14px; line-height: 23px; margin: 0 0 19px 0;}
.border {border-bottom: 1px solid;}

ul, ol {list-style: disc; margin: 0 0 24px 0;}
li {margin: 0 0 10px 36px;}
p a, li a {border-bottom: 1px solid #d5d5d5;}
p a:hover, li a:hover {background: #dcf5ff; border-bottom: 1px solid;}
hr {display: block; height: 1px; border: 0; border-top: 1px dotted #aaa; margin: 24px 0; padding: 0; clear: both; float: left; width: 100%;}

img.alignright {float: right; margin: 0 0 14px 14px; background: #fff;}
img.alignleft {float: left; margin: 0 14px 14px 0;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto;}

a img.alignright {float: right; margin: 0 0 14px 14px;}
a img.alignleft {float: left; margin: 0 14px 14px 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

Upload functions.php and editor-style.css to your site, then take a look at your content in the visual editor.

2. Add more buttons to the toolbar

Add commonly used text editing buttons to the toolbar, to assist your clients with the transition from programs such as Microsoft Word.

function add_more_buttons($buttons) {
 $buttons[] = 'hr';
 $buttons[] = 'del';
 $buttons[] = 'sub';
 $buttons[] = 'sup';
 $buttons[] = 'fontselect';
 $buttons[] = 'fontsizeselect';
 $buttons[] = 'cleanup';
 $buttons[] = 'styleselect';
 return $buttons;
}
add_filter("mce_buttons_3", "add_more_buttons");

Thanks to Chris Coyier for the code.

3. Educate your clients

Let your clients know about things such as:

• Shortcuts 
  Ctrl + B will bold text, Ctrl + 2 will create a Heading 2 style. See more shortcuts here.
• Preview Button
  This will allow clients to preview their content before it is published onto their website.
• Full Screen Editor
  In versions of WordPress 3.2.1 and above, this allows clients to edit content in a full screen window  free of distractions.
• Internal Linking
  The insert/edit link button allows clients to choose from existing content on their website, instead of having to manually copy and paste links.