Proper Loading of CSS
CiviCRM loads the css wrong.
http://wpmaster.demo.civicrm.org/contribution-page/ and view-source:http://wpmaster.demo.civicrm.org/contribution-page/ shows that CiviCRM injects it's WHOLE HEADER as the last item before </head>
Example:
<!-- CiviCRM html header -->
<script type="text/javascript">
var CRM = {"config":{"isFrontend":true,"entityRef":{"contactCreate":false},"wysisygScriptLocation":"\/wp-content\/plugins\/civicrm\/civicrm\/js\/wysiwyg\/crm.ckeditor.js","CKEditorCustomConfig":{"default":"http:\/\/wpmaster.demo.civicrm.org\/wp-content\/uploads\/civicrm\/persist\/crm-ckeditor-default.js"}}};
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/jquery/dist/jquery.min.js?r=KLQ7A">
</script>
<script type="text/javascript">
CRM.config.creditCardTypes = {"visa":"Visa","mastercard":"MasterCard","amex":"Amex","discover":"Discover"};
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/jquery-ui/jquery-ui.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/lodash-compat/lodash.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.mousewheel.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/select2/select2.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.form.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.timeentry.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.blockUI.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/datatables/media/js/jquery.dataTables.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/bower_components/jquery-validation/dist/jquery.validate.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/packages/jquery/plugins/jquery.ui.datepicker.validation.min.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/Common.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/crm.ajax.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/wysiwyg/crm.wysiwyg.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/crm.wordpress.js?r=KLQ7A">
</script>
<script type="text/javascript" src="http://wpmaster.demo.civicrm.org/contribution-page/?page=CiviCRM&q=civicrm/ajax/l10n-js/en_US&r=KLQ7A">
</script>
<link href="/wp-content/plugins/civicrm/civicrm/css/crm-i.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/datatables/media/css/jquery.dataTables.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/font-awesome/css/font-awesome.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/bower_components/select2/select2.min.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<link href="/wp-content/plugins/civicrm/civicrm/css/civicrm.css?r=KLQ7A" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/templates/CRM/Core/BillingBlock.js?r=KLQ7A">
</script>
<script type="text/javascript" src="/wp-content/plugins/civicrm/civicrm/js/noconflict.js?r=KLQ7A">
</script>
</head>
This has forced us to
A) Disable Core CiviCRM css
/**
* Implements hook_civicrm_enable().
*
* @link http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_enable
*/
function csshelper_civicrm_enable() {
_csshelper_civix_civicrm_enable();
civicrm_api3('Setting', 'create', array('disable_core_css' => 1,));
}
B) addd civicrm.css back to admin and front end via:
/*Enqueue default CiviCRM CSS in admin. Create a filter to allow themes and other plugins to overrride */
if ( ! function_exists( 'civi_wp' ) ) {
}
else {
add_action('admin_enqueue_scripts', 'csshelper_register_admin_civicrm_styles');
};
function csshelper_register_admin_civicrm_styles() {
$tc_civi_css_admin = (plugin_dir_url('civicrm') . 'civicrm/civicrm/css/civicrm.css');
$tc_civi_css_admin = apply_filters('tc_civicss_override_admin', $tc_civi_css_admin);
wp_enqueue_style ('tad_admin_civicrm', $tc_civi_css_admin );
}
/*Enqueue default CiviCRM CSS on Front End. Do this so we can use wp_enqueue_style as opposed to the way civicrm forces its styles to load the Drupal way in WP*/
if ( ! function_exists( 'civi_wp' ) ) {
}
else {
add_action('wp_print_styles', 'csshelper_register_default_civicrm_styles', 100);
};
function csshelper_register_default_civicrm_styles() {
$tc_civi_css_default = (plugin_dir_url('civicrm') . 'civicrm/civicrm/css/civicrm.css');
$tc_civi_css_default = apply_filters('tc_civicss_override_default', $tc_civi_css_default);
wp_enqueue_style ('tad_default_civicrm', $tc_civi_css_default );
}
/*Enqueue custom CiviCRM CSS in front end of site. Create a filter to allow themes and other plugins to overrride */
if ( ! function_exists( 'civi_wp' ) ) {
}
else {
add_action('wp_print_styles', 'csshelper_register_civicrm_styles', 110);
};
function csshelper_register_civicrm_styles() {
$tc_ext_url = CRM_Core_Resources::singleton()->getUrl('cc.tadpole.csshelper');
$tc_civi_css = ( $tc_ext_url . 'css/tad-civicrm.css') ;
$tc_civi_css = apply_filters ( 'tc_civicss_override' , $tc_civi_css ) ;
wp_enqueue_style ('tad_civicrm', $tc_civi_css );
}
```
I have asked for this to be changed in core and failed.
TODO: Another stab at it at St Louis sprint - see if AGH and Jamie would buy in
TODO: Create Shoreditch branch so we can use the new css but load it the WP way