If you have a blog that is about gardening and would like to show progress bars for each vegetable for the months of pre-cultivation, planting, & harvesting then this shortcode might be for you. This shortcode creates three bars, and for each bar you can change the label text and color of bar and the start & end month. First I recommend using the WP Code plugin then add a new snippet, and when you create a snippet look in the top right corner use the PHP snippet as the code type:
then add the below code and save:
function garden_progress_bars_shortcode($atts) {
$atts = shortcode_atts(
array(
'pre_cultivation_start' => '',
'pre_cultivation_end' => '',
'planting_start' => '',
'planting_end' => '',
'harvest_start' => '',
'harvest_end' => '',
'pre_cultivation_color' => '',
'planting_color' => '',
'harvest_color' => '',
'pre_cultivation_label' => '',
'planting_label' => '',
'harvest_label' => '',
),
$atts,
'garden_progress_bars'
);
$output = '
<style>
.garden-progress-bars {
font-family: Arial, sans-serif;
max-width: 960px;
margin: 0 auto;
}
.progress-header, .progress-header div:not(.header-offset) {
display: inline-flex;
width: 100%;
justify-content: space-evenly;
}
.progress-header div:not(.header-offset) {
border-left: 1px solid #eee;
}
.month {
width: calc((100% - 160px)/12);
text-align: center;
}
.progress-row {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.label-container {
width: 150px;
text-align: right;
padding-right: 10px;
}
.progress-container {
display: flex;
width: calc(100% - 160px);
align-items: center;
}
.progress-bar-container {
flex-grow: 1;
background-color: #f4f5f7;
height: 20px;
position: relative;
}
.progress-bar {
height: 100%;
position: absolute;
}
.progress-header .header-offset {
width: 150px;
display: inline-flex;
flex-shrink: 0;
}
</style>
<div class="garden-progress-bars">
<div class="progress-header">
<div class="header-offset"></div>';
$months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
foreach ($months as $month) {
$output .= "<div class='month'>$month</div>";
}
$output .= '</div>';
$create_progress_bar_row = function($label, $color, $start, $end) use ($months) {
$start_month_index = array_search($start, $months);
$end_month_index = array_search($end, $months);
$width = (($end_month_index - $start_month_index + 1) / 12) * 100;
$left = ($start_month_index / 12) * 100;
return "
<div class='progress-row'>
<div class='label-container'>$label</div>
<div class='progress-container'>
<div class='progress-bar-container'>
<div class='progress-bar' style='background-color: $color; width: $width%; left: $left%;'></div>
</div>
</div>
</div>";
};
$output .= $create_progress_bar_row($atts['pre_cultivation_label'], $atts['pre_cultivation_color'], $atts['pre_cultivation_start'], $atts['pre_cultivation_end']);
$output .= $create_progress_bar_row($atts['planting_label'], $atts['planting_color'], $atts['planting_start'], $atts['planting_end']);
$output .= $create_progress_bar_row($atts['harvest_label'], $atts['harvest_color'], $atts['harvest_start'], $atts['harvest_end']);
$output .= '</div>';
return $output;
}
add_shortcode('garden_progress_bars', 'garden_progress_bars_shortcode');
and then on your page add this shortcode to show the growing bars:
[garden_progress_bars pre_cultivation_start="Feb" pre_cultivation_end="Apr" pre_cultivation_color="#FF5733" pre_cultivation_label="Pre-cultivation" planting_start="Apr" planting_end="Jun" planting_color="#5EBA7D" planting_label="Planting" harvest_start="Jun" harvest_end="Sep" harvest_color="#FFC300" harvest_label="Harvest"]
This is the result: