In this tutorial we will tech you how to take an existing WordPress 3.1 theme and using Dreamweaver CS5.5 create our own theme. This is a rather complex task however we are lucky in that Dreamweaver does make this task considerably easier for us, provide we know how to go about the changes we wish to make. We will begin by modifying another theme as this is a great way for you to learn just how WordPress works and is the best way for you to learn how to make WordPress themes.
Five things we need to have before beginning.
- XAMPP server running on your computer
- WordPress server running in our XAMPP server
- Dreamweaver CS5.5 although CS5 will do
- We also need to have your WordPress server set up to run in Dreamweaver (if you don’t know how to do this please check out the tutorial I did yesterday on setting this up)
- A WordPress theme installed to use as a basis for our new theme.
If you have all of this then we are ready to create our first WordPress 3.1 theme.
Dreamweaver CS5.5: Creating a WordPress 3.1 Theme in Dreamweaver CS5
Hopefully you already have all the above set up ready to go. So lets get stuck in the nuts and bolts of making our modifications.
Duplicating your WordPress Theme ready for Editing
First thing we want to do is create a duplicate of the WordPress theme we are going to use as a our base. First we need to go to our files palette and in there you will see a folder caller wp-content, expand that folder and another folder in that is called themes. Expand the themes folder and inside of that you will see a folder that has the name of the theme you have chosen to work on. If you right click on it a context menu will appear, we need to go to Edit >> Duplicate in that context menu.
Dreamweaver will now make a copy of that folder and append the work copy to the name of theme. Lets change the name of that theme to what ever you want to call it. When you hit enter to commit to the name change a window will pop up asking if you want update links, DO NOT update links. This will cause your changes you make to change the original theme not the theme you are working on. So select don’t update.
Now if we open our manage themes page in wordpress in your browser we will now see 2 identical themes. There is no way to tell them apart. To work with the theme we need to have it installed so how do we tell which one we are working with. We are going to make a few changes to the theme we are working on so we can tell the difference between them in WordPress.
So back to Dreamweaver we go, and if we go back into our themes folder and open the folder for the theme we which to work on you will see a file named style.css. Open it up and take a quick look at it. This is the main CSS file for our theme. We will modify it later on but for the moment we are interested in modifying the comment section at the top which should look something like this.
/* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar. Author: the WordPress team Version: 1.2 License: GNU General Public License License URI: license.txt Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu */
This is the section we now need to change to make our theme look a little different in our theme manager in WordPress. Change the theme name to what ever you want to call your theme, change the URL to your websites URL and change the description to something that means something to you. Change author to your name naturally and as this is your first wordpress theme this is going to be version 1.0 for you. Change the tags to what ever is relevant for your theme.
Once you have done that save you file and then go back to the theme manager in your WordPress. You will see that all the changes you just made have been made in the theme manager. This is how we make changes to the theme description.
Also in the themes folder you will find a file named screenshot.png. Open this up with Fireworks or Photoshop if you wish to change the preview shot that displays in your theme manager. We won’t be covered how to do that in this tutorial though.
Install your theme so we can now work with it when we go back to Dreamweaver.
Changing your Headers Background Image
Naturally this is the first thing people want to do to put their own personal stamp on a theme and its a great place to start from. Open Dreamweaver up and in the files palette of your server you will see index.php. Open this up and lets get into it.
Make sure that you are in live view, switch CSS palette to show Current rather than All. This is very helpful for identifying what CSS rules we need to be working with. Work with your Dreamweaver in split View, this way when you mouse-over an element you will see the live code on your left so you can see what your working with.
Most WordPress themes come with test written into your header so we are going to remove this as an example of how to use the tools in dreamweaver to do this, as well as how to work with WordPress in Dreamweaver. Mouse over the text in the header and take a look at the code view. You will see a section of code that is now highlighted for you. this is the code that puts that text into your header. So we want to remove this, however we can’t just go over to the code as it appears and delete it. and put our now text in. The code we are looking at is the code as it would be sent to a browser, it is not how it is stored on the server. We are working in the header of the web page so we now need to find the header.php file. This is the file that puts this bit of code into our page when it is sent to the browser.
So if we look in our theme folder we will see a file called header.php. Open it and locate that bit of code in the body. Highlight it and delete it. When you go back to your index.php and hit refresh you will notice that the text is now gone. Alternatively we could put new text in in the same manner.
Now how do we add our background image. Make sure that you click the inspect button again and now highlight your header background. If you click on it then go to your CSS palette it should have the CSS rule that governs it ready for you to look at (this is why we should have our CSS palette set to current while working on our themes.).
If we go through our CSS rule we should find a property for background image, failing that a background color if no image is used in the theme you are working on. If you cant find either of these click on inspect again and try again to get your header as you have gotten the wrong item.
If you have trouble getting it mouse over the image then use the left and right buttons to change through the CSS rules that cover the element you have highlighted. It is quite common to find multiple rules governing a single element. This is how you move up and down the chain of rules covering what ever you are hovering over in Dreamweavers inspect mode.
Double click on the background image property to open your CSS panel and change you background image properties. Make sure that you have your background image you wish to use in the images folder inside the theme folder you are working on. Don’t forget to make sure you set the size of your header so there is now risk of it collapsing on you.
Once you have that sometimes you will find that the designer of the previous theme used a foreground image instead of a background image. If this is the case you need to click on the image in inspect view and locate the php code again. Once you have located it you will need to open your header.php file again and delete that section of code to remove it.
So now we have a background image. Time to move on the next header modification.
Adding an Image to our Template Header
This is becoming a very common practice in a lot of web design. Having a logo image in the header that is click able to take your user back to your home page. In this section we will show you how to go about doing this.
As before we have been working inside the header.php file we are going to be doing this again to put your logo into the template. Open up the header.php file in your templates folder. Locate where you wish to place your image inside the header. This is pretty much anywhere within the body tags of the header.php file depending on what elements you have in your header file.Make sure that it is open separately to your index.php file. If you don’t you will make modification to the wrong file.
Once you have located where you need to insert your image select insert>>image and browse to where the image is located and select it. Again if the image is part of your theme it should be placed in the images folder of your theme folder. Select your image then when the window appears for alternative text put in the name of your website home. So when people mouse-over it they will know that the image will take them to your home page. and then hit OK.
Save the file then go back to your index.php but do not close header.php yet. If you refresh the page you will see that the image has a box marking out where it should be however it cant find it. We now need to modify the code Dreamweaver put into our header.php so that WordPress can dynamically find it.
You should have code looking like this in your header file where you placed your image.
<img src="images/yourlogo.gif" width="200" height="200 alt="your website home">
WordPress is never going to find this unless we add a little PHP to it.
<img src="<?php blog_info('template_url'); ?>/images/yourlogo.gif" width="200" height="200 alt="your website home">
You will notice that in the source URL we have added the following:
<?php blog_info('template_url'); ?>/
Do not forget the backslash either otherwise you will break the entire path and nothing will show yet again. This line of code adds the URL of your templates location to the front of the path enabling WordPress to locate it.
Now if we want to make that into a link that will send our user back to our home page we need to wrap it with an anchor tag<a>. This anchor tags url will also need to use a little bit of PHP in it too.
<a href="<?php echo get_option('home'); ?>/index.php"> <img src="<?php blog_info('template_url'); ?>/images/yourlogo.gif" width="200" height="200 alt="your website home"> </a>
The PHP code in the anchor tag gets the root folder of your blog which would normaly load the index page but to be on the safe side we also need to tell it the file name to be sure we leave no holes in our code. Be sure to put the backslash in as well or you will get results you don’t want.
This is pretty much all of how you edit the head of the template. As I am running out of time and this is getting quite long I have split this up into two parts. Part 2 is now available at:
Either way hope you found this helpful and hope to see you again soon.