Display color picker in posts
- This topic has 4 replies, 2 voices, and was last updated 3 years, 2 months ago by
Valentino.
-
AuthorPosts
-
February 16, 2022 at 4:57 AM #33925
Valentino
ParticipantHello,
I want to display the colors choosen by the color picker I added to all my post.I watched this video: https://www.youtube.com/watch?v=mjLsbRgQ2k4
I followed the steps the guy did, but it doesn't work for the post section.I added this code in wp_header:
<div> <style> :root { /<em>Begin First Varible Code</em>/ --background-color: <?php $background_color = rwmb_meta( //Change the variable to your desired varible name 'background_color_picker', //Color Picker ID ['object_type' => 'Post'], 'post' ); //Option Name from Settings Page echo $background_color; ?>; ; /<em>End First Varible Code</em>/ } </style> </div>
This are my fields I added to my posts:
<div> $meta_boxes[] = [ 'title' => __( 'Extra Post Fields', 'your-text-domain' ), 'id' => 'extra-post-fields', 'storage_type' => 'custom_table', 'table' => 'wp_mb_extra_post_fields', 'tabs' => [ 'tab_21kcpojc8ia' => [ 'label' => 'Color Tab ', 'icon' => 'dashicons-admin-appearance', ], 'tab_kbam38nta9i' => [ 'label' => 'Video and featured image', 'icon' => 'dashicons-format-video', ], 'tab_xlkmse8nuu' => [ 'label' => 'Download Button 1', 'icon' => 'dashicons-upload', ], 'tab_kv6sob7ra9q' => [ 'label' => 'Download Button 2', 'icon' => 'dashicons-upload', ], ], 'fields' => [ [ 'name' => __( 'Background color', 'your-text-domain' ), 'id' => $prefix . 'background_color_picker', 'type' => 'color', 'alpha_channel' => true, 'tab' => 'tab_21kcpojc8ia', ], [ 'name' => __( 'Hide Featured image ', 'your-text-domain' ), 'id' => $prefix . 'text_a1fp2hdgzzt', 'type' => 'text', 'desc' => __( 'Type "yes" to hide | Leave empty to show', 'your-text-domain' ), 'tab' => 'tab_kbam38nta9i', ], [ 'name' => __( 'YouTube URL', 'your-text-domain' ), 'id' => $prefix . 'url_vdnpr9wzws', 'type' => 'url', 'tab' => 'tab_kbam38nta9i', ], [ 'name' => __( 'Video Embed', 'your-text-domain' ), 'id' => $prefix . 'wysiwyg_9s5x8ccyr3', 'type' => 'wysiwyg', 'sanitize_callback' => 'none', 'tab' => 'tab_kbam38nta9i', ], [ 'name' => __( 'Affiliate discosure', 'your-text-domain' ), 'id' => $prefix . 'select_rjsjhddfon', 'type' => 'select', 'options' => [ 'Commissions may be earned from the links above. If you purchase plugins with these links, I will receive a small commission at no additional cost to you. Thank you!' => __( 'Commissions may be earned from the links above. If you purchase plugins with these links, I will receive a small commission at no additional cost to you. Thank you!', 'your-text-domain' ), 'Not sponsored or affiliated, just sharing to help out the music production community.' => __( 'Not sponsored or affiliated, just sharing to help out the music production community.', 'your-text-domain' ), ], 'tab' => 'tab_xlkmse8nuu', ], [ 'name' => __( 'Download title', 'your-text-domain' ), 'id' => $prefix . 'text_fop15u4ojpf', 'type' => 'text', 'tab' => 'tab_xlkmse8nuu', ], [ 'name' => __( 'Button text 1', 'your-text-domain' ), 'id' => $prefix . 'text_40hi0nvtvmw', 'type' => 'text', 'tab' => 'tab_xlkmse8nuu', ], [ 'name' => __( 'Download Link 1', 'your-text-domain' ), 'id' => $prefix . 'url_f0t8ukl11vj', 'type' => 'url', 'tab' => 'tab_xlkmse8nuu', ], [ 'name' => __( 'Button text 2', 'your-text-domain' ), 'id' => $prefix . 'text_ui1dobxqbif', 'type' => 'text', 'tab' => 'tab_kv6sob7ra9q', ], [ 'name' => __( 'Download Link 2', 'your-text-domain' ), 'id' => $prefix . 'url_n93zhbdfdj', 'type' => 'url', 'tab' => 'tab_kv6sob7ra9q', ], ], ]; </div> <style>
Here is how if shows up in my website:
<div> :root { /<em>Begin First Varible Code</em>/ --background-color: ; ; /<em>End First Varible Code</em>/ } </style> </div>
Can you please help me?
ThanksFebruary 16, 2022 at 11:17 AM #33926Long Nguyen
ModeratorHi,
Thanks for reaching out.
You are using the code to register the meta box and custom fields to save field value to the custom table, not to the settings page. Please follow this documentation to register them on a settings page
https://docs.metabox.io/extensions/mb-settings-page/February 16, 2022 at 2:46 PM #33929Valentino
ParticipantHello,
I don't want to make a setting page. I want to be able to set colors for every posts that is why I displayed the custom fields in the post section.I wanted to use it with elementor but your extension doesn't work with it, and you didi find yet a solution, here is the post about it:
https://support.metabox.io/topic/color-picker-doesnt-seem-to-work/?fbclid=IwAR2AC8byNLXJ3eJMKLO9QS2lQTqJUIv40-CWJYs5spqIGtQ7Sx_AqV_vJk4Can you please help me? How can I make this code work:
<div>
--background-color: <?php
$background_color = rwmb_meta( //Change the variable to your desired varible name
'background_color_picker', //Color Picker ID
['object_type' => 'Post'],
'post' ); //Option Name from Settings Page
echo $background_color;
?>;
</div>What should I change in it to make it display the color picker values in the CSS?
February 16, 2022 at 11:12 PM #33945Long Nguyen
ModeratorHi,
If you save field value (color) in the custom table, please follow this documentation to know how to get field value https://docs.metabox.io/extensions/mb-custom-table/#getting-field-value
$background_color = rwmb_meta( 'background_color_picker', ['storage_type' => 'custom_table', 'table' => 'wp_mb_extra_post_fields'], get_queried_object_id() ); echo $background_color;
February 17, 2022 at 2:57 PM #33958Valentino
ParticipantOh, I see! Many thanks for your help Long! Now it works.
-
AuthorPosts
- You must be logged in to reply to this topic.