আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

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.

wp-layout

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>
wp-sidebar-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.
current-look-of-wordpress-theme-3

Hello, This is Rashad. I like programming.
One comment on “WordPress Theme Development: Dynamic Sidebar and Footer Layout (Lesson – 6)

Leave a Reply

Your email address will not be published. Required fields are marked *