WordPress Admin Styles for CiviCRM with WordPress

Published
2018-11-19 12:39
Written by
In the past few weeks [we](https://tadpole.cc/about-us/) 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](https://wordpress.org/plugins/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](https://tadpole.cc/wp-content/uploads/cau-settings.png) 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](https://tadpole.cc/wp-content/uploads/cvwp-dashboard-wp-styles.png) ![CiviCRM Advanced Search](https://tadpole.cc/wp-content/uploads/cvwp-advanced-search-wp-styles.png) ![CVWP Styles Contact Record](https://tadpole.cc/wp-content/uploads/cvwp-contact-record-wp-styles.png) When viewing a group of contacts, the table heading sticks at the top so as you scroll down. ![CVWP WP Styles Sticky Table Headers](https://tadpole.cc/wp-content/uploads/cvwp-table-sticky-headers-wp-styles.png) It even uses the WP color you may have selected for your admin screens! ![User Profile Ectoplasm](https://tadpole.cc/wp-content/uploads/cvwp-user-profile-wp-colors-styles.png)
Filed under
Click thumbs up if you thought this blog post was useful (login to vote or to comment)

Comments

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!