ACF has introduced inner block support which I'd like to use.
Via my block template, I have the following:
<?php
$allowed_blocks = array( 'core/heading', 'core/paragraph' );
echo '<InnerBlocks allowedBlocks="' . esc_attr( wp_json_encode( $allowed_blocks ) ) . '" />';
This limits the block editor to headings and paragraphs only.
Is it possible to add a class attribute to each heading and paragraph? For example, <p class="block__paragraph">.
I'm aware I can achieve this with str_replace but I wondered if there's a more efficient way to hook into InnerBlocks?
I'm also aware you can use templates, like so:
<?php
$template = array(
// Heading
array( 'core/heading', array(
'level' => 2,
'placeholder' => 'Add a Title',
'className' => 'block__heading',
) ),
// Paragrph
array( 'core/paragraph', array(
'className' => 'block__paragraph',
'placeholder' => 'Write your text.',
) ),
);
echo '<InnerBlocks template="' . esc_attr( wp_json_encode( $template ) ) . '" templateLock="false" />';
However, this limits the editor to a set number of blocks.
Related
I have a small problem
I wrote a simple shortcode function to display my acf value in the grid of the visual grid composer, this is my simple custom shortcode
function my_module_add_grid_shortcodes( $shortcodes ) {
$shortcodes['vc_say_hello'] = array(
'name' => __( 'Say Hello', 'my-text-domain' ),
'base' => 'vc_say_hello',
'category' => __( 'Content', 'my-text-domain' ),
'description' => __( 'Just outputs Hello World', 'my-text-domain' ),
'post_type' => Vc_Grid_Item_Editor::postType(),
);
return $shortcodes;
}
add_shortcode( 'vc_say_hello', 'vc_say_hello_render' );
function vc_say_hello_render() {
if( get_field('item') ):
the_field('item');
else:
echo "<h2>ITEM LOCKED</h2>";
endif;
}
When I call the shortcode in the builder, "ITEM Locked" is displayed, even if the value of the element is set in the post !!!
Looks like get_field doesn't know where to get it from in the shortcode. Try adding the current post id as the second parameter
add_shortcode( 'vc_say_hello', 'vc_say_hello_render' );
function vc_say_hello_render() {
$id = get_the_ID();
if( get_field('item', $id) ):
the_field('item', $id);
else:
echo "<h2>ITEM LOCKED</h2>";
endif;
}
Here's a screenshot of what the problem looks like:
And the HTML of that part of the WordPress options page looks like this:
So, in the WordPress admin area, I entered a piece of HTML code (to have a clickable link as the output on the frontend).
This was the code I had entered into that text input field on the backend:
<a title="Website Design London" href="../../website-design/">Website Design</a>
And while on the frontend that link is displaying OK, I'm seeing this mess (see screenshot) on the backend.
As far as I can tell the relevant PHP code is this:
$this->text(
'workdone',
esc_html__( 'Work done', 'mytheme' )
);
So, what is the proper way to save an option that contains HTML code?
And how can I fix the mess shown on the screenshot?
I had the same issue, and this code is working for me:
// render service label
public function render_service_label() {
$value = get_option( 'wbk_service_label', '' );
$value = htmlspecialchars( $value );
$html = '<input type="text" id="wbk_service_label" name="wbk_service_label" value="'.$value.'" >';
$html .= '<p class="description">' . __( 'Service label', 'wbk' ) . '</p>';
echo $html;
}
// validate service label
public function validate_service_label( $input ) {
$allowed_tags = array(
//formatting
'strong' => array(),
'em' => array(),
'b' => array(),
'i' => array(),
'br' => array(),
//links
'a' => array(
'href' => array(),
'class' => array()
),
//links
'p' => array(
'class' => array()
)
);
$input = wp_kses( $input, $allowed_tags );
return $input;
}
So, in the dashboard options page I use htmlspecialchars function
In frontend page I use like this:
$label = get_option( 'wbk_service_label', __( 'Select service', 'wbk' ) );
I am trying to display custom fileds created by me in visual composer by using custom short codes. This custom short codes run fine when i am working with heading and text area_html ,but now i want to add single image in this sort code,but in result i am not getting image,it displays alt attribute and in back-end side i am showing my single image that stores in custom shortcode field. here i am including my code.
1) code for creating custom shortcode
vc_map( array(
'name' => __( 'trionn_header' ),
'base' => 'trionn_header',
'category' => ( 'trionn code' ),
'params' => array(
"type" => "attach_image",
"holder" => "img",
"class" => "",
"heading" => __( "Hintergrundbild", "my-text-domain" ),
"param_name" => "image_url",
"value" => __( "", "my-text-domain" ),
"description" => __( lade eins hoch", "my-text-domain" )
)
) );
2) code in separate function-name file
<?php
/* Ordered List shortcode */
if (!function_exists('trionn_header')) {
function trionn_header($atts, $content) {
$atts = shortcode_atts(
array(
'image_url' => ''
), $atts, 'trionn_header'
);
$imageSrc = wp_get_attachment_image_src($image_url, 'thumbnail');
$html = '<img src="' . $imageSrc[0] .'" alt="' . $atts['title'] . '"/>';
return $html;
}
add_shortcode('trionn_header', 'trionn_header');
}
I found solution for your question,try this in your code
In param tag write this array after main param attribute:
array(
"type" => "attach_image",
"heading" => "Image",
"param_name" => "image",
'admin_label' => true
)
paste below code in your function_name file:
<?php
// Trionn header custom code //
if (!function_exists('trionn_header')) {
function trionn_header($atts, $content = null) {
$args = array(
'title' => __( 'This is the custom shortcode' ),
'title_color' => '#000000',
'content' => 'your discrption here',
"image" => "",
);
extract(shortcode_atts($args, $atts));
//init variables
$html = "";
$image_classes = "";
$image_src = $image;
if (is_numeric($image)) {
$image_src = wp_get_attachment_url($image);
}
// generate output for heading and discription
$html = '<h1 class="trionn header ' . $atts['style']. '" style="color: ' . $atts['title_color'] . '">'. $atts['title'] . '</h1>'. "<div class=content>" . $content . "</div>";
// generate output for single image
$html .= "<img itemprop='image' class='{$image_classes}' src='{$image_src}' alt='' style='{$images_styles}' />";
return $html;
}
add_shortcode('trionn_header', 'trionn_header');
}
Enjoy, thank me later
Hi I have a question regardin custom checkout fields in woocommerce.
I created a custom field in the checkout form and everything was working perfectly. The field contains a customer card number. I also managed to save the field value (once entered the first time) in the wp-usermeta, so that it doesn't come along only with the order, but it is saved together with teh customer details.
Now I would like to do the following. Once a registered customer returning to the shop goes to the checkout form, the new field (if not empyt) shows up automatically, instead of asking the customers to insert their card number everytime.
The original functions that I added to my child theme fucntions.php for showing the custom field in the checkout page was:
/**
* Add the field to the checkout
*/
add_action ('woocommerce_after_order_notes', 'checkout_w55_card_number' );
function checkout_w55_card_number( $checkout ) {
echo '<div id="checkout_w55_card_number"><h2>' . __('N. tessera W55') . '</h2>';
woocommerce_form_field( 'w55_card_number', array(
'type' => 'text',
'class' => array('w55-card-number-class form-row-wide'),
'label' => __('Inserisci n. tessera W55'),
'placeholder' => __('Inserisci numero'),
), $checkout->get_value( 'w55_card_number' ));
echo '</div>';
}
I thus tried to re-arrange it in this way, but it doesn't work
add_action ('woocommerce_after_order_notes', 'checkout_w55_card_number' );
function checkout_w55_card_number( $checkout ) {
//extracts the value of the w55_card_number field
$w55_card = get_user_meta($user_id, 'w55_card_number', true);
//condition is the w55_card_number field is empty or not
if ( !empty($w55_card) ) : echo $w55_card; else :
echo '<div id="checkout_w55_card_number"><h2>' . __('N. tessera W55') . '</h2>';
woocommerce_form_field( 'w55_card_number', array(
'type' => 'text',
'class' => array('w55-card-number-class form-row-wide'),
'label' => __('Inserisci n. tessera W55'),
'placeholder' => __('Inserisci numero'),
), $checkout->get_value( 'w55_card_number' ));
echo '</div>';
endif;
}
Any suggestion?
Your user_id variable was not defined. You need to do the following:
add_action ('woocommerce_after_order_notes', 'checkout_w55_card_number' );
function checkout_w55_card_number( $checkout ) {
$user_id = get_current_user_id();
$w55_card = '';
if ($user_id) {
//extracts the value of the w55_card_number field
$w55_card = get_user_meta($user_id, 'w55_card_number', true);
}
//condition is the w55_card_number field is empty or not
if ( !empty($w55_card) ) : echo $w55_card;
else :
echo '<div id="checkout_w55_card_number"><h2>' . __('N. tessera W55') . '</h2>';
woocommerce_form_field( 'w55_card_number', array(
'type' => 'text',
'class' => array('w55-card-number-class form-row-wide'),
'label' => __('Inserisci n. tessera W55'),
'placeholder' => __('Inserisci numero'),
), $checkout->get_value( 'w55_card_number' ));
echo '</div>';
endif;
}
When using the_posts_pagination (see codex) the pagination displays a title "post navigation".
Is it possible to turn this off?
For example using something like:
the_posts_pagination( array(
'title' => '', // this should hide the title
'prev_text' => __( 'Previous', 'twentyfifteen' ),
'next_text' => __( 'Next', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( '', 'nieuwedruk' ) . ' </span>',
) );
There is "screen_reader_text" property that should help you
the_posts_pagination( array(
'screen_reader_text' => ' ',
'prev_text' => __( 'Previous', 'twentyfifteen' ),
'next_text' => __( 'Next', 'twentyfifteen' ),
'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( '', 'nieuwedruk' ) . ' </span>',
) );
Note: Hence the space between the single quotes.
While searching for a solution i've found this link to be the most relative but not a complete solution for my situation. Above answer will cause a warning when validating your HTML with W3C.
I've found a way to completely remove the heading by adding an action which will remove the h2 tag with preg_replace(). Regex isn't my best job so if you have suggestions please let me now.
I've put the following action in my functions.php:
function sanitize_pagination($content) {
// Remove role attribute
$content = str_replace('role="navigation"', '', $content);
// Remove h2 tag
$content = preg_replace('#<h2.*?>(.*?)<\/h2>#si', '', $content);
return $content;
}
add_action('navigation_markup_template', 'sanitize_pagination');
Above function will also remove the "role" attribute from the nav element (Causes W3C warning).
I know this is an old post, but for people wanting simple solution,
a simple CSS block would do the trick. No need to tweak php.
h2.screen-reader-text {
display: none;
}
or
.post-navigation h2.screen-reader-text {
display: none;
}