MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Add more Promo Boxes


By default, Redwood offers 3 Promo Boxes. If you'd prefer to have 6 Promo Boxes instead, it's possible to add some HTML/CSS code to achieve this. 

Please note that the original 3 Promo Boxes will need to be configured via WP Dashboard > Appearance > Customize > Promo Box Settings. And the 3 additional Promo Boxes we'll be adding will need to be configured via the "promo.php" theme file. 



Navigate to WP Dashboard > Appearance > Editor > "inc" folder > "promo" folder > and open the file titled "promo.php". 

On blank line 35, copy and paste in the following code:

    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 4 TITLE</h4>
        </div>
    </div>
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 5 TITLE</h4>
        </div>
    </div>
    <div class="promo-item" style="background-image:url('YOUR-IMAGE-URL-HERE')">
        <a href="YOUR-LINKING-URL-HERE" class="promo-link"></a>
        <div class="promo-overlay">
            <h4>PROMO BOX 6 TITLE</h4>
        </div>
    </div>


In the above code, do you see the 3 separate blocks of code? Each separate block of code is related to 1 Promo Box. They will become your 4th, 5th, and 6th Promo Boxes. 

In each box of code, you will need to replace some dummy text:

    1. On the 1st line of each code block, replace the YOUR-IMAGE-URL-HERE with the image's URL that you want to display in that particular Promo Box. You can upload your desired image to your WP Media Library, click on the image in the Library, and copy its URL. 
    2. On the 2nd line of each code block, replace the YOUR-LINKING-URL-HERE dummy text with what URL you want that box to link to.
    3. On the 4th line of each code block, replace the PROMO BOX TITLE text with what text you want to display in that Promo Box. 

    Save changes in the file when finished. 

    Lastly, navigate to WP Dashboard > Appearance > Customize > Custom CSS box > and paste in this code:

    .promo-item:nth-of-type(3n+3) {margin-right: 0;}
    .promo-item {margin-bottom: 30px;}
    .promo-area {margin-bottom: 60px;}

    Save changes when finished.