Skip navigation

The Secret of Successful Editing of WordPress Themes

The 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?

Get Firefox!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.
  • Firefox Web Developer Extension Tools

  • 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 Firefox Web Developer Extension Tools - Edit CSSsheet 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.

Firefox Web Developer Extension Tools - Edit CSS SidebarSimply 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. Firefox Web Developer Extension Tools - Validate ToolThe 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 </div> or semi-colon has been the small overlooked detail that made a mess of a Theme I was working on.

With the Web Developer Extension, you can use the validation tools that come built right in. Click the Tools menu from the Web Developer tool bar and choose which validation type you would like to perform on the web page you are viewing. These include CSS, HTML/XHTML, Feeds, Links, and Section 508, which is the Accessibility web standards test. You can find more help about solving common HTML validation errors in another recent post.

Firefox Web Developer Extension Tools - W3C DocumentationThe validation report will open in a new tab or window, depending upon how you have Firefox set up. To help you understand the validation errors you encounter, choose the Miscellaneous tab from the Web Developer Extension tool bar and go to W3C Documents and choose the appropriate link to the documents regarding your validation error. Within a minute or so, you can usually troubleshoot the problem and find the solution, fix the error and have your valid code website back on the information highway.

Other Firefox Tools and Extensions

There are a few other great secrets to web page design available for Firefox. If you aren’t interested in downloading the entire Web Developer Extension, you can just choose the Edit CSS Extension, which basically does the same editing of the style sheet without all the rest of the tools.

Checky is another validation checking add-on that allows you easy access to different free and commercial online validation and analysis services. You can check a web page’s HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hyperlinks, Metadata, and much more.

Colorzilla adds a color picker to Firefox, allowing you to choose any color of any graphic, font, or design on a web page to get the color hexadecimal number to use for your own web page colors.

While Firefox tends to be a more web standard conforming browser and excellent to work with to view your site during its development, you still have to test your site’s layout and design in Microsoft Internet Explorer. There is a Firefox extension called IE View which adds a menu item to your right click menu to view the page you are currently visiting in an Internet Explorer window, opening it automatically. This also makes it easy to test your styles and layout between Firefox and Internet Explorer.

When it comes to cleaning up your website in general, checking for deadlines is really important. The Link Checker extension adds an easy to use feature in Firefox to check the links on the page you are viewing to see if they are still valid links. This is excellent for checking and updating your blogroll or any resource links list page you may have.

These are just a few of the hundreds of extensions and add-ons available for free for Firefox.

And now you know the secret used by many of the volunteer members on the WordPress Support Forum and successful web page designers: Firefox and its Firefox Web Developer Extensions.

Related Articles

Member of the 9Rules Blogging Network


Site Search Tags: , , , , , , , , , , , , , , ,
Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen, member of the 9Rules Network, and author of Blogging Tips, What Bloggers Won't Tell You About Blogging.

