I frequently use the Wordpress audio shortcode to embed my podcast episodes in my posts:
[audio src="http://podcastsourcefile"]
Unfortunately, the default audio player looks terrible. I would like to have it restyled with CSS. I have a mockup I can send to show you what it should look like, but here's the basic gist:
background color: #B27D47
replace play button image (I can provide the .png file)
make the player 75 pixels tall, 100% width
round the corners of the player
Here's what I would like the player to look like:
(I have the .png file of the play button.)
Consider this:
// Deactivate default MediaElement.js styles by WordPress
function remove_mediaelement_styles() {
if( is_home() ) {
wp_dequeue_style('wp-mediaelement');
wp_deregister_style('wp-mediaelement');
}
}
add_action( 'wp_print_styles', 'remove_mediaelement_styles' );
// Add own custom CSS file to reskin the audio player
function add_audio_player_styles () {
if( is_home() ) {
wp_enqueue_style('mini-audio-player', get_stylesheet_directory_uri() . '/assets/mediaelement/mediaelementplayer.css', array(), null );
}
}
add_action( 'wp_enqueue_scripts', 'add_audio_player_styles');
This way, you can now copy the whole mediaelement folder out of wp-include, enqueue your copy instead of the original and then fiddle with the .css there. The lines marked with //optional show how you can use different styles depending on the page your visitor is in. Found it here
There are two filter hooks to deal with this. One at the beginning, with very few info, with it we shortcut the whole shortcode and return our own custom HTML code:
add_filter( 'wp_audio_shortcode_override', 'short1_so_23875654', 10, 4 );
function short1_so_23875654( $return = '', $attr, $content, $instances )
{
# If $return is not an empty array, the shorcode function will stop here printing OUR HTML
// $return = '<html code here>';
return $return;
};
The parameters that arrive are:
Array
(
[0] => ''
[1] => Array
(
[src] => http://example.com/wp-content/uploads/file.mp3
)
[2] => ''
[3] => 1
)
And the other one that runs at the end of the shortcode function:
add_filter( 'wp_audio_shortcode', 'short2_so_23875654', 10, 5 );
function short2_so_23875654( $html, $atts, $audio, $post_id, $library )
{
return $html;
}
The parameters that arrive are:
Array
(
[0] => <audio class="wp-audio-shortcode" id="audio-715-1" preload="none" style="width: 100%" controls="controls"><source type="audio/mpeg" src="http://example.com/wp-content/uploads/file.mp3?_=1" />http://plugins.dev/wp-content/uploads/2013/10/04_discipline_64kb.mp3</audio>
[1] => Array
(
[class] => wp-audio-shortcode
[id] => audio-715-1
[preload] => none
[style] => width: 100%
)
[2] =>
[3] => 715
[4] => mediaelement
)
I just did it by styling my custom.css in the theme editor.
The values of the audio shortcode are the following. In my case, I changed it so it won't be affected by any Wordpress update (even if it's dirtier than the PHP solution on the other comment). You could use the developper tools and style the player your own way (my problem was that i didn't need a 100% width player).
:
.mejs-mute,
.mejs-duration-container,
.mejs-time,
.mejs-duration-container,
... {...}
I added my stylesheet additionally to the existing one, like I explained in this post:
function enqueue_mediaelement(){
wp_enqueue_style( 'wp-mediaelement' );
//enqueue '/wp-content/my-theme/audio-player-styles.css'
wp_enqueue_style('my-audio-player', get_stylesheet_directory_uri() . '/audio-player-styles.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
For example if you want to color the players background, you could add now the following to audio-player-styles.css:
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
background-color: #B27D47;
}
Related
I need to grab the_content() via an AJAX request and render all Gutenberg blocks with their inline styling in the page.
Problem is, unique block classes are added to the footer in theme templates.
.wp-container-5 {
display: flex;
gap: 2em;
flex-wrap: nowrap;
align-items: center;
}
When get_the_content() is used via an AJAX request, that unique block styling isn't rendered. I would guess this is because the inline block styling relies on a hook of some sort that doesn't get fired with an AJAX request. do_blocks() does not render the inline styling.
I've searched the database and scoured the WordPress source files and cannot find where classes like .wp-container-5 are coming from. I thought if I could find the location of the inline styling, I could simply query it and render it in the page.
Does anyone know where the unique block styles are stored and/or how to query them and include them via an AJAX request?
I managed to solve this after many hours of frustration.
In wp-includes/block-supports/layout.php there is a function called wp_render_layout_support_flag(). This function takes a block's content and a block object and assigns the unique class wp-container- with a unique ID at the end. It then renders the inline styling with the function wp_get_layout_style() and enqueues that styling with wp_enqueue_block_support_styles().
Problem is, wp_render_layout_support_flag() doesn't return the styling. It returns the block content with CSS classes and inserts the styling into the footer with CSS classes that match. So, it's not as simple as just calling wp_get_layout_style() because a unique ID is assigned in wp_render_layout_support_flag() that is only matched when wp_get_layout_style() is called inside the wp_render_layout_support_flag() function.
The solution was to copy and paste (not ideal but it works) the wp_render_layout_support_flag() function and slightly alter it.
function my_render_layout_support_flag( $block_content, $block ) {
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
if ( ! $support_layout ) {
return $block_content;
}
$block_gap = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
$default_layout = wp_get_global_settings( array( 'layout' ) );
$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
$default_block_layout = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
$used_layout = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
if ( ! $default_layout ) {
return $block_content;
}
$used_layout = $default_layout;
}
$class_name = wp_unique_id( 'wp-container-' );
$gap_value = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
// Skip if gap value contains unsupported characters.
// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
// because we only want to match against the value, not the CSS attribute.
if ( is_array( $gap_value ) ) {
foreach ( $gap_value as $key => $value ) {
$gap_value[ $key ] = $value && preg_match( '%[\\\(&=}]|/\*%', $value ) ? null : $value;
}
} else {
$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
}
$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), '0.5em' );
// If a block's block.json skips serialization for spacing or spacing.blockGap,
// don't apply the user-defined value to the styles.
$should_skip_gap_serialization = wp_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
$style = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
// This assumes the hook only applies to blocks with a single wrapper.
// I think this is a reasonable limitation for that particular hook.
$content = preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
'class="' . esc_attr( $class_name ) . ' ',
$block_content,
1
);
// This is where the changes happen
return '<style>' . $style . '</style>' . $content;
}
The only change is near the end where wp_enqueue_block_support_styles() was removed and now styling and content are returned.
Now, Gutenberg blocks can be rendered and have the proper styling when using an AJAX call!
$content = get_the_content(null, true, $post_id);
$blocks = parse_blocks( $content );
foreach ($blocks as $block) {
echo my_render_layout_support_flag( render_block($block), $block );
}
This solution feels kind of ridiculous but it works... WordPress really should support the rendering of blocks asynchronously.
I have not tested this within the response from an AJAX request using the old admin-ajax.php method, however, I had been trying to accomplish this same thing within a response from the REST API.
Having found this thread and reading over the solution provided by Myles -- thanks for your details, btw -- and looking into the wp_render_layout_support_flag function a bit more, I came up with a potential alternative.
Generically, with the REST API, you could add something like this:
register_rest_field('post', 'styles', [
'get_callback' => function ($post) {
ob_start();
do_action('wp_footer');
$content = ob_get_clean();
// perform any needed manipulation
return $content;
},
'schema' => [
'description' => __('Styles'),
'type' => 'string',
],
]);
You'd probably want to strip out non-style content in the result, in the event you have other functions pushing content that would appear within wp_footer.
Perhaps something like this would get you what you are looking for:
ob_start();
the_content();
do_action('wp_footer');
$content = ob_get_clean();
I want to "override" the default "gallery" shortcode (WordPress), but only if I have used a given parameter to that gallery shortcode.
For example:
[gallery ids="1,2,3"]
It has no parameter, so it will output the standard gallery code.
[gallery mode="custom" ids="1,2,3"]
It has my "mode" parameter, so it will output another shortcode.
To achieve it, I have created a "gallery" shortcode in functions.php file:
function get_new_gallery( $atts ) {
extract( shortcode_atts( array(
'mode' => '',
'ids' => '',
), $atts ) );
$code ="";
if ($mode == "custom") {
//* Output custom shortcode
$code = '[custom_gallery ids="' . $ids . '"]';
} else {
//* Need to do nothing...but don't know how to do it
$code = '[gallery ids="' . $ids . '"]'; /* Here's the problem, it causes a loop */
}
return do_shortcode($code);
}
add_shortcode( 'gallery', 'get_new_gallery' );
It works fine when I use the mode="custom" parameter. It just output the new shortcode: [custom_gallery...]
However, when not using the parameter it breaks because it enters in an infinite loop. In the code, there's a comment with the line that breaks it.
What I want is to execute the standard "gallery" shortcode if no parameter is entered. But given I've overwritten it...don't know how to "scape" from the loop and just execute the gallery.
Any help?
Thanks in advance.
Maybe an alternative approach can help? What about a filter on the gallery shortcode. See references:
https://codex.wordpress.org/Plugin_API/Filter_Reference/post_gallery
and:
https://wpbeaches.com/filtering-gallery-image-output-wordpress/
I have a shortcode that generates a gallery, given the gallery ID.
function rb_scroll_gallery_shortcode( $atts, $content ) {
$a = shortcode_atts( array(
'id' => -1,
), $atts );
$gallery_ID = $a['id'];
$output = '';
if($gallery_ID != -1){
ob_start();
$gallery = new RB_Scroll_Gallery($gallery_ID);
$gallery->render();
$output = ob_get_clean();
}
return $output;
}
add_shortcode( 'rb_scroll_gallery', 'rb_scroll_gallery_shortcode' );
Now, I've made a Gutenberg block that works perfectly in the editor. You can select a gallery and it will save. However, I dont want to repeat code and have the html in the save property and in the php code.
So I was wondering if there is a way to use that same rb_scroll_gallery_shortcode function to render the block in the front end.
I've seen that you can use register_block_type and set the render_callback to rb_scroll_gallery_shortcode, but I need the ID selected in the block to send it to the function in the $atts array
//This uses the shortcode funtion, but doesn't gives the gallery ID
register_block_type( 'cgb/block-rb-scroll-gallery-block', array(
'render_callback' => 'rb_scroll_gallery_shortcode',
) );
You can try to Convert a Shortcode to a Gutenberg Block and after use in your theme,
Registering the Dynamic Block Callback in PHP
/**
* Register the GitHub Gist shortcode
*/
function gggb_init() {
add_shortcode( 'github-gist', 'gggb_render_shortcode' );
register_block_type( 'github-gist-gutenberg-block/github-gist', array(
'render_callback' => 'gggb_render_shortcode',
) );
}
add_action( 'init', 'gggb_init' );
When your block is rendered on the frontend, it will be processed by your render callback:
function gggb_render_shortcode( $atts ) {
if ( empty( $atts['url'] )
|| 'gist.github.com' !== parse_url( $atts['url'], PHP_URL_HOST ) ) {
return '';
}
return sprintf(
'<script src="%s"></script>',
esc_url( rtrim( $atts['url'], '/' ) . '.js' )
);
}
**Note:** this render callback is intentionally different than the Gutenberg block’s edit callback. Our preference is to use GitHub’s provided JavaScript embed code because this lets GitHub change the embed’s behavior at a future date without requiring a developer to make changes.
Refer link for get more information, https://pantheon.io/blog/how-convert-shortcode-gutenberg-block
I've found out the little thing that messed up my code. The problem wasn't that the render_callback() wasn't getting any attributes (though it wasn't), but it was that the editor wasn't saving them because I forgot to remove some testing data from the attribute galleryID
In the registerBlockType:
The save() method should return null.
The attribute should not have a selector data, since it is used to find the value on the markup return by the save(), wich in this case returns null. I've forgot to remove this data, thats why the attribute wasn't being saved.
attributes: {
galleryID: {
type: 'string',
//This data should only be set if the value can be found in the markup return by save().
//Since save() returns null, we let it out
/*source: 'attribute',
/*attribute: 'data-gallery-id',
/*selector: '.rb-scroll-gallery-holder',*/
},
}
I'm currently developing a plugin for wordpress.
My plugin-content gets fired on defined shortcode. I pass a parameter to the shortcode to make some conditionals. I am able to load JS conditionally, but I also need to load CSS conditionally.
Lets say I use the shortcode: [myshortcode css="dark"]
I make a database query and inject the wanted css.
Is this somehow possible?
I have read some threads about it. I know it is because the Code fires after head is loaded. I wasn't able to find a solution.
What options do I have?
Thank you!
Probably you are searching for these functions:
has_shortcode()
get_shortcode_regex() - here you can find nice example, which is close to your request
You can check your post, page or custom post type on hook by add_action ( 'wp', 'yourCustomFunction' ) and test if your get_post_field ( 'post_content' ) contains specified shortcode and conditionally enqueue CSS file based on specified attribute.
There is a better way. You can simply register your css and scripts with wp_enqueue_scripts by wp_register_style or wp_register_script and then enqueue the registered scripts from your shortcode. You will have opportunity to enqueue scripts based on certain condition there.
Here is a code example.
/**
* Register scripts
*/
function my_plugin_scripts() {
wp_register_style( 'dark-css', $css_path );
wp_register_script( 'script-name', $js_path, array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_plugin_scripts' );
/**
* My Shortcode
*/
function my_plugin_shortcode( $atts ) {
$atts = shortcode_atts( array(
'css' => 'default'
), $atts );
if ( $atts['css'] == 'dark') {
wp_enqueue_style('dark-css')
}
// do shortcode actions here
}
add_shortcode( 'shortcode-id','my_plugin_shortcode' );
If I understand your question correctly, you could do something like this to load one stylesheet or the other:
function aw_shortcode_function($atts) {
$a = shortcode_atts( array(
'css' => 'light', // this is the default value
), $atts );
$colorTheme = $a['css'];
if ($colorTheme == 'dark') {
// load/enqueue/get/do whatever based on the css="dark" shortcode attribute
}
}
For my plugin I added a screen option with number input field. I want to add checkbox fields. Could not found out anything here. See the code:
//defined $my_admin here
add_action( 'load-' . $my_admin, "my_add_screen_options" );
//add screen options
function my_add_screen_options() {
$screen = get_current_screen();
//some checks
$args = array(
'label' => __('description', 'my'),
'default' => 20,
'option' => 'my_per_page'
);
add_screen_option( 'per_page', $args );
}
//Save the data from screen options
add_filter( 'set-screen-option', 'my_set_screen_option', 10, 3 );
function my_set_screen_option( $status, $option, $value ) {
if ( 'my_per_page' == $option ) return $value;
}
It works for number input. I thought changing $args will make it display checkboxes or any other field. But could not find anything significant by google too.
Can anybody help?
Using filter hook create one option in screen option.
For example i create Thumbnail option in post list. following code add in theme function.php
add_filter('manage_posts_columns', 'posts_columns', 5);
function posts_columns($defaults){
$defaults['my_post_thumbs'] = __('Thumbnail');
return $defaults;
}