

Now it's time to place your changes back into your active WordPress template. Just remember that changes to page structure can get a bit involved. Make changes according to you comfort level with HTML. 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. Open the CSS Editor in Kompozer (artist's pallet button).

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. You could just as easily place an ad or anything else. 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 now have a viewable version of the page. Sorry, but you are looking for something that isn't here.ġ5. Delete or comment out conditional statements like: 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.ġ4. Replace the call with filler article text and so on. Similarly, find the code for the blog entry title and replace it with text.ġ3. ">Just replace the part with a title text like “ Title Here”.ġ2. Next replace the Dynamic calls in the header for the blog name, sub-title, etc. In fact, it's a good idea to place an explanatory comment before each change.ġ1. By saving it in as a comment ( in ) you can easily restore the line later. This allows the Kompozer HTML file to access the stylesheet. Next we need to temporarily change the style.css location in the header.Ĭopy the following code between the pages “ head” tags: Next copy code from index.php into the “Main” section.ġ0. In footer.php, you only need the code before the “” tag.ĩ. Repeat this process for the sidebar.php and footer.php code. Paste it into the header section you just made in Kompozer. Now you are going to select and copy the header.php HTML code, starting below the “ body” tag. Open Notepad (or even better, a code editor like ConTEXT).ĭrag the header.php file into the text editor. Save this file as your template for editing other WP themes in the future.ħ. 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. These lines help you patch together the various sections of code from the various php files and later to copy them back. 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: Open Kompozer and create a new HTML (or XHTML) document.Ħ. If you don't know much about how WordPress sites are constructed, read up. Study the theme's files to get an idea of the site and page structures. Copy any graphic files into the main folder.Ĥ. Make a copy of the style.css file and place it in the main folder.ģ. Once you're comfortable with this process you may simply need just those two files.Ģ. The only one you must have here is style.css and the HTML file you are about to make. This will be a handy place fetch files.Īlternately, you could simply start with a blank folder, then copy and save all relevant files into it. Copy the original theme's files folder into it. 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. You basically build an off-stage construction page, the export necessary elements back into your WordPress Theme.ġ. 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. It occurred to me that with very little modification, the same technique could be used to edit a theme using the freeware Kompozer program.

When looking for a way to simplify editing of a WordPress theme, I ran across this tutorial on editing in WordPress using Dreamweaver.