31 Comments

  1. Posted September 8, 2005 at 3:45 am | Permalink

    Yes, one of Firefox strength is its many extension available and it’s all for free. But for your information, I’ve tried Opera 8 and it sure load webpages faster than Firefox. So for viewing purpose only I use Opera while when developing/designing website/log I still use Firefox.

  2. Mobius
    Posted January 24, 2006 at 10:02 am | Permalink

    I really dig Firefox, but i only use it as a tool to my design work because i find Safari more stable to browse . Of course im referring to the mac version, when i had the pc, its version runs smothly and beautifully fast in comparison to os x’s.

  3. Posted June 28, 2006 at 7:38 am | Permalink

    your post IS GREAT… THANK!!!!!!!!!!!!!!!

  4. DH Spicy
    Posted July 26, 2006 at 4:11 am | Permalink

    I’ve recently switched over to Firefox… I find that the colour text picker provided with the Wysiwyg plug in, doesn’t work. Any ideas?

  5. Posted July 26, 2006 at 9:53 am | Permalink

    You will have to contact Firefox support or the Colour Text Picker Extension website or author. They can help you better than I can since I am unfamiliar with how Firefox Extensions work.

    I do recommend that if you have the Adblock Extension installed, try turning it off or uninstalling it to see if that helps. I’ve found a few minor conflicts when Adblock is enabled.

  6. Posted August 8, 2006 at 3:33 pm | Permalink

    Thanks for the tip. Internet Explorer also features an optional Developer Toolbar, but it isn’t nearly as powerful as this Firefox version.

  7. Posted August 11, 2006 at 3:59 pm | Permalink

    Look at me go, sliced one more time by Occam’s Razor (i.e., the simplest explanation for a problem is usually correct).

    I’ve been using the Web Developer toolbar for awhile, but for some reason I’d gotten it into my head that any edits I made to my blog’s code wouldn’t be permanent. So after figuring out how to successfully validate my page about a month ago, I proceeded to tweak various other elements and break the validation. For a week or so I’ve been feeling like an idiot, researching all the “how-to-validate-your-site” articles I can find, and still ending up going, “I understand all of that, but EXACTLY WHICH FREAKIN’ FILES do I edit???”

    *exhale*

    Thanks for the article, Lorelle. You’re a saint.

  8. Posted June 27, 2007 at 10:00 am | Permalink

    I have no idea if I will get a reply on this problem, but here it is:

    Problem: The WP template theme I am currently using is complete when I use IE6. However, when I use Firefox, it lacks colours and borders. Moreover, the boxes where the extra templates are located in the presentation section are blank when I use Firefox. It is as though the cell definition is missing.

    Can anyone help me so I can use the Firefox as my default?

  9. Posted June 27, 2007 at 12:20 pm | Permalink

    It looks fine in Firefox, but I didn’t dig far. It does have a few easily fixed errors in the HTML.

    There are no “cells” in modern web page design, by the way.

    Internet Explorer is a pain to design for. It requires a lot of browser specific hacks and fixes to make things work. Firefox works with the standard rules and requires few bug fixes. The problem is that if you design with Firefox, your web design works best, but you still have to put in a few things to instruct Internet Explorer on how to do things right when they don’t. I design in Firefox first, then fix for Internet Explorer. Painful.

    Check out Fixing Browsers: Bugs and Hacks for some specifics. Internet Explorer is “supposed” to not require hacks, but I found it still does and we have to take into account all those who haven’t upgraded.

  10. Raviv
    Posted August 9, 2007 at 6:46 pm | Permalink

    HI,
    I am a new to using WordPress and blogging in general. I have started a blog for the company I work in. My company web site is on a .net hosting. But my webhost has provided a MySQL db. I have installed WordPress 2.2.2 on the web server and it is running fine. IN the admin section, when I click on Presentation, it says Feature disabled. Everything else works fine. Can anybody tell me why this occurs? Your help is greatly appreciated
    Regards
    Raviv

  11. Posted August 9, 2007 at 9:54 pm | Permalink

    This is not the place to ask. You will need to ask in the WordPress Support Forums.

    It is my guess that your installation isn’t right and you will need to delete everything and install again, but they can give you better advice.

  12. Posted August 27, 2007 at 1:51 pm | Permalink

    i tried doing that …
    somehow it just didnt work …
    guess am not cut out to be coder of any sort …
    back to readymade templates…
    hehe …

  13. Posted November 25, 2007 at 9:22 pm | Permalink

    Hello.

    I’ve read your post and even though i have some of the tools you mentioned, i didn’t use them right.

    Also I have a list of other extensions you may like:

    - Firebug: It’s an extension that gives you total control over any aspect of your site. Javascript issues, Linking errors, HTML, CSS, DOM, Network tools (one is really great. It shows how much time takes every piece of code or images to load at startup, and have some bars to show the fastest or slower components). Cool.

    - L.O.R.I : An extension similar to the network minitool but only checks how much time in miliseconds to load your site. BTW Yours took 6.063 secs for 49.31KB of data to load.

    - Unicode Converter: Just great when you have to edit or translate pieces of code with writing in another language like portuguese or spanish. The accents or use of special characters made a mess on html or xhtml code, so the tool for fixing á to &acute works like wonder.

    Give them a try and you’ll be as fascinated as me.

    Silla!

  14. jo
    Posted January 21, 2008 at 8:14 pm | Permalink

    How do I change the font size of my wordpress web page title? I just want to make it a little bigger.

  15. Posted January 21, 2008 at 9:06 pm | Permalink

    @ jo:

    If you are using WordPress.com, and not using the CSS Extra paid option, there is nothing you can do. If you are using a full version or the CSS Extra in WordPress.com, you edit your style.css for whatever HTML tag your WordPress Theme uses. See CSS: Studying Your CSS Styles and Finding Your CSS Styles in WordPress.

  16. Posted January 29, 2008 at 6:16 pm | Permalink

    One of the things which make my live easier is the firefox aardvark extension. With this extension you have a visible check on all the elements of a web page. Meaning you can actually see the borders of page elements. This is very helpful to find that one broken rule in your css easily, or you can easy identify all the elements who belong together e.g. page-header elements.
    I am not related to the people behind the aardvark extension but i do think it should be in your shortlist.
    Link is: http://karmatics.com/aardvark/

  17. Posted January 31, 2008 at 12:57 pm | Permalink

    Thank you so much for this article. I’m learning to edit wordpress CSS and I could NOT figure something out until I read this article and used the Firefox tools, which I didn’t even know about before. You just put me out of my misery. Thank you!

  18. Posted February 11, 2008 at 3:53 pm | Permalink

    I am convinced that wordpress is the CMS solution for individuals with a very low budget…like myself.

    I have come across many themes that are OK but just need a personal touch. The constant trial and error using wordpress’s theme editor is just to tedious and circular.

    Thank for this tip ill be sure to utilize it.

  19. Posted May 6, 2008 at 10:02 am | Permalink

    Definitively FireBug is one of the best Firefox plug-in for web development. I’m using it for 5 months and I’m satisfied, besides some problems :) that firefox has with this plug-in.

  20. Posted May 17, 2008 at 4:35 am | Permalink

    Really a nice information for a web developer like us. thanks a lot.

  21. Posted June 23, 2008 at 4:18 am | Permalink

    Lorelle:

    I took your advice and downloaded firefox. Kicking and screaming I might add as I have been an IE diehard from the very beginning of time. But…I think I’m liking it. However…I am getting so frustrated…with editing mostly.. of my wordpress website. I like the side by side css editing. I made a few changes, clicked apply and went back to my site…nothing saved! aaaannnnddd! my site looks completely different in firefox vs explorer..aarrgh!

  22. Posted June 23, 2008 at 9:49 am | Permalink

    @ BloggerNewbie:

    For the most part, Firefox meets web standards. If you have been designing for Internet Explorer, you have been using hacks and IE specific designs. Those don’t work in Firefox as you don’t have to play as many games with CSS in order for it to work. IE7+ is supposed to be “hack free” but that is not true and the world hasn’t totally switched yet. Designing first with Firefox makes the world a better place, then adding hacks for IE makes the rest of the folks happy. :D

  23. Digi
    Posted October 2, 2008 at 6:50 pm | Permalink

    Speaking about the divcubs theme by askgraphics, yes it has an about box over the sidebars, but you try and find where to customize it, spent hrs looking and there is NO documentation to help you find it either, eventually gave up because it was simply to frustrating. I am sure they did this on purpose as they want 250.00 to customize their themes!

  24. Posted October 2, 2008 at 9:18 pm | Permalink

    @ Digi:

    I’m sorry about your experience with a paid Theme. There are very few WordPress Themes with documentation, especially paid ones, as that is how they make money.

    I’m not familiar with that Theme, but this might be helpful: Finding Your CSS Styles in WordPress.

  25. Posted December 4, 2008 at 9:50 am | Permalink

    I never knew I could do that with Edit CSS (I have had the Web Developer plugin forever, but never used it). This is awesome for working on my sites at work where I can’t copy files to the server ever few minutes.

  26. Posted August 26, 2009 at 9:02 am | Permalink

    Help? I need a totally blank theme.

    I have an html website for our Rotary Club. I have embedded “iframes” in several of the webpages. I want to use Word Press as a content management tool to enable the committee chairs to post information into the “iframes” on their respective webpages.

    Problem: I don’t want the headers, sidebars, footers, logos, etc that come with the Word Press themes that I have found to date. I am looking for a simple, blank theme that presents a blank page that can be “published” to the “iframes” embedded into my html pages.

    Help?

    Thanks.

    • Posted August 28, 2009 at 8:08 pm | Permalink

      Please, save yourself and the world and do not use iframes. There are many minimalistic WordPress Themes. Or use something like the Sandbox Theme and design it yourself. Any Theme can have all the colors removed, as well as the images. BUT DON’T hurt yourself by using iframes. They are rarely crawled by search engines and are not web standard for accessibility. Why not check out my article series on the Blog Herald about converting a newsletter into a blog, which applies to a group such as yours: Newsletter to Blog: Turning Article and Reports Into Blog Posts

  27. Steve Balliett
    Posted April 7, 2010 at 12:09 pm | Permalink

    Hi Lorelle,

    Appreciate you being such an authority on WordPress. I have a problem. When viewing my website in IE8, the h1 title is in a rectangular box, which has a red x in a white box. I’ve been scouring the internet trying to find a solution. Only Firefox gives it the best view. Do you have any suggestions?

    Thank you for taking the time to help me.

    Sincerely,

    Steve Balliett,
    San Diego, CA

    • Posted May 7, 2010 at 2:52 pm | Permalink

      Welcome to the joy of Internet Explorer. However, if the h1 title is in a white box with a red X, that means that the image cannot be found nor red by Internet Explorer and that there is a code issue that is blocking the image from appearing. Why it might be in Firefox, I have no idea. Validate your site’s code to see if there is something wrong that might be causing this.

  28. jinu
    Posted December 7, 2012 at 11:50 pm | Permalink

    Really a nice information for a web developer like us. thanks a lot.

  29. Posted July 29, 2013 at 4:39 am | Permalink

    Thanks in support of sharing such a fastidious idea, post is pleasant, thats why i have read it entirely


42 Trackbacks/Pingbacks

  1. [...] Lorelle VanFossen, in this article suggest that using Firefox and the Web Developer extension (and a couple others) is the secret to successful theming. I would generally agree. [...]

  2. [...] The Secret of Successful Editing of WordPress Themes [...]

  3. [...] I’ve learned a few tricks about blogging on the web that may help you while you blog. There are plenty of tips and tricks for designing web pages with web browsers, but these are tips, tricks, and techniques for helping you handle your blog post research, writing, and posting. The process of generating content on your blogs. [...]

  4. [...] The Secret of Successful Editing of WordPress Themes [...]

  5. [...] The Secret of Successful Editing of WordPress Themes 講的好像用firefox改才是王道,好吧,我會試試-該網站也提供了關於wordpress和wordpress.com的小技巧(但不知是不是我家網路問題,開的有點慢) [...]

  6. [...] The Secret of Successful Editing of WordPress Themes [...]

  7. [...] Into web page design and development, then you should check out some powerful web design and development extensions that make editing your Theme or web page layout a dream. Want to keep track of the weather, a habit of mine now that I live temporarily in Hurricane Alley, then Forecastfox, the weather report extension, becomes a life saver, literally. Performancing Firefox Extension works similar to Ecto and allows you to easily post to your WordPress and other blogs with only a few clicks from within your browser while viewing other web pages. There are a ton of useful Firefox extensions that help you become a powerful blogger as well as Internet user. [...]

  8. [...] Kendi temanızı oluşturmak isterseniz doğru adres burası. * http://lorelle.wordpress.com/2005/09/08/the-secret-of-successful-editing-of-wordpress-themes/ 2.1′de yer alan Tema Tag ‘larındaki değişiklikleri tek sayfada gösteren ve Wp ile [...]

  9. [...] Kendi temanızı oluşturmak isterseniz doğru adres burası. * http://lorelle.wordpress.com/2005/09/08/the-secret-of-successful-editing-of-wordpress-themes/ 2.1′de yer alan Tema Tag ‘larındaki değişiklikleri tek sayfada gösteren ve Wp ile ilgili [...]

  10. [...] Related link: Lorelle’s “The Secret of Successful Editing of WordPress Themes“ [...]

  11. [...] Firefox for wordpress June 8th, 2007 Started editing css of this theme in firefox. Via this page. Very [...]

  12. [...] http://lorelle.wordpress.com/2005/09/08/the-secret-of-successful-editing-of-wordpress-themes/ [...]

  13. [...] The Secret of Successful Editing of WordPress Themes [...]

  14. [...] Editing WordPress Themes [...]

  15. [...] When you get your theme you may want to tweak it a bit to your likings, so that it doesn’t look as much as everyone else who has the theme. To do this you can change the html and CSS of your blog to certain parts you want to look different. If your new at this you can learn steps you can apply immediately Here and if your using WP you can find more useful tips Here. [...]

  16. [...] Editing WordPress Themes [...]

  17. [...] Editing WordPress Themes [...]

  18. [...] Editing WordPress Themes [...]

  19. [...] I read a review from The Secret of Successful Editing of WordPress Themes « Lorelle on WordPress. Well I should probably check into this Firefox again. After all, Lorelle knows what she is talking [...]

  20. [...] http://lorelle.wordpress.com/2005/09/08/the-secret-of-successful-editing-of-wordpress-themes/ [...]

  21. [...] Secrets of Successful Editing of WordPress Themes [...]

  22. [...] The Secret of Successful Editing of WordPress Themes « Lorelle on WordPress [...]

  23. [...] The Secret of Successful Editing of WordPress Themes [...]

  24. [...] The Secret of Successful Editing of WordPress Themes [...]

  25. [...] Secrets of Successful Editing of WordPress Themes [...]

  26. […] The Secret of Successful Editing of WordPress Themes […]

  27. […] The Secret of Successful Editing of WordPress Themes […]

  28. […] The Secret of Successful Editing of WordPress Themes […]

  29. […] The Secret of Successful Editing of WordPress Themes […]

  30. […] The Secret of Successful Editing of WordPress Themes […]

  31. […] The Secret of Successful Editing of WordPress Themes […]

  32. […] The Secret of Successful Editing of WordPress Themes […]

  33. […] The Secret of Successful Editing of WordPress Themes […]

  34. […] The Secret of Successful Editing of WordPress Themes […]

  35. […] Secrets of Successful Editing of WordPress Themes […]

  36. […] The Secret of Successful Editing of WordPress Themes […]

  37. […] The Secret of Successful Editing of WordPress Themes […]

  38. […] see a “preview” copy of your post as it would actually appear on your blog. Using Firefox Web Development Extensions you can easily run your post through several validation tests from the Web Development toolbar. If […]

  39. […] The Secret of Successful Editing of WordPress Themes […]

  40. […] The Secret of Successful Editing of WordPress Themes […]

  41. […] The Secret of Successful Editing of WordPress Themes […]

  42. […] The Secret of Successful Editing of WordPress Themes […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,164 other followers

%d bloggers like this: