Web Development

Creating an Elegant WordPress Experience Through Back-End Styling

BrainDo Web Developer, Tom Noonan, shares some quick tips about back-end customization in WordPress.

When developing a site in WordPress, most of the team’s time goes into realizing the website design on the front-end, from picking the right fonts and colors and formatting the text to developing the code that brings those decisions to life. Often on the back-end, we rely on the default component styles and options.

While the overall functionality of WordPress works perfectly fine using defaults, there are a few adjustments that can enhance the back-end experience for the user. The two I’d like to discuss are Field Default Values and a styled WYSIWYG.

WordPress logo banner

Field Default Values

A common plugin for WordPress is Advanced Custom Fields (“ACF”). ACF extends the ability to add extra content fields to a page or post template in the WordPress admin area.

When you create a new field in ACF, you can set a default value for the field; however, defining different default values based on post or template type can help simplify the page creation process. The short snippet below can be added to the functions.php file to do just that:

function set_default_field_name($field) {
  global $post;
  $post_type = get_post_type();
  switch ($post_type) {
    case 'postTypeOne':
      $field['default_value'] = 'valueOne';
    break;
    case 'postTypeTwo':
      $field['default_value'] = 'valueTwo';
    break;
  }
  return $field;
}
add_filter('acf/load_field/name=field_name', 'set_default_field_name');

Figure 1: Add Default Field Values


In the snippet, “field_name” and the postTypes should be replaced with the applicable names. When someone creates a post of “postTypeOne”, the field with “field_name” will have a default value of “valueOne”, and when they create a post of of “postTypeTwo”, the field with “field_name” will have a default value of “valueTwo”.

Styled WYSIWYG

The next change is adding styling to the WYSIWYG (What You See Is What You Get). A WYSIWYG is an editor that displays content as it is being written on the back-end in a way to mirror the output on the front-end. The default styling for the visual editor is 16px Georgia font in gray. In reality, though, what you see is NOT what you get, because when the content is put onto the website, the browser styles it based on the CSS file. So, let’s add that same styling to the WYSIWYG.

All you need to do is add the following code to your functions.php file:

function custom_editor_styles() {
  add_editor_style('filename.css');
}
add_action('admin_init', 'custom_editor_styles');

Figure 2: Add WYSIWYG Styling


Then build the referenced CSS file in the root of your themes folder. Start adding all of your styling to this file. And tada! What you see in the editor is what you get on the front-end.

Meet the Author

Tom Noonan

Web Development

More About Tom

Related Articles

Digital Marketing

BrainDo Gives Back

BrainDo Culture

Communication Series - Data Science/Analytics