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

Download dynamicwidgets.txt

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

Download the sidebar.php text

Download the footer.php text

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.

You have your basic page structure, but there are none of your posts visible. Because there is a lot of PHP needed, and because it can get messy some times, WordPress give you an easier way to separate your template theme pages into different files. With WordPress, you can and it is extreemly easy!

File Separation

Open  any IDE, and make five new pages

• header.php
• sidebar.php
• footer.php
• page.php
• single.php

Now go into you index.php, cut everything from the top to the end of <div id=”primary”, and place it in the header.php. Then go back into your index.php and type <?php get_header(); ?>. This tells your index,php to import the header file

We are now going to do the same for the sidebar and the footer. Cut from <!–END PRIMARY –> to <!–END CONTENT –></div> and place it  into sidebar.php. Then in index.php type <?php get_sidebar(); ?>.

And finally from <div id=”footer”> to </html> place everything into footer.php, and in index.php finally type <?php get_footer(); ?>

Your index.php should now have three lines of PHP code. You now have the basis of a WordPress themes, without the post or pages, or sidebar, ooh and your missing all your styling. Basically you have most of the grunt work done. You should be so proud. Lets move onto more interesting things shall we?

NOTE: These are proprietary tags i.e. if you type in <?php get_menu(); ?> and hope to have menu.php imported, this will not work.

The Loop

The loop is where your posts are displayed. It is called The Loop because it loops a script to display several posts dynamically.

Add the following between your header and sidebar import

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

This code checks for posts, repeats the number of posts until finished, then it ends the script. Simple enough. Now in between <?php while(have_posts()) : the_post(); ?> and <?php endwhile; ?> type in the following code

Download loopentry.txt here

Conclusion

So at the end of this lesson you should:

• Have six files with index.php, single.php and page.php importing the header, sidebar and footer.
• The loop displaying your posts
• A navigation at the bottom to get you go backwards and forwards.

Next

On Day 3 of our Design a WordPress 2.7 Theme, we will be covering the dynamic sidebar and other adding functionality to our footer. Make sure you Subscribe  to my RSS, if you don’t want to miss the rest of these posts.

Also please go back and have a look at the other tutorials in the post.

The first thing to consider when designing a WordPress theme is to think about the layout of site. Who is it for, why do they need it, how many columns, what colours? For this tutorial, I will be working on something to give away for free on this site ( a sort of follow-up to the series). I cant decide on your design, so you will have to get all of these beforehand.

The Heading

So to start, open up Dreamweaver (or any other IDE) and create a PHP file and name it index.php. Then create a CSS file and name it style.css. In you index.php, there will be some text already in your code. Take every thing out of the <head> tag and substitute it for the following:

Download head.txt here

<?php wp_title (); ?> – This gives dynamic info as the Page Title. This is extremely useful for SEO as it changes for every post.

<?php bloginfo(‘template_directory’); ?> & <?php bloginfo(‘stylesheet_url’); ?> – This just gives the location of the template directory and stylesheet. The first one is useful if you need to add a second CSS file (like I will be doing soon), JavaScript file, or an image.

<?php wp_head(); ?> – This exports the files WordPress and its plug-ins needs to the HTML. Some of this include widget specific CSS, J-Query embedding, or just new title-bar text.

Stylesheet setup

Head into style.css and remove everything inside it. Now because WP uses the stylesheet for all the template metadata (Useful Information), it is vital that you write this code correctly.

Download stylemeta.txt here

This just gives data, like the version of the template, template name etc… You can edit it accordingly. This is all we will be doing in the CSS today, we will not go that far so soon. For now, we will just work on the HTML.

The Basic Structure.

Ok now we are going to write the basic structure of our theme. We are not going to be implementing CSS just yet. I like to use a blank file with all this code already written but you can see it all here. Put all of this into the <body> tag.

Download body.txt here

This is just basic formatting, feel free to change it around as much as you like, just remember what id’s you use to make sure you don’t get confused with mine. Most of it is self-explanatory. However you will notice I have added a few PHP phrases <? wp_list_pages(‘title_li=&depth=1′); ?> – This prints out links for our menu. This is often an overlooked part of designing a WordPress theme, but it makes things easier in the long run. “depth=1” Makes sure that no sub-pages are seen. If you want to remove that go ahead but for this theme, I’m leaving it out <? bloginfo(‘url’);?> & <? bloginfo(‘name’);?> – This are handy tags to print out the URL and Name of the blog.

Testing

Now upload these files onto your web server in a folder in your wp-content/themes/ folder. Now enable your theme in the Backend and see if things are correct. You should see a page with your site name and a list of your pages, with no styling, and a footer with copyright information.

Conclusion

So at the end of this lesson you should:

• Be familiar with the PHP involved in the <head> tag
• Have the metadata implemented in the CSS
• Have a basic webpage structure ready for CSS Styling

Your HTML Page should look like this

Download day1.txt here

Next

On Day 2 of our Design a WordPress 2.7 Theme, we will be covering the loop and other php snippets to go into our theme. Make sure you Subscribe to my RSS, if you don’t want to miss the rest of these posts. Also please go back and have a look at the other tutorials in the post.

Seeing as he doesn’t seem to be doing so, I thought I might give it a shot. This is an extremely ambitious series of posts, as this is a fairly new blog, from a fairly new blogger/web designer. So please, don’t treat my words as gospel, and always strive for improvement. I shall be doing these posts every two -three days so please stick around. If you have any trouble you can find me here

You will need

• A Self-hosted WordPress blog
• Basic Knowledge of xHTML and CSS
• A IDE (Dreamweaver, Expression, Coda etc…)
• A inline browser tool such as Firebug and Web Developer Toolbar

Lessons

• Day 1 – The Basic Structure and Header
• Day 2 – File Separating And The Loop