WordPress Tutorial – How to Make Changes to a WordPress Theme Sidebar Using a Text Editor

This Advanced-level WordPress tutorial shows you how to edit the sidebar.php file that is part of a WordPress theme. This is an Advanced tutorial because you will use a text editor to work with the actual PHP file — and FTP software to download and upload the file to a web hosting server — rather than making edits using the WordPress Dashboard.

This tutorial assumes you know how to use a text editor on a Macintosh or on a Windows PC, and it assumes you have and know how to use FTP software to transfer files from a web server to your computer and back up to the server when finished editing. The standard text editing software on a Mac is TextEdit. McBuzz also recommends text editing software called BBEdit, because it highlights the different parts of a PHP or HTML file in different colors, making it much easier to read and edit the file. On a PC, standard text editing software is Notepad and WordPad, which come installed with Windows.

Advertisements

5 Responses

  1. Hi

    i’m a wordpress begginer

    do you know the HTML for the green corners on top of Blogroll and Great websites on top of google?

    • You can put a green corners image like you see on top of Blogroll and Great Websites in the Business Blogging 101 sidebar using the technique I show how to use in my How to Put Text on Top of an Image post. The background image used in the sidebar is this one bg_ul_li.gif. By putting an image like that behind text using the technique in my tutorial, you will get the same effect. Try swapping a corner image for the apple web marketing image used in my tutorial.

  2. Excellent, glad that you made mention of creating a copy (before) editing as that can indeed save you a bunch of frustration. Even veteran users sometimes forget that little step and then find themselves spending a great deal of time trying to undo (if they make a mistake) and locate the original file again. I think it also important to mention that often changes aren’t immediate? Sometimes you may need to delete your cache, close the site and revisit again to see the actual changes. Really great explanation of how to do it correctly, “Thanks.

    • @hyperpcs You raise a great point. Thanks for bringing this up!

      I think it also important to mention that often changes aren’t immediate. Sometimes you may need to delete your cache, close the site and revisit again to see the actual changes.

      I find this is true especially with the Firefox browser, for some reason, but it happens in Internet Explorer, as well. I’m not sure about other browsers like Safari or Google Chrome.

      If you ever make changes to your site – using WordPress, or by changing the style.css file or some other file from your theme – and you are not seeing the changes when you view the published or updated page in your browser, there are some simple steps you should take before you do anything else.

      First, make sure you are clicking the Update Page or Save Draft button (depending on whether the post/page has been published yet). Then you can click on the Preview button to check your work. And, if you have more than a couple of tabs open in your web browser like I often do, check to make sure that you are looking at the right tab window to see the Preview. If you have looked at more than one Preview while doing your editing, you may be looking at an old tab window instead of the most recently updated one.

      If you are still not seeing the changes you have made, the next thing you can do is reload or “refresh” the tab that has the Preview in it by clicking on your web browser’s refresh button while holding down the Shift key on your computer keyboard. In Firefox the refresh button has an arrow going around in a circle on it. In Internet Explorer the refresh button has two arrows on it: one pointing up, the other pointing down. Holding down the Shift key is supposed to tell the browser to reload the entire page without using any cached files. Sometimes this works, sometimes it doesn’t.

      As reader hyperpcs points out, there are definitely times when refreshing while holding down the Shift key is not enough to completely clear the cache. So, if you try this and you are still not seeing your changes when you view the post / page, take the next step, which is to manually clear your browser’s cache.

      Here’s a McBuzz post about how to empty your web browser’s cache. I have not updated this lately, but I think the general techniques are still the same. Let me know if not. If you have done this step, and you still don’t see your changes reflected in your site, you need to take the final step suggested by hyperpcs and Quit or Close your web browser and then start it up again. Note: just closing your browser window may not be enough. You need to shut down the browser completely so that the program is no longer running and then restart it. Only then, in some cases, will you (finally!) see the updates / changes you have made to your site.

      I rarely have to do this final step, but there have been many times that I have had to empty my browser’s cache to be able to see the result of those changes – especially when working on a WordPress theme’s style.css file.

  3. check also new free PHP IDE – Codelobster PHP Edition with special WordPress plug-in for editing your themes.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: