How To Tweak Your Wordpress Theme On The Fly

Sometimes you want to tweak your Wordpress theme a bit.
Adding extra or new graphics with different dimensions, changing the templates, a bit of extra search engine optimization, replacing a specific part or maybe installing a better solution for something you’re using now… whatever.

I’m not talking about adding a widget or activating a plugin. That’s easy. As is changing a color or font which you can do in your CSS (which you also can test before implementing, read on).

No, I’m talking about changes that are more drastic and need to be tested before implementing them.

I did one recently. I replaced my sign up form at the top left in the sidebar from a 1 column form to a 2 column width. THAT is a risky theme change, because the CSS didn’t allow me to use the full width of the 2 columns, so I had to change it drastically and test if to see if it worked out ok.

Now, lots of people don’t do that, because it’s too hazardous. The thought of messing up a smoothly running theme and not being able to recover it is enough to abandon any plans in that direction.

Not me though.
I tweak my Wordpress themes on the fly!

Photo Credit: ariel wants a chip.

I’m going to explain how I do that below, but first let me emphasize that another method is just to announce changes in themes and warn your visitors that there may be some downtime at your blog.
In ClickNewz Updates 5/23/08 Lynn Terry shows you exactly how to do that.

So, here’s how I tweak my theme on the fly.

First, load the page you want to tweak in your browser and then save it on a temporary directory on your hard disk. Next, save the CSS file in that same directory. You can either find the URL of the CSS file in the source, but you can also copy it from your theme directory.
I always create an extra copy so that I have the originals available in case I mess up.

The first thing you have to do now is go back to the source of the page in your temporary directory and delete the full URL to the CSS file, since that one is in that same directory now.
So anything that looks like
  http://www.domain.com/wp-content/themes/themename/style.css
must be changed in just
  style.css

Now you can work with both the page and the CSS file in that temporary directory. And that’s exactly what we’re going to do.
But before making any changes, take a notepad to write down what changes you’re going to make, ok?

Now you can make your tweaks (and write them down!) locally on your hard disk, using your favorite editor. If you want to see the results, just click on the local page and it will pop up in your browser.
I’m using Firefox and I suggest you do that too -more on that in a minute-, but you also have to check if your tweaks look all right in other browsers too.

I prefer Firefox for several reasons, but for this purpose here’s the main one: you can install powerful “add-on’s” and one of them that we’re going to use here is Web Developer.

Because, in Web Developer we can change the HTML of any page online, without changing the source!
You just select ‘Miscellaneous’ from the toolbar and then click on ‘Change HTML’.
A sidebar pops up where you can change the HTML source and see the effects immediately.

Web Developer allows you to do exactly the same with the CSS (just click CSS and then ‘Edit CSS’ in the toolbar), simultaneous with changing HTML. It uses the same sidebar and you can switch between HTML and CSS.

Now, you DID write down the tweaks you’ve made to your local files, didn’t you? If so, then use these notes to make the same changes ‘on the fly’ using the sidebar of Web Developer!
You can see the effects immediately and tweak some more if you don’t like them. Meanwhile, your current Wordpress theme is still up and running!

If you like what you see and want to implement your tweaks, you first want to save a copy of the theme files you are going to change. I always add something like ‘original’ to the file name and save it.
So, the sidebar.php file for instance then would be saved as ’sidebar-original.php’. It’s important that you do this for the next step.

Now you can apply your tweaks - like in the example above in sidebar.php. Save it on your hard drive and make an extra copy of it, adding ‘new’ to the name, like sidebar-new.php.

Before uploading sidebar.php, open a new browser window showing the (part of the) page you are about to upload. Since I use Firefox, I do the same in IE Explorer to see if my tweaks look the same in there (and many times they don’t since IE Explorer render pages differently!).

Now you have to be quick.
Upload the tweaked page and CSS file, quickly reload the page in Firefox and IE Explorer and immediately replace the files you’ve just uploaded by the ones you saved as ‘original’, so ’sidebar-original.php’ now becomes sidebar.php and ’style-original.css’ becomes style.css again. Upload these files, and everything looks back to normal, as it was.

If necessary, re-read that again. You can do it in 10 to 20 seconds, 30 at the most. Hardly anyone will notice, certainly if you’re using your statistics to see what hours are quite and do this in that time frame.

But YOU now have the tweaked page in your browser window!

So you can check and double check. If necessary, you can repeat this process. If it’s like you want, just save the ‘new’ file as the one you want to upload (like ’sidebar-new.php as sidebar.php) and put it on your server.
Thus you will have tweaked your Wordpress theme on the fly, like I did.

So, what do you think?
Nice or too complicated?
Post your comments below.

Tags: themes, Wordpress

Welcome to Affordable Internet Marketing Blog.
You may want to Subscribe to my Updates or to my RSS feed. Thanks for visiting!

Related Articles:

• Wordpress Backup And Database Optimizer Plugin
• Wordpress Automatic Upgrade Plugin
• What Do You Want From A Wordpress Theme?
• Wordpress Search Engine Optimization
• Cascading Style Sheets (CSS) Tutorial

FORWARD:  Email This Post To A Friend