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).

Well well well, nice to have you back. If you’ve been tuning into our programming here at DemoMarks you would know that we’ve got a 3 part Demo of WordPress 2.1 going on. Yesterday we covered Installation of WordPress from Scratch. Today we are tackling the Admin interface of WordPress. From writing and managing posts and pages to plugins, links, and presentational elements, the administration panel has a lot of functionality built into a pretty clean and simple package. Let’s take it for a test drive.

Requirements

• WordPress 2.1 installed on a Hosting Service
• FTP Program

1. We begin right where we left off, our default install of WordPress 2.1. Assuming everything went smoothly you should see this basic blog with a “Hello World” post, all done in a Kubrick theme.

2. To jump into the administration interface we will choose the “Site Admin” link under the Meta section. We now get a lovely redesigned logon page that asks for the username and password of the individual (you did write those things down right?).

3. Now if you’re like me you don’t even remember what you had for dinner last night, much less what that default password was they gave me, so I’m going to test out the “Forgot Password” function and see what it has to offer. By typing in my username and associated email address I can receive a new password via email, a pretty handy tool for the forgetful like me.

4. Now that I’ve been reminded of my password I’m finally able to log on which brings me to the homepage or “Dashboard” of the administration panel. Here I get the latest news about WordPress as well as recent posts and comments. Once blogs start linking to me I would also see them listed on the sidebar. This page is basically a catch-all for basic information about your blog.

5. Moving right along the menu I choose “Write” to see what’s in store. Here you can see how the menu works. There are sub-items within the main navigational menus and by default the first sub-item will be chosen (in this case “Write Post”). It seems to me the functionality lends itself better to being a drop-down menu for easier navigation, in fact there’s a plugin that will do just that, but for now I’m keeping it like this.

You’ll notice a lot going on here but nothing that isn’t intuitive enough. We’ve got a basic editor for creating a post with the standard elements to format it. We’ve also got a section where we can assign and add new categories for our post. This is kind of like tagging and keeps track of what areas your post involves. We can also disable comments, apply a password, and adjust timestamp information through the sidebar items. Below the editor we have the option of uploading files to include in our post. Most of the time you will not be using these extra features but it is quite helpful to have them on hand when you really want to start getting into the guts of your blog and pimping it out (which we’ll be covering in Part 3 of this demo).

6. Pages in WordPress are similar in many aspects to posts and as you can see the editing screen is identical. “So what’s the difference,” you might ask? Well calm down, I’m getting there. Pages are seperate from the main blog and can be linked on the homepage. So say you want a page about yourself, or a contact page. You would create one here and unlike a post, it would move off the screen as more posts come in, it would be linked on your blog and remain there. To see what this looks like check out the contact link on DemoMarks, this is a WordPress Page.

7. The Manage section allows us to see the latest posts and find older ones in case we need to go back and edit the information or delete a post for any reason. You will also use this page to remove comments, mark for spam, or approve them.

8. Managing Pages then is pretty obvious. If you need to edit a page you created or remove one you can do so here.

9. You can also Manage your Category list here, editing the names of the categories, adding new ones, and removing others. Categories are very similiar to tags and can be used to call up all posts of a specific topic. I highly recommend getting used to adding categories to your posts to make browsing the archives even more interesting.

10. To facilitate the transition from an older blog you may have kept, WordPress has the option to import your information from a number of competitor blogging platforms as well as another WordPress blog. There is also an option to export your blog if you later need to do that.

11. The comments section is completely dedicated to managing, editing, and administrating the comments left on your blog. You can approve new comments, delete old ones, and search for comments in these pages.

12. Your Blogroll is a list of links for blogs that you read or support. Any websites that you enjoy could be listed here (they don’t have to be blogs). By default we get the full list of WordPress Developers, and hey, if you love them as much as I do maybe you’ll want to just keep them on your list. If not, go ahead and delete them. No one’s watching anyway.

13. Another feature of the Blogroll I love is the ability to import OPML files from your RSS reader. This allows you a quick way of adding a ton of links that you visit frequently and enjoy.

14. Under presentation we find the lovely themes. WordPress used to include quite a few themes but these days you need to download them on your own and upload them to the theme directory (which we’ll be doing in Part 3 of this Demo). Choosing a new theme is as easy as selecting it from the list. Your current theme will always show up top.

15. You’ll notice after selecting your new theme that WordPress pops up the notifications instantly via AJAX. The new theme is now listed at the top.

16. Let’s take a look at how my blog looks now. Pretty nifty, eh? There are tons of themes available online, many open source and free for the taking. Go nuts!

17. WordPress also gives you the option of editing the styles and php associated with your theme from right inside the administration panels. These updates will be live on your site once you click “update” so make sure you know what you’re doing or you could cause some real damage to your blog. For the advanced users this interface will save you a lot of time.

18. WordPress’ plugin architecture is a huge strength to their blogging platform. Here we see the default plugins which vary from the extremely useful Akismet comment spam filter to the extremely rediculous Hello Dolly lyrics generator. Much like themes, WordPress leaves you to download them and FTP to the plugin directory. Once that is done they will show up on this list where you can activate them.

19. I’ll go ahead and activate a plugin for you to see. Once again the plugin is loaded in the background and an AJAX call notifies us that the plugin is active. Certain plugins will also have an options page located under the last menu item for making changes to the plugin.

20. Again WordPress appeals to the advanced user by allowing editing of the plugin’s php contents from within the admin interface. Unless you’re a php guru don’t go messing around with this, and if you are a guru then why are you reading this?

21. This Demo is getting quite long but fear not, we’re in the homestretch. Onward! The user page lists all people that have registered on your site. If you require someone to register in order to comment this list could be quite long. If you don’t there is probably only the admin user here. You will also notice the ability to assign roles. You could add a user and make them an editor for instance and they would have access to all Posts and Pages but not the presentational aspects of the interface. This is extremely handy for using WordPress as a Content Management System when creating websites for clients who won’t need all the extra features in the administration panel.

22. The Profile Page gives all the regular options for giving information about a person. This is also the page you would go to if you need to change your password to the extremely difficult to remember default WordPress gave you to something much more secure like “password” or “123″. You can also choose to use the visual editor here for creating new posts. For those without a handle on html the visual rich editor is more of a WYSIWYG interface with little to no code showing in the editing box. Again this is helpful not only for some users but also for content management systems.

23. Our last top menu choice is Options which contains a variety of information for editing how your blog works. The first page will give some basic title information and allow you to change the time and date settings.

24. With the writing options you have the ability to adjust how you edit posts. There is also a very nifty feature to allow one to email posts directly to your blog. Just make sure the email address you assign is very hard for anyone to guess. Last thing you want is more spam clogging up your blog than there already is.

25. In the Discussion tab you can regulate whether comments need approval and blacklist certain words and phrases. This is not a catch-all and you should still use a comment spam blacklist and filter of some sort (there are plenty of plugins available that do this) in addition to any specific regulations you set here.

26. One of my favorite options is the ability to choose how your links within your blog are displayed. Direct links to content on your blog are known as “Permalinks” and WordPress allows you to choose from few preset variables as well as create a custom permalink based on many different options. This helps your blog from having a link that ends in 12345-abc.asp or something of that sort. Clean and simple links also improve Search Engine Optimization for spidering your site.

That wraps up our demo of the Administration Panel. As you can see there are a ton of options to customize your blog to your heart’s content. Tomorrow we will also be covering the third part of our series on WordPress with even more options to effect the design and function of your blog. WordPress excels best in it’s extensibility through plugins, themes, and direct editing of dynamic php content. To fill, manage, and customize your blog, WordPress has created a tool that does all this with ease and options for the novice and guru alike.

To kick off our reviews here at DemoMarks I’ve decided to take WordPress 2.1 for a test drive. WordPress is a blogging platform developed by Matt Mullenweg that has continually gained in popularity for the wide array of plugins and themes, large community base, and ability to customize every aspect. Many web developers are choosing WordPress as a content management system for client websites and, as you may have already noticed, DemoMarks is built on WordPress.

While installation is far from difficult, users who have no web hosting have the option of using WordPress.com’s integrated blogging platform that cuts out the middleman and allows anyone to sign up for a blog with hosting provided by WordPress. However, this demo will cover the installation of WordPress on your own hosting service. Part 2 will cover navigation of the administration panel and Part 3 with explore the customization options available to you using WordPress to make your blog unique.

Requirements for this demo:

• Hosting with PHP and MySQL support
• FTP Program

1. Ok, let’s get started. Our first step is going to be to navigate to http://www.wordpress.org to download the necessary files.

2. From the main navigation menu we choose the “Download” button to get the latest version of WordPress. From there we will choose the appropriate file. I’m going to download the .zip file since I have unzipping software installed on my computer.

3. After downloading the file to the appropriate folder (or desktop if you wish) open it with your favorite software and unzip it somewhere on the computer.

4. You should now have a folder called “wordpress” somewhere on your computer with this set of files stored inside.

5. Open up your ftp program of choice (I’m a fan of Filezilla). Connect to your host through FTP and upload the entire contents of the “wordpress” folder to your website. You have the choice of putting the wordpress files in a subfolder (http://www.yourdomain.com/blog) or directly into the root folder.

6. After you’ve completed the upload you can open up your web browser. At this point if you clicked on Internet Explorer please close it and get Firefox. You’ll thank me later. Once you’ve navigated to either your homepage or the subdirectory depending on what you chose when FTPing the files, you should see a screen like this;

If you are running into problems, verify with your hosting service that PHP and MySQL are supported (We recommend Dreamhost). Also make sure the directory you uploaded the files to was empty.

7. It’s time to configure your WordPress installation. For all intents and purposes the web-based configuration manager should suit your needs so go ahead and click “create a wp-config file through a web interface.”

You’ll see some basic information on what you need to continue. At this point if you haven’t already, create a MySQL database and consult your hosting company for help. If you’re already set up and ready to go click “let’s go!”

8. Input all the necessary information into this next page. Beware Dreamhost users, you will need to change “Localhost” to reflect the actual hostname of the database. Again you should be able to get all this information from your hosting company or alternatively if you’ve set up web hosting on your own you’re probably hoping I’ll stop talking and move right along.

9. Assuming you got the database connected properly you should be greeted with this message:

Go ahead and click “run the install.”

10. Are you sick of hitting the next button yet? Quit whining and click “First Step.”

11. You get the chance to give your blog a name and tie it to an email address for communication. Fill those fields out and click “Second Step.”

12. Surprise! You’re done. The installation actually doesn’t take very long at all. We now get an admin username as well as a default password. This password will be sent to you by email but write it down just in case. You will want to change this through the administration panel later.

13. To make sure everything worked, go ahead and navigate to your main webpage where you installed WordPress. You should see the default installation which will look a lot like this: