Monty-Blog.com
A Guide To Making Money On The Internet

Editing Wordpress themes can be mighty tricky as I commented on in the previous post but if but if your dead set on designing a theme that suits all your needs and looks exactly how you want it to, there are ways. Option one is become professional in CSS which would be great in the long run but will take time. If you can’t wait that long and want to design your theme straight away you can use Dreamweaver. In my opinion Dreamweaver is the king in the want you see is what you get web design packages.

Wordpress uses template files to control the appearance of the website. The web-page is assembled of several PHP files controlling specific aspects of the site like header, sidebar, main content etc.

To use Dreamweaver to edit these themes you have to combine the different PHP files into one Dreamweaver document so you can view the site as your editing it. An important start of point is to work out which PHP files correspond with which part for example the index.php is the main page and the single.php is the individual post part.

Create a new folder and copy into is the style.css of the theme you are editing and the folder containing the images.

Open Dreamweaverand create a new HTML document then save it in the folder you’ve just created. Switch Dreamweaver so you your viewing it in code view and paste in the lines below:

<!– Header part goes here –> <!– /Header part ends here –> <!– Main content here –> <!– /Main content ends here –> <!– Sidebar content here –> <!– /Sidebar content ends here –> <!– Footer content here –> <!– /Footer content ends here –>

The Lines you have just copied into your HTML document are code comments and will help guide you to put the right PHP file in the right place. If you want a different sort lay out just swap the lines to suit your need.

Now start coping the different codes from the template files: the header.php, sidebar.php, footer.php etc. Once all the code has been copied into the correct location you need to change the location of the style.css file in the header. Wordpress themes point to a CSS style using the line: <link rel=”stylesheet” type=”text/css” media=”screen” href=”<?php bloginfo(’stylesheet_url’); ?>” /> Just change <?php bloginfo(’stylesheet_url’); ?>  Just change: to style.css so that your document can locate the style-sheet.

Once you have successfully linked your style-sheet now you need to change the dynamic calls such as your blog name and sub-title. Most Wordpress themes that display the blog title as text use the following code: <h1><a href=”<?php echo get_settings(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1> What this does is display your blog name and link it to the main page. To view how your blog name is rendered simply delete: <?php bloginfo(’name’); ?> and type in your blog name. Do the same for your blog tag-line and sub-heading, which is displayed by the code: <?php bloginfo(’description’); ?>.

In the main content, just delete the conditional statments found in index.php and only retain the code that displays the blog posts.

Delete these lines: <?php if (have_posts()) :?> <?php while (have_posts()) : the_post();?> <?php endwhile; ?> <?php else : ?> <h2>Not Found</h2> <div class=”entrybody”>Sorry, but you are looking for something that isn’t here.</div> <?php endif; ?> </div>

Place some dummy headlines and text to preview some changes you might want to make with the style-sheet or the HTML code. The blog post headline is called by <?php the_title(); ?>, just delete this and type in a dummy headline. To enter dummy text for the blog post article body, replace <?php the_content(’Read the rest of this entry »’); ?> with some dummy text. Enter dummy links and headlines in your side bar.

After you enter the dummy text, you now have a mock up design of your Wordpress theme that you can use as a base for your customization. With this you can instantly preview the results of any changes you make to to the CSS or HTML code. When you have finished editing and you have a design that your proud of copy the new codes into the different template files and save the CSS style-sheet.

Go over the codes again and replace the dummy text you placed with the appropriate Wordpress template tags for the blog title, blog post headline and content.

Using this method your templates will look as good as your creative side will allow and as with everything there more you use it the better your templates will get.

This entry was posted on Friday, July 27th, 2007 at 4:30 pm and is filed under Blogging, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.