getherbert / herbert

The WordPress Plugin Framework:
http://getherbert.com/
632 stars 94 forks source link

How to register css files in Herbert ? #90

Closed PrafullaKumarSahu closed 8 years ago

PrafullaKumarSahu commented 8 years ago

Here you can notice, I am registering some css file, how I can do the same in herbert as these are already in wordpress core, I should not enqueue those another time .

public function popup_script() {
        wp_enqueue_script( 'jquery-ui-datepicker', array( 'jquery' ) );
        wp_enqueue_script( 'popup', plugin_dir_url( __FILE__ ) . 'popup.js', array( 'jquery' ));
        wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');
        wp_enqueue_style( 'jquery-ui' ); 
   }
jasonagnew commented 8 years ago

Here you go:

app/enqueue.php

$enqueue->admin([
    'as'     => 'jquery',
    'src'    => 'jquery',
    'filter' => [ 'panel' => '*' ]
]);

$enqueue->admin([
    'as'     => 'jquery-ui-datepicker',
    'src'    => 'jquery-ui-datepicker',
    'filter' => [ 'panel' => '*' ]
]);

$enqueue->admin([
    'as'  => 'popup',
    'src' => Helper::assetUrl('/js/popup.js'), // => /resources/assets/js/popup.js
], 'footer');

$enqueue->admin([
    'as'     => 'jquery-ui',
    'src'    => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css',
    'filter' => [ 'panel' => '*' ]
]);
PrafullaKumarSahu commented 8 years ago

I did this but date picker not working that is why I thought I am doing it wrong, thank you for your response :) but the popup is working .and on inspect element I can see all js files and css .

<?php namespace Analytica;

//@var \Herbert\Framework\Enqueue $enqueue;

$enqueue->admin([
    'as'  => 'analytica',
    'src' => Helper::assetUrl('/jquery/analytica.js'),
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);

$enqueue->admin([
    'as'  => 'jquery-ui-datepicker',
    'src' => Helper::assetUrl('/core/datepicker.js'),
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);

$enqueue->admin([
    'as'  => 'popup',
    'src' => Helper::assetUrl('/jquery/popup.js'),
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);

/* $enqueue->admin([
    'as'  => 'jquery-ui-js',
    'src' => 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js',
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);
 */
//wp_register_style('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css');

        //wp_enqueue_style( 'jquery-ui' );

$enqueue->admin([
    'as'  => 'jquery-ui-css',
    'src' => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css',
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);
PrafullaKumarSahu commented 8 years ago

At the end of the page I am getting some error message like

<script type='text/javascript'>
/* <![CDATA[ */
var commonL10n = {"warnDelete":"You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete.","dismiss":"Dismiss this notice."};var heartbeatSettings = {"nonce":"8436cc539b"};var authcheckL10n = {"beforeunload":"Your session has expired. You can log in again from this page or go to the login page.","interval":"180"};/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/test/wp-admin/load-scripts.php?c=1&amp;load%5B%5D=hoverIntent,common,admin-bar,svg-painter,heartbeat,wp-auth-check,jquery-ui-core,jquery-ui-datepicker&amp;ver=4.4.1'></script>
<script type='text/javascript' src='http://localhost/test/wp-content/plugins/Analytica/resources/assets/jquery/popup.js?ver=4.4.1'></script>

<div class="clear"></div></div><!-- wpwrap -->
<script type="text/javascript">if(typeof wpOnload=='function')wpOnload();</script>

may be there is some problem here I need to fix.

I changed the code to

$enqueue->admin([
    'as'     => 'jquery',
    'src'    => 'jquery',
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);

$enqueue->admin([
    'as'     => 'jquery-ui-datepicker',
    'src'    => 'jquery-ui-datepicker',
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);

$enqueue->admin([
    'as'  => 'popup',
    'src' => Helper::assetUrl('/jquery/popup.js'), // => /resources/assets/js/popup.js
], 'footer');

$enqueue->admin([
    'as'     => 'jquery-ui-datepicker',
    'src'    => 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css',
    'filter' => [ 'panel' => 'analytica-admin-settings' ]
]);
PrafullaKumarSahu commented 8 years ago

Problem solved , the mistake was creating the html element for datepicker, I was adding " hasDatepicker" class manually .One foolishness takes days . I hope I will complete this plugin within a week and post it in github, I am not good in git, but I will learn it and post it,It may help others :)