Changing the php functions in a child theme

  • Hi Guys,

    I would like to change the php functions of a certain page of a child theme, in regards to it’s view, as per code below, to give the option to users to switch from list view to grid view. Currently the page is loaded as default template that came along with the Theme in list view. Appreciate the support.

    Code would like to add in:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”&gt;
    <style>
    * {
    box-sizing: border-box;
    }

    /* Create two equal columns that floats next to each other */
    .column {
    float: left;
    width: 50%;
    padding: 10px;
    }

    /* Clear floats after the columns */
    .row:after {
    content: “”;
    display: table;
    clear: both;
    }
    /* Style the buttons */
    .btn {
    border: none;
    outline: none;
    padding: 12px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    }

    .btn:hover {
    background-color: #ddd;
    }

    .btn.active {
    background-color: #666;
    color: white;
    }
    </style>
    </head>
    <body>

    <h2>List View or Grid View</h2>

    <p>Click on a button to choose list view or grid view.</p>

    <div id=”btnContainer”>
    <button class=”btn” onclick=”listView()”><i class=”fa fa-bars”></i> List</button>
    <button class=”btn active” onclick=”gridView()”><i class=”fa fa-th-large”></i> Grid</button>
    </div>
    <br>

    <div class=”row”>
    <div class=”column” style=”background-color:#aaa;”>
    <h2>Column 1</h2>
    <p>Some text..</p>
    </div>
    <div class=”column” style=”background-color:#bbb;”>
    <h2>Column 2</h2>
    <p>Some text..</p>
    </div>
    </div>

    <div class=”row”>
    <div class=”column” style=”background-color:#ccc;”>
    <h2>Column 3</h2>
    <p>Some text..</p>
    </div>
    <div class=”column” style=”background-color:#ddd;”>
    <h2>Column 4</h2>
    <p>Some text..</p>
    </div>
    </div>

    <script>
    // Get the elements with class=”column”
    var elements = document.getElementsByClassName(“column”);

    // Declare a loop variable
    var i;

    // List View
    function listView() {
    for (i = 0; i < elements.length; i++) {
    elements[i].style.width = “100%”;
    }
    }

    // Grid View
    function gridView() {
    for (i = 0; i < elements.length; i++) {
    elements[i].style.width = “50%”;
    }
    }

    /* Optional: Add active class to the current button (highlight it) */
    var container = document.getElementById(“btnContainer”);
    var btns = container.getElementsByClassName(“btn”);
    for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener(“click”, function() {
    var current = document.getElementsByClassName(“active”);
    current[0].className = current[0].className.replace(” active”, “”);
    this.className += ” active”;
    });
    }
    </script>

    </body>
    </html>

  • The topic ‘Changing the php functions in a child theme’ is closed to new replies.