Comments (4)
Hello MitchDoogle,
I'm happy to help you get it working. Can you share the code you're using to register one of your settings and controls, and how you're requiring/including the Alpha Color Picker?
It sounds like the JS isn't firing. Can you try putting console.log( 'Alpha Color Picker is firing' );
at the top of your alpha-color-picker.js file and tell me if you see "Alpha Color Picker is firing" in the console after a page refresh?
One gotcha is that you need to update the paths used in alpha-color-picker.php:
public function enqueue() {
wp_enqueue_script(
'alpha-color-picker',
UPDATE_THIS_PATH . 'alpha-color-picker/alpha-color-picker.js',
array( 'jquery', 'wp-color-picker' ),
'1.0.0',
true
);
wp_enqueue_style(
'alpha-color-picker',
UPDATE_THIS_PATH . 'alpha-color-picker/alpha-color-picker.css',
array( 'wp-color-picker' ),
'1.0.0'
);
}
I should be able to tell what is going on if you can share your code for adding the settings and controls and including the Alpha Color Picker.
-Braad
from components.
Thanks for helping,
I am including the Alpha Color Picker with this line:
require_once( dirname( __FILE__ ) . '\alpha-color-picker.php' );
because I've located the color picker in the same directory as my customizer functions php file. I verified it is loading with an echo call. Here is how I add a new setting for Alpha Color Picker:
$wp_customize->add_setting( 'billboard-msg-font-color',
array(
'default' => 'rgba(209,0,55,0.7)',
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'transport' => 'postMessage'
)
);
$wp_customize->add_control( new Customize_Alpha_Color_Control(
$wp_customize, 'billboard-msg-font-color',
array(
'label' => __( 'Billboard Message Text Color', 'b2b_s' ),
'section' => 'b2b_s_home_page_styles',
'settings' => 'billboard-msg-font-color',
'show_opacity' => true,
'palette' =>
array (
'rgba(0,0,0,0.5)',
'rgba(255,255,255,0.5)',
'rgb(100,100,200)',
'#2aa4d4'
)
)
)
);
Both the js and css file are loading with the customizer page and the console displays the message as expected when I add
console.log('Alpha Color Picker is firing!');
to the javascript file.
from components.
Hmm, the code you've shared looks good. The only thing that stands out to me is using hyphens instead of underscores (billboard-msg-font-color vs. billboard_msg_font_color) as your setting ID, but I can't find anything that says this isn't allowed, so maybe it's fine.
There are a couple more things that we can check to confirm everything is in the right place. Fundamentally, the Alpha Color Picker control outputs a text input with the class alpha-color-picker
, then in alpha-color-picker.js
we do this:
// Loop over each control and transform it into our color picker.
$( '.alpha-color-control' ).each( function() {
// Transform our text inputs into color pickers...
}
If you are seeing <input class="alpha-color-control" />
as the HTML of the text inputs that are outputting, then the HTML is ready for the JS to come along and do its thing, so the issue must be that the JS isn't firing on it correctly. Inside alpha-color-picker.js
you can try:
// Loop over each control and transform it into our color picker.
$( '.alpha-color-control' ).each( function() {
console.log( this );
Then look in the console, and if you nothing then you know that the $( '.alpha-color-control' )
part isn't matching anything, and if you see your text inputs then the issue is further down in the JS.
If you aren't seeing any of the inputs printing in the console when you add that code, try typing jQuery( '.alpha-color-control' )
directly into the console. This will return any elements that match that selector, and if it does match then it means that the control JS might not be firing at the right time or at all, and if it doesn't match it means there is an issue with the inputs getting the right class.
One other thing to verify, the alpha-color-picker.js
file needs to be loading in the Customizer itself rather than the site preview iframe. It should be loading in the correct place if you used the enqueue
function in the Customize_Alpha_Color_Control
class, but if you used wp_enqueue_script directly outside of that function then it might be loading in the preview. If you share your enqueue function code I'll be able to tell whether there are any issues there.
If you're on the WordPress Slack team you're welcome to reach out to me there also. My username there is Braad. Then you could send me your complete code and I can try it out myself and see if I can figure out the issue.
from components.
Closing this since I haven't heard from you in a while.
from components.
Related Issues (20)
- Preview not showing new color HOT 2
- sanitize_callback? HOT 4
- How to include the transparency-grid.png? HOT 3
- k
- Multi-Color-Picker customizer control does not close HOT 1
- Error on Wordpress 4.7.2 - Uncaught ReferenceError: Color is not defined HOT 1
- Sanitize Callback HOT 3
- How to install? HOT 1
- Is this project still active? HOT 8
- Sanitize for disallowing HEX?
- Labels and notifications invisible fix HOT 3
- Not an issue HOT 1
- Licensing
- Label only Shows Within Customizer After Clicking on Input
- Standard wp-color-picker shown
- Sanitization, New controller on Wordpress Themes team!
- Updating Styles After Color Change HOT 7
- Having trouble with "clear" button not triggering a refresh. HOT 2
- Implementation with wordpress 4.5.2 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from components.