Adding Footer Widgets to Photogram

This time my friend from India, Rajpal asking about how to add a footer widget(s) to Photogram themes from ColorLabs (this is a free theme).

By default, this theme doesn’t have any footer section that can be used to displaying a widget(s) item. FYI, this theme just have a sidebar.

To add a footer widget(s) section, you have to modify two files: footer.php and theme-sidebar-init.php.

Step#1

At this step you have to modify a file named theme-sidebar-init.php. Open the file and find out this code:

register_sidebar(array(
            'name' => 'Sidebar',
            'id' => 'colabs_right',
            'description' => __( 'This widget will appear in right sidebar area', 'colabsthemes' ),
            'before_widget' => '<div id="%1$s" class="%2$s widget sidebar-right-background">',
            'after_widget' => '</div>',
            'before_title' => '<div class="widget-title clearfix"><h4 class="widget-title">',
            'after_title' => '</h4></div>'));

Just add this code below that code:

register_sidebar(array(
            'name' => 'Footer Sidebar',
            'id' => 'colabs_bottom',
            'description' => __( 'This widget will appear in footer sidebar area', 'colabsthemes' ),
            'before_widget' => '<div id="%1$s" class="%2$s widget sidebar-right-background col4">',
            'after_widget' => '</div>',
            'before_title' => '<div class="widget-title clearfix"><h4 class="widget-title">',
            'after_title' => '</h4></div>'));

And done! The first step is done. Now, you can check at your sidebar page (WordPress dashboard → Appearance → Widgets). A new sidebar already there (footer sidebar).

Step#2

At this next step you have to modify a file named footer.php. Find out this code:

<?php colabs_credit(); ?>

Put this code above that code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('colabs_bottom') ) : ?>
<?php endif; ?>
<div class="clearfix"></div>

By adding this code, you will displaying all widget(s) item you add at the footer sidebar. And a layer with a class named clearfix will provide you a clear float effect. This layer will be needed later (explained below).

Final Step

I think that i have to separate this section from any section above. At this final step what you have to do is to modify a file named style.css.

By doing step 1 & 2 you can displaying the code, but the layout is not that good (also on the responsive). Then, you can add this code at style.css. Put the code at the very end of the file:

.footer .widget {float:left; margin-left: 15px;}

And done!

Advertisements

2 thoughts on “Adding Footer Widgets to Photogram

  1. Hello tandamerah,

    Thank you for this quick and easy solution. I do have a couple of questions though:
    1) Seeing as we are editing the files directly won’t they be wiped every time there is an update?

    2) Could you do a tutorial for making 3 separate widget areas?

    • HI Lewis,

      the modification will be wiped out when you do update the theme. but, your modification will be save if you use a child theme to do the modification.

      and to crate 3 separate widget areas, the trick is the same. Just skip the CSS addition and you done with it

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s