css | Josh Leuze

Inspecting WordPress With Firebug

I have been using WordPress for about six years. Different themes, plugins, and code editors have come and gone through this huge learning process as I have developed hundreds of websites, but the one constant for me has been the Firefox add-on Firebug.

It’s the only tool that I have stuck with throughout those years because I have been able to learn so much with Firebug and build projects so much faster by using it.

If you have never used a web inspector like Firebug before, what it does is allow you to bridge the gap between the source code and the rendered out page in your browser. You can look at each bit of code interactively and see how it fits into the page, adjusting the code in the inspector and seeing the updates live in your browser.

Add a theme’s CSS style to the visual editor

September 17, 2010 / Josh Leuze / 9 Comments

One of my favorite features in WordPress 3.0 is the ability to add an editor style to themes which is loaded in the visual editor of WordPress.

Without an editor style, content in the visual editor has minimal styling and generally does not match how the content looks when it is published on the site. By adding an editor style to a WordPress theme, you can get the content you are managing in the backend to visually match the content on the frontend, creating a more WYSIWYG experience for the end user.

Adding this feature to a new or existing WordPress theme is very simple. For this tutorial, I’ll use iNove, a popular theme from the theme directory that I’m using for a current project and need to update. Read More