Tutorials

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 the rest of this entry »

Using the Members plugin with Meteor Slides

One of the new features in Meteor Slide 1.4 that needs covering in more detail is support for the Members plugin. Using Members, you can control which roles can create and edit slides and slideshows, and which can change the slides settings.

By default slide posts use the same capabilities as blog posts and only admins can change the slide settings. So admins, editors, and authors can create new slides, and contributors can create slide post drafts. This is straightforward, but not exactly ideal.

Most of the time I only want the admin and editor to create and edit slides. And what if you want to give an editor access to the settings? This is where Members comes in handy. Read the rest of this entry »

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 the rest of this entry »

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 the rest of this entry »