Recently I am making a wordpress shortcode plugin . This is a responsive shortcode plugin. I want to customize the css from the user input declare by the user. so i have to make a $GLOBALS variable for this atts but its dont work. Someone please help me out from this problem because i cant figure out whats wrong.
<?php
function gs_tabs_shortcode($atts, $content= null){
$GLOBALS['tab_count'] = 0;
extract(shortcode_atts(array(
'fontcolor' => '',
'tabcolor' => '',
'contcolor' => '',
'contfontc' => ''
), $atts) );
$x = $GLOBALS['tab_count'];
//__User input bind in supper globar array__//
$GLOBALS['styls'][$x] = array( 'fontcolor' => $fontcolor,
'tabcolor' => $tabcolor,
'contcolor' => $contcolor,
'contfontc' => $contfontc);
$GLOBALS['tab_count']++;
do_shortcode( $content );
if ( is_array( $GLOBALS['tabs'] ) ) {
foreach ($GLOBALS['tabs'] as $tab ) {
$tabs[]= '<li> <i class="fa fa-'.$tab['icon'].' fa-lg "></i> '.$tab['title'].' </li>';
$tabcontent[]= '<div><p> '.$tab['content'].' </p></div>';
}
$return = '<div id="horizontalTab">';
$return .= '<ul class="resp-tabs-list">'.implode( "n", $tabs ).'</ul>';
$return .= '<div class="resp-tabs-container">'.implode("n", $tabcontent).'</div>';
$return .= '</div>';
}
return $return;
}
add_shortcode('gs_tabs', 'gs_tabs_shortcode');
function gs_tabs_shortcode_nested( $atts, $content= null ){
extract(shortcode_atts(array(
'title' => '',
'icon' => ''
), $atts) );
$x = $GLOBALS['tab_count'];
$content = do_shortcode($content);
//__User input bind in supper globar array__//
$GLOBALS['tabs'][$x] = array( 'title' => $title,
'content' => $content,
'icon' => $icon);
$GLOBALS['tab_count']++;
}
add_shortcode('gs_item','gs_tabs_shortcode_nested');
//customize userdata
function my_custom_fonts() {
if (is_array( $GLOBALS['styls'] ) ) {
foreach ( $GLOBALS['styls'] as $style ) {
$opt= '<style>
.resp-tab-item {
background: '.$style['tabcolor'].';
color:'.$style['fontcolor'].';
}
</style>';
echo $opt;
}
}
}
add_action('wp_head', 'my_custom_fonts');
?>
This is my customize css function
//customize userdata
function my_custom_fonts() {
if (is_array( $GLOBALS['styls'] ) ) {
foreach ( $GLOBALS['styls'] as $style ) {
$opt= '<style>
.resp-tab-item {
background: '.$style['tabcolor'].';
color:'.$style['fontcolor'].';
}
</style>';
echo $opt;
}
}
}
add_action('wp_head', 'my_custom_fonts');
User going to declare ther style like
[gs_tabs fontcolor="black" tabcolor="blue" ]
[gs_item title="item1" icon="camera-retro"]this is item 1[/gs_item]
[gs_item title="item2" ]this is item 2[/gs_item]
[gs_item title="item3" icon="binoculars"]this is item 3[/gs_item]
[/gs_tabs]
