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.

This is as close as you can realistically get to a WYSIWYG experience like Dreamweaver when you are building something as complex as a WordPress theme.

Firebug Video Tutorial

In this Firebug screencast I talk about Firebug and other inspectors, show you how to use Firebug to inspect a site, tweak CSS, fix JavaScript bugs, and build faster sites. Watch the video below or read on for more info.

Read More

Creating your own Page Templates

On many WordPress powered sites, the primary focus is static pages rather than blog posts. I have built some sites that only use pages and don’t even have a blog. For these types of sites that are using WordPress “as a CMS” rather than a blogging platform, the theme file that generates the pages becomes that much more important.

Using this same page template file on each page could make a site very homogeneous and be a headache to customize. But it is easy to create your own page templates and apply them to specific pages on a site. Read More

Add a theme’s CSS style to the visual editor

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

My outpost on the Net

I have had my own website for over six years, starting in January, 2004. Like so many geeks, operating my own site has been an experimental project where I learned as I went.

Since 2004 I have switch domains and domain registrars once, switched webhosts three times, and went through several design incarnations of my site.

Learning the fundamentals

Those first few designs were crude affairs that, thanks to many hours in Photoshop, looked fine but were poorly coded using just HTML and relying far too heavily on sliced up images and inappropriately used tables.

As I mastered HTML and learned to use it correctly, I started to figure out CSS and incorporate that into my designs.

For the first 3 or 4 years as I was learning and experimenting, my site was being used as a portfolio for my photographs, illustrations, or other graphics. Sadly, I didn’t have much actual content on my site and it was rarely updated.

What can I say, managing the content of your site and making regular updates is a struggle when you have to manually edit the code for every change!

Choosing a platform

I had been tinkering with Drupal, Joomla!, PHP Nuke and other content management systems for different projects and I knew that I needed a CMS for my site to help keep it current.

After trudging through the convoluted template files and obtuse control panels of these “full-fledged” content management systems, I knew I wanted a CMS that was fresh, nimble, and easy to use.

So two years ago I switched my site to WordPress. Sure, there are other decent lightweight CMSes out there. But they are either commercial products, or suffer in obscurity. WordPress is just about the only publishing platform of its kind that is free of charge, Open Source, and has a large, active community of users.

Joining the conversation

WordPress has made it easier to keep my resume and portfolio updated, and I have gotten some good feedback through the comments in my portfolio, but I still haven’t been actually blogging with WordPress.

For the first couple of years that I was on the Net, I was mostly a lurker.

I really had no interest in getting into a flame war like the nasty comments on YouTube unless it is with close friends who won’t mistake my nihilism and sarcasm for some kind of personal attack. Shouting into the wind also seemed like a waste of time—or maybe I just don’t like crowds—so I didn’t bother posting on sites with hordes of comments like Slashdot.

But over the years I’ve warmed to the idea of the Net being an interactive medium and started to de-lurk a bit.

I’ve joined a few quieter forums and started to comment on some of the blogs that I read. I even started “micro-blogging” on Twitter.

As I began to participate in conversations, I noticed that my comments were growing far too long and that I could never convey an idea in a mere 140 character tweet.

So I redesigned my site yet again and decided to start blogging.

Going all meta

My blog is going to stick with the topic of web design, primarily about WordPress. I’ll be writing about the themes and plugins that I am developing, projects that I am working on, and various meetings and conferences that I go to.

I am a volunteer on the WordPress Support Forums, where I try to answer at least one question every day. I often run into the same questions consistently, or questions that are hard to answer in a basic forum post. So I am also planning to make some screencasts and blog posts with in-depth tutorials that address these problems.

If these topics are of interest to you, subscribe to my feed or follow me on Twitter.