Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #15955

    Hi,

    I am trying to add the social media icons in the footer of the Choices theme. I would like to actually place them in one of the columns. Any idea on how to do this?

    Too bad their is not a widget to just add anywhere we would like. Can this be done? That would be great!!

    Thanks,

    Brent

    #89610

    Hi,

    Open footer.php and find this code,

    <?php
    //create the footer columns by iterating

    $columns = avia_get_option('footer_columns');

    $firstCol = 'first';
    switch($columns)
    {
    case 1: $class = ''; break;
    case 2: $class = 'one_half'; break;
    case 3: $class = 'one_third'; break;
    case 4: $class = 'one_fourth'; break;
    case 5: $class = 'one_fifth'; break;
    }

    //display the footer widget that was defined at appearenace->widgets in the wordpress backend
    //if no widget is defined display a dummy widget, located at the bottom of includes/register-widget-area.php
    for ($i = 1; $i <= $columns; $i++)
    {
    echo "<div class='flex_column $class $firstCol'>";
    if (function_exists('dynamic_sidebar') && dynamic_sidebar('Footer - column'.$i) ) : else : avia_dummy_widget($i); endif;
    echo "</div>";
    $firstCol = "";
    }

    ?>

    Assuming you want 4 columns in your footer. In this case you need to set it only to 3 columns because we are going to add another one. Below the snippet, add this code

    <?php

    echo "<div class='flex_column one_fourth first'>";
    $args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
    avia_social_media_icons($args);
    echo "</div>";

    ?>

    We use class one_fourth because we are going to have 4 columns. You can change that to one_half, one_third and one_fifth.

    Regards,

    Ismael

    #89611

    Thanks for the help Ismael.

    What do I need to do to add the search also? I can’t see wasting a column with just social icons.

    Is there a way to either add this into an existing column or actually create a row above the footer columns? Do I just need to change the class to be a full 100% wide row?

    Thanks,

    Brent

    #89612

    Hi Brent,

    In that case, it may be easier to just remove the code you’ve added from Ismael (revert to the original file) and then use a plugin to add social icons to that footer widget area and then you can just drag and drop a search widget into the area and anything else you may ever want to add.

    Otherwise, change the second snippet to the following in the same file:

    <?php

    echo "<div class='flex_column one_fourth first'>";
    $args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
    avia_social_media_icons($args);
    get_search_form();
    echo "</div>";

    ?>

    This may still require a bit of css fine tuning which you can add into the Quick CSS in the Styling tab of the theme options.

    Regards,

    Devin

    #89613

    Hi Guys,

    So Basically I have added this plugin to WordPress – PHP CODE WIDGET – (http://wordpress.org/plugins/php-code-widget/screenshots/)

    and added the snippet above. It works fine and inserts the social icons as a widget in the footer.

    …however is has a page break in between each icon. Is there a class to override it from page breaking, so that i can have them on one line?

    I want it to do that so i can begin using the widget in the sidebar etc.

    Many Thanks

    #89614

    Hey!

    Yes, probably we can hide the break with css but I need to investigate the code first. Please post a link to the page where you’re using the widget.

    Regards,

    Peter

    #89615

    I cant post the page so you can see, as it is hidden behind a “coming soon page”.

    Send me your email, Dude, and i will set you up as a user – so you can get around the coming soon.

    Thanks for the quick reply.

    #89616

    Hi!

    You can send it to (Email address hidden if logged out)

    Best regards,

    Peter

    #89617

    Hi!

    Solved. Simple css styling issue. Solved it with

    #footer .flex_column.one_fourth.first{
    width: 100%;
    }

    #top .widget ul.social_bookmarks li {
    clear: right;
    width: 40px;
    }

    Best regards,

    Peter

    #89618

    Hi,

    For those of you who want to know the whole fix.

    1) Install “PHP Code Widget”

    2) Copy this code (slightly different to the one above) – and paste it into your custom CSS

    #footer .flex_column.one_fourth.first{

    width: auto;

    }

    #top .widget ul.social_bookmarks li {

    clear: right;

    width: 40px;

    }

    Problem Solved.

    Thanks Dude

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Need social media icons in footer column 1 in Choices’ is closed to new replies.