I am following this example to create a container for some shortcode that would allow me to wrap multiple sub page builder elements.
https://kb.wpbakery.com/docs/developers-how-tos/nested-shortcodes-container/
If I used the example code it works as expected and allows me to add elements inside the new container, but when I apply the code to my shortcode I do not get the option to add the inner elements. I guessing it something to do with the shortcode https://wordpress.org/plugins/infusionsoft-official-opt-in-forms/
Here is my code
//Register "container" content element. It will hold all your inner (child) content elements
vc_map( array(
"name" => __("InfusionSoft Blocker", "zzone"),
"base" => "inf_infusionsoft_locked",
"as_parent" => array('except'), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
"content_element" => true,
"show_settings_on_create" => true,
"is_container" => true,
"params" => array(
// add params same as with any other content element
array(
"type" => "textfield",
"heading" => __("Optin ID", "zzone"),
"param_name" => "optin_id",
"value" => 'optin_1',
"description" => __("Example: optin_1", "my-text-domain")
)
),
"js_view" => 'VcColumnView'
) );
//Your "container" content element should extend WPBakeryShortCodesContainer class to inherit all required functionality
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
class WPBakeryShortCode_InfusionSoft_Blocker extends WPBakeryShortCodesContainer {
}
}
When you extend WPBakeryShortCodesContainer you have to name the class as WPBakeryShortCode_[shortcode_base]
So you code should look like this:
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
class WPBakeryShortCode_inf_infusionsoft_locked extends WPBakeryShortCodesContainer {}
}
Tip: "as_parent" => array('except') will show every shortcode. If you don't want your shortcode to nest itself, set "as_parent" => array('except' => 'inf_infusionsoft_locked')
Related
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);
}
I have the following form element, it generates a checkbox:
$deliveryLocationChoices = array( '0' => 'Select if Applicable',
'front' => 'Front',
'rear' => 'Rear',
'left' => 'Left Side',
'right' => 'Right Side');
$this->setWidgets(array(
'delivery_location' => new sfWidgetFormChoice(array('choices' => $deliveryLocationChoices )),
));
It works, great, except I would like to print each individual checkbox item. Reason being is I need to customize positioning of each box.
Thanks
You can override the way checkboxes are going to be displayed by passing a renderer_options argument to your new sfWidgetFormChoice.
That would look something like this
$this->setWidgets(array(
'delivery_location' => new sfWidgetFormChoice(array('choices' => $deliveryLocationChoices, 'renderer_options' => array('formatter' => array($this, 'checkboxFormatter')))),
));
Then, within your form class, define the function 'checkboxFormatter' like this
public static function checkboxFormatter($widget, $inputs) {}
That way you'll be able to access your checkboxes through the $inputs var. You must return the displaying result at the end of the checkboxFormatter function.
I've been using "tiny_mce_before_init" in WordPress to add my own custom styles to the style dropdown in the editor.
Everything has been working fine but now I need to add a style that doesn't just add one element but two. Do you know if that's possible?
Here's how I'm adding single elements:
<?php
add_filter('tiny_mce_before_init', 'my_tinymce_styles');
function my_tinymce_styles ($init) {
$styles = array(
array(
'title' => 'Small',
'inline' => 'small',
'wrapper' => false
),
array(
'title' => 'Bar',
'block' => 'div',
'classes' => 'bar',
'wrapper' => true
)
# Etc...
);
# Insert the array, JSON ENCODED, into 'style_formats'
$init['style_formats'] = json_encode($styles);
return $init;
}
And this works as expected. The user selects some text, chooses "Bar" from the "Styles" dropdown and the text is wrapped in <div class="bar">...</div>.
However, now I need to do that same but add <div class="section"><div class="inner">TEXT_HERE</div></div> - how can I do that?
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
I've read several tutorials for adding custom styles to the WYSIWYG (TinyMCE) editor. None of them seem to work in the newest version(s) of Wordpress. I'm using v3.3.2. The instructions from the codex work, but in a limited way...
NOTE: To be 100% clear, I'm trying to add a "Styles" dropdown which the author can use to apply my custom styles to the text. (Please don't confuse my question with how to style the editor its self, using editor-style.css... )
I managed to get the code working, but only using the commented-out line in my_mce_before_init(). The problem with this version is that it adds the class with a generic <span>. I'm trying to use the more powerful version of the code (as shown below), but something isn't quite right. The styles drop-down box appears, but it's blank. If I click it the first item is says "Styles" but does nothing. I suspect there's something off about my array. Hopefully someone more knowledgeable than me can set me straight.
Here's the relevant code in my theme's functions.php...
Here's how I add the button:
// Add the Style selectbox to the second row of MCE buttons
function my_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');
Here's how I add the styles (it works when I uncomment the ):
//Define the actual styles that will be in the box
function my_mce_before_init($init_array)
{
// add classes using a ; separated values
//$init_array['theme_advanced_styles'] = "Section Head=section-head;Sub Section Head=sub-section-head";
$temp_array['theme_advanced_styles'] = array(
array(
'title' => 'Section Head',
'block' => 'h3',
'classes' => 'section-head'
),
array(
'title' => 'Sub Section Head',
'block' => 'h4',
'classes' => 'sub-section-head'
)
);
$styles_array = json_encode( $temp_array['theme_advanced_styles'] );
// THIS IS THE PROBLEM !!!! READ BELOW
$init_array['theme_advanced_styles'] = $styles_array;
return $init_array;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
UPDATE: I figured it out (see my answer below). Before you scroll down, notice in the code above, theme_advanced_styles is the wrong key. It should be style_formats when defining the custom styles in the way that I'm doing. I suspect this is a common mistake.
It seems you're using this (awesome) tutorial: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
Worked great for me so I compared your code with mine: it seems you lack a
'wrapper' => true
as a fourth parameter to each sub-array. This is needed for adding a class on a parent element of your selection (it can broaden your selection) and not creating a new element around your exact selection before adding it a class.
Thus if you select part of a paragraph or part of 2 paragraphs, it'll select the whole paragraph(s) (not so sure about the 2 paragraphs thing, please test :) but at least it won't create inline element around your exact selection).
From the documentation (above link):
wrapper [optional, default = false]
if set to true, creates a new block-level element
around any selected block-level elements
My customization:
$style_formats = array(
array(
'title' => 'Column',
'block' => 'div',
'classes' => 'col',
'wrapper' => true
),
array(
'title' => 'Some div with a class',
'block' => 'div',
'classes' => 'some_class',
'wrapper' => true
),
array(
'title' => 'Title with other CSS',
'selector' => 'h3',
'classes' => 'other_style'
),
array(
'title' => 'Read more link',
'selector' => 'a',
'classes' => 'more'
)
);
Hope it works for you
AHA!
I found the problem: the two different versions of defining the custom classes must be added to different keys in the settings array.
This version...
"Section Head=section-head;Sub Section Head=sub-section-head";
...needs to be the value of 'theme_advanced_styles'.
Whereas this version...
$style_formats = array(
array(
'title' => 'Column',
'block' => 'div',
'classes' => 'col',
'wrapper' => true
),
);
...needs to be the value of 'style_formats' in the TinyMCE settings array.
I had changed to the second style but hadn't noticed the different key for the array.
Wordpress provides a function for adding a custom stylesheet to the editor: http://codex.wordpress.org/Function_Reference/add_editor_style