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('©', '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.
Hello, This is Rashad. I like programming.
i love this site its good for us developers
Am thrilled by it