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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 | 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.php
SKT 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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.php
Conclusion
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