WordPress Admin Styles for CiviCRM with WordPress

2018-11-19 12:39
Written by

In the past few weeks we have been looking at how a more uniform user experience could be provided between CiviCRM and WordPress dashboards. We looked at potentially leveraging Shoreditch, but quickly realized that it's dependent on a Drupal theme and the readme clearly stated that is was only for Drupal. So we stepped back and looked at how we could do this with CSS changes that apply to the admin only, since this is not affected by the theme at all.

This development was done with Christian Wach through the CiviCRM Admin Utilities plugin. Once you install the plugin, go to the settings screen to apply WP Admin Styles across the CiviCRM dashboard. There are two sections:

  • On the top CiviCRM Admin Appearance, has two options to apply WP admin styles to the CiviCRM Admin Menu and the dashboard itself. Leave these deselected to retain the default CiviCRM css.
  • The second section under CiviCRM Style Sheets provides options to enable or disable CSS, including the default CiviCRM as well as any custom CSS file you may use and define if it's applicable to only the admin or the public pages, meaning only affecting contribution and event pages, as well as profiles available to the public on your website.

CAU Settings

If both options are selected in the first section, the CiviCRM Admin screens look a lot more like the WordPress admin screens.

CiviCRM Welcome Dashboard

CiviCRM Advanced Search

CVWP Styles Contact Record

When viewing a group of contacts, the table heading sticks at the top so as you scroll down.

CVWP WP Styles Sticky Table Headers

It even uses the WP color you may have selected for your admin screens!

User Profile Ectoplasm

Filed under


Yes we love this plugin!  Can this code be merged into civicrm for wordpress core?


Absolutely great plug in. We use this for all our WordPress clients now, and activate the theme. Nice work!