5 Ways to Improve Your Client’s Content Entry Experience: Wordpress Edition

For the uninitiated or less technical, a CMS can be intimidating, but it doesn't have to be. Learn how to make your CMS user friendly, so your clients have a great content entry (and maintenance) experience!

Picture of Andrea Kereliuk

By Andrea Kereliuk, Front End Developer

October 12, 2016

Share

This is it. You’ve built your client’s site with all of its beautiful, robust features, and you’re ready to push it out into the world -- or at least hand it over to your client for content entry. How will it hold up to scrutiny? What kind of issues will the mass uploading of real content reveal? And most importantly, how can you properly convey the enormous, site-saving importance of keeping those CTA headers to a 90-character maximum without burying this information in a 45-page content entry guide?

Now that you’ve given your client a shiny new site, give them the tools to succeed in the environment they’re working within. This may start with a trip to Content Entry Camp, but your campers should have an easy way to remember what they’ve learned after they return home. You’ve likely already customized the the CMS -- now go the extra distance and build in a reference guide with contextual instructions where your client needs them most. This is an easy thing to implement (especially compared to writing that 45-page document). Here are some basic customization options to get started:

1. Customize the dashboard

As developers, we often forget the dashboard exists because we typically focus on wherever we need to go when we log into the CMS. Consider, however, how your users feel when they log in and are deposited in this relative dead zone without any guidance or context clues--this is especially true if you’ve customized your post types away from the typical blog style, because half of the default widgets don’t make sense anymore.

The default Dashboard’s most visible call to action asks the user to customize the site or change the theme--something you may not want your users to do, well, ever--so why leave the option there at all? Why not make the dashboard a little more user-friendly?

Start by removing all unhelpful dashboard widgets:

function remove_dashboard_meta() {
    remove_action( 'welcome_panel', 'wp_welcome_panel' );        
    remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
       remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
       remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
       remove_meta_box( 'dashboard_secondary', 'dashboard', 'normal' );
       remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
       remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
       remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
       remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
       remove_meta_box( 'dashboard_activity', 'dashboard', 'normal');//since 3.8
}
add_action( 'admin_init', 'remove_dashboard_meta' );

The above code will remove all widgets, but of course you should leave those that are useful to your users. This gives you a clean slate to add your own instructions using wp_add_dashboard_widget():

function project_add_dashboard_widgets() {

 

 wp_add_dashboard_widget(

                'project_hint_dashboard_widget',         // Widget slug.

                'Title Here',                     // Title.

                'project_hint_dashboard_widget_function' // Display function.

       );

 

}

 

add_action( 'wp_dashboard_setup', 'project_add_dashboard_widgets' );

Then add your custom markup to your newly created widget:

//this function matches the display function in the above code
function project_hint_dashboard_widget_function() {

 

 echo '<p>Put your instructions here!</p>';

 

}

 

Using the above code gives this unexciting appearance to the dashboard, but with some elbow grease you can expand it to include many helpful instructions, links, or next steps:

A new, cleaned up dashboard, empty except for one example panel with an example title and description.

Here's what a clean slate Wordpress dashboard looks like -- ready for customization!

2. Include more instructions. Everywhere.

Instead of putting instructions in the aforementioned Content Entry Guide, make the CMS your guide. This way, clients get contextual information they need about specific inputs directly beside those inputs. A few tips:

  • Put general hints in a custom meta box using add_meta_box(). Note you can also control which page or post types by adding a for each () loop:

    add_action( 'add_meta_boxes', 'add_side_instructions_box' );

     

    function add_side_instructions_box() {

       foreach( array( 'custom_post_type', 'page' ) as $customPages ) {

           add_meta_box(

               'project_side_instructions',         //meta box id

               __( 'Helpful Hints', 'site_domain' ),     //meta box title

               'inner_side_instructions_box',        //callback to function with box content

               $customPages,                 //which pages the box appears on

               'side',                     //area of page where the box appears

               'low'                     //box priority on page

           );

       }

    }

     
  • Are you one of the over a million people using Advanced Custom Fields? ACF lets you provide instructions for each of its input fields. Use these for everything from image size guidelines for uploads or character limits for sensitively-spaced headlines.

    A view of Advanced Custom Fields where the developer is adding the Field Label, Field Name, Field Type, and Field Instructions for an example custom tagline input.

    Make it easy for any content editor to know what they should do when it comes to inputting new content!

  • ACF also has a handy option called “Message”, where you can just write text into the field solely for the purpose of having instructions appear on the edit screen.

