Dreamweaver is a great platform to  design and upload fully customized templates online but on the other hand WordPress is a great blog platform to create themes due to the segmentations and it’s simple code  of the page components. There are various ways to create a from free template builders online to other programs that are offered like Nvu and others.

It’s not difficult to customize a WordPress theme if you know a few shortcuts. Different designers and bloggers have  difference preference when it comes to these things. Some prefer to code themes from scratch others like me sometimes just customize the themes online through trial and error. The easiest way to create a custom theme for your blog is to download an existing theme that has the basic layout you want and customize the CSS and graphic elements to suit your needs.

Where to get a free WordPress theme?

There are thousands of free WordPress themes available from places like the official WordPress theme viewer, or in your admin page under themes where you can see a variable selection of quick themes. Or if you want cold designs and many other types you can search online. There are thousands and thousands of site full of themes for you to choose from. These is because users want you to use their themes so they can build back links and also promote themselves. The best way to start is by simplifying your theme customization is to start with a layout that contains the right structure. for example, if you prefer 3 columns to 2 and the header must have enough space for your logo then find the theme closest to your preference.

This is save you a lot of headaches digging through the blog source files trying to figure out where the proper code goes. Thus, Cutting down the hours you need to put in for the template

Set up your local drive for Dreamweaver

Before you do this best if you install the theme to your site on WordPress before hand. Then the first step in customizing your theme is to set up a site in Dreamweaver which will act as your “chopping block” for your new theme. Simply create a folder on your local drive and unzip your downloaded theme. You will now have all the components of your theme ready for customization in Dreamweaver.

Getting Your Blog into Dreamweaver

The next step is to get the complete code from your blog page into Dreamweaver in order to allow you to customize the blog via the CSS. Open the main page of your website in any browser and  right click . Then  Click on ‘View Page Source’ and you will be presented with the source code for your website. Click anywhere in the code and press ‘Ctrl-A’ to select all the code in the window. Press ‘Ctrl-C’ or ‘Edit’ then ‘Copy’ to copy the code to your clipboard.

Further on, go back to Dreamweaver and create a new Blank Page HTML document.

Then, Click anywhere in the code view window like the one below and press ‘Ctrl-A’ to select all the code. Press ‘Delete’ to delete all the code.

Now paste the code you copied from your browser into the code view window by pressing ‘Ctrl-V’ or ‘Edit’ and ‘Paste’.

If you press the ‘Refresh’ button or click in the design view window, you should now see the blog page as it appeared in the browser.

Linking your ‘Styles.CSS’ to Dreamweaver

The first step is to get rid of the “Styles.CSS” attached from the web. Go to your  CSS control window and click on the ‘CSS Styles’ tab if it isn’t already selected. Now click on ‘All’ button if it isn’t already clicked. You will see the currently linked CSS stylesheet. Click on the name of the stylesheet (usually ’styles.css’ or similar) and right click.  The menu will have a delete option, so click that. This will delete your linked stylesheet. have a look at the sample below.

The second step is to link your Local Stylesheet to Dreamweaver. Do this by again right clicking anywhere in the CSS control window to open the menu again. Towards the bottom of the menu, click on ‘Attach Style Sheet’. This will open a dialog box where you can select the local copy of your stylesheet. Browse to the folder you unzipped your theme into and select the stylesheet from the list of files. Click ‘OK’ and your local stylesheet will now be attached to your blog.

Tips to customizing your themes

1) Most WordPress themes that display the blog title as text have the following code:

<h1><a href=”<?php echo get_settings(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>)
2) The same thing the same thing for the blog tagline or subhead, which is displayed by the code:

<?php bloginfo(’description’); ?>.
3) The sidebar titles (Recent Posts, Categories, Archives, etc) are styled by H2 tags in the respective sidebar id’s
4) The sidebar lists and categories are all unordered lists styled using the ul and li tags for each sidebar id
* Search forms are styled by the #searchform and #search id’s and the text input box is controlled by the #s id

Happy Theme-ing!

No related posts.