i׳m trying to create an accordion shortcode.
when I load the scripts with wp_enqueue_script function it seams to work only for the jquery ui library but not the custom script
jQuery(document).ready(
function() {
$('#ks-accordion').accordion();
}
);
Here is the full code:
// Container
function ks_accordion($atts, $content = null) {
extract( shortcode_atts( array(
'id' => ''
), $atts ) );
wp_enqueue_script('jquery-ui-accordion');
wp_enqueue_script('shortcode', get_template_directory_uri().'/functions/shortcodes/js/shortcodes.js');
return '<div id="accordion">'.do_shortcode($content).'</div>';
}
add_shortcode( 'accordion', 'ks_accordion' );
// Section
function ks_accordion_section($atts, $content = null) {
extract( shortcode_atts( array(
'title' => 'My Title',
), $atts ) );
return '<h6>'.$title.'</h6><div><p>'.do_shortcode($content).'</p></div>';
}
add_shortcode( 'accordion_section', 'ks_accordion_section' );
This is the code I get in the front-end:
<div id="ks-accordion"><br>
<h6>Title</h6><div><p>Content</p></div><br>
<h6>Title1</h6><div><p>Content</p></div><br>
<h6>Title2</h6><div><p>Content</p></div><br>
</div>
Also I don't get why it creates these <br>?
Thanks
jQuery is loaded in noConflict mode in WordPress. To use the dollar sign, we need the following
jQuery(document).ready( function($) { // <---- put $ here
$('#ks-accordion').accordion();
});
Much probably, do_shortcode is inserting those <br>, but it's just speculation.
wp_enqueue_script('shortcode', get_template_directory_uri().'/functions/shortcodes/js/shortcodes.js', array('jquery'));
Hope this helps!
Related
I added the following code to my functions.php file in WordPress 6.1.1 to display excerpts.
function new_excerpt_length($length) {
return 100;
}
add_filter('excerpt_length', 'new_excerpt_length');
function new_excerpt_more($more) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');
...but I also have a use case to show the full excerpt without a read more link.
On page template 1 I add the below code to display the excerpt:
<?php echo the_excerpt(); ?>
...and it displays the excerpt as per the functions.php file but how do I create a 2nd excerpt without the read more link and apply it to page template 2?
Is there a parameter I can use within the_excerpt(parameter); or can I use something like wp_trim_excerpt https://developer.wordpress.org/reference/functions/wp_trim_excerpt/ maybe?
I came across the below code that is supposed to do what I want
function wpex_get_excerpt( $args = array() ) {
// Default arguments.
$defaults = array(
'post' => '',
'length' => 40,
'readmore' => false,
'readmore_text' => esc_html__( 'read more', 'text-domain' ),
'readmore_after' => '',
'custom_excerpts' => true,
'disable_more' => false,
);
// Apply filters to allow child themes mods.
$args = apply_filters( 'wpex_excerpt_defaults', $defaults );
// Parse arguments, takes the function arguments and combines them with the defaults.
$args = wp_parse_args( $args, $defaults );
// Apply filters to allow child themes mods.
$args = apply_filters( 'wpex_excerpt_args', $args );
// Extract arguments to make it easier to use below.
extract( $args );
// Get the current post.
$post = get_post( $post );
// Get the current post id.
$post_id = $post->ID;
// Check for custom excerpts.
if ( $custom_excerpts && has_excerpt( $post_id ) ) {
$output = $post->post_excerpt;
}
// No custom excerpt...so lets generate one.
else {
// Create the readmore link.
$readmore_link = '' . $readmore_text . $readmore_after . '';
// Check for more tag and return content if it exists.
if ( ! $disable_more && strpos( $post->post_content, '<!--more-->' ) ) {
$output = apply_filters( 'the_content', get_the_content( $readmore_text . $readmore_after ) );
}
// No more tag defined so generate excerpt using wp_trim_words.
else {
// Generate an excerpt from the post content.
$output = wp_trim_words( strip_shortcodes( $post->post_content ), $length );
// Add the readmore text to the excerpt if enabled.
if ( $readmore ) {
$output .= apply_filters( 'wpex_readmore_link', $readmore_link );
}
}
}
// Apply filters and return the excerpt.
return apply_filters( 'wpex_excerpt', $output );
}
Output using:
<?php echo wpex_get_excerpt ( $defaults = array(
'length' => 40,
'readmore' => true,
'readmore_text' => esc_html__( 'read more', 'wpex-boutique' ),
'custom_excerpts' => true,
) ); ?>
...but doesn't seem to workas intended. Outputs the excerpt with no link but the args don't see to work when changed. Would be perfect for my use otherwise. Maybe someone sees how to fix this code?
Thanks
I need to have color picker settings filed in my plugin. I have registered a field and its saving value in the database correctly. But, in the admin area the picker user interface is not correct I think.
It should look like this:
https://ibb.co/7XRHqqL
But in my case it's looking like this:
https://ibb.co/vHvqmd0
Here is the code I have for registering the field
add_settings_field( 'iconBg', 'Background Color', array( $this, 'bg_settings_field' ), 'wpfyscroller-settings-page', 'wpfyscrollersection' );
register_setting( 'wpfyscrollerfields', 'iconBg', array('sanitize_callback'=>'sanitize_hex_color', 'default'=> '#000000') );
//Callback function
function bg_settings_field() { ?>
<input type="text" name="iconBg" value="<?php echo get_option('iconBg') ?>" class="cpa-color-picker" >
<?php }
Here is the code for enqueueing js
add_action('admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
function enqueue_admin_js() {
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( '/assets/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), '', true );
}
NOTE: My 'jquery' dependency already loaded with another script.
Here is the JS code:
(function ($) {$(function () {
// Add Color Picker to all inputs that have 'color-field' class
$(".cpa-color-picker").wpColorPicker();});})(jQuery);
Not sure what mistake I did, any help will be apricated.
Thanks
You can try the below code and hopefully work it. Your issue was on enqueue js.
/**
* Enqueue style & scripts for color picker
*
* #return void
*/
function enqueue_admin_js() {
// wp-color-picker
wp_enqueue_style( 'wp-color-picker' );
// Make sure to add the wp-color-picker dependecy to js file
wp_enqueue_script( 'cpa_custom_js', plugins_url( '/assets/js/colorPicker.js', __FILE__ ), array( 'wp-color-picker' ), '', true );
}
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
So today, all my websites were updated to the new release of WordPress 5.9.1. Good good. However, my custom blocks in Gutenberg that are containing an image element are breaking the style of the media modal (where you can add an image directly in the post).
I started a new project, just to test if it was my theme, or the plugins, but even without any plugin (except ACF Pro) and on the Twenty Twenty-Two theme, if I add my registration code in the functions.php file of 2022 theme, I get the same problem.
Here's the register-block code:
add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {
if( function_exists('acf_register_block_type') ) {
acf_register_block_type(array(
'name' => 'carousel',
'title' => __('Carrousel'),
'description' => __(''),
'render_template' => 'web/blocks/carousel.php',
'category' => 'custom-blocks',
'icon' => 'images-alt',
'keywords' => array( 'carousel', 'carrousel'),
'supports' => array( 'anchor' => true),
));
}
}
And I've created a Field group trying the image with the array annnnnd the one using only the URL.
What I tried:
no plugins (except ACF)
WP theme (2022)
custom theme with no functions
adding the registration code to 2022 theme (same error)
Please, help a sister our here.
I think it was cause by the 5.9.1 update
You can use this in functions.php as temporary fix
function fix_media_views_css() {
echo '<link rel="stylesheet" id="fix-media-views-css" href="'.get_bloginfo('url').'/wp-includes/css/media-views.min.css?ver=5.9.1" media="all">';
}
add_action('admin_footer', 'fix_media_views_css');
I've added that piece of code to my functions.php file (at the end, no biggy).
function acf_filter_rest_api_preload_paths( $preload_paths ) {
if ( ! get_the_ID() ) {
return $preload_paths;
}
$remove_path = '/wp/v2/' . get_post_type() . 's/' . get_the_ID() . '?context=edit';
$v1 = array_filter(
$preload_paths,
function( $url ) use ( $remove_path ) {
return $url !== $remove_path;
}
);
$remove_path = '/wp/v2/' . get_post_type() . 's/' . get_the_ID() . '/autosaves?context=edit';
return array_filter(
$v1,
function( $url ) use ( $remove_path ) {
return $url !== $remove_path;
}
);
}
add_filter( 'block_editor_rest_api_preload_paths', 'acf_filter_rest_api_preload_paths', 10, 1 );
It works perfectly like before. I've tried to downversion it to 5.9 and it worked as well, but it takes more time/effort and many mistakes can happen.
Hope it helps more than one.
ACF is aware of the issue: https://github.com/AdvancedCustomFields/acf/issues/612
Here is the temp fix, paste in your functions.php:
function acf_filter_rest_api_preload_paths( $preload_paths ) {
global $post;
$rest_path = rest_get_route_for_post( $post );
$remove_paths = array(
add_query_arg( 'context', 'edit', $rest_path ),
sprintf( '%s/autosaves?context=edit', $rest_path ),
);
return array_filter(
$preload_paths,
function( $url ) use ( $remove_paths ) {
return ! in_array( $url, $remove_paths, true );
}
);
}
add_filter( 'block_editor_rest_api_preload_paths', 'acf_filter_rest_api_preload_paths', 10, 1 );
I'm trying out a plugin test where I've created a simple plugin that will wrap text in a <span> element with a class, when I in the editor wrap the text in a shortcode.
It works. But the css styling in the style.css file for that plugin isn't applied.
The plugin script is this:
class shs_wrap {
/*Create shortcode [wrap]*/
function shs_wrap() {
add_shortcode( 'wrap', array( &$this, 'shortcode' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'style' ) );
}
/*Run the shortcode*/
function shortcode( $atts , $content = null) {
/*If the "class" is forgotten in the shortcode, abort*/
if( empty(preg_quote($atts['class'])) || empty($content))
return;
/*Prepare output*/
$output = "<span class='".$atts['class']."'>" . $content . "</span>";
return $output;
}
/*Add styling from the css-file*/
function style() {
wp_register_style( 'style', plugins_url( 'style.css', __FILE__ ));
wp_enqueue_style( 'style' );
}
}
new shs_wrap();
When writing
Here is some text [wrap class="test"]here is some wrapped text[/wrap] here is some more text
I simply want the output to be:
Here is some text <span class="test">here is some wrapped text</span> here is some more text
My script above works and I can see in the source code that the <span> element is correctly added with its class - here is a screenclip from the inspection tool:
The css styling from the style.css file is not loaded, though. The output on the screen is not styled and the style file is never added. The style file is located at the same location as the php-file (called shs-wrap.php):
and it contains only this tiny css snippet:
What is the issue here? Is there an error in my style enqueue function? Do I call it wrongly?
May just be me but I think you should use __construct like below in addition to a more unique style handle:
class shs_wrap {
/*Create shortcode [wrap]*/
function __construct() {
add_shortcode( 'wrap', array( $this, 'shortcode' ) );
add_action( 'wp_enqueue_scripts', array( $this, 'style' ) );
}
/*Run the shortcode*/
function shortcode( $atts , $content = null) {
/*If the "class" is forgotten in the shortcode, abort*/
if( empty(preg_quote($atts['class'])) || empty($content)) {
return;
}
/*Prepare output*/
$output = "<span class='".$atts['class']."'>" . $content . "</span>";
return $output;
}
/*Add styling from the css-file*/
function style() {
wp_register_style( 'my-plugin-test-style', plugins_url( 'style.css', __FILE__ ));
wp_enqueue_style( 'my-plugin-test-style' );
}
}
new shs_wrap();
I'm trying to get a value from a ShortCode into a variable for use it in my template file. How can i do that?
Here is my code :
In the post, the short code :
[reference_prix]1-214eddz[/reference_prix]
My plugin code :
$bl_reference_prix = "";
add_shortcode('reference_prix', 'get_blref_prix');
function get_blref_prix( $atts, $reference = null ) {
global $bl_reference_prix;
$bl_reference_prix = $reference;
}
But $bl_reference_prix is still empty.
I've try with $GLOBAL[] but i've the same issu.
What is the best practice for get a value write by the user in a wordpress post and display (or use it) in the template file?
I think the best practice is to use the atts parameter.
// Add Shortcode
function get_blref_prix( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'bl_reference_prix' => '',
), $atts )
);
}
add_shortcode( 'reference_prix', 'get_blref_prix' );
The user of the shortcode will just have to do the following in the editor:
[reference_prix bl_reference_prix="some value by the user"]
And then maybe you can try using the Options API. Add and delete after use.
I've do this and it's working now as :
//Plugin
function get_blref_prix( $atts ) {
global $bl_plugin_refprix, $bl_plugin_refprix_up;
// Attributes
extract( shortcode_atts(
array(
'reference' => '',
'up' => '',
), $atts )
);
$bl_plugin_refprix = $reference;
$bl_plugin_refprix_up = $up;
}
add_shortcode( 'bl_refprix', 'get_blref_prix' );
In the template file (Important : After the function "the_content"!) :
while(have_posts()):the_post();
echo the_content();
endwhile;
echo $bl_plugin_refprix;
In the Post :
[bl_refprix reference="123" up="456"]