3. Have instructions specifically for new page/post creation

Sometimes you have instructions that only apply when first creating a new page or post type, and you don’t want to clutter the rest of the editing experience. In this case, create “New Page” instructions that only appear when the user creates a new page by:

add_meta_box('instruction_box_div', __('Title'), 'page_instructions_callback', 'page', 'advanced', 'high');

}

  • Adding a custom meta box (see list item #2, above):

    function add_page_instructions_box() {

  • Removing the meta box for pages in which the post ID has been set:

    function remove_page_instructions_box() {

     if( !isset( $_GET['post'] ) )

       return;

     remove_meta_box('instruction_box_div', 'page', 'high');

    }

  • Having both of these functions run in the same WP setup step, one after another:  

    add_action('do_meta_boxes', 'add_page_instructions_box');

    add_action('do_meta_boxes', 'remove_page_instructions_box');

     

4. Remove unneeded default inputs and sections

Imagine you’re trying to enter a restaurant and there are three differently-shaped but seemingly-openable doors in your way, but none of them have instructions and only one of them actually opens. Sound confusing? Imagine how editors feel if they come up against entire editable regions that don’t actually do anything. Luckily, you can remove links to things you aren’t using:

  • Option: Use ACF to remove other editable regions in the Options section of Field Groups:
     A view of Advanced Custom Fields where the developer is using ACF’s Options panel to hide the Discussion, Comments, Format, and Send Trackbacks panels from any page this set of custom fields appears on.
  • Option: Remove entire sections such as comments:

    function project_customize_admin_bar( $wp_admin_bar ) {

     

       $wp_admin_bar->remove_node( 'comments' );

    }

    function custom_menu_page_removing() {

       remove_menu_page( 'edit-comments.php' );

    }

    add_action( 'admin_bar_menu', 'project_customize_admin_bar', 999 ); //remove from admin bar at the top of the CMS

    add_action( 'admin_menu', 'custom_menu_page_removing' ); //remove from the left rail admin menu

     
  • Option: Remove default Wordpress meta boxes (i.e. featured image) from specific templates:

    //remove featured image from some templates - page must have ID already

    add_action('do_meta_boxes', 'hide_featured');

     

    function hide_featured() {

     if( !isset( $_GET['post'] ) )

       return;

     

       $template = get_post_meta( $_GET['post'] , '_wp_page_template', true );

     if($template == 'page-templates/your-template-here.php'

        || $template == 'page-templates/your-other-template-here.php'){

       remove_meta_box( 'postimagediv', 'page', 'normal' );

     }

    }

     

5. Listen to and empathize with your client

Pay attention to those emails of confusion. They can’t figure out how to add something? Add an instruction and point them to it. They didn’t see an instruction? Maybe you need to make the instruction more clear.

Wordpress is built on PHP, so in most instances PHP can also un-build portions of Wordpress that are no longer helpful to you and are downright confusing for your clients. It just takes a bit of trial and error (and a lot of Googling with your fingers crossed).

One way to know your instructions are helpful is to base them on actual questions your clients are asking you.,Take their formal (and informal) feedback as constructive criticism and use it to help make your CMS living documentation more useful. It will save you and your client a lot of future reading and CTRL+F’s, and you both will be rewarded with less frustration and more time.