WordPress Theme Development: Dynamic Sidebar and Footer Layout (Lesson – 6)

Hello, My name is Rashad from w3Programmers and a student of all Programmers. Today I like to develop footer and a dynamic sidebar widget for our home blog with full layout via skeleton CSS.

Put the below code in our functions.php to create dynamic widgets for sidebars:

<?php
// Register dynamic sidebar widgets
if (function_exists(register_sidebar)) {
    register_sidebar(array(
        'name' => 'Sidebar w3Pro',
        'id' => 'sidebars-w3Pro',
        'description' => 'Place widgets for the sidebar here.',
        'before_widget' => '<div class="w3-sidebar">',
        'after_widget' => '</div>'
    ));
}
?>

After registering the sidebar widgets, go to WP admin Appearance>>Widgets>

To display the footer and the total code in our footer.php file:

<div class="clear"></div>
<footer class="sixteen columns row w3Pro-footer">
    <a title="Semantic Personal Publishing Platform" href="<?php echo get_option('home'); ?>"> <?php esc_attr_e('&copy;', 'w3pro'); ?> <?php _e(date('Y')); ?> Powered by w3programmers</a>
</footer>

<script>
    jQuery("#show-nav").click(function() {
        jQuery(".w3-menu").toggle("slow");
        jQuery("#close-nav").show("slow");
    });
    jQuery("#close-nav").click(function() {
        jQuery(".w3-menu").toggle("slow");
        jQuery("#close-nav").hide("slow");
    });
</script>
</body>
<?php wp_footer(); ?>
</html>

And to display sidebar in our index, I just arrange the layout in index.php below:

<?php get_header(); ?>
<section class="eleven columns row w3-content">
    <h1>Hi I am different post query here</h1>
    <h2>Hi I am different post query here</h2>
    <h3>Hi I am different post query here</h3>
    <h3>Hi I am different post query here</h3>
    <h4>Hi I am different post query here</h4>
    <h5>Hi I am different post query here</h5>
    <h6>Hi I am different post query here</h6>
    <p>Hi I am different post query here</p>
</section>
<section class="sidebar five columns row">
    <?php dynamic_sidebar('sidebar-w3Pro'); ?>
</section>
<?php get_footer(); ?>

Now I am going to scratch little bit old theme css to display same as current theme. The style.css code for sidebar and footer below:

/*W3Pro Footer CSS
..................................*/
.w3Pro-footer {
    background: none repeat scroll 0 0 #F9F9F9;
    border-top: 1px solid #DDDDDD;
    color: #666666;
    font-size: 12px;
    line-height: 2.2em;
    padding: 2.2em 0.5em;
    text-align: center;
}
.w3Pro-footer a {
    color: #555555;
    font-weight: bold;
}

/*W3Pro Sidebar CSS
...................................*/
.sidebar {
    float: right;
    font-size: 12px;
    width: 24%;
}

.w3-sidebar {
    font-size: 12px;
    margin-right: 15px;
    padding-bottom: 20px;
    padding-top: 10px;
}
.widgettitle {
    background: none repeat scroll 0 0 #20747F;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 2.6em;
    margin-bottom: 3px;
    padding-left: 2em;
    text-transform: uppercase;
}

.w3-sidebar ul {
    font-size: 15px;
    margin: 0;
}

.w3-sidebar ul li {
    color: #777777;
    font-size: 13px;
    list-style: none outside none;
}
.w3-sidebar a {
    font-weight: bold;
    text-decoration: none;
}
/*W3Pro Content CSS
...................................*/
.w3-content {
    float: left;
    margin: 0 -16.4% 0 0;
    width: 69%;
}

Finally I have find the below look of our theme.

Rashad

Hello, This is Rashad. I like programming.