The Secret of Successful Editing of WordPress Themes

The WordPress Support Forum get questions every day for help on how to tweak this or that part and piece on user’s WordPress Themes. Do you want to know the secret behind successful editing and designing of your WordPress Theme?

Mozilla Firefox.

Isn’t Firefox just an Internet browser? Yes, it is, but it is also so much more.

Why Aren’t You Using Firefox?

Let’s get something out of the way first. If you are still using Microsoft Internet Explorer - fine. It’s good enough for most website viewing and browsing. But if you want to do more, if you want control over your browsing options, if you want the ability to view multiple pages at the same time without clogging up your desktop, if you want fingertip access and control to a wide variety of functions and features that make Internet browsing a delight, then install Firefox.

You can install Firefox on a computer with Internet Explorer also installed. It won’t hurt either of them. They will run side-by-side without problem. You will have a choice to make one of them the “default” browser, and then change that later. It’s up to you. But if you want to take advantage of the powerful features that will help you troubleshoot and tweak your website style sheet or WordPress Theme, then add Firefox to your web tools.

Besides, Firefox is free to download, install, and use. That’s right - FREE.

Firefox Web Developer Tools

TIP You do not have to post your CSS styles or XHMTL code on the WordPress Support Forum to help the other members help you solve your CSS or Theme problem. From the link to your website or the page in question, most are using Firefox with the Web Developer Extension installed. With these same tools, they can view your source files and style sheet and run the page through the validation checkers to track down and identify your problem, and often quickly come up with a solution. Why not use what the “pros” use?

With Firefox installed, there are a variety of powerful add-on features called extensions that will help you design your website or WordPress Theme. It doesn’t matter if you are trying to tweak the finest little detail, or shifting your sidebar from one side of the page to the other - these act like some of the most expensive HTML WYSIWYG web page editors.

Firefox Web Developer Extension is packed with the features you need to edit your WordPress Theme. There is a lot of documentation to describe all that it does, but here are just a few highlights.

• Edit Your CSS
  • Make live edits to the CSS style sheet of a web page.
  • View style sheet information for a web page.
  • View style sheet information for an element by clicking on the element
  • Add a style sheet from your computer to a web page to instantly change the look of a website.
• Highlight and Display Elements
  • Outline and highlight block level elements, deprecated elements, frames, links, and other tag and CSS elements.
  • Outline images which may need trouble shooting such as images without titles.
  • Locate broken or unfound images.
  • Display image dimensions, file sizes, and paths.
  • Outline other troubleshooting elements which lack titles, alts, or other HTML or CSS errors.



• Disable Elements
  • Hide images.
  • Disable Javascripts.
  • Hide background images.
  • Hide or disable animations.
  • Disable popup windows.
  • Disable cache and cookies.
• Validate HTML, CSS, Feeds, and Links.
• Display various page and screen sizes for testing.
• View W3C documentation for HTML, CSS, and other web page standards.

The Edit CSS and Validate are probably the two most powerful and most used tools. Let’s look at these specifically.

Edit CSS

With the Edit CSS feature, a sidebar opens with the style sheet of the page inside of it. If the site has inline styles or additional style sheets, they are included on the tabs listed across the top for easy access and viewing.

Simply type inside of the text area of the sidebar and the change will appear on the screen. You can change the height or width of a block element, move it around, tweak the fonts, links, graphics, background colors, images, whatever elements are controlled through the style sheet.

Remember that not all styles are controlled by the style.css style sheet file on every WordPress Theme. Themes based upon the Default Theme typically include inline styles on the template files themselves which control the header section of a Theme. You will find those on the inline styles tab in the Edit CSS sidebar.

TIP Be careful not to switch the web page window you are working on to another tab web page view. You will lose your changes and import the new styles for the current web page. To keep this from happening, click the small arrow in the Edit CSS menu bar with the title “stick”. This will lock in the styles and apply them to every web page you view - which can make for some interesting web page views. Click it again to “unstick” the style sheet.

Before making any changes to your WordPress Theme’s style sheet, make sure you make a backup copy of the style.css file, just in case. When you have made the changes and you are happy with them, you can copy the new styles and paste them as a complete replacement in your Theme’s style sheet, or just insert the new changes where necessary. You can also choose “Save” from the Edit CSS menu and save the style sheet onto your computer.

To view your site with the new style sheet, upload the style.css to your WordPress Theme folder with any FTP client program, and then refresh the screen. If you don’t see changes, check out how to ensure you do with I Make Changes and Nothing Happens from the WordPress Codex.

Validate Your Web Pages

Whenever you make changes in your WordPress Theme or template files, you should validate the code to make sure that it is working, and working right. The smallest forgotten or messed up detail can totally screw up your page’s layout and design. I can’t tell you how many times a forgotten