Membuat Widget Footer WordPress

Widget Footer ini berfungsi untuk menampilkan konten-konten yang letaknya di bagian footer, biasanya untuk menampilkan informasi About us, form subscrib, contact form dan lain-lain. Cara membuatnya pun hampir sama dengan ketika kita membuat custom widget sidebar. Lengkapnya, ikutin step di bawah ini.

Functions.php

Script di bawah ini harus diletakkan pada file functions.php

function pixelicons_widgets() {
register_sidebar( array(
'name' => __( 'Right sidebar', 'preman' ),
'id' => 'right-sidebar',
'description' => __( 'The Right sidebar widget area', 'preman' ),
'before_widget' => '<div class="leftsbwidget">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>'
) );
// Area 1, located in the footer. Empty by default.
register_sidebar( array(
'name' => __( 'First Footer Widget Area', 'pixelicons' ),
'id' => 'first-footer-widget-area',
'description' => __( 'The first footer widget area', 'pixelicons' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

// Area 1, located in the footer. Empty by default.
register_sidebar( array(
'name' => __( 'Second Footer Widget Area', 'pixelicons' ),
'id' => 'second-footer-widget-area',
'description' => __( 'The second footer widget area', 'pixelicons' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

// Area 2, located in the footer. Empty by default.
register_sidebar( array(
'name' => __( 'Third Footer Widget Area', 'pixelicons' ),
'id' => 'third-footer-widget-area',
'description' => __( 'The third footer widget area', 'pixelicons' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'pixelicons_widgets' );
/* End of widget */

Footer / index.php

Copy paste script ini pada file yang ingin menampilkan custom widget footer.

<div class="row foot">
 <div class="large-4 columns widget-footer">
 <ul> 
 <?php if ( ! dynamic_sidebar( 'first-footer-widget-area' ) ) : ?>
 <li id="meta" class="widget-container">
 <h3 class="widget-title">Meta</h3>
 <ul>
 <?php wp_register();?>
 <li><?php wp_loginout();?></li>
 <?php wp_meta();?>
 </ul>
 </li>
 <?php endif; ?> 
 </ul> 
 </div>
 <div class="large-4 columns widget-footer">
 <ul> 
 <?php if ( ! dynamic_sidebar( 'second-footer-widget-area' ) ) : ?>
 <li id="meta" class="widget-container">
 <h3 class="widget-title">Meta</h3>
 <ul>
 <?php wp_register();?>
 <li><?php wp_loginout();?></li>
 <?php wp_meta();?>
 </ul>
 </li>
 <?php endif; ?> 
 </ul> 
 </div>
 <div class="large-4 columns widget-footer">
 <ul> 
 <?php if ( ! dynamic_sidebar( 'third-footer-widget-area' ) ) : ?>
 <li id="meta" class="widget-container">
 <h3 class="widget-title">Meta</h3>
 <ul>
 <?php wp_register();?>
 <li><?php wp_loginout();?></li>
 <?php wp_meta();?>
 </ul>
 </li>
 <?php endif; ?> 
 </ul> 
 </div>
</div><!--end row foot -->

Style.css

Script di bawah ini adalah optional, karena penulis yakin kamu mempunyai style sendiri-sendiri untuk memoles tampilan widget footer nya.

/*==== Widget footer ====*/
.large-12.columns.footer{background: #333;}
.large-4.columns.widget-footer{margin-bottom:10px;padding: 0;margin-top: 20px;}
.large-4.columns.widget-footer a {display:inline-block;margin:0;padding:3px;text-decoration:none;}
.large-4.columns.widget-footer p {border-top:none;margin:0 0 20px;padding:10px;}
.large-4.columns.widget-footer ul{border-top:none;margin:0 0 20px;padding:0;}
.large-4.columns.widget-footer ul li {margin:0;list-style: none;}
.large-4.columns.widget-footer ul li a {color:#f2f2f2;text-decoration:none;}
.large-4.columns.widget-footer ul li a:hover {color:#6A6565;}
.large-4.columns.widget-footer ul ul a {padding:0;padding-left:15px;font-size: 13px;}
.large-4.columns.widget-footer ul ul ul a {padding:3px 0 3px 18px;}
.large-4.columns.widget-footer ul ul ul ul a {border:none;padding:3px 0 3px 18px;}
.large-4.columns.widget-footer h3{font-size:14px;padding: 5px 5px 5px 10px;color: #fff;}

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*