WordPress 2.1 Part 3 of 3 | Customizing and Extending WordPress
Tim February 24th, 2007
This post is part of a series:
WordPress 2.1 Part 1 of 3 | Installing from scratch
WordPress 2.1 Part 2 of 3 | Digging into the Administration Panel
Wordpress 2.1 Part 3 of 3 | Customizing and Extending WordPress
It’s the time you’ve all been waiting for (all 3 of you). The final edition in our series on WordPress 2.1. We’ve gone through a complete installation from scratch, worked out all the details of administrating our blog, and today we will start adding in themes and customizing both the user interface and admin panel with plugins and widgets. If you thought WordPress was looking good before wait till you see the shiny coat of paint we’re coatin’ on it now.
Requirements:
- WordPress 2.1 installed and working
- FTP Program
1. We begin again with our default installation of WordPress and the lovely Kubrick theme. Well okay, Kubrick is nice but a bit bland so our first goal is going to be the addition of a new theme to our blog.
2. The WordPress Theme Viewer is a great reference to begin your search for a good theme. Not only do they have hundreds of themes already uploaded with screenshots, but you also have the ability to narrow your search based on the criteria that meet your needs (for example color choice, # of sidebars, position of elements, etc).
3. By clicking on a theme you can find more detailed information from the author as well as a larger screenshot of the default view. Lookin’ purty indeed.
4. WordPress Theme Viewer also gives you the ability to test a demo of the install on their hosted site before downloading. They’ve included every possible element that could come into play so you can see how the design would work with different headings, sidebar elements, block quotations, images, and comments.
5. To use this demo we will download the zip file to our desktop and unzip the folder somewhere on your computer.
6. The next step is to upload the theme via FTP to your theme directory which is located in the “wp-content/themes” folder on your web server.
7. Once that is done you simply navigate to the Presentation page of the Administration Panel and our theme will be listed among others in the theme directory. Quite simple really.
8. By selecting the new theme we immediately see the AJAX call notify us that the theme is active and the screenshot and information are bumped to the top of the list.
9. Let’s take a view at our blog now with the new clothes on:
Well hot damn! That’s lookin pretty good. Ok, even I’ll admit it’s not the most attractive theme, the colors are pretty horrible and there’s some issue with the right sidebar causing an error. But it’s a start, and there’s plenty more themes to pick from in the future. For now I’ll deal with the current look.
10. Now that we’ve changed up the design of the blog our next step will be to changeup some of the elements on screen. Normally this would be a difficult task of editing php files to suit your needs but the good people at Automattic have come up with a plugin architecture called WordPress Widgets that will give us a drag-and-drop functionality for altering the contents and position of elements on screen. Your theme will have to support it so make sure you downloaded a theme that specifically mentions “Widget Support”.
11. So we download the zip file for WordPress 2.1 and unzip it to our desktop. Yes, this is getting repetitive, no we don’t care.
12. And now we upload the widget folder to the plugin directory which is located in the “wp-content/plugins” folder.
13. Upon navigating to the Plugin page of the administration panel we see not only the Widgets plugin but also a few widgets included in the package for us to try out.
14. To activate it simply click the activate button next to the plugin. I’m also going to activate the del.icio.us plugin to use for links in the sidebar.
15. To use WordPress Widgets we need to go back to the Presentation page of the administration panel where we would normally see the Theme’s and Theme Editor links. A new option for Sidebar Widgets. It is here that we can modify the default sidebars with something different. The interface is incredibly easy to use by simply dragging different elements on to the different sidebars. From RSS feeds to Blogrolls and custom html calls there are many widgets available by default. You can also do a google search for even more widgets available for download from different sites that are now supporting the architecture.
16. As you can see I’ve chosen a variety of different widgets to fill out both sidebars, including the del.icio.us widget for managing links. To edit information on a given widget (for instance in this case I will need to add my del.icio.us username and information so it can retrieve the links) just click the editing button that looks like a tiny box to the right of the widget name. Add all the details you need and then simply close. By saving your widget structure with the lower-righthand button all information in the widgets along with the current layout will be stored and immediately viewable on the web.
17. Now let’s take a look a look at our widgetized blog. It’s really starting to get there in terms of pimpitude (and I don’t use that word lightly I might add).
18. As I final step for customizing our blog I want to introduce you to another aspect of plugins that is not seen on the actual blog homepage. There are a ton of plugins that simply offer functionality to the administration panel and the one I’m most fond of is Firestats. While not a full-fledged analytics component, it gives plenty of on-demand details about referrer information, operatings system, browser type, and location right inside the WordPress Dashboard.
19. Let’s go ahead and download Firestats to the desktop, unzip it, and upload it to your plugin directory. You should be a pro at this now so I’m rolling it all into one step. Hey don’t blame me, if you can’t take the heat get out the kitchen.
20. To activate the plugin we navigate to the Plugin page of the administration panel and click activate beside the Firestat plugin.
21. Now if we navigate back to our Dashboard you will notice that we have a new panel on the sidebar for recent pageviews and visitors as well as a link to the Firestats page.
22. By clicking on the Firestats link I can get an in depth view of just how popular my new blog really is.
23. As an added bonus just to show you the functionality of the plugin I’ll give you a sneak peek at the DemoMarks main Firestats page (what, you doubted the idea that I actually use the products I review?). Pretty nice stuff for a basic overview of current information. Keep in mind that Firestats is not a substitute for an analytics package and I still recommend Google Analytics on the free end and Mint as a low cost solution for more detailed information about the what, when, and where of your blog audience.
We’ve now taken you from a completely blank slate to the installation, administration, and customization of WordPress. This blogging platform has managed to pack quite a punch in terms of sheer extensibility and the amount of theme and plugin content currently available for it. WordPress is also beginning to add more and more features such as Pages that provide CMS functionality to it as more WordPress users move away from using it solely as a blogging platform. Version 2.1 provides a nice visual face-lift along with a host of security updates and I can safely recommend it for anyone considering jumping into the cesspool of the blogosphere (and I mean that as a term of endearment).
