Visual Composer; custom elements won't load textarea_html/'content' - wordpress

Currently using WordPress 4.4.2, I'm in the process of developing some custom Visual Composer elements.
It seems (however), that whenever I want to use a textarea_html param (So the end-user can use the wysiwyg editor) I cannot seem to grab it's contents when rendering the template.
Contents of 'titled_content_box.php'
// called during vc_before_init
function integrate_titled_content_box(){
register_titled_content_box();
add_shortcode( 'titled_content_box', 'titled_content_box_func');
}
//Mapping of titled-contentbox
function register_titled_content_box(){
vc_map( array(
"name" => __( "Content box with Title", "mytheme"),
"base" => "titled_content_box",
"class" => "",
"category" => "Content",
"params" => array(
array(
"type" => "textfield",
"holder" => "div",
"class" => "",
"heading" => __( "Title", "mytheme"),
"param_name" => "title",
"value" => __("Box title", "mytheme"),
"description" => __("The title covering the content box", "mytheme")
),
array(
"type" => "textarea_html",
"holder" => "div",
"class" => "",
"heading" => __( "Description", "mytheme"),
"param_name" => "content",
"value" => '<p>Placeholder</p>',
"description" => __("The content", "mytheme")
)
)
));
}
// Setting values where necessary and fetching the template
function titled_content_box_func( $atts ){
extract( shortcode_atts( array(
'title' => 'title',
'content' => 'content'
), $atts) );
return include_vc_template('titled_content_box.php', $atts);
}
add_action ( 'vc_before_init', 'integrate_titled_content_box');
contents of the template used at the return statement:
<div class="titled-content-box">
<div class="title"><span><?php echo $atts['title']; ?></span></div>
<div class="content">
<?php echo $atts['content']; ?>
</div>
</div>
Does anyone know why my content-field is not loaded? The element itself is loaded, I can use it in VC... even the Title will be loaded and if I replace the field with a textbox, all still works fine and dandy...
My end-user wants to format his content and is not able to use html formatting.
The only function not included is the 'include_vc_template' function, but all that does is pretty much fetching a string-defined php-file on a predetermined location and injects the $atts array. In all other elements I've made that works perfectly fine.
However, for completeness i'll include it here;
function include_vc_template($template, $atts){
if(is_file(__DIR__.'/vc_templates/'.$template)){
ob_start();
include __DIR__.'/vc_templates/'.$template;
return ob_get_clean();
}
return false;
}
As this is a project i'm working on in my spare-time I can't help but to feel annoyed by a functionality not working as-documented... Most searches I've done simply referred my back to wpbakery's knowledge base page for vc_map()... Any pointers at all would be great!

Update you template callback function to:
function titled_content_box_func( $atts, $content ) {
$atts = shortcode_atts( array(
'title' => 'title',
), $atts) );
$atts['content'] = $content;
return include_vc_template('titled_content_box.php', $atts);
}
Update: 07-11-2016:
I would recommend using also vc_map_get_attributes function, which also combines all default values with your provided values.
As you can see in previous PHP function we used title attribute with default value title which is not compatible with the default value from vc_map (__("Box title", "mytheme")) and actually this is an error.
To avoid that errors please use vc_map_get_attributes function for $atts variable.
function titled_content_box_func( $atts, $content, $tag ) {
$atts = vc_map_get_attributes($tag, $atts);
$atts['content'] = $content;
return include_vc_template('titled_content_box.php', $atts);
}

The content is outputted but not a 100% correct, because it also mixes up the HMTL and creates extra paragraphs.
correct code is:
function titled_content_box_func( $atts, $content = null, $tag ) {
$atts = shortcode_atts( array(
'title' => 'title',
), $atts) );
$content = wpb_js_remove_wpautop($content, true); // fix unclosed/unwanted paragraph tags in $content
return include_vc_template('titled_content_box.php', $atts);
}

Related

wp_localize_script is not accepting dynamic value

*Context
I am new to WordPress plugin development and I have just started developing one. Which is basically a blog slider plugin. The concept is very simple. The user can use shortcodes with parameters to determine which posts and how many posts to be shown. There is no admin settings page for changing the appearance of the slider though, but I'll work on that. The user have to use shortcode whenever the slider is needed.
The development part is also simple. I am checking the parameters that the user passes through the shortcode. And then a query runs and returns an array of posts and then displays the structure. Very simple.
*Problem
Now I am trying to make the plugin options more dynamic (via shortcode) i.e. the user can control whether the slider should auto-play or not, loop should be enabled or not, pause on hover, dots/nav hide or show etc. I am using owl carousel for this slider. So that means I have to change the attributes of the slider in JavaScript file.
The basic idea is to take the parameters from function's $atts array, and pass it to the JavaScript file. I know this can be accomplished using wp_localize_script, but I cannot figure out how.
Here is my code to make things more clear.
mainfile.php
add_shortcode( 'sp-slider', 'sp_slider_get_posts');
function sp_slider_get_posts( $atts ) {
$values = shortcode_atts( array(
'number' => '-1',
'category-id' => '', //DEFAULT VALUE null, WILL BE REPLACED ONCE USER DECLARES IN SHORTCODE
'category-name' => '',
'orderby' => '',
'order' => '',
'include-posts' => '',
'exclude-posts' => '',
'author-id' => '',
'author-name' => '',
'autoplay' => ''
), $atts );
if( !empty($values['number']) ||
!empty($values['category-id']) ||
!empty($values['category-name']) ||
!empty($values['orderby']) ||
!empty($values['order']) ||
!empty($values['include-posts']) ||
!empty($values['exclude-posts']) ||
!empty($values['author-id']) ||
!empty($values['author-name']) ||
!empty($values['autoplay'])) {
$args = array(
'numberposts' => $values['number'],
'cat' => $values['category-id'],
'category_name' => $values['category-name'],
'orderby' => $values['orderby'],
'order' => $values['order'],
'include' => $values['include-posts'],
'exclude' => $values['exclude-posts'],
'meta_key' => '',
'meta_value' => '',
'post_parent' => '',
'author' => $values['author-id'],
'author_name' => $values['author-name'],
'post_status' => 'publish',
'suppress_filters' => true,
'fields' => '',
);
$autoplay = $values['autoplay']; //GET AUTOPLAY VALUE. NO IDEA HOW TO USE IT. SO I TRIED THE FOLLOWING
// THE FOLLOWING FUNCTION HOLDS THE wp_localize_script FUNCTION, WHICH IS DECLARED AT THE END OF THIS CURRENT FUNCTION sp_slider_get_posts.
sp_carousel_settings($autoplay); //PASSING THE USER INPUT
$posts_array = get_posts( $args );
if( !empty( $posts_array ) ) {
$output = "<div class='sp-slider-wrapper'>";
$output .= '<div class="owl-carousel owl-theme">';
foreach( $posts_array as $post ) {
include( "includes/inc_slider_section.php"); // ALL THE SLIDER STRUCTURE IS IN DIFFERENT FILE WHICH IS INCLUDED HERE
}
$output .="</div>";
$output .="</div>";
}
return $output;
}
}
// HERE IS sp_carousel_settings() DECLARATION
function sp_carousel_settings( $autoplay ) {
$carousel_settings = array( 'autoplay' => $autoplay);
wp_localize_script( 'sp_main_js', 'carousel_settings', $carousel_settings );
}
add_action( 'wp_enqueue_scripts', 'sp_carousel_settings' );
mainjs.js
$(document).ready(function() {
...
...
var autoplay= '';
if(typeof carousel_settings !== 'undefined') {
autoplay = carousel_settings.autoplay;
}
else {
autoplay = false;
}
$('.owl-carousel').owlCarousel({
loop:true,
autoplay:autoplay,
autoplayTimeout:2000,
autoplayHoverPause:true,
...
...
}
})
This doesn't work. Here I would like to mention that, in add_action() function, if i put wp_footer instead of wp_enqueue_scripts, it adds the script to the footer of the page (I have checked it by viewing the source) but the autoplay value is null.
Another thing i would mention is that, in sp_carousel_settings() function, instead of passing the $autoplay variable, if I write any static value like this $carousel_settings = array( 'autoplay' => true);, it works.
*I tried echoing out $autoplay inside sp_carousel_settings() and it prints the value! But does not get to the js file.
*I tried checking the value of $autoplay and pass a hardcore sting inside wp_localize_script like
function sp_carousel_settings( $autoplay ) {
if( $autoplay == "true" ) {
echo "Inside!!!";
$carousel_settings = array( 'autoplay' => true);
}
else {
echo "Outside!!!";
$carousel_settings = array( 'autoplay' => false);
}
wp_localize_script( 'sp_main_js', 'carousel_settings', $carousel_settings );
}
add_action( 'wp_footer', 'sp_carousel_settings' );
Does not work. EVEN it prints out "Inside!!!" but does not pass true in autoplay. The value is always false.
*I have registered the js file in the beginning of the plugin, where the plugin activates and gets initialized. Like this
function sp_slider_include_css_js() {
...
...
wp_register_script('sp_main_js', plugins_url('assets/js/main.js',__FILE__));
wp_enqueue_script('sp_main_js');
...
...
}
add_action( 'wp_footer','sp_slider_include_css_js');
*I have searched internet for help but was unable to find. Any reference will be appreciated.
*I know that I might be using the function in an improper way. I am clueless (and new to this).
Have to do some changes like,
Step 1:
function sp_carousel_settings() {
wp_register_script( 'sp_main_js', 'you/file/path/here', array( 'jquery' ), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'sp_carousel_settings' );
Step 2:
add_shortcode( 'sp-slider', 'sp_slider_get_posts');
function sp_slider_get_posts( $atts ) {
.....
$carousel_settings = array( 'autoplay' => $autoplay);
wp_localize_script( 'sp_main_js', 'carousel_settings', $carousel_settings );
wp_enqueue_script( 'sp_main_js' );
......
}

ACF Dynamic select values not showing data

This question makes me crazy for almost 2 weeks. I know I am not expert in Wordpress, so I am seeking for help here.
I have create a href that when user click it will go to new page.
Add Class2
This href post the Post id. Url display:
[http://localhost/dev6/create-class/?post=289][1]
create-class page:
At create-class page,I am using GET method to display post id from url
$post = $_GET['post'];
I have acf form in create-class page for create new post. In this form, there have dynamic select field but the select field not display any data.
<?php acf_form(array(
'post_id' => 'new_post',
'field_groups' => array(150),
'post_title' => false,
'post_content' => false,
'new_post' => array(
'post_type' => 'classes',
'post_status' => 'publish',
),
'return' => '%post_url%',
'submit_value' => 'Submit',
//'updated_message' => 'Course Submit!',
)); ?>
in my function.php I create function for dynamic select:
function acf_load_t_first_name2_field_choices($field) {
global $post;
//$post = $_GET['post'];
// reset choices
$field['choices'] = array();
// get the textarea value from options page without any formatting
$choices = get_field('t_first_name',$post->ID);
// loop through array and add to field 'choices'
if( is_array($choices) ) {
foreach( $choices as $choice ) {
$field['choices'][ $choice ] = $choice;
}
}
// return the field
return $field;
}
add_filter('acf/load_field/name=t_first_name2', 'acf_load_t_first_name2_field_choices');
Is there something wrong with my code?
I don't believe this will work in your create-class template:
$post = $_GET['post'];
You will need to set something like this up in your functions.php file:
function custom_query_vars_filter($vars) {
$vars[] .= 'post';
return $vars;
}
add_filter( 'query_vars', 'custom_query_vars_filter' );
Then, in your create-class template you can get the variable from the URL like this:
$post = get_query_var('post');
See if that gets you going in the right direction.

Visual composer custom loop shortcode

I need to use custom loop from visual composer:
if( function_exists('vc_map') ) {
vc_map( array(
'base' => 'minimag_popular_post_custom',
'name' => esc_html__( 'Popular Post Custom', "minimag-toolkit" ),
'class' => '',
"category" => esc_html__("Minimag Theme", "minimag-toolkit"),
'params' => array(
array(
// this param
"type" => "loop",
"heading" => esc_html__("Display Custom Loop", "minimag-toolkit"),
"param_name" => "custom_loop",
)
),
) );
}
In past I've used vc_link which had the proper function to retrieve the value in the correct form: vc_build_link($href).
There is some function to extract the data from loop parameter? I've looked in the reference but I've not find nothing.
Here an example of the output that I need to parse:
size:8|order_by:date|order:DESC|post_type:post|categories:32,5|by_id:1537,1673
I need to have something like:
$myVar['size'] = 8;
$myVar['order_by'] = 'date';
$myVar['order'] = 'DESC';
$myVar['post_type'] = 'post';
$myVar['categories'] = array(32,5);
$myVar['by_id'] = array(1537,1673);
tested and working :)
list($args, $wp_query) = vc_build_loop_query($atts["custom_loop"]);
while ( $wp_query->have_posts() ) {
$wp_query->the_post();
}
wp_reset_postdata();
If you know your query I like to create a shotcode in the functions.php of my child-theme to create that. You can pass parameters to create different output and you can use such a shortcode everywhere in your site.

wp_list_comments function not working in wordpress 4.3.16 version

I am adding load more comments button in comments section. i want load function wp_list_comments using Ajax, function are loading but wp_list_comment not display in wordpress 4.3.16 version. How to solve this problem???
My code are is:
// maybe it isn't the best way to declare global $post variable, but it is simple and works perfectly!
add_action('wp_ajax_cloadmore', 'misha_comments_loadmore_handler');
add_action('wp_ajax_nopriv_cloadmore', 'misha_comments_loadmore_handler');
function misha_comments_loadmore_handler(){
global $post;
$post = get_post( $_POST['post_id'] );
setup_postdata( $post );
// actually we must copy the params from wp_list_comments() used in our theme
wp_list_comments( array(
'page' => $_POST['cpage'], // current comment page
'per_page' => get_option('comments_per_page'),
'style' => '<div>', // comments won't wrapped in this tag and it is awesome!
'short_ping' => true,
) );
die; // don't forget this thing if you don't want "0" to be displayed
}
Try this code.
add_action('wp_ajax_cloadmore', 'misha_comments_loadmore_handler');
add_action('wp_ajax_nopriv_cloadmore', 'misha_comments_loadmore_handler');
function misha_comments_loadmore_handler(){
$comments = get_comments(array(
'post_id' => $_POST['post_id'],
'status' => 'approve'
));
wp_list_comments(array(
'page' => $_POST['cpage'], // current comment page
'per_page' => get_option('comments_per_page'),
'style' => '<div>', // comments won't wrapped in this tag and it is awesome!
'short_ping' => true,
), $comments);
die; // don't forget this thing if you don't want "0" to be displayed
}

Only partial theming of custom form

I've constructed a custom module to create a form. Now I'm stuck on the theming. I already have a CSS stylesheet for the form, since my company is part of the government and they have a preset branding. So I wanted to change the HTML used by the default form theme functions of Drupal thus implementing the correct style.
But only the form-tag of the form gets rendered. The fieldset and elements are not rendered. When the theme functions are removed the default theming kicks in and the form renders normally (but of course without the requested theming).
What I have tried so far:
Added a hook_theme function to add theme functions
function publicatieaanvraagformulier_theme() {
return array(
'publicatieaanvraagformulier_form' => array(
'arguments' => array("element" => NULL)
),
'publicatieaanvraagformulier_fieldset' => array(
'arguments' => array("element" => NULL)
),
'publicatieaanvraagformulier_form_element' => array(
'arguments' => array(
"element" => NULL,
"value" => NULL
)
)
);
}
Added ['#theme'] to the form-element, fieldset-element and the form-elements
$form['#theme'] = "publicatieaanvraagformulier_form";
$form['groep'] = array(
'#title' => t("Please fill in your details"),
'#type' => "fieldset",
'#theme' => "publicatieaanvraagformulier_fieldset"
);
$form['groep']['organisatie'] = array(
'#title' => t("Organization"),
'#type' => "textfield",
'#attributes' => array("class" => "text"),
'#theme' => "publicatieaanvraagformulier_form_element"
);
Added the actual theme function based on the default ones in form.inc
function theme_publicatieaanvraagformulier_form($element) {
function theme_publicatieaanvraagformulier_fieldset($element)
function theme_publicatieaanvraagformulier_form_element($element, $value)
I haven't included the code of these functions because even with the default themefunctions code, they don't work. Therefor I assume they are not the source of the problem.
The form is called
//Get the form
$form = drupal_get_form('publicatieaanvraagformulier');
//Add messages
$errors = form_get_errors();
if (!empty($errors)) {
$output .= theme("status_messages","error");
}
//Show form
$output .= $form;
return $output;
I haven't found similar 'complicated' examples of theming a form, but have pieced together the former from books and online searches.
Hopefully someone has an answer to this problem (point out the mistake I made).
Greetings
Jeroen

Resources