PHP: Changing the logic of the code to switching image
<p>I want to change the current image of the order tracking graph (or status bar it shows an img with the progress of it) I want to change the current image and change the status up to 6 (20%, 40%, 60%, 80%, 90% 100%) I already made 7 image for it,</p>

<p><strong>First Code Idea</strong>: i want, each percent "20%, 40%, 60%, 80%, 90% 100%" has his own image if the status or percent is 20 it will show img 20 (the idea/code is below note: 1st code)</p>

<p><strong>2nd code bellow do:</strong>  Right now, it takes two images, one empty and one filled, and displayed the % width of the filled one that corresponds to the % complete of a given status.
For example, for a status that is 27% complete would have 27% of the filled image displayed. If you created an empty and a filled image, and then named them the same as the default images for the plugin and uploaded them into the "images" folder of the plugin, it would use your new images instead of the default ones.</p>

<p><strong>Order tracking plugin link of this plugin</strong>: <a href="https://wordpress.org/plugins/order-tracking/" rel="nofollow">https://wordpress.org/plugins/order-tracking/</a>
<strong>You can check the original code here:</strong> Order-tracking folder > Function Folder > DisplayGraph.php</p>

<p><strong>This is the idea of my friend and i want to implement it,</strong> </p>

<pre><code> &lt;style&gt;
        .progress{
            width:50px;
            height:50px;
        }
        .class_1{
            background-image:url(/images/image1.jpg);
        }
        .class_2{
            background-image:url(/images/image2.jpg);
        }
        .class_3{
            background-image:url(/images/image3.jpg);
        }
        .class_4{
            background-image:url(/images/image4.jpg);
        }
        .class_5{
            background-image:url(/images/image5.jpg);
        }
    &lt;/style&gt;



    &lt;?php
        /* define your function outside of any loops */
        function setimage( $i=0 ){
            if( $i&gt;=0 &amp;&amp; $i&lt;=20 ) return 'class_1';
            elseif( $i &gt; 20 &amp;&amp; $i &lt;= 40 ) return 'class_2';
            elseif( $i &gt; 40 &amp;&amp; $i &lt;= 60 ) return 'class_3';
            elseif( $i &gt; 60 &amp;&amp; $i &lt;= 80 ) return 'class_4';
            else return 'class_5';
        }

        /* the portion of your html that displays the graphic percentage representation */
        $ReturnString .= "&lt;div id='progress' class='progress ".setimage( $DisplayLength )."'&gt;&lt;/div&gt;";


    ?&gt;
</code></pre>

<p><strong>And This is the code i want to change:</strong> </p>

<pre><code>&lt;?php
function EWD_OTP_Display_Graph($OrderNumber) {
    global $wpdb;
    global $EWD_OTP_orders_table_name, $EWD_OTP_order_statuses_table_name;
    $Order = $wpdb-&gt;get_row($wpdb-&gt;prepare("SELECT * FROM $EWD_OTP_orders_table_name WHERE Order_Number='%s'", $OrderNumber));

    $Display_Graphic = get_option("EWD_OTP_Display_Graphic");
    $Statuses_Array = get_option("EWD_OTP_Statuses_Array");

    if (!is_array($Statuses_Array)) {$Statuses_Array = array();}
    foreach ($Statuses_Array as $Status_Array_Item) {if ($Status_Array_Item['Internal'] != "Yes") {$Filtered_Statuses_Array[] = $Status_Array_Item;}}
    foreach ($Filtered_Statuses_Array as $key =&gt; $Status_Array_Item) {
        if ($Order-&gt;Order_Status == $Status_Array_Item['Status']) {$CurrentStatus = $Status_Array_Item['Status']; $CurrentPercent = $Status_Array_Item['Percentage'];}
        elseif ($key == 0) {$StartingStatus = $Status_Array_Item['Status']; $StartingPercent = $Status_Array_Item['Percentage'];}
        elseif (($key+1) == sizeOf($Filtered_Statuses_Array)) {$EndingStatus = $Status_Array_Item['Status']; $EndingPercent = $Status_Array_Item['Percentage'];}
    }

    $Browser = get_user_browser();

    if ($Browser == "ie") {
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
        $ReturnString .= "&lt;div class='ie-ewd-otp-empty-display ie-empty-graphic-" . $Display_Graphic . "'&gt;&lt;/div&gt;";
            $ReturnString .= "&lt;div class='ie-ewd-otp-full-display ie-full-graphic-" . $Display_Graphic . " ie-ewd-otp-display-length-" . $DisplayLength . "'&gt;&lt;/div&gt;";
            $ReturnString .= "&lt;div class='ie-ewd-otp-display-status' id='ie-ewd-otp-initial-status'&gt;" . $StartingStatus . "&lt;/div&gt;";
        $ReturnString .= "&lt;div class='ie-ewd-otp-display-status ie-ewd-otp-current-status-length-" . $DisplayLength . "' id='ie-ewd-otp-current-status'&gt;" . $CurrentStatus . "&lt;/div&gt;";
        $ReturnString .= "&lt;div class='ie-ewd-otp-display-status' id='ie-ewd-otp-ending-status'&gt;" . $EndingStatus . "&lt;/div&gt;";
    } else {
        if (($Display_Graphic == "Default") or ($Display_Graphic == "Streamlined") or ($Display_Graphic == "Sleek")) {  
            $DisplayLength = round($CurrentPercent / 100, 1) * 10;
            $ReturnString .= "&lt;div class='ewd-otp-empty-display'&gt;";
            $ReturnString .= "&lt;img src='" . EWD_OTP_CD_PLUGIN_URL . "images/" . $Display_Graphic .".png' style='width: 100%'/&gt;&lt;/div&gt;";
            $ReturnString .= "&lt;div class='ewd-otp-full-display' style='width:" . $CurrentPercent . "%'&gt;";
            $ReturnString .= "&lt;img src='" . EWD_OTP_CD_PLUGIN_URL ."images/" . $Display_Graphic ."_Full.png' style='width: 100%; max-width: initial;'/&gt;&lt;/div&gt;";
            $ReturnString .= "&lt;/div&gt;";
            $ReturnString .= "&lt;div class='ewd-otp-statuses'&gt;";
            $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-initial-status'&gt;" . $StartingStatus . "&lt;/div&gt;";
            $ReturnString .= "&lt;div class='ewd-otp-display-status ewd-otp-current-status-length-" . $DisplayLength . "' id='ewd-otp-current-status'&gt;" . $CurrentStatus . "&lt;/div&gt;";
            $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-ending-status'&gt;" . $EndingStatus . "&lt;/div&gt;";
            $ReturnString .= "&lt;/div&gt;";
            $ReturnString .= "&lt;div class='ewd-otp-clear'&gt;&lt;/div&gt;";
        } else {
            if ($StartingStatus == $CurrentStatus or $EndingStatus == $CurrentStatus) {
                $ReturnString .= "&lt;div id='ewd-otp-progressbar-" . $Display_Graphic . "'&gt;&lt;div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'&gt;&lt;/div&gt;&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-statuses'&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-initial-status'&gt;" . $StartingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-ending-status'&gt;" . $EndingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;/div&gt;";
            } else if ($CurrentPercent &gt;= 75 &amp;&amp; $EndingStatus != $CurrentStatus) {
                $ReturnString .= "&lt;div id='ewd-otp-progressbar-" . $Display_Graphic . "'&gt;&lt;div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'&gt;&lt;/div&gt;&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-statuses'&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-initial-status'&gt;" . $StartingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 55%'&gt; " . $CurrentStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-ending-status'&gt;" . $EndingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;/div&gt;";
            } else if ($CurrentPercent &lt;= 25) {
                $ReturnString .= "&lt;div id='ewd-otp-progressbar-" . $Display_Graphic . "'&gt;&lt;div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'&gt;&lt;/div&gt;&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-statuses'&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-initial-status'&gt;" . $StartingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: 5%'&gt; " . $CurrentStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-ending-status'&gt;" . $EndingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;/div&gt;";
            } else {
                $ReturnString .= "&lt;div id='ewd-otp-progressbar-" . $Display_Graphic . "'&gt;&lt;div class='" . $Display_Graphic . "' style='width: " . $CurrentPercent . "%'&gt;&lt;/div&gt;&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-statuses'&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-initial-status'&gt;" . $StartingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-current-status' style='margin-left: " . ($CurrentPercent-20) . "%'&gt; " . $CurrentStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;div class='ewd-otp-display-status' id='ewd-otp-ending-status'&gt;" . $EndingStatus . "&lt;/div&gt;";
                $ReturnString .= "&lt;/div&gt;";
            }
        }
    }
    return $ReturnString;
}
function get_user_browser() {
    $u_agent = $_SERVER['HTTP_USER_AGENT'];
    $ub = '';
    if(preg_match('/MSIE/i',$u_agent))
    {
        $ub = "ie";
    }
    elseif(preg_match('/Firefox/i',$u_agent))
    {
        $ub = "firefox";
    }
    elseif(preg_match('/Safari/i',$u_agent))
    {
        $ub = "safari";
    }
    elseif(preg_match('/Chrome/i',$u_agent))
    {
        $ub = "chrome";
    }
    elseif(preg_match('/Flock/i',$u_agent))
    {
        $ub = "flock";
    }
    elseif(preg_match('/Opera/i',$u_agent))
    {
        $ub = "opera";
    }
    return $ub;
}
?&gt;
</code></pre>

<p><strong>Thank You!</strong></p>