Parameter returns empty in custom Visual Composer Icon

Question

I have setup a custom Element within VC for the user to add a button with custom text, link and (custom) font icon.

I can echo out the title and link fine but the font-icon is blank. When I print_r($atts) I get this:

Array
(
    [reach_vc_button_text] => More Information
    [reach_vc_button_link] => url:http%3A%2F%2Flocalhost%2FWordPress%2FJammyCustard%2Freach%2Ffunding%2Fthriving-rural-communities-scheme-trc%2F|||
    [reach_vc_button_icon] => 
);

    <?php
function reach_vc_button_html( $atts ) {

    $atts = shortcode_atts(
        array(
            'reach_vc_button_text' => '',
            'reach_vc_button_link' => '',
            'reach_vc_button_icon' => '',
        ), $atts, 'reach_vc_button'
    );

    ob_start();
    ?>

        <?php
            $href = $atts['reach_vc_button_link'];
            $button_link = vc_build_link( $href );

            //echo '<pre>'; print_r($atts); echo '</pre>';

        ?>  

    <a href="<?php echo $button_link['url']; ?>" class="read-more excerpt-read-more project-read-more"><?php echo $atts['reach_vc_button_text']; ?><i class="<?php echo $atts['reach_vc_button_icon']; ?>"></i></a>

    <?php
    $html = ob_get_clean(); 
    return $html;

}

add_shortcode( 'reach_vc_button', 'reach_vc_button_html' );

edit: added param code:

array(
                "type"        => "iconpicker",
                "heading"     => __( "Button Icon", "reach-rdp" ),
                "param_name"  => "reach_vc_button_icon",
                "value"       => "icon-more-information",
                "description" => __( "Select the icon to display for this button", "reach-rdp" ),
                "settings"   => array(
                    "emptyIcon"    => false,
                    "type"         => "reach",
                    "iconsPerPage" => "50",
                ),
                "dependency" => array(
                    "element" => "icon_type",
                    "value"   => "reach",
                ),
            ),

it seems, that reach_vc_button_icon contains valid html. Try var_dump() instead of print_r(). Then you can see also html in your output. And if it is html, you have the answer. Then this will never work: — Oliver, Jan 25 '17 at 17:03
Var_dump = `array(3) { ["reach_vc_button_text"]=> string(16) "More Information" ["reach_vc_button_link"]=> string(117) "url:http%3A%2F%2Flocalhost%2FWordPress%2FJammyCustard%2Freach%2Ffunding%2Fthriving-rural-communities-scheme-trc%2F|||" ["reach_vc_button_icon"]=> string(0) "" }` — Huw Rowlands, Jan 25 '17 at 17:10
Ok, it is just an empty string. Then it gets harder to find the error. I would try to check the content of $atts. shortcode_atts() merges the arrays as far as I know. And for some reason the reach_vc_button_icon is not set or is empty. I'm offline now, but I will come back tomorrow, if you still need help. — Oliver, Jan 25 '17 at 17:18
Thanks @Oliver I have another issue which may be linked actually, and that's when I click the dropdown to select an icon, they are repeated. I have around 10 custom icons, and it shows 20. For some reason looping twice?! I'll keep playing around and let you know if I manage to solve it! — Huw Rowlands, Jan 25 '17 at 18:57
You're welcome. Can't see a loop in your code. So I think, you talk about another part of your code. I hope you did found the reason for the missing value in your $atts variable. — Oliver, Jan 26 '17 at 08:36

score 0 · Answer 1 · answered Jan 26 '17 at 10:44

Your problem might be in your param declaration code. try following code

array(
      'type' => 'iconpicker',
      'heading' => __( 'Button Icon', 'reach-rdp' ),
      'param_name' => 'reach_vc_button_icon',
      'settings' => array(
        'emptyIcon' => false, // default true, display an "EMPTY" icon?
        'type' => 'openiconic',
        'iconsPerPage' => 200, // default 100, how many icons per/page to display
      ),
      'dependency' => array(
        'element' => 'icon_type',
        'value' => 'openiconic',
      ),
      'description' => __( 'Select icon from library.', 'reach-rdp' ),
    ),

Next step is enqueue the Openiconic style or use Visual Composer given function in your short-code output file. follow this code

vc_icon_element_fonts_enqueue( $i_type );

For details, check this link https://wpbakery.atlassian.net/wiki/display/VC/Adding+Icons+to+vc_icon

Checked your code against mine and still doesnt work I'm afraid. — Huw Rowlands, Jan 26 '17 at 12:32
Is that en-queue font style and check 'icon_type' return anything. if icon_type do not return any think then it wont work. i make custom element using this code and it work properly. — Nahid Hasan, Jan 26 '17 at 12:49

Parameter returns empty in custom Visual Composer Icon

1 Answers1