Editing a WordPress Theme Free in Kompozer

When looking for a way to simplify editing of a WordPress theme, I ran across this tutorial on editing in WordPress using Dreamweaver. It occurred to me that with very little modification, the same technique could be used to edit a theme using the freeware Kompozer program. Kompozer is a WYSIWYG HTML and, while it's hardly up to par with programs like Dreamweaver, FrontPage or ExpressionWeb, it's perfectly suitable for editing WordPress Themes. You basically build an off-stage construction page, the export necessary elements back into your WordPress Theme.

Create a General WP Editing Template

1. Before making any changes to your your WordPress Theme, always make sure you have a copy of the original theme in case you need to restore it. Make a new folder. Copy the original theme's files folder into it. This will be a handy place fetch files.
Alternately, you could simply start with a blank folder, then copy and save all relevant files into it. The only one you must have here is style.css and the HTML file you are about to make. Once you're comfortable with this process you may simply need just those two files.
2. Make a copy of the style.css file and place it in the main folder.
3. Copy any graphic files into the main folder.
4. Study the theme's files to get an idea of the site and page structures. If you don't know much about how WordPress sites are constructed, read up. Here's a good place to start: http://codex.wordpress.org/Stepping_Into_Templates
5. Open Kompozer and create a new HTML (or XHTML) document.
6. Click the “Source” tab (at the bottom) and copy the following text between the “body” tags, making sure each line appears on a different numbered line:

<!-- 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 -->

These lines help you patch together the various sections of code from the various php files and later to copy them back. Rearrange the lines as needed to suit your particular theme, for instance the sidebar might be before the main page content if it's on the left.
Save this file as your template for editing other WP themes in the future.

Create a Template for Editing This Theme

7. Open Notepad (or even better, a code editor like ConTEXT).
Drag the header.php file into the text editor.
Now you are going to select and copy the header.php HTML code, starting below the “body” tag. Paste it into the header section you just made in Kompozer.
Select just the layout-related code. I started below the meta tags on mine.
8. Repeat this process for the sidebar.php and footer.php code. In footer.php, you only need the code before the “” tag.
9. Next copy code from index.php into the “Main” section.
10. Next we need to temporarily change the style.css location in the header.
Copy the following code between the pages “head” tags:

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

This allows the Kompozer HTML file to access the stylesheet. By saving it in as a comment (in <-- comment -->) you can easily restore the line later. In fact, it's a good idea to place an explanatory comment before each change.


11. Next replace the Dynamic calls in the header for the blog name, sub-title, etc. with text to fill the space. This area is usually after the H1 tag. The code looks something like:

<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

Just replace the <?php bloginfo('name'); ?> part with a title text like “Title Here”.
12. Similarly, find the code for the blog entry title and replace it with text.
13. Replace the call with filler article text and so on. I found the best way to insert text was to put the word “here” on the line in the Source tab, then paste paragraphed text after it in the Normal tab.
14. Delete or comment out conditional statements like:

<?php endwhile; ?><div class="navigation">
<div class="alignleft">
<?php next_posts_link('« Previous Entries') ?>
</div><div class="alignright"><?php previous_posts_link('Next Entries »') ?>
</div></div><?php else : ?>
<h2 class="center">
</h2><p class="center">Sorry, but you are looking for something that isn't here.</p>
<?php include (TEMPLATEPATH . "/searchform.php"); ?><?php endif; ?>

15. You now have a viewable version of the page.

Edit Your Template

I commented (<>) out some if/then statements in the sidebar to so the archives heading would look right and placed a photo above it. You could just as easily place an ad or anything else.

One trick I use with WYSIWYG editors when I want to drop something new into a particular spot is to go to Source view and place a text word like “here” where I want something, then go to Normal view and position an image, table or whatever there.

Open the CSS Editor in Kompozer (artist's pallet button). Click on style.css in the right column and now you can easily make all kinds on instant modifications and see the changes as you do. Make changes according to you comfort level with HTML. Just remember that changes to page structure can get a bit involved.

Return Changes to WordPress

Now it's time to place your changes back into your active WordPress template. If the only changes you made were in the style sheet, you only need to replace the your online version of style.css with the one you just modified through Kompozer. You can either open the new version in a text editor, copy it, then paste it over the existing style.css using WP's theme editor or upload the replacement with an FTP client. Save the local page file you just made and anytime you wish to tweak your site's styles, just open, modify styles, and copy in the new style.css.

If you make changes to the page structure in HTML, not just the style sheet, you will need to open each section in the WP theme editor, the paste the code in, after replacing any temporary copy with original code. If you left these lines in place and merely commented out, that should be easy.

In my example, here is the theme, Geex3m, before modification:


After import into Kompozer:


After modification: