Dara Skolnick gave a great presentation for WordPress Developers entitled Help Me Help You: Practical Tips for Designers from A WordPress Developer. This tutorial was packed with great ideas on getting Designer-Developer-Client all pulling well together. At one point, Dara asked a telling question – Ask your developer what do they do to make the website easy to update and maintain by end users. At first, Alex and I thought the same thing, WordPress already does so much to make websites easy to update:
- Combined Visual and Text Editor
- Themes are easy to change for a new look and style
- The Customize option in Theme Appearance can be very helpful depending on what the theme vendor provides
- Plugins are an almost endless source of update options
But then after the lecture we examined the question again. And suddenly some important issues on making updates “easy” started to crop up. First the Admin menu can be confusing even for developer pros. Same for the Editor, where the Text Editor is sometimes required to “fix” what the Visual Editor does. And the use of [shortcodes] in the editor makes the Visual Editor a lot less WYSIWYG. But perhaps the biggest update task is changing a website’s styling. Here, changing to a new theme for making some style changes is often too drastic. However, the WordPress Theme Editor command is no picnic in the park.
So Alex and I agreed that Developers choices of tools used could make updates in these situations a lot easier to do for clients. Alex suggested using the plugin Admin Menu Editor [4.8 on 5.0 rating] to simplify and shape the WP admin menu for easier operations:
This plugin was new to me and since I have been having problems with the menus on my own blog sites, a look at Admin Menu Editor was in order. As the screenshot above shows, Admin Menu Editor allows developers to copy, paste, delete, move, hide/show, and add new menu items. The drag and drop operations are just what I needed as I made the menus fit my liking including hiding some commands and renaming others. If you upgrade to the Pro version for $59, in which users can create different roles with associated menus for Administrator, Editor, Author, Subscriber, Contributor roles. As well a Toolbar Editor plugin completes customization capabilities for the WordPress Admin Screen.
Making CSS Styling Easier
Both Alex and I agreed that easing updates to CSS styles would be critical for both developers and users. Now as noted at the outset, Theme vendors provide different Customizer options for tailoring the look and feel of their themes. But precisely because these options are often quite different, WordPress developers and users will have to consider editing the theme [and some times plugin] .csss files. Yet most designers warn users to stay away from WordPress Editor available in the Appearnace | Editor command to do just that. And with good reason – it is surprisingly easy for even a savvy developer to clobber .cass files. However, both Alex and I had some potential CSS Editing solutions
Alex: Use Jetpack CSS Edit option.
JetPack has a whole package of more than a dozen plugins supplied by Automatic, the makers of WordPress. One of those plugins is CSS Edit which, when activated, appears in the Appearance | CSS Edit meniu command. As Alex pointed out the key advantage of CSS Edit is that it supports revisions just like those available in Pages and Posts:
So now it is impossible to clobber a theme’s styling. And there is another advantage to Edit CSS – it supports LESS or SCSS styling code directly. Both LESS and SCSS preprocessors respect ordinary CSS so for the savvy CSS user Edit CSS provides more power. Finally, how do users know what CSS styling changes to make? Ahh, that is the topic taken up with Suzette Franks talk, How to Use CSS3 in WordPress.
Jacques: Use SiteOrigin Custom CSS
The good folks at SiteOrigin are churning out some of the best free WordPress Plugins. In late 2013 it was SiteOrigins Page Builder , a free drag and drop editor of superb quality for both Posts and Pages. This year it is SiteOrigin CSS Editor. SiteOrigin takes the Jetpack CSS Edit capabilities and adds three key features. First the editor is smart with color coding, error warnings plus code completion:
Like JetPack, SiteOrigins CSS Editor supports revisions and works with Child Themes, so it is hard to clobber your theme’s style file. But the key feature is that SiteOrigin has a full Live Page Styler:
When first invoked, the Styler starts at your Home or Front page. If that is not the page you want to style, you just navigate to the page desired using your menus and other navigation aids. Be sure to confirm with Styler in the lower right corner of the display that this is the screen you want to move to. Then users point to the item/area on screen where they want to change the underlying CSS styling. Now you are ready to do the CSS edit.
Point on the screen to the HTML object or element that you want to change the styling on Once you click on the item, Styler then shows a list of CSS selectors that determine that item/areas styling. Next, click on a selector and the existing CSS applied through that selector is shown in the bottom footer of Styler. Now you are ready to change the CSS using lefthand sidebar with its 3 tab column of CSS options.
These CSS options are not the complete set of CSS available to you. However, the most frequently used CSS is available and when a change is made it is immediately shown on the displayed page. This way users know when they are making changes to the right CSS selector.
Does Styler require knowledge of CSS? It works a lot faster and more accurately if a user knows how to use core CSS styling rules. Styler certainly eases the task of CSS styling for your website but it is not foolproof. Rather SiteOrigin Custom CSS with Styler is the best WordPress plugin I have found to date that simplifies/automates the difficult task of live CSS Styling of your website. The plugin does not support either LESS or SCSS but if you know Koala or have the LESS Conversion or SCSS Conversion plugins, users can handle these situations. But again, changing styling when a theme uses LESS or SCSS is non-trivial.
Summary
The bottom line is that Dara posed a wickedly difficult problem – how to make a WordPress website easy to update/maintain. Alex and I advanced some plugins here that can improve the process. Alex mentioned some documentation techniques and tooltip help that further ease the task. However, simplfying and easing use of WordPress is an ongoing and challenging task.