PHP Professional এবং Zend Certified PHP Engineer (ZCPE ) Course এ সীমিত সংখ্যক আসন বাকি আছে। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করার জন্য অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল নম্বর : ০১৭২২ ৮১ ৭৫ ৯১

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. Required fields are marked *