Design a WordPress 2.7 Theme – Day 3 : Dynamic Sidebar and Functional Footer
Introduction
Although the main content is always the most important part of a web design, the secondary content plays a fundamental role in guiding the user through the website. The sidebar helps direct the flow of the page, gives it useful information, and can display some of the most important aspects of your website.
Seeing as these tutorials are based off of WordPress 2.7, there is no need to go into detail about static sidebars. You can easily add these in, with your knowledge of XHTML and the use of the very detailed WordPress Codex.
Footers are also a very important feature of your site. Because they are at the bottom, they are often overlooked. Many people don’t realise how important it is to have something to look at once you finish reading a post and so the footer is an ideal opportunity to maintain readership.
Functions.php
Functions.php is used to add the dynamic sidebars and to format it. For this design, I am adding two widgetized sidebars, one for the right of the content and one for the footer .Add the following into your functions.php
Download the functions.php text
name – The name we give our sidebars
before_widget – This allows us to structure our widgets
after_widget – This closes the tags opened in the before_widget
before_title – Lets us add a heading before the widget content
after_title – Closes the heading tag
We also added classes called ‘widget’ , ‘footerbox’ , and ‘%2$s’. The ‘%2$s’ is used to allow plugins to give their own class so we can customise each widget separately.
Adding the Sidebar
So now we have two sidebars
This is what they look like in the admin panel. The only problem is that we have nothing in our template files to show our widgets. This can be rectified easily
Go into sidebar.php and copy in the following lines of code in between the ‘secondary’ div tag
Now upload sidebar.php and you should see your widgets underneath your posts
Add Functionality To The Footer
Now we are going to add the exact same code, in a different manner and in a different place, to add functions to the sidebar.
Add the following just after <div id=”footer”>
Download footerwidgets.txt here
This places in an unordered list, with the dynamic sidebar “footer” enclosed. I’ve also added a div around the footer text “Copyright etc.. “ to make it easier to style.
Conclusion
So at the end of this lesson your files should be along the lines of these
It’s not much of a design but we are getting there. On Day 4 of Design a WordPress 2.7 Theme, we will be adding CSS (Finally!) just to structure our page a bit. Remember to Subscribe to my RSS Feed for daily updates.