This tutorial carries on from Dreamweaver CS5.5: Creating a WordPress 3.1 Theme in Dreamweaver CS5
In the second part of this tutorial we will look at how to change the content, sidebar and footer sections of your WordPress template using Dreamweaver CS5.5.
Dreamweaver CS5.5: Creating a WordPress 3.1 Theme in Dreamweaver CS5 Part 2
Now we will move onto editing the CSS related to the content, sidebar and footer sections of the WordPress theme. This will include the styling of the widget area as well. First thing are going to need to do is ensure that we have the sidebar.php and footer.php files are all open as separate files. Do not ever modify the index.php file. This will give you results you certainly don’t want or at worse destroy your WordPress.
Changing Position of our Sidebar.
OK lets say we want to move our side bar from the left hand side of the page to the right hand side of the page. First lets make sure we are in the live view and have inspect switched on. Hover your mouse over a heading in the sidebar, while hovering your mouse over it hit the left arrow key until the entire sidebar is now highlighted. If you go to far just hit the right arrow key to come back down. Once you have the entire sidebar highlighted click once on it to lock in the CSS relating to it.
Now if we look at our CSS rile we should find that our column is floated left (it will be floated right if it is on the right hand side). If the CSS rule you have selected does not float the column either way then you may have to inspect the other CSS rules that are affecting the way the column behave to find this property. Once you have located it switch it to float right or float left if it is already floated right.
Your sidebar should flip to the other side of the template. However if it doesn’t chance are it is now being floated in the same direction of the content and can’t float past it. So what do we do? Turn on inspect mode again and highlight say the heading of an article in the content section. Again flick through with the left arrow key until such time as the entire content area (not the the body) is highlighted then click once on the content to lock in the CSS rule.
If we now inspect our CSS property we should see that our content has a float rule too. If so change it to the opposite side like before and now your website should have changed its orientation. IF the content doesn’t have a float, like before we need to examine the other CSS rules affecting this element until we find the float.
Changing any of the look and feel of everything in this section is managed by highlighting the piece that you want to change in inspect mode, finding the CSS rule controlling it with the left and right arrows, and changing the CSS property to suit how you want it to look in your template. We could not possibly cover all the changes you could make as this is only limited by your imagination.
Changing the Footer.
Say we would like to take out the existing text in our footer we are going to need to modify the PHP and the CSS relating to our footer to do this. This may require some PHP skill to do if you want to change what is actually put in here. Will not cover that in this section we will however cover how to remove the PHP currently in there and add static text as well change our background.
If you open up footer.php as a separate file and scroll down to the body section you will find depending on the template you are using there will a div contained inside it that contains all the PHP that brings the various sections of the footer together. If you are looking to remove the PHP introduced text from the footer you need to remove everything inside of this div but do not remove the div itself. You will still need this to control the look and feel of your footer.
If you wish to add text manually that will remain the same throughout your template insert in this div as through you would any other HTML document. However if you are confident with your PHP skills you can add your own PHP in this div.
Remember to save your footer.php file once you are finished with it so that you may check it out in your live view in Dreamweaver.
Now if we were change the background image in use in our template go into inspect mode and highlight something in the footer and hit the left arrow key until such time as you have the entire footer highlighted. again we click on the footer to lock in the CSS rule in our CSS palette. If a background image is already present swap it out with one you want to use, if not add one now as well as any other CSS rules you need governing the positioning of your background. Also set your footer size etc if required at this point.
General modifications to your WordPress Themes.
From here on in it is a matter of using your inspect mode to highlight anything you wish to change and using the left and right arrow buttons to find the CSS rule governing the item you wish to modify. Remember your CSS palette will also tell you any other rules governing that element. With practice you will soon be able to master the creation of WordPress themes with Dreamweaver CS5.5.
Hopefully you have found this tutorial helpful and hope to see you again soon.