আগামী ৩০ সেপ্টেম্বর থেকে Professional web Design and Development with HTML, CSS, JAVASCRIPT, PHP, MySQL, JQUERY and AJAX কোর্স এর ৯৪ তম ব্যাচ এবং ২৭ সেপ্টেম্বর থেকে Zend (PHP 7.1) Certified PHP Engineering (ZCPE) কোর্স এর ৪৪ তম ব্যাচ শুরু হতে যাচ্ছে। সীমিত সংখ্যক আসন বাকি আছে। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করার জন্য অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল নম্বর : ০১৭২২ ৮১ ৭৫ ৯১

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:

// Register dynamic sidebar widgets
if (function_exists(register_sidebar)) {
        '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>

    jQuery("#show-nav").click(function() {
    jQuery("#close-nav").click(function() {
<?php wp_footer(); ?>

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 class="sidebar five columns row">
    <?php dynamic_sidebar('sidebar-w3Pro'); ?>
<?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.

One comment to “WordPress Theme Development: Dynamic Sidebar and Footer Layout (Lesson – 6)”

Leave a Reply

Your email address will not be published.