Below, you’ll find a detailed guide on how to add the SKT Skill Bar Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the SKT Skill Bar Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the SKT Skill Bar Plugin and the shortcodes it provides:
"SKT Skill Bar is a dynamic WordPress plugin that allows users to showcase their skills or progress in a sleek, interactive bar format. Ideal for personal or professional websites."
- [skillwrapper]
- [skill]
SKT Skill Bar [skillwrapper] Shortcode
The SKT Skill Bar plugin shortcode is used to create and customize skill bars in WordPress. It allows users to define attributes like type, track color, chart color, size, and alignment. The shortcode creates a skill bar based on the ‘type’ attribute. It supports ‘bar’, ‘gage’, ‘circle’, ‘skt_verticalgraph’ types, each having unique visual representation and behavior.
Shortcode: [skillwrapper]
Parameters
Here is a list of all possible skillwrapper shortcode parameters and attributes:
type– determines the type of skill bar to be displayedtrack_color– sets the color of the skill bar trackchart_color– determines the color of the skill bar chartchart_size– sets the size of the skill bar chartalign– aligns the skill bar to the left, right, or centerchart_fontsize– sets the font size of the skill bar chartchart_headingfontsize– sets the font size of the skill bar chart headingbar_titlefontsize– sets the font size of the skill bar titlebar_titlecolor– sets the color of the skill bar titlebar_percentfontszie– sets the font size of the skill bar percentagebar_percentcolor– sets the color of the skill bar percentage
Examples and Usage
Basic example – Display a basic skill bar with default settings:
[skillwrapper type="bar"]Advanced examples
Display a skill bar with a custom track color and chart color:
[skillwrapper type="bar" track_color="#ff0000" chart_color="#0000ff"]Display a gage skill chart with a custom alignment:
[skillwrapper type="gage" align="right"]Display a circle skill chart with a custom chart size and font size:
[skillwrapper type="circle" chart_size="200" chart_fontsize="14"]Display a vertical graph with custom bar title font size and color:
[skillwrapper type="skt_verticalgraph" bar_titlefontsize="18" bar_titlecolor="#0000ff"]PHP Function Code
In case you have difficulties debugging what causing issues with [skillwrapper] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'skillwrapper', 'skillwrapper_func' );Shortcode PHP function:
function skillwrapper_func( $atts, $content = null ) {
extract( shortcode_atts( array(
'type' => 'bar',
'track_color' => '#dddddd',
'chart_color' => '#333333',
'chart_size' => '150',
'align' => 'center',
'chart_fontsize' =>'',
'chart_headingfontsize' =>'',
'bar_titlefontsize' =>'',
'bar_titlecolor' =>'',
'bar_percentfontszie' => '',
'bar_percentcolor' => '',
), $atts ) );
switch ( $type ){
case 'bar':
$wrapCode = '<div id="skillbar_straight" style="padding:10px 0;">'.str_replace('<br />', "\n", do_shortcode($content))."\n".'<div style="clear:both;"></div>'."\n".'</div>'."\n".'<div style="clear:both; height:10px; overflow:hidden;"></div>'."\n";
$wrapCode .= '<style type="text/css">.skillbar-title{font-size:'.$bar_titlefontsize.'px;color:'.$bar_titlecolor.';}.skill-bar-percent{font-size:'.$bar_percentfontszie.'px;color:'.$bar_percentcolor.';}</style>';
$wrapCode .= '<script>
function sbar(){
jQuery(".skillbar").each(function(){
jQuery(this).find(".skillbar-bar").animate({
width:jQuery(this).attr("data-percent")
},3000);
});
}
if ( jQuery("#skillbar_straight").next().is(":appeared") ){
sbar();
} else {
jQuery( window ).scroll(function() {
if ( jQuery("#skillbar_straight").next().is(":appeared") ){
sbar();
}
});
}
</script>';
break;
case 'gage':
$wrapCode = '';
$content = strip_tags($content);
$start = strpos($content, '[');
$end = strrpos($content, '"]');
$len = strlen($content);
$diff = $end - $len;
$content = substr( $content, $start, $diff);
$content = str_replace(array('[skill ', '"]', '" ]', '" ', '="' ), array('', '', '', ':', '='), $content);
$cntStrAr = explode( "\n", $content );
$numAr = array();
foreach($cntStrAr as $cntk => $cntv){
if($cntv != ''){
$cnStr = str_replace( array('bar_foreground=', 'bar_background=', 'percent=', 'title='), array('','','',''), trim($cntv) );
$numAr[] = explode(':', $cnStr);
}
}
//$numAr = $cntAr;
$wrapCode = '<style type="text/css">';
$cssVar = '';
foreach($numAr as $n => $b){
$n++;
$cssVar .= (count($numAr) == $n) ? '#g'.$n : '#g'.$n.', ';
}
$wrapCode .= $cssVar.'{ width:200px; height:160px; display: inline-block; margin: 1em; }
#gage_chart{text-align:'.$align.';}';
$wrapCode .= '</style>';
$wrapCode .= '<script>';
$sbIds = '';
foreach($numAr as $n => $b){
$n++;
$sbIds .= (count($numAr) == $n) ? 'g'.$n : 'g'.$n.', ';
}
$wrapCode .= 'var '.$sbIds.';'."\n";
$wrapCode .= 'function anup(){';
foreach($numAr as $n => $v){
$n++;
$wrapCode .= 'var g'.$n.' = new JustGage({
id: "g'.$n.'",
value: '.$v[0].',
title: "'.$v[1].'",
valueFontColor: "'.$v[2].'",
levelColors : ["'.$v[2].'"],
titleFontColor : "'.$v[2].'",
labelFontColor : "'.$v[2].'",
gaugeColor : "'.$v[3].'",
min: 0,
max: 100,
label: "%",
levelColorsGradient: false,
showMinMax :"hide",
shadowOpacity :"0.2",
shadowSize : "5",
startAnimationType : "easein",
});'."\n";
}
$wrapCode .= '};'."\n";
$wrapCode .= 'jQuery(document).ready( function(){
if ( jQuery("#gage_chart").next().is(":appeared") ){
if ( ! jQuery("#gage_chart").hasClass("gc_active") ) {
anup();
jQuery("#gage_chart").addClass("gc_active");
}
} else {
jQuery( window ).scroll(function() {
if ( jQuery("#gage_chart").next().is(":appeared") ){
if ( ! jQuery("#gage_chart").hasClass("gc_active") ) {
anup();
jQuery("#gage_chart").addClass("gc_active");
}
}
});
}
});
</script>';
$wrapCode .= '<div id="gage_chart">';
foreach($numAr as $n => $b){
$n++;
$wrapCode .= '<div id="g'.$n.'"></div>';
}
$wrapCode .= '</div>';
$wrapCode .= '<div style="clear:both; height:10px; overflow:hidden;"></div>';
break;
case 'circle':
$wrapCode = '<div class="vertical-page">
<article class="cvpage " id="resume">
<div class="charts clearfix">
<div>
<ul class="car hideme">'.str_replace('<br />', '', do_shortcode($content)).'</ul>
<div style="clear:both"></div>
</div>
</div>
</article>
</div>
<div style="clear:both; height:10px; overflow:hidden;""></div>
<style type="text/css">
.chart{color:'.$track_color.'; margin-bottom:5px;font-size:'.$chart_fontsize.'px;}
.chartbox p{color:'.$chart_color.';font-size:'.$chart_headingfontsize.'px;}
.car, .skills ul{text-align:'.$align.';}
</style>
<script type="text/javascript">
jQuery(".chartbox p").each( function(){
if( jQuery(this).html() == "" ){
jQuery(this).remove();
}
});
var pixflow_js_opt = {"pie_chart_color":"'.$chart_color.'","pie_track_color":"'.$track_color.'","pie_chart_size":"'.$chart_size.'"};
</script>';
break;
case 'skt_verticalgraph':
$wrapCode = '';
$content = strip_tags($content);
$start = strpos($content, '[');
$end = strrpos($content, '"]');
$len = strlen($content);
$diff = $end - $len;
$content = substr( $content, $start, $diff);
$content = str_replace(array('[skill ', '"]', '" ]', '" ', '="' ), array('', '', '', ':', '='), $content);
$cntStrAr = explode( "\n", $content );
$numAr = array();
foreach($cntStrAr as $cntk => $cntv){
if($cntv != ''){
$cnStr = str_replace( array( 'percent=', 'title=', 'verticalgraph_background=', 'verticalgraph_titlecolor='), array('','','',''), trim($cntv) );
$numAr[] = explode(':', $cnStr);
}
}
$cssVar = '';
foreach($numAr as $n => $b){
$n++;
$cssVar .= (count($numAr) == $n) ? '#g'.$n : '#g'.$n.', ';
}
$sbIds = '';
foreach($numAr as $n => $b){
$n++;
$sbIds .= (count($numAr) == $n) ? 'g'.$n : 'g'.$n.', ';
}
$wrapCode .= '<div id="skillbarstraight">';
$wrapCode .= '<ul class="chart_line">';
foreach($numAr as $n => $v){
$wrapCode .= '<li class="skillbar_ver">
<span class="chartline" data-height="'.$v[0].'%;" style="height:'.$v[0].'%;background:'.$v[2].';color:'.$v[3].';" title="'.$v[1].'"></span>
</li>';
}
$wrapCode .= '</ul></div>';
$wrapCode .= '<script>
jQuery(document).on("scroll", function() {
if( jQuery(this).scrollTop() >= jQuery("#skillbarstraight").position().top ){
jQuery(".chartline").addClass("sktvaertical");
}
});
</script>';
break;
}
return $wrapCode;
}
Code file location:
skt-skill-bar/skt-skill-bar/sktskillbar.phpSKT Skill Bar [skill] Shortcode
The SKT Skill Bar shortcode is a dynamic tool that creates a visual representation of skills or metrics. This shortcode takes parameters like title_background, bar_foreground, bar_background, percent, and title. Depending on the parameters, it generates a skill bar or a circular chart with the specified percentage. It allows customization of colors for different parts of the bar or chart.
Shortcode: [skill]
Parameters
Here is a list of all possible skill shortcode parameters and attributes:
title_background– Sets the background color of the skill bar title.bar_foreground– Defines the foreground color of the skill bar.bar_background– Determines the background color of the skill bar.percent– Specifies the percentage value of the skill bar.title– Indicates the title of the skill bar.
Examples and Usage
Basic example – A simple skill bar with only the percentage and title defined.
[skill percent=75 title="PHP"]Advanced examples
Creating a skill bar with a specific background color for the title and bar, and a different foreground color for the bar.
[skill title_background="#000" bar_foreground="#ff0" bar_background="#f00" percent=85 title="WordPress"]Displaying a skill bar without any specific color styling. This will default to the plugin’s default styling.
[skill percent=90 title="JavaScript"]Creating a skill bar with a specific background color for the bar, but no specific color for the title or the bar’s foreground. This will use the plugin’s default colors for those elements.
[skill bar_background="#0f0" percent=65 title="HTML"]Note: The color codes used in these examples are standard hexadecimal color codes. You can replace these with any valid color code to customize the look of your skill bars.
PHP Function Code
In case you have difficulties debugging what causing issues with [skill] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'skill', 'skilldata_func' );Shortcode PHP function:
function skilldata_func( $atts ) {
extract( shortcode_atts( array(
'title_background' => '',
'bar_foreground' => '',
'bar_background' => '',
'percent' => '0',
'title' => '',
), $atts ) );
if( $title_background != '' ){
$skillHtml = '<div class="skillbar clearfix" data-percent="'.$percent.'%" style="background: '.$bar_background.';">
<div class="skillbar-title" style="background: '.$title_background.';"><span>'.$title.'</span></div>
<div class="skillbar-bar" style="background: '.$bar_foreground.';"></div>
<div class="skill-bar-percent">'.$percent.'%</div>
</div>';
}elseif( $title_background == '' && $bar_foreground != '' && $bar_background != '' ){
$skillHtml = '<div class="skillbar clearfix " data-percent="'.$percent.'%" style="background: '.$bar_background.';">
<div class="skillbar-title" style="background: '.$title_background.';"><span>'.$title.'</span></div>
<div class="skillbar-bar" style="background: '.$bar_foreground.';"></div>
<div class="skill-bar-percent">'.$percent.'%</div>
</div>';
}elseif( $title_background == '' && $bar_foreground == '' && $bar_background == '' ){
$skillHtml = '<li>
<div class="chartbox">
<div class="chart" data-percent="'.$percent.'">
<span>'.$percent.'%</span>
</div>
<p>'.strip_tags($title).'</p>
</div>
</li>';
}
return $skillHtml;
}
Code file location:
skt-skill-bar/skt-skill-bar/sktskillbar.phpConclusion
Now that you’ve learned how to embed the SKT Skill Bar Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply