Simplemarket: How to add widgets in thet footer?

Hi

How can I add widgets to the Simplemarket footer? I asked previously about adding a right sidebar but I think that process will be too complex for me. So I’m investigating the use of the footer for adding more features. I like the SimpleMarket theme but I am starting to feel a bit limited in terms of layout options so I hope you can help!

Thanks

  • 3SixtyEvolve
    • New Recruit

    Hi Mark

    Thank you for being a member of our community and for posting your question regarding the SimpleMarket Theme to the forum.

    I am putting together a quick Step-by-step Guide on how to add a widgetized footer area to the SimpleMarket Theme, with code that you can use to achieve this. Will revert back to you later today with the ‘Tutorial‘.

    Talk soon!

    Gina

  • PC
    • WPMU DEV Initiate

    I have a generic suggestion here. Applies to any theme, tested it on one of my test installs and seems to be working fine

    Add Widgets To Your WordPress Footer Easily :

    1: Guide WordPress you want to use three more widget positions, and they should be called “footer 1?, “footer 2? and “footer 3?)

    Use the theme editor for your current theme, to add an extra line of code to the functions.php file. It’s the 3rd line below, beginning register_sidebars(3, array which plays the game

    if ( function_exists('register_sidebar') )
    register_sidebar();
    register_sidebars(3, array('name'=>'Footer %d'));

    2: Add the extra widget positions to your theme’s footer

    Again using the theme editor, add this to your footer.php file

    <div id="footerwidgets">
    <div id="footer-left">
    <ul>
    <?php if ( !function_exists('dynamic_sidebar') ||
    !dynamic_sidebar('footer 1') ) : ?> <li> <?php endif; ?>
    </ul>
    </div>
    <div id="footer-middle">
    <ul>
    <?php if ( !function_exists('dynamic_sidebar') ||
    !dynamic_sidebar('footer 2') ) : ?> <li> <?php endif; ?>
    </ul>
    </div>
    <div id="footer-right">
    <ul> <?php if ( !function_exists('dynamic_sidebar') ||
    !dynamic_sidebar('footer 3') ) : ?> <li> <?php endif; ?>
    </ul>
    </div>
    </div>
    <br />
    <br clear="all">

    3: Style the new footer div’s

    Add these div styles to your style.css file.

    (Mark a note : you will probably need to adjust the width parameters and other style elements, to suit your particular theme)

    /* Footer Widgets */
    #footerwidgets {
    display: block;
    width:900px;
    margin: 0 auto;
    text-align:center;
    }
    #footer-left {
    width: 210px;
    float: left;
    margin: 15px 10px 10px 30px;
    padding: 10px;
    background-color: #f3f3e7;
    }
    #footer-middle {
    width: 210px;
    float: left;
    margin: 15px 10px 10px 15px;
    padding: 10px;
    background-color: #f3f3e7;
    }
    #footer-right {
    width: 210px;
    float: left;
    margin: 15px 10px 10px 15px;
    padding: 10px;
    background-color: #f3f3e7; }

    I hope that helps.

    Please advise how it goes

    Cheers

    PC

  • 3SixtyEvolve
    • New Recruit

    Hi PC

    Here I was writing a tutorial for Mark and when I got back to this thread I saw you came up with a solution already :slight_smile: Man, I’ll have to be quicker next time :stuck_out_tongue:

    No in all seriousness, well done! A few balloons coming your way for helping out another member.

    Gina

  • 3SixtyEvolve
    • New Recruit

    Hi Mark

    I think this should get you sorted. I will resolve this thread, but please don’t hesitate to reopen it if you

    still require additional feedback from our Support Team. Just select the ‘Mark as Not Resolved (re-open)’ box below the post area (otherwise we might miss your new post).

    Enjoy the rest of your weekend and all the best in setting up that footer :slight_smile:

    Gina

  • Patrick
    • Support Monkey

    @pc

    Excellent post! I just applied it to a site where I’m using a custom Simplemarket child-theme, and it works just fine. More cookies on the way :o)

    Here’s my contribution though: as Simplemarket is a responsive theme, it’s best to not use fixed-pixel values in width, margin or padding rules. Use “%” or “em” instead.

    Also, I didn’t want to center everything in the wrapper div, so I’ve removed text-align:center; from it. I found the background color of each widget was a bit much, adjusted the width and margin, removed the padding, and added margin-left:0; to the ul list. Below is my simpler css (you can see it working here: http://kwitterz.com/prep/ ):

    /* Footer Widgets */
    #footerwidgets {
    display: block;
    width:100%;
    margin: 0 auto;
    }
    #footerwidgets ul {
    margin-left:0;
    }
    #footer-left {
    width: 32%;
    float: left;
    margin: 0.5em;
    }
    #footer-middle {
    width: 32%;
    float: left;
    margin: 0.5em 0.7em;
    }
    #footer-right {
    width: 32%;
    float: left;
    margin: 0.5em;
    }

  • PC
    • WPMU DEV Initiate

    @pcwriter : Thanks for the kind comments and appreciate the chocolates you sent me…

    Hoping to see my rep jump soon with that :wink:

    I have also noted down your changes and would try to implement them to make sure, I have my docs updated :slight_smile:

    and BTW : I checked the site, and it looks really clean :slight_smile: Hoping to see more of it real soon…

    Cheers

    PC

  • Patrick
    • Support Monkey

    @pc

    Oops! did I forget to send you your chocolate cookies? Yes I did :o(

    Here you go…

    Next thing is to figure out how to use media queries to get the widgets to stack one on top of the other on small portable screens rather than being squished together side by side :o)

  • PC
    • WPMU DEV Initiate

    Yipee, I got’em :slight_smile:

    And now I am onto the next part… Let the research begin :slight_smile:

    Question : by portable devices, are you referring to the site being accessed using a mobile or a handheld device ?

    Cheers

    PC

  • Patrick
    • Support Monkey

    Hi again PC,

    Aren’t cookies yummy?

    Question : by portable devices, are you referring to the site being accessed using a mobile or a handheld device ?

    Yes. I’ve managed to convince myself that any social networking site should be readable and navigable from devices such as iPhones, iPads, Androids, Kindles, etc. Thus my choice of a responsive theme. You can get a feel for what any site looks like on various devices at http://www.responsinator.com/ It’s a really cool tool for previewing :o)

    This is what kwitterz.com looks like:

    http://www.responsinator.com/?url=kwitterz.com%2Fprep

  • PC
    • WPMU DEV Initiate

    Yup, they are, indeed :slight_smile:

    I understand, large screen handhelds like ipad, show up a good view even when the widgets are stacked side by side.. however the small screens does not display it real good.

    Hey can we use a plugin here which optimizes our website for mobile devices and makes it look better ? I mean I tried that before and it seemed to work fine…

    wptouch : Here >> http://wordpress.org/extend/plugins/wptouch/

    wpmobile detector : Here >> http://websitez.com/ (Its a paid plugin)

    also we can convert our wordpress site in a iphone app using Wiziapp (I am sure you are already aware of it)

    Cheers

    PC

  • Mark
    • The Incredible Code Injector

    Thanks for the responses, everyone. I will proceed with the example PC provided and see if I can get it too look on a mobile .. maybe I will just use two widgets in the footer.

    I hope SimpleMarket will be updated with more widgets. That would be perfect.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.