Creating an Elegant WordPress Experience Through Back-End Styling

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');

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');

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.