Support » Theme: Olsen Light » Feature Widget Area On Top and 3 Footer Widgets on the Bottom

  • Resolved barrelleaf

    (@barrelleaf)


    Hi, I want to say thank you first for the beautiful theme you provide. I’ve wanted to change the theme once before, but after a second thought, I left that behind cus this theme is more flexible and simple.

    I’ve made some change in the custom css area (with the child theme used) so far, but I’ve not sure how to add a feature post section (with 3 posts) on the top of the homepage and a footer widget area on the bottom (divided into 3 sections).

    I’ve done some googling and it seems like it needs to modify the funtion.php, header.php, and footer.php.

    Since I’m not familiar with PHP coding and understand each theme is different in some way, I dare not to make any changes based on my search result before asking here.

    I’m wondering could you help me to make the magic happen. (It’s kind of like magic for me to create sections with PHP coding.)

    Thank you again for your amazing and flexible theme.

    Sincerely,
    Nora.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi there,
    Thank you for your feedback!
    I’d like to ask you, if you like the theme and could take a minute to review it here it would help us a lot!

    Now, for feature posts, do you have any plugin in mind that will help you achieve this functionality?
    To create your widget areas you will need first to follow this guide https://www.cssigniter.com/kb/how-do-i-add-a-new-sidebar-widgetized-area/
    and create two new sidebars. So add this in your functions.php file

    
    add_action( 'widgets_init', 'ci_register_sidebar' );
    
    function ci_register_sidebar(){
     register_sidebar(array(
     'name' => 'My new header sidebar',
     'id' => 'your-sidebar-1',
     'description' => 'My sidebar description',
     'before_widget' => '<div id="%1$s" class="widget col-sm-4 group %2$s">',
     'after_widget' => '</div>',
     'before_title' => '<h3 class="widget-title">',
     'after_title' => '</h3>',
     ));
    register_sidebar(array(
     'name' => 'My new footer sidebar',
     'id' => 'your-sidebar-2',
     'description' => 'My sidebar description',
     'before_widget' => '<div id="%1$s" class="col-sm-4 widget group %2$s">',
     'after_widget' => '</div>',
     'before_title' => '<h3 class="widget-title">',
     'after_title' => '</h3>',
     ));
    }

    Now you have 2 new sidebars, that each widget inside will cover 1/3 of the space. So 3 widgets will be equally placed side by side (3 columns). You can remove this functionality by removing col-sm-4 from the previous code.

    Now, we will need to place them. Lets start with header.php
    Open header.php file and add this

    <div class="row">
        <?php dynamic_sidebar( 'your-sidebar-1' ); ?>
    </div>

    before

    				</header>
    

    if you want it after the menu.
    Then open footer.php and add
    <div class=”row”>
    <?php dynamic_sidebar( ‘your-sidebar-2’ ); ?>
    </div>`
    after
    <footer id="footer">
    to place the new area before any other footer element.
    Now you can add your widgets from Appearance->Widgets in any new sidebar you wish.

    Please be careful making code changes, since a small mistake can break the site.

    Open the default editor and then navigate to the /themes/olsenlight/ folder to find the file.
    If you decide to proceed with this modification I would suggest you create a child theme, copy over the files you are editing and make the modifications there. This will allow your changes to survive future theme updates. If you directly edit the theme’s files, all changes will be lost once you update.

    Have a look at this guide to learn more about child themes and how to create one http://www.cssigniter.com/ignite/beginners-guide-child-themes/

    Let me know if you need additional styling help or any help at all.

    Hi, I’ve done the review. Thank you again.

    However, as I look the PHP scripts carefully, I’m thinking there might be some misunderstanding.

    I mean to create the 3 feature-post sections on top (for 3 different posts) and 3 footer widgets on the bottom (for Instagram feed widget, subscribe newsletter column, etc.)

    I’m not 100% sure but I think the PHP scripts you mention above seem to create a single widget column for the footer and op the top respectively.

    Because I’m not very sure, I just want to make this confirmation before I really “do the magic” (add the scripts, which really scares me in some degree…)

    Hi there,
    my suggested script will behave as you want it, but, for your featured posts there is no easy or native way to select which post is featured. So I added one more widgetized area in order to either add a third party plugin that selects certain featured posts, or add any other widget (text widget) to replicate this.

    Please give it a try, but remember always backup before testing it.
    Let me know if you need additional changes.

    I’ve modified them in the weekend and all work just like what I had wished.
    Really big thank you for creating magic for me. 🙂

    • This reply was modified 2 months, 1 week ago by  barrelleaf.
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.