Hi guys i need little help
in this theme submission requirement of themeforest
No hardcoded inline styles are allowed anywhere. Dynamic inline styles are permitted where necessary, and wp_add_inline_style() should be used where possible.
means i cannot directly hardcode anything like this <p style=‘color:#fff’
to add inline it says use wordpress function wp_add_inline_style() for this
but i am creating visual composer element and uses color picker which means i cannot able to use this wordpress function wp_add_inline_style() in add_shortcode()
Yes, you can do that but make sure to have a default color for every element not to add inline styling if not required and include color:".$color." only when a custom color is chosen, otherwise it will default to empty parameter and litter your markup.
Hi thanks for the reply
but i have another question right now
for example i write all the css to a $GLOBAL variable but only issue is that when i insert that variable to using add_action to wp_head
it wont work because wp_head call before the add_shortcode and then in my wordpress head it only return empty variable
so i figure that out i use add_action(‘shutdown’, ‘my_styles_method’, 100); this hook which call at the very end means just before php execution and with that all my custom css displays at the very bottom of the page but good news is that it works very fine
so i want to know is it allowed ?
i am going to attach some of my code which i currently wrote in the functions.php
// Some of my theme code here
$GLOBALS['currentcss']="";
function vc_infobox_html( $atts)
{
// Params extraction
extract(
shortcode_atts(
array(
'title' => '',
'text' => '',
'color' => '#12345e',
),
$atts
)
);
$class ='vc-infobox-title-'. generateRandomString(); // generateRandomString() function generate a random string which i then combine it with my element to make it unique
$curentcss=".".$class."{color:".$color.";}\n"; // Binding up the css
$GLOBALS['currentcss'].=$curentcss; // appending this elements css to global variable
// Fill $html var with data
$html = '
<div class="vc-infobox-wrap">
<h2 class="vc-infobox-title '.$class.'" >' . $title . '</h2>
<div class="vc-infobox-text">' . $text . '</div>
</div>';
return $html;
}
add_shortcode( 'vc_infobox', 'vc_infobox_html');
// But wait remember add shortcode function like the above vc_infobox_html() may call several time depending on upon how many time this element is used in a page
function my_styles_method() {
echo "<style>".$GLOBALS['currentcss']."</style>";
}
add_action('shutdown', 'my_styles_method', 100); // this action add all my css at the very bottom of the page
// if i change the above hook 'shut' with 'wp_head' then no css is included in head because wp_head is called way before then shut and $GLOBAL variable is empty at that stage
/*
How my css will look
<style>
.vc-infobox-title-HEkT6vapSk{color:maroon;}
.vc-infobox-title-xCdXp7RJf0{color:green;}
.vc-infobox-title-0u1RoAcMeR{color:#12345e;}
.vc-infobox-title-2-KmeE9HDOlo{color:#000;}
</style>
*/
// if you have any idea with this my current tecnique so i can insert my all css in wp_head that will be very helpful thanks chears
// Some of my theme code here
You can’t have add_shortcode in a theme, it should go in a plugin. And if you use the plugin, the styles are generated inside it and you pass the theme’s validation, no need to hook to theme’s inline styles inclusion methods.
Well, that’s not right. You should always have the Theme check compatibility in mind, if you are getting a warning or an error, it’s not going to be accepted by the reviewers.
Moreover, add_shortcode in theme code is not allowed for more than 8-9 months now. Visual Composer has quite good documentation, and even a minimal example on how you can create a plugin which extends Visual Composer allowing you creating new components (There are lot of products / plugins on Codedcanyon, e.g. Massive Addons for Visual Composer) that work exactly this way.
