I want to make a playlist made of files added to a Wordpress custom meta box. jPlayer generates the list using javascript, is there any way to bypass this and use regular html?
Edit:
Or could I get some guidance on how to call a wp function into the playlist? I am getting some ideas from call-php-function-from-jquery, but I am not sure how I would create multiple items/tracks or loop through them in the jquery script?
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_2",
cssSelectorAncestor: "#jp_container_2"
}, [
{
title:"1",
mp3:"url/file",
oga:"url/file"
},
{
title:"2",
mp3:"url/file",
oga:"url/file"
},
], {
swfPath: "js",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
Update:
I am now echoing my post_mime_types as '$alltracks' into the jquery script Like this:
<?php
$query_audio_args = array(
'post_type' => 'attachment',
'post_mime_type' =>'application/ogg',
);
$audio_attachments = get_posts($query_audio_args);
foreach ( $audio_attachments as $audio_attachment ) {
$ogg = wp_get_attachment_url( $audio_attachment->ID );
$tracks[] = '{
title:"'.$audio_attachment->post_title.'",
oga:"'.$ogg.'",
}';
$alltracks = implode(',',$tracks);
}
?>
$(document).ready(function() {
new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_2",
cssSelectorAncestor: "#jp_container_2"
}, [
<?php echo $alltracks; ?>
], {
swfPath: "js",
supplied: "oga, mp3,aif",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true
});
});
Related
I need to sanitize the output of admin_notices which uses certain things like
a
id
href
title
strong
Is it good idea to use wp_kses_post function?
Reading docs I am uncertain what HTML tags are allowed https://developer.wordpress.org/reference/functions/wp_kses_post/
To check the list of allowed tags and attributes for wp_kses_post you can use
echo '<pre>';
print_r( wp_kses_allowed_html( 'post' ) );
echo '</pre>';
die();
In your case, where only a and strong allowed, you can use wp_kses function (docs) instead
$allowed_html = [
'a' => [
'id' => true,
'href' => true,
'title' => true,
],
'strong' => [],
];
$clear_post = wp_kses( $post, $allowed_html );
wp_kses_post allows all HTML that is permitted in post content. So it will load a large array which is redundant in your case. As you need only some specific HTML tags to be sanitized, you should use the wp_kses function as you have control here and you can mention which HTML tags should be allowed. You can do as follows-
$allowed_tags = [
'a' => [
'id' => true,
'href' => true,
'title' => true,
],
'strong' => [],
];
$sanitized_post = wp_kses( $post, $allowed_tags );
I am currently trying to copy Elementor's plugin Media control to do some adjustments to it in wordpress. I tried copying the control from \Elementor\Control_Media changing the name of the class and this method:
class Control_Custom_Media extends \Elementor\Control_Base_Multiple {
...
public function get_type() {
return 'custommedia';
}
}
Then registered it
function register_custom_controls($controls) {
include 'control-custom-media.php';
Plugin::instance()->controls_manager->register_control( 'custommedia', new Control_Custom_Media() );
}
add_action( 'elementor/controls/controls_registered', 'register_custom_controls');
Finally I created a widget with that control
protected function _register_controls() {
...
$this->add_control(
'image',
[
'label' => __( 'Test', 'custom-plugin' ),
'type' => 'custommedia',
'default' => [
'url' => \Elementor\Utils::get_placeholder_image_src(),
],
]
);
...
}
But I can't seem to make it work. The field appears on the elementor sidebar but once I click to open the media library, it doesn't work. Checked the events and the one that fires the 'openFrame' event is not bind for some reason?
To test if the media control was working I added it after and that one works
What I could be doing wrong?
Thanks in advance
I ended up extending the Media control for my custom control and add it as a control view.
var customMediaView = elementor.modules.controls.Media.extend({
onReady: function () {
/* do stuff */
}
});
elementor.addControlView('customMediaView', customMediaView);
On the enqueue method
wp_register_script( 'custommedia-control', plugins_url('/custommedia-control.js', __DIR__), [ 'elementor-editor' ], '1.0.0', true );
wp_enqueue_script( 'custommedia-control' );
I've a PHP running with AJAX, and I'm wondering how to make notices in Gutenberg.
I've a JS with this code to run the notice:
( function( wp ) {
wp.data.dispatch('core/notices').createNotice(
'error',
'Message of error',
{
isDismissible: true,
actions: [
{
url: '#',
label: 'Button'
}
]
}
);
} )( window.wp );
But I don't know how to make it run, maybe with a variable or something.
How could make it work?
If I have to develop a simple custom API to be accessed directly say, to display "Hello World!", then what all steps I need to do?
Let's say the APIs reside in [/themes/my_theme/_apis/]
You need to go to functions.php of your theme file and then write this :
add_action('wp_ajax_my_theme_ajax_method', 'my_theme_ajax_method');
add_action('wp_ajax_nopriv_my_theme_ajax_method', 'my_theme_ajax_method');
function my_theme_ajax_method(){
return 'Hello World'
}
add_action( 'wp_enqueue_scripts', 'my_theme_frontend_custom_scripts' );
function my_theme_frontend_custom_scripts(){
wp_localize_script( 'ajax-script', 'MyTheme', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'action' => array (
'MyAjaxMethod' => 'my_theme_ajax_method',
)
) );
}
And then in your frontend consider index.php you can write this
jQuery(document).ready(function(){
jQuery.ajax ({
type : 'get',
url : MyTheme.ajaxurl,
data : {
action : MyTheme.action.MyAjaxMethod,
},
}).done(function(data){
console.log(data); // <-- prints hello world
})
});
I am taking data from a config form and passing it to a .tpl file to display.
I am using hook_block_view() to take the data, put it into an array and send it to the .tpl file.
My code (on .module) is as such:
/**
* Implements hook_block_info().
*/
function message_block_info() {
return [
'message_block' => [
'info' => t('Message'),
'cache' => DRUPAL_CACHE_GLOBAL,
],
];
}
/**
* Implements hook_theme().
*/
function message_theme() {
return [
'message_block' => [
'template' => 'templates/message-block',
'variables' => [
'settings' => NULL,
'attributes' => [],
],
],
];
}
/**
* Implements hook_block_view().
*/
function message_block_view($delta = '') {
if ($delta !== 'message_block') {
return;
}
$config = message_default_settings();
dpm($config); // <- this shows correct data
$block['content'] = array(
'#theme' => 'message_block',
'#config' => array(
'message_text' => filter_xss($config['message_text']),
'message_link' => filter_xss($config['message_link']),
'message_button_text' => filter_xss($config['message_button_text']),
),
);
return $block;
}
And on the .tpl file:
<?php dpm('test'); //<- This works ?>
<?php dpm($config); //<- This does not work?>
<div class="message">
<?php print $config['message_text']; ?>
<?php if (!empty($config['message_link']) && !empty($config['alert_button_text'])): ?>
<a href="<?php print $config['message_link']; ?>" class="button">
<?php print $config['message_button_text']; ?>
</a>
<?php endif; ?>
</div>
I can place a dpm('test'); on the .tpl file and it will appear, so I know that the HTML is rendering. Obviously, I've tried clearing cache, too.
Would anyone know if I've missed a step to get this data appearing?
I found I was missing the config array initilisation in hook_theme:
function message_theme() {
return [
'message_block' => [
'template' => 'templates/message-block',
'variables' => [
'config' => NULL, //<- Was missing
],
],
];
}