Wordpress is arguably the most popular and the best blogging platform out there. You might have installed Wordpress on your site, but you might be scared to experiment with Wordpress worrying that you could break your site and Wordpress.

Experimenting is one of the best way to learn new things and if you break your site, you probably might not want your visitors to see the fault as it might leave a bad impression. So, it is necessary to have the ability to learn WordPress and try new themes, plugins and other items without putting it online where people can see.

So, the best solution is to install WordPress locally on your computer. It will save you quite a bit of time since you can just put your files inside your WordPress folder without having to upload it to FTP. You can do anything you want with WordPress without a worry which surrounds you when you put it online. The possibilities are endless. Here is a step-by-step instruction on how to install WordPress in localhost using XAMPP. I hope it will become a great use to you.

1. Go to the official XAMPP website. We are going to use XAMPP as it is one of the best Apache distribution containing MySQL, PHP and Perl. It is very easy to install and use.

2. Select your operating system and which format you want to download. You can either choose a zip or a exe format. I would recommend the .exe file. There are also portable version such as XAMPP lite, but using XAMPP is just fine for what we need. There are also add-ons available such as Tomcat, but it but they’re not necessary for our use, may be something you want to experiment with at a later date though!

3. Open the installation file and you will be presented with a window. In, the destination folder, choose your destination. “C:\” is recommended. Click install to start the installation (Won’t take more than a minute or two!)

4. When the installation is almost done, an MS-DOS window opens, You might think you have to type a bunch of codes, but that’s not the case. This window just helps you set your preferences. The answers are just yes and no.

First question it will ask you is whether you should add a desktop shortcut. Type “y” for yes and “n” for no.

5. The second question it will ask you is whether you want to locate the XAMPP paths correctly. Type “y” for yes. I would recommend saying yes because XAMPP usually locates the paths correctly for you, much easier!

6. The third and last question it will ask you is whether you want to make XAMPP portable or not. You can choose which ever one you want, but i would recommend saying no if you aren’t going to be making use of the portable functionality (We won’t be in this tutorial) because it makes it easy for us to see the path such as C:\ and easier in the browser.

7. After this is done, XAMPP starts configuring and you will see this appear in the window. Press Enter and XAMPP will have been correctly installed in your computer.

8. Go the the destination folder you gave (such as C:\) and look for “xampp-control” and open it. Now that XAMPP installation is complete, it is time for us to start using it.

9. You should see this open up. This helps us specify which services we want to start.

10. Click start on “Apache” and MySQL. They are services required for running WordPress. XAMPP uses port 80 as a default port, so if you have any issues, try making sure no other programs are using the port (Skype occasionally tries it). It will say “Running” next to the modules if they are started. The others don’t need to be started.

11. To check if XAMPP is working, open your browser and type “http://localhost/” and you should see this. Yes! we are good so far. Choose your language for the list.

12. After that, you should see a page saying that you have successfully installed XAMPP on your system. Hoora!

13. Now that we have successfully installed XAMPP, it is time to get WordPress. Go to wordpress.org and download WordPress. Extract the folder.

14. Now, the steps get critical. Make sure that you do these steps carefully or the installation of WordPress probably won’t work. Go back to XAMPP folder (C:\xampp) and go inside a folder called “htdocs”.

15. This is where we are going to put the WordPress folder. Copy the wordpress folder that you extracted and put it inside the “htdocs” folder. Note: Make sure that when you copy the WordPress folder, not the folder above it such as “wordpress-2.9.1″

16. We need a database for WordPress so that we can install it in our computer. Go to your browser and go to localhost (http://localhost/) and click on phpMyAdmin and you should see a page like this.

17. We need to create a new database for WordPress. Look for the “MySQL localhost” section and you should see some boxes, and on top it says “Create new database”. That is what we need.

18. On the box on the left, your will enter a database name. You can name it whatever you want. I will call it “wordpress_test”. Then, on the next box, your will see a list of options. Scroll to the end and select “utf8_unicode_ci”. We are going to use this option because it supports expansions and ligatures. Click Create.

19. You will be notified that the database “wordpress_test” has been created.

20. Now, go inside xampp/htdocs/wordpress (for example C:\xampp\htdocs\wordpress) . Then, we need to setup up wp-config. This is to configure wordpress to fit our database, username etc. Many people are familiar with this step.

22. Rename the “wp-config-sample.php” to “wp-config.php” so WordPress will recognize your config file (Depending on how you’ve set up Windows, the .php may or may not be displayed. If wp-config-sample doesn’t show it visibly, don’t add it on to the wp-config when you rename it). Open the file you have just renamed (wp-config) with your favorite text editor (e.g. Notepad, not Microsoft Word!).

23. Now you will need to change these parts of the wp-config.

24. So, inside the DB_NAME to the right you will see ‘putyourdbnamehere’. That is where we will put our database name. Delete the putyournamehere (without deleting the apostrophe) and put “wordpress_test” (remember that is what we called our database in phpMyAdmin).

In the same way, put “root” in the DB_USER part. Then on the next part (database password), leave it blank, since we haven’t set a root password for our MySQL.

We will also not change any part of the DB_HOST because localhost is what we want and it is already localhost. This is just a test site, so no other configuration is needed here. Now, we are done with the configuring. It will be easier to understand what I am saying by the illustration below.

25. Save and close the file (wp-config.php). Next, open your browser and go to “http://localhost/wordpress/”. Hooray! It worked. You will see this screen and once again, many people are pretty familiar with this process. Put your blog title and email and click “Install WordPress”

26. Success! You will be notified that WordPress has been installed. You will get your username and random password. Copy the password and click “Log in”.

27. You are now in the login page. The username is admin and paste the password. Don’t worry about memorizing the password as we will change it.

28. Success again! We are in the wordpress dashboard. The very first thing you might want to do is change the password. On the red bar, click on the “Yes, Take me to my profile page”.

29. Scroll down and change your password, then update profile.

30. Yes, now you are all set. When you go to http://localhost/wordpress. You should see your blog with the default theme Kubrik.

31. You are done. There are a few other things I would like to remind you. In the XAMPP Control Panel , Apache and MySQL have to be running. You don’t need FTP to change stuff in wordpress. Just go inside xampp\htdocs\wordpress and change everything there. For example, if you want to add themes, just go inside wordpress\wp-content\themes and put your themes there.

32. There you go. That wasn’t too hard. You can now master WordPress without worrying about breaking your website and you will also save some valuable time. Go celebrate!

Then, come back and you are free to experiment with WordPress any way you like. Try out new posts, themes, plugins and explore the wonderful world of WordPress.

If you have any problems or want to ask a question, feel free to comment below. I will try my best to answer your questions.

I would also appreciate it if you commented what you are going to use WordPress in localhost for. I hope you enjoyed this post!

In this review, we’re going to work through a website (FreePixels.com) as a case study, looking at its design and seeing what we can learn from it and what we could improve on.

So to start off, let’s take a look at Free Pixels. They offer almost 4000 extremely high quality images, for free. All you have to do is leave the small watermark in the corner, or create your own link back.

That makes it a very handy site for bloggers! Now load up the site in a new tab, and let’s start our case study!

The very first thing I look for is the logo and slogan. The logo is right where you’d expect it, but no slogan. The strange part is that a near-ideal slogan, “Download Free Stock Photos and Images” is sitting just further down the home page.

My first step would be to move that line up into the header, so it will be helpful for people who arrive on inner pages (instead of just the home page, like we did).

It will also clear up a little space around the main intro image, which we’ll be talking more about next!

Some Clutter We Can Remove?

Now that we’ve removed one title, I’d also think about removing the “Random free photos” title from the homepage. Most users will assume that if they want the image in the thumbnail, they should click it. And we can always add it back in later if we change our minds.

Continuing on our homepage clutter cut-down, my next victim would be the navigation controls on the image slider. The slider is a great idea as it shows a number of photos at a viewable size, but the animation speed is more than fast enough for the controls to be unnecessary, and if they want to pause it, users can click the image to see it in full.

The reason I would definitely take these out is that you work so hard to define a focal point in your images. Those controls are made to be easily noticeable (They’d be pointless if they weren’t), but when the purpose of the slider is to show off photos, we want no distractions to those photos.

On the individual image pages (e.g. here), we could space out the text around the image, i.e. have more space between the breadcrumb navigation, the image, and the text under it.

Another option for that page would be to make the mid-sized photo a direct link to the full-sized photo. That could even let you remove the dark “Download full sized image” button (Or even just make it slightly less grabbing, as a lot of users may well just try to click the photo).

One easy way to test the theory would be to sign up for one month ($9) at Crazy Egg. Then, add their tracking code to a few of your most popular images. At the end of the month, you’ll be able to see if people like me have been trying to click the image directly. If so, it would be worth adding the link for them.

How Do We Find Photos?

There are nearly 4000 images and a limited amount of text on the site, so navigation definitely isn’t simple. The core method of browsing at the minute is through the categories table on the homepage, or the popular tags cloud.

The categories table is a cool feature because it gives some interesting stats (e.g. The photos have had nearly 5 million views; clearly it’s not a small site!). The only thing I’d work on with the table is the category link styles. Could we find a way to highlight the main categories slightly more than the sub-categories? (e.g. Make the main links a darker shade of grey, or remove the underlines on sub-categories).

The trouble with this table is that it’s on the homepage, and would probably be too large for individual pages. The breadcrumb navigation on inner pages does help with this a lot, but some further options wouldn’t hurt.

And the trouble with the tag cloud is that although it’s on every page, the tags it shows are exactly the same on every page. That means that photos which aren’t covered by those specific tags are being left out.

I would do two things to help with navigation:

• Make the search bar more prominent – There already is a search bar set up (at the very bottom of the page), or we could swap to a Google search bar if it’s been of poor quality. With 4000 photos, all well tagged and named, a lot of queries are going to find photos.

If you have trouble with a lot of searches returning empty results (Because it can only search the tags, there’s no other textual content), we could even try suggesting on the page that users use more general terms.

• Related images thumbnails – Underneath each image on its individual image page, I’d display thumbnails to related images (Exactly like on the homepage). This means that if a user clicks on, say, an image of a beach, they’ll instantly see other options as well without the hassle of having to look for them.

  In terms of how to set this up, you could do it all via the tags. Just pull in images with at least one tag in common (preferably more).

Licensing

When hunting for images for a commercial project, licensing is an extremely important issue. You can’t risk using an image you aren’t certain you’re allowed to use.

The home page says the images are free, but the footer says “Copyright © 2005-2010 FreePixels.com – Download Free Photos & Images. All Rights Reserved.”

“All Rights Reserved” isn’t something you’d expect to see on a free photo. Because I’ve been reviewing the website, I came across the Terms of Use link in the top right, but a lot of users will miss that because there are a lot of links up there, they’re overshadowed by the Google ones below, and they aren’t very easy to read.

Even after finding that page though, it’s still a lot of information to read through. Now, if someone was really set on using an image, you’d expect them to go to the effort, but a lot of people won’t (And I’m sure plenty will just take the image and hope for the best!)

But to help encourage people to download, I’d do 3 things:

• State the license which applies to the photo, on every photo’s page (Just build it into the template, no need to add it manually each time). That solves the confusion with the footer line.
• Summarize the license (possibly under each photo as well!), e.g. “You may use this photo for personal or commercial use, but must retain a credit notice”
• Are there any better known licenses that suit your purposes? After a quick read through the TOU, it seems like a Creative Commons license would do the exact same thing. By using a CC license, you take away all license worries for any user who has heard of them before (Quite a large number of users by now, particularly amongst an audience who would be looking for photos), and you get the added bonus of being seen as very unrestrictive.

Possible Branding Changes?

Everything I’ve talked about above has been tweaks for the current site to get even more out of it. There are two large changes I would consider making, or at least experimenting with:

• Color scheme – There is a lot of green on the site. The header, borders around the page, and all sub-headings and links are green. On a normal site, that’s no problem, but on a photography site it could be an issue.

  On the web, a photo can’t be viewed just by itself. It’s viewed in the context of the whole webpage (and monitor!). That means that the green on the rest of the page is impacting each of the photos. In effect, would you hang all of these photos in a green frame?

  I’d look into taking out a lot of the color (not necessarily all of it though!), and letting the images provide the colorful aspects of the page. Neutral backgrounds will allow this much better.

  The reason I say that I would “experiment” with it is that it will require a lot of design changes (e.g. headings will need a new way to stand out), and if Free Pixels has been using that green for a long time, loyal readers will identify the site with it.

  One way around this would be to do it in steps, and to keep some of the green, e.g. instead of the whole header being green, why not have the “freepixels” logo in a green box of its own, and the rest on the white background?

• Commenting and Twitter – These really depend on how much time you have to put into the site. Comments on the photos allow a community to build, but also to see what photos are the most popular with users. Honestly though, the real reason I would add them is that the photos are great and it’s nice to hear what people think of your work!

  As for Twitter, the attraction there is that Facebook is already set up to publish regular links to your site. That misses out on a lot of the social attraction of these sites, but it does make for a decent way to subscribe to updates. Twitter could be set up to work in the exact same way with no extra effort to maintain. It would give users another option to subscribe to the site by.

Conclusion

To sum up, I think the contents of the site are fantastic. The images are top quality and it’s great that anyone can use them free of charge!

The functionality of the site is cool too (like the statistics), and there are a lot of nice touches I haven’t focused on too much in the post, like the hover thumbnails in the sidebar.

With some core changes to the website, particularly the navigation and possibly even the color scheme, it could really be great.

Now it’s up to the readers, you’ve all heard my thoughts on the website. Do you agree? How would you approach things if you were in charge of Free Pixels?

I don’t know what to do.

The iPad came out last week and, well, I want one. But that’s a standard side-effect of a Steve Jobs keynote; you always end up wanting one.

There’s been a lot of talk about shortcomings of the device, and a lot of the points have merit. Enough merit to stop me from getting it though?

In this article, I’ll be working through all of the pros and all of the cons I can see so far. Hopefully by the end, I’ll know what to do.

(PS – Just for the record; I’m a Windows 7 user on a HP desktop. I also have a Toshiba laptop that will be getting Ubuntu 9.10 installed on it as soon as I can get round to it. The only Apple device I own is the iPhone. Should be a fairly unbiased review… I hope)

Why Would a Web Worker Want an iPad?

The one thing Steve Jobs said again and again was that it felt great to have the internet in the palm of your hands. Okay, so he’s definitely biased, but let’s assume for a minute that there’s something more to it than that.

Checking emails, replying to blog comments, reading RSS feeds, researching for new articles, communicating with clients.

Aside from an optional mail client or the odd simple app to help with these things, all I need for these tasks is the internet. And when you think about it, that’s a fair chunk of a web worker’s daily tasks. If the iPad really did make those easier (or even just more pleasant to do), that’s a major positive.

Another reason for liking the iPad is that it makes for a decent eBook reader. I don’t own a Kindle or any other eBook reader (though the E Ink of the Kindle would put this to shame), but I do end up buying or downloading quite a few PDF eBooks to my desktop.

Reading on the desktop, or even a laptop, just isn’t comfortable though. I have the whole of The Unlimited Freelancer printed out on a shelf next to me, simply because I’d never get around to reading it online (And the rainforests will probably never forgive me for that…)

The iPad is a far, far nicer alternative. I’m still a fan of regular, old physical books for fictional reading, but when it comes to factual books, eBooks are cheaper and benefit more from the possibility of web links in the text. It would also be a fairly nice boost to anyone interested in self-publishing, if Apple open up the iBook store to anyone.

The last thing to mention in regards to work is the potential for a graphics tablet. At the minute, it looks like there’s nothing you can do in this area, but I’m sure it won’t take some clever app developer long to fix that.

Even something simple like drag and drop wireframing would be pretty cool to do by touch!

What about when you Aren’t Working?

Laptops and desktops are emphatically one-man shows. You can have two people sitting around a monitor, but only one person is holding the mouse.

That means only one person is in control. Think how many times you’ve said “oh wait, wait. Scroll back up a bit! Yep, just there!”

With an iPad, you just reach out and touch the screen. No-one has to be in control.

And given the light weight and size of it, it will be much more comfortable to hold between two people.

My girlfriend and I are always loading up the laptop and looking at countries we’d love to visit. The iPad just seems a far nicer way to do it.

And what about when it’s just you there? The biggest plus side then is that it’s not your laptop or your PC. As web workers, we live on our computers. We have to, it’s how we do our work.

But what about when you want to switch off the work mode and have a break? It’s hard to do that at your work computer; you always end up reading emails or going on Twitter or doing something else related to your blog. The iPad is so much simpler and so different to your work machine, there’s the small chance you might actually end up taking a break!

And you never know, the limitations in what you can do on it (No Photoshop, no code editors etc.) may actually come in as an advantage at this point.

Of course, if you do end up doing as much work on it as I suggested earlier, that scuppers that plan.

So what are the Downsides?

There is one looming giant of a shadow on this thing at the minute; is it comfortable to hold?

The demo videos really didn’t make this look appealing. You basically need to either lie down with your knees up (I’m not a sloth, I do like to get out of bed during the day!), or have a humongous hand span (I think my fingers will simply fall off I hold them like that all day…).

Whatever accessory solves that problem is going to make a fortune.

Of course, that’s not the only downside. Apple have been extremely limited in what they’ve added to this device (In short, they added screen space). For the most part, that would be okay, except for a few major downsides.

• Sharing files – How do I sync files between my iPad, laptop and desktop? The laptop and desktop are perfectly taken care of by Dropbox. With the iPad I’d need to either sync it via iTunes (Horrible to do, iTunes is a beast on Windows), or email everything.

  It looks like I’ll be sticking to webapps for now, no matter how nice the touch screen Keynote app looked (Especially to someone stuck with PowerPoint…).

• No USB – This is heavily related to the above point, but it’s a real shame that we can’t link the iPad to anything but iTunes. Steve never stopped going on about photo viewing on it, so why can’t we hook our cameras up to it directly? (Can’t really picture myself saying “Let me show you these pics! I just need to upload them to my computer, pull them into iTunes and then download them back to the iPad!” It’s not worth the effort.)
• No multitasking – This has been a long running argument in the iPhone, and Apple’s defence there has always been “battery life.” That’s fine. Truth be told, I’d probably rather have my phone last a full day with no problems than have it able to multitask.

  The iPad has 10 hours of battery life though! And I’m expecting to do a lot more work on it than I do on a phone. My laptop (only a few months old) averages around 3 – 4 hours of battery life, so even if multitasking cut the iPad battery life in two, it would still beat the laptop.

  The most annoying part of the multitasking lack for me is that it really impairs the research capabilities. If you find some great info on a webpage, you clip it into a text editor, or Evernote, or some other application. Shame that won’t be so easy on the iPad.

• No webcam – I’m not the world’s biggest user of a webcam, but they’re handy to have. I suppose the benefits of a webcam on your iPad would be lacking though because you’d need a table to prop it up on anyway so you may as well use the webcam you already have.
• No Flash support – Given the huge iPhone popularity, a lot of major Flash content providers have set up alternative viewing methods for iPhone users (Like Vimeo videos playing in a standard video format). That covers all I need Flash for, but for people who love their Flash games, this is still a major flaw.

  To those that it annoys though, you may want to read an article over on Usability Post; Flash Is Never Coming to the iPhone.

So What Should I Do?

Clearly there are a lot of upsides and downsides to this.

A good rule of thumb with Apple products seems to be to wait for version 2, and I definitely want to play around with it in an Apple shop to see what it feels like to use first. But all in all, it still looks pretty damn cool.

What do you think? As bloggers and freelancers, is the iPad a worthwhile investment? Or is it just a new toy?

I suppose the best thing Steve Jobs did for that decision is give me 60 days to get over the post-keynote “I want!”

Color is difficult to get right. There’s a near infinite number of combinations out there, but only a few that will actually look right for your project. Because it’s so important to a design’s success, it’s worth taking a little time to work out your palette.

There are a lot of online tools to help out with this. They all vary slightly to suit designers with different preferences on how they work. We’ve collected together 25 of the best here, with a quick overview on each to help you decide which to try.

Website Color Match

Color Match is a website tool that shows you how to do color matching and also giving guidance in choosing the best color. It also displays the HTML code for the color, which saves you time in your design work.

Toucan Color Palettes

There are various tools available from Toucan Color Palettes, such as an image editor, color editor, audio editor, effect editor, vector editor and image markup. Toucan Color Palettes helps you to inject color into your design.

The Color Wizard

Color Wizard is a very cool tool, you submit your own base color and it automatically returns matching colors for the one you selected.

The Color Tool

Color Tool is dedicated to the display of color combinations, changing CSS styles, and displaying many powerful and unique color and font tools. It lets you view and experiment with thousands of color combinations.

Slayeroffice Color Palette Creator

SlayerOffice Color Palette Creator shows 10 shades of the base color (located in the top-left), very useful for monotone designs.

Pro Color Palette Software from Colourlovers

Pro Color Palette includes a photo tool to extract colors from an image, an advanced color picker and color theory wheel to give you your inspiration, and it lets you save the colors you’ve been working with.

Pictaculous

Pictaculous is easy to use; just click a button and upload your image. It then automatically builds a palette for you based on that image.

Palette Man

Palette Man’s uniqueness is in its limitations. It will only allow you to choose a color from the limited set of web-safe colors. It will then help you work out combinations using others from that palette.

Kuler

Adobe Kuler is a free web app for themes that can inspire your design. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of them.

Kolur

Kolur is a simple tool for you to browse color palettes. Designs displayed in the gallery go beyond the generic 3 colored dots, and attempt to portray the possibilities in palettes (As you can see from the image above!).

Instant Color Schemes

Instant Color schemes uses an interesting method of generating the corresponding colors for you; no color theory at all. Instead, it grabs related images from the web and picks the color suggestions out of those.

Infobound Color Schemer

Infobound Color Schemer is a simple tool to help you experiment with various color schemes for your next web or print project. Anyone who uses Photoshop often will know color picker this interface very well!

Hex Color Scheme Generator

Let’s say you want to use red in your design but you don’t know what will work with it, just pick the red color and Hex Color Scheme Generator automatically comes out with 3 matching colors for you.

CSSDrive’s Image To Colors Palette Generator

CSSDrive is another tool for grabbing colors from images. They also run one of the biggest CSS galleries around, and there’s no reason why you couldn’t upload an image from that gallery to see the original palette and how it was used.

Color Wheel from Colors On The Web

The Color Wheel randomizes 6 million colors, simply spin it and it comes out with three matching color ideas for your design. This is for when you’re really stuck for ideas!

Color Wheel Color Calculator

Color Wheel Color Calculator helps designers select HTML, RGB, or CMYK colors and identifies color harmonies and schemes.

ColorToy 2.0

ColorToy 2.0 is a flash based color scheme generator and picker. It generates complementary color schemes based on your inputted color values, or randomly (which is much more fun!).

Color Schemer Online v2

Color Schemer Online v2 has 16 boxes which contain matching color ideas, simply pick a color and it automatically generates matching colors for your art work.

Color Scheme Designer

Color Scheme Designer provides color space conversions, better preview, enhanced scheme creation system, unique scheme IDs and permanent URL of the scheme. That’s a lot of great features, with one of the nicest interfaces on this list!

Color Palette Generator from DeGraeve

This color Palette Generator generates a color palette based on an image; upload the image you want and it grabs the color scheme for your art work.

Color Hunter

Color Hunter is a palette gallery where the palette is displayed next to the image it came from. It’s a great way to browse because you can see both the scheme, and a great example of what it can produce!

Color Explorer

ColorExplorer is a free set of tools that include color matching and libraries of color. It’s well developed and has another fantastic interface.

Color Combos

With Color Combos, you can find the perfect color combination for your design. It allows you to select and test the website color combination.

Color Combinations Tester

What I like about Color Combinations Tester is that it fills the screen with your previews. Most of the others give colors in very small boxes.

Daily Color Scheme

Daily Color Scheme is also known as the Every-Day Color Resource, because every day they bring you a fresh color scheme. It’s like daily inspiration from a design gallery, but purely for colors! (NB – This site hasn’t been updated in quite a while now, but we thought the idea and design were cool enough to be worth showcasing anyway!)

Conclusion

That’s our roundup of the top 25. Are there any we’ve missed out on though? What tool do you use to help with your color schemes, or do you just experiment with your design until you get it right?

An events list is just what you would expect; a list of upcoming events, ordered by the date they are taking place on (Not the date they were written on!).

In this post, we are going to create our own events list that will let us add events simply by writing posts and assigning them to an “Events” category. It can’t get much easier than that!

This is exactly what we set up for a recent client of ours, American Majority. You can see their full events listing here, or solely the events in one state here (And on both pages, you’ll see the corresponding list in the sidebar as well).

There are a lot of calendar plugins out there, but there are two reasons this method may be better:

• Full power of WordPress posts behind you, i.e. users can leave comments, and you can embed any kind of media you like in your post, even signup forms.
• More usable for your readers. They can see event titles and descriptions instantly, and click the ones relevant to them. Calendars normally just show the date events are happening on (Because they have limited space in the sidebar), making you have to click on everything.

A bonus is that it never hurts to have one less plugin!

Where calendars shine is when they occupy a full page (i.e. They have room to give event titles!), and when you run a massive number of events (More than 1 each day, e.g. daily training session times for a golf coach etc.).

Create Some Events

The first thing we will do is to create some event posts for us to display later:

• Create a new post, and give it whatever title and content you like.
• Add the post to a new category called “Events” (Can be any name you like, but Events makes sense!)
• In the custom fields section (Beneath the main content area), create a new custom field with a “Name” of “Date” (Without the quotes), and a “Value” of the date for the event, in the form: mm/dd/yyyy 00:00:00

• Publish the post.

Setting the time is optional, but it would be useful if there are ever two events on the same day.

Build the Query

The great part part of this is that we can do all of the work with WordPress’ query_posts tag, so only relevant posts will be pulled from the database.

Let’s go through making the query, step by step.

1 – Grab Our Events Posts

First of all, let’s just pull in a certain number of posts from the Events category. In this case, we’ll take 5 (A nice number for a sidebar, but you could make it 20 or more in order to make a full events listing page).

<?php query_posts('showposts=5&category_name=events’); ?>

2 – Ensure the Posts Have a Date Set

As well as being in the right category, let’s make sure we’ve remembered to set the date of the event.

<?php query_posts('showposts=20&category_name=events&meta_key=Date); ?>

3 – Don’t Show Any Events Which Are Over

If the event date has already passed, we don’t want to list it anymore. We do this by getting the current date in PHP, and then comparing it with the dates in the posts.

<?php // Get today's date in the right format
$todaysDate = date('m/d/Y H:i:s');
?>
 
<?php query_posts('showposts=20&category_name=events&meta_key=Date&meta_compare=>=&meta_value=' . $todaysDate); ?>

4 – Order the Events So the Soonest is First

We do this by ordering the posts by their meta_value (i.e. the date), and setting the order mode to lowest first.

<?php // Get today's date in the right format
$todaysDate = date('m/d/Y H:i:s');
?>
 
<?php query_posts('showposts=20&category_name=events&meta_key=Date&meta_compare=>=&meta_value=' . $todaysDate . '&orderby=meta_value&order=ASC'); ?>

We now have our 5 posts, corresponding the next 5 events in the list.

Display the Events

We can use a regular WordPress loop now to format the posts in any way we like.

For example, the following would display a list of the events with their excerpts beneath.

<ul>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
	<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
	<p><?php the_excerpt(); ?></p>
</li>
<?php endwhile; else: ?>
<li>Sorry, no upcoming events!</li>
<?php endif; ?>
</ul>
<?php wp_reset_query(); ?>

The last line puts our page query back to normal (i.e. the true content of the page), so we won’t break things further on!

(Optional) Organize Your Events

You may wish to organize your events into different groups. Thankfully, this is very easy to do. We just add a tag!

For example, on American Majority we split the events up by state, and then each state displayed only its own events (And a central page listed all of the events from every state).

Let’s say we tag a state with “Texas”, then on the Texas page, our new query would simply be:

<?php query_posts('showposts=20&category_name=events&meta_key=Date&meta_compare=>=&meta_value=' . $todaysDate . '&orderby=meta_value&order=ASC&tag=texas'); ?>

All Done!

That’s you up and running now! And because we used the WordPress loop, what you can do with the posts is extremely flexible (e.g. Adding thumbnails, or publishing an RSS feed of them), the exact same way you would with any other set of posts.

Have you ever set up an events list before? How did you do it? With a plugin or a different method?

With 2010 started, the new decade has begun. But how did we get to here?

In this article, we’re going to look at the major events from each year in the past decade that have helped develop the web design industry. Try keeping a tab on how many affected you, I bet you’ll run out of fingers quite quickly!

2000

The decade started off poorly for web industries. In the previous 2 or 3 years, the Dot-Com Bubble was a time of rapid growth for companies moving to trade online. In 2000, the bubble burst and many web companies went bust.

One success story from the middle of all this was a simple bulletin board project. The open-source phpBB system was first made publicly available in July, and today is the most popular free forums system around.

2001

b2, a primitive blogging system was created under the GPL. If you have a look at its first ever post, you’ll find it’s still characteristic of the default post in its successor; WordPress.

In May, the W3C propose the first Working Draft for CSS 3. The first work on CSS3 was started in 1998, and over a decade on, it’s still a work in progress.

In August, what would arguably be the most hated piece of software in the decade was released; Internet Explorer 6. At least now, we can start to say goodbye.

2002

Jonathan Abrams founded Friendster in 2002. This popular social networking site was to be the forerunner of countless similar sites, including MySpace and Facebook.

The RSS 2.0 specification was released in September. This format (And the later spin-off, Atom) allowed content to be shared independent of formatting, and for it to be manipulated in any way the user chose.

2003

During 2003, David Heinemeier began work on Ruby on Rails. This open-source webapp framework has grown to massive popularity and the PHP vs. Ruby on Rails debate is a famous one now.

Two years on from the creation of b2 and things weren’t going too well; the core developer had vanished and updates were non-existent. Enter Matt Mullenweg with his thoughts on forking the development, and WordPress was born.

In June, Jeffrey Zeldman published Designing With Web Standards (Now in its 3rd Edition). This book helped shape the web design industry by providing a compelling justification for companies to work with standards based coding.

  A List Apart regularly publishes some of the best articles around. One example of this came in 2003 when Patrick Griffiths published his Suckerfish Dropdowns article on creating a light-weight, standards-compliant, accessible dropdown. In a time of DHTML, this was a godsend, and was later followed up by Sons of Suckerfish.

In August, several eUniverse employees (including the world-famous Tom) got together and set up a Friendster-inspired website; MySpace. eUniverse’s massive userbase would give this site the headstart in the early years, but its future adversary wouldn’t be long in coming.

In October, a lonely student at Harvard set up Facemash, a site for comparing pictures of 2 other students to see who looked better. Although quickly closed down, it would be the forerunner for what happened next…

2004

In January, our not-so-lonely student took the next step and created Facebook, which Alexa today ranks as the number 2 site in the world.

Also in the beginning of 2004, 37Signals released Basecamp, a project management tool. 37Signals and their products have since become the poster child for simple design (Not to mention an online success story!)

On April Fool’s Day, Google is well-known for taking part in the jokes over the years. In 2004’s April Fool’s, they announced a free mail service with 1GB of storage. Obviously a joke, Hotmail only gave 2MB…

And on a related note, Gmail was the first example of AJAX being used in a major application. Since then, it’s been used in countless other websites.

Towards the end of the year, Version 1.0 of the “Phoenix Project” was released. By this point though, it had been renamed to the much more familiar, Firefox.

2005

In April, Mike Industries released sIFR, a technique for bringing richer typography to the web via Flash.

Also in April, Adobe acquired Macromedia for a massive $3.4 billion. Industry standard tools like Fireworks, Dreamweaver and Flash would now be incorporated into the Adobe Creative Suites.

In October, Safari became the first browser to pass the Acid2 test. The Acid tests were developed to test browser support for web standards and to help encourage all browsers to use the same standards.

The first ever An Event Apart kicked off in Philadelphia in December. One of the top design conferences in the industry, there have been 17 more events since, with 4 more planned for 2010.

2006

In January, Opera Mini received a worldwide release. It was created for mobile browsing and claims to be the world’s most popular mobile browser.

Also in January, JQuery was released at Barcamp NYC by John Resig. Since then it has become the most popular JavaScript library in use today.

Come February, Yahoo launched YUI2, a framework for making webapp development easier. YUI3 was released in September 2009, but version 2 still enjoys massive popularity.

In March, Jack Dorsey published the first ever Tweet. Approaching the end of the decade, the “twttr project” has finally reached profitability (with vowels included).

In October, Google purchased Youtube for $1.65 billion. That story has inspired countless other web startups.

Microsoft FrontPage was first released in 1997 and aside from horrendous table-based layouts with flashing marquees, the FrontPage Extensions necessary to use features of it on web servers were a nightmare. In December 2006, Microsoft discontinued the product.

2007

By 2007, MovableType, a proprietary competitor to WordPress, was being left behind as WordPress’ community grew and grew. To help grow their own community, they released a GPL version of MovableType, but still much more restricted than WordPress.

In early June 2007, Adobe released Adobe AIR. This runtime environment allowed developers to create desktop apps using web technologies like AJAX and Flash, to run on any platform (Windows, Mac, Linux).

And of course, in June 2007 Steve Jobs presented a rather interesting keynote. An iPhone, you say?

In November, Amazon launched a new book reader, the Kindle. As web developers, we’re used to our content being available on different mediums, so the Kindle and other eBook readers are an interesting development to watch.

2008

In March, the 960 Grid System was released by Nathan Smith. This CSS framework was designed to let you quickly mock-up web layouts using only HTML.

Since Firefox’s original release in 2004, it had been steadily gaining popularity. A single day in June was to showcase this; on the 17th June, ‘Download Day’, Firefox 3 set a world record by being downloaded over 8 million times in 24 hours.

The iPhone had been released for just one year now and already had a massive following. With the release of the app store in July, the iPhone’s future dominance was all but guaranteed.

In the Autumn, the HTC Dream became the first available phone running Google’s Android operating system. Trumped up as an iPhone killer, HTC and other Android phones may not have lived up to that name, but it has certainly gained a massive market share.

In December, Google Chrome became publicly available. This web browser is based on WebKit but optimized to put speed first, and with a minimal interface for the user.

2009

BuddyPress, the WordPress MU-based social network extension was first released in April. It has had strong development even in the short time since then and now packs a lot of features.

In June, Microsoft’s Bing officially went live. Microsoft’s presence in the search industry had been steadily on the downfall, but since Bing and its massive marketing campaign, it has at last seen some growth.

Also in June, Less CSS was released by Alexis Sellier and Dmitry Fadeyev. It let’s you write CSS code with variables, operations and nested rules, then compile it into regular old CSS.

In July, the W3C confirmed that when the XHTML 2 team’s working charter expired at the end of the year, it would not be renewed. This allows more resource to go towards the development of HTML 5.

In October, Yahoo provided a somewhat fitting end to the decade with the closure of Geocities. Geocities was a lot of people’s first taste of publishing to the internet. Web publishing has come a long, long way since the days of Geocities’ glory in the late 90s.

End of the Noughties

So much has happened in the past 10 years. I doubt anyone in 1999 could have predicted where we would be now. It has to make you wonder where we’ll be come 2020!

If you had to choose one single event that affected the web design industry the most, what would it be?

For me, the web standards movement (Embodied in things like Jeffrey Zeldman’s book, the CSS Zen Garden and many other standards supporters) has had the most profound effect. Curious to hear what your choices will be!

PS – Paul Anthony from Web Ireland has written up a similar post, check it out if you want to see even more events from the decade!

Flash isn’t something you often see in use on a blog (aside from the WP-Cumulus tag cloud plugin). The majority of our animations and other effects tend to be done with JavaScript.

When Trenty Fox of Flashmint.com got in touch with me a few days offering to give away some of their products in a competition (Which we are doing at the end of this post!), my initial reaction was that Flash wasn’t a big thing for bloggers though.

What changed my mind was when I rolled over the Christmas logo on their site (Not going to tell you what happens, just go try it out, it’s cool!). It’s a small touch, but it made a big difference for me.

With this post, I’m going to fire out some other ideas for how using Flash in small doses could add to your blog. Let me know what you think, or where you use it!

Ideas for Flash In a Blog

The images here all link to the files on Flash Mint, just click to see them.

A Countdown Timer

Do you blog about upcoming releases? Whether it’s a new movie or Apple’s next tech conference, an animated countdown is a useful addition to your post, easy to add, and something other bloggers in your niche probably don’t have.

That said, do turn off any ticking sound effects…

Your Own Video Player

Video sharing sites like YouTube and Vimeo are great, but if you’d prefer not to have their branding on your videos, you can use your own video player instead.

Headline Tickers

An animated ticker can be a great way of scrolling through your headlines in a small space. You could even pull in an external RSS feed of news updates for your niche.

The screenshot above shows 3 different variations of tickers, but there are hundreds out there. There’s bound to be one to match your design!

Podcast Audio Players

Again, there are a lot of mp3 playing scripts out there. They can range from very minimal with only the essential controls, to full-featured players like the one pictured above.

Advanced Photo Galleries

Flash can be used to make some incredible photo gallery viewers. The one above is animated in 3D and looks extremely sleek. It’s a great way of showing off a large set of photos.

Novelty Navigation

The links in the screenshot above function exactly like the Mac Dock. The icons enlarge as you mouse over them, making it a very cool way to scroll across (They also have tooltips that open up to give a full description).

Your primary navigation isn’t something you want to risk this on, but it could work well for a portfolio of your work.

Image Panning

Image panning is a trick often used in clothes shopping sites to let you view a product in detail, without sending you a massive image which fills your whole screen. You just drag the cursor over the picture to scroll around the different parts.

For bloggers, the use is the exact same as for those shopping sites. Let your readers see full quality images easily, even if they’re on small monitors.

Competition – Win Flash Files!

Flashmint.com have kindly offered to giveaway files of your choosing to 3 winners here.

Let’s try to make this useful for each other. To join in the competition, just check out their site and leave a comment here with a link to whatever your favorite file is.

In a week’s time, I’ll pick out the 3 best finds and the winners get to keep them! (Only stipulation is that the max value per file is $100). Also, you’re welcome to choose any of their full Flash templates, or even WordPress templates!

Hopefully we’ll end up with a list of ideas for great Flash usage!

So what are you waiting for? Let’s go find some great scripts! Or is Flash just for for you? I’d love to hear your thoughts on Flash vs. JavaScript in the comments!

Being that most of us are working against multiple deadlines at one time, we need to be able to save ourselves as much time and headache as possible, and help prevent ourselves from unnecessarily re-inventing the wheel. That is why frameworks are such a time and life saver in the development arena. (Actually, frameworks are simple time savers regardless of whether or not you are facing a deadline.)

These standard code containing frames come with the basic ‘shelves’ that you need for your project, you just have to now fill these ‘shelves’ however you see fit…and possibly tweak some of their settings.

Whether you use your own or one of the pre-made frameworks listed below, you will need something to prevent you from having to write the same basic code project after project. It would be like writing sheet music and having to draw the lines on the paper yourself before you started piling on the notes.

So that is where frameworks come in the picture. They cut out the perpetual repetitiveness of placing all the code that accompanies your web based WordPress projects.

All of the themes included here are completely free to use for both personal and commercial projects. For a more in depth look at what WordPress Frameworks are, see Wordpress Theme Frameworks Explained.

Child Themes

One of the benefits of using frameworks is that they allow for the creation of child themes.

WordPress child themes inherit the functionality of the parent framework of your choice. They generally only contain two files, a style.css file and a functions.php file along with any image folders, script folders and include folders necessary for the child theme.

To create a child theme simply upload the parent framework to wp-content/themes then create your css file beginning with the following code. Make sure that the “Framework Name” is the same as the name of the folder of the parent framework.

/*
Theme Name: Name
Theme URI: http://themesite.com
Description: A description of your theme goes here
Author: Author Name
Author URI: http://authorsite.com/
Template: Framework Name
Version: 1.0
*/

Tutorials and Links

• How to make a child theme for WordPress: A pictorial introduction for beginners
• WordPress Child Theme Basics
• Exploring WordPress Frameworks and Child Themes

Thematic

Thematic is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins, and a whole community behind it. It’s perfect for beginner bloggers and WordPress development professionals.

For a much more bells and whistles kind of package for your framework needs, Thematic is an awesome, fully loaded WP framework for a wide range of users. Naturally, with all the extra features and included goodies, Thematic comes with a bit of a learning curve, but once you get the hang of it, you will find almost all your framework needs right at your fingertips. Not to mention the resourceful community that has sprung up around this framework ready to help out when and where they can, provides some peace of mind.

Thematic Features

• Fully Search-Engine Optimized
• Includes a sample WordPress Child Theme for rapid development
• Ready for WordPress plugins like Subscribe to Comments, WP-PageNavi, and Comment-license
• Fully compatible with All-In-One SEO and Platinum SEO plugins
• Multiple, easy to implement, bulletproof layout options for 2, or 3 column designs
• Modular CSS with pre-packaged resets and basic typography
• Dynamic post and body classes make it a hyper-canvas for CSS artists
• Editable footer text—remove the theme credit without harming the theme
• Options for multi-author blogs

Breakdown

Ease of Use: 2/5
GPL Licensed: yes
Power of Framework: 4/5
Number of Wiget-Ready Areas: 13
Documentation: 5/5

Tutorials and Links

• ThemeShaper Forums
• Thematic Child Themes
• A Guide to Customizing Thematic

Hybrid

Hybrid is a user-friendly, search-engine optimized theme framework, featuring 18 custom page templates and 9 widget-ready areas, allowing you to create any type of site you want.

Speaking of frameworks that have an awesome community behind it, Hybrid is one such framework where you can find extremely in depth tutorials and documentation to assist you all from the community supporting it. Want bells and whistles, too? Well, Hybrid has those as well. Along with a flexibility to be adapted to whatever type site you are looking to put together. Hybrid is another high ranker among framework users.

Hybrid Features

• Search-Engine Optimized
• Print CSS File Included
• 14 custom page templates
• Advanced action and filter hooks
• Basic Theme and Footer Settings
• 20+ Language Packs

Breakdown

Ease of Use: 2/5
GPL Licensed: yes
Power of Framework: 5/5
Number of Wiget-Ready Areas: 9
Documentation: 5/5

Tutorials and Links

• Why I created a WordPress theme framework
• Theme Hybrid Forums

WP Framework

WP Framework was created to serve as the starting point in WordPress theme development.

It accomplishes this by providing you with commonly used functions and features that modern WordPress themes should have. So when you start a brand new WordPress project, using WP Framework you’ll already have the basic functionality set so you don’t have to worry about mundane tasks like creating the loop, or recreating all the standard template files.

Let us ditch the learning curve for just a moment while we discuss the next WordPress framework, WP Framework. Catchy title, no? Anyway, WP Framework takes us back to basics so that you can get started without all the elements that often complicate the other frameworks. Even though these complications are often related to the customization factor of your project.

WP Framework Features

• Search Engine Optimized
• Modular CSS includes ( reset.css, base.css, screen.css )
• Favicon & iPhone webclip placeholder images
• Basic print.css Stylesheet ready for printing web documents
• jQuery enabled + screen.js (an empty .js file pre-loaded and ready)
• 3 sample layouts

Breakdown

Ease of Use: 4/5
GPL Licensed: yes
Power of Framework: 3/5
Number of Wiget-Ready Areas: 1
Documentation: 4/5

Tutorials and Links

• WP Framework Forums
• Developing A WordPress Theme Using The WP Framework

Whiteboard

Whiteboard is a very basic framework of Wordpress. It is designed to speed up the process of designing and coding a Wordpress theme by eliminating the time spent on Wordpress’ back-end PHP that is used in every theme.

Whiteboard is clean, noted, and compact (only 76KB in size – unzipped!). It includes all the standard PHP tags and PHP files needed for a Wordpress theme – plus a few extras.

Once again, for the minimalist developer who likes to start with little more than the basics to build on, Whiteboard may just be the framework you are looking for. Priding itself on its relative lightweight and usability this framework focuses on providing the basic WP PHP code for the back end without the excess that tends to gum up the works and slow things down for the user.

Whiteboard only includes the basic back-end PHP, a CSS reset and a list of all of the DIVs included. One of the most basic frameworks available.

Whiteboard Features

• Categories Page Template
• Archives Page Template
• Pagination Posts
• Socialization Links
• A list of all the included divs

Breakdown

Ease of Use: 5/5
GPL Licensed: no (licensed under Creative Commons BSD)
Power of Framework: 2/5
Number of Wiget-Ready Areas: 1
Documentation: 1/5

Tutorials and Links

• So you want to create WordPress themes huh?

Sandbox

Sandbox is a powerful tool available for WordPress theme designers and developers. The Sandbox can be easily designed just with CSS, so beginners will feel comfortable not bothering with PHP.

Experienced developers and designers can accomplish almost anything with minimal work, thanks to the rich, semantic markup and profusion of classes dynamically generated by the Sandbox.

The next framework I wanted to take a look at is Sandbox. This framework has strong appeal to two different classes of user. Those profficient developers who can comfortably manipulate the PHP, and therefore, they can easily tweak this framework to make it fit their needs. And those beginners who would rather just focus on the CSS end of the framework, and leave the PHP as written. Either way, this dynamic framework is an awesome starting point.

Sandbox Features

• Full Widgets compatibility
• Valid XHTML 1.0 (Transitional)
• The basis for your own GNU GPL-licensed theme
• You can totally customize it with CSS alone—no need to bother with other files.

Breakdown

Ease of Use: 3/5
GPL Licensed: yes
Power of Framework: 4/5
Number of Wiget-Ready Areas: 2
Documentation: 4/5

Tutorials and Links

• Using The WordPress Sandbox and The Blueprint CSS Framework Together
• Getting a sandbox theme running on wordpress.com

Buffet

Buffet is a theme framework designed not only for the theme developers who will be using the theme actions and filters to create the child themes, but also for the end users who would be able to add and remove what they want.

Another key feature of this framework is the usage of extensions. Theme developers can group a set of action and filter functions into a class and register it as a theme extension. With it, users of the child theme itself can enable/disable that extension easily whenever they want via the options panel.

Buffet is another powerful framework tool focused more for theme developers, and also loaded with another steep learning curve. Loaded with features, this flexible framework offers developers so many options when constructing their themes that not only simplifies things for the developer, but allows for easy customization by the end user as well. Buffet’s strength and the amount of modifaction it allows by both parties involved, make the learning curve that it comes with worth the tackle, especially if you are all about developing themes.

Buffet Features

• Search Engine Optimization
• jQuery powered comments form, SuperSleight for IE6, Superfish menus and jBreadcrumbs included
• Packaged with CSS Frameworks – comes with 960gs and Blueprint CSS
• Theme Options – organized in tabs, with features such as custom RSS feed links and custom footer messages
• Theme Extensions – allow end-users to enable/disable features using the extensions feature

Breakdown

Ease of Use: 2/5
GPL Licensed: yes
Power of Framework: 5/5
Number of Wiget-Ready Areas: 4
Documentation: 4/5

Tutorials and Links

• Getting Started on the Buffet Framework
• Why I Use The Free Buffet Framework Wordpress Theme

That is all from this end…

That is pretty much all I had to say on the subject, but that does not mean there isn’t more to say. So leave your thoughts in the comment section to share your two cents. Ever used one of the frameworks mentioned above? What did you think of it?

WordPress is an awesome publishing tool, and one of the best features is its flexibility to customize its core functions with plugins. The simplest definition of a plugin is:

A plugin is a snippet of code which is used to extend the functionality of WordPress.

And one of the nicest things about plugins is that the barrier to entry is extremely low. It takes very little technical knowledge to make your first plugin!

What Will We Learn In This Tutorial?

Let’s take a look at the key points of the tutorial.

• Learn key tools necessary to set up a plugin development environment
• Develop our own simple plugin which will insert an author’s info section in the end of each article.
• Look at some core plugin tools, like hooks and conditional comments.
• Share some great resources for plugin development.

But before we get started, let’s just look at a few reasons you might want to read this post.

Why develop a plugin?

Skip the Repetitive Tasks

For example, to avoid the inconvenience of inserting the link of author’s page manually each time while publishing a post, it would be more beneficial if this subroutine is embedded in a plug-in that will involuntarily perform the task

Earn Money

Not everyone is a code junky. There are a lot of customers who would prefer to pay a handsome amount to some developer for building a plugin that will meet their needs.

Get Back Links

Everyone knows that backlinks are cash of online world. If you have develop a nice plugin that creates some buzz in the community, you’ll get plenty of people linking back to you.

For Fun!

Coding can be quite enjoyable, especially when the end product is a feature that you yourself have always wanted. And it doesn’t hurt to be giving back to the community either!

Now, onto the tutorial!

Setting up the Environment

This first step isn’t essential, but definitely recommended as it will speed up your development time immensely!

We’re going to install WordPress on our own computer, so we don’t have to worry about uploading files to a webserver every time you change something. Thankfully, this is pretty easy to do! Xampp can be used for PC and MAMP for Mac.

After this grab a copy of WordPress and install it on your new localhost server. And you can use your favorite text editor (I’m using Notepad++ because of its nice syntax highlighting).

Mozilla Firefox with Firebug add-on installed is also a necessity. Firebug is an awesome tool for developers; it allows editing and debugging code in real time.

Resources:

• Installing Xampp and WordPress in windows
• Installing MAMP and WordPress in MAC

Now let’s mess with some code.

Coding The Plugin

We need to choose a unique name for our plugin. If it is going to be released to the public, it should not match any plugin in the WordPress repository. I have chosen the name “PBD Author Info” for our tutorial.

The first step in creating the plugin is to create a folder with the plugin name in the wp-content/plugins folder. In our case, it is named PBD_Author_Info.

Now, we create the core file which contains standard plugin header information. The file can be named anything you want as long as it is in the plugin’s own directory.

If the file is placed directly into wp-content/plugins folder (i.e. You skipped out the folder step above!), then it must have a unique identity. In our case, let’s make a file called “PBD_Author_Info.php” containing the following code.

1
2
3
4
5
6
7
8
9

<?php
/*
Plugin Name: PBD_Author_Info
Plugin URI: http://www.problogdesign.com/tag/wordpress/
Version: 0.1
Description: A Plugin that will add an author info section at the end of your posts.
Author: Saad Hameed Bassi
Author URI: http://www.crispytech.com
*/

Line 1 just means that we’re going to write some PHP code. The remaining code is enclosed in /* */, because it’s a comment (Not executable code). This is the standard plugin information header. WordPress would be unable to recognize the plugin without this info.

Now if you visit the installed plugins page, WordPress is able to recognize the plugin.

We can activate the plugin now if we like, but of course it’s not going to do anything because we haven’t taught it to yet! Let’s fix that.

We are going to define a function called author_info which calls the section holding author info.

1
2
3

function author_info()
{
?>

Now we will add some regular old HTML and WordPress template tags to build our author info section.

1
2
3
4
5

<div class="author_info">
<?php if (function_exists('get_avatar')) { echo get_avatar(get_the_author_email(), '65' ); }?>    
This post was written by <?php the_author_posts_link(); ?>.<br />
<?php the_author_meta('description'); ?>
</div>

The functionality has been characterized using WordPress template tags. The three template tags I used here are:

1. get_the_author_email() grabs the author email from his profile page.
2. the_author_posts_link() shows author’s public name with a link to all the posts published by the author.
3. the_author_meta('description') is used to pull out the author’s bio from his profile page.

Lastly, let’s close up our function>

1

<?php } ?>

On top of that, we’re going to add in some CSS styles to control the appearance of our HTML. We’ll need to use the PHP “echo” command to tell the plugin to write the CSS to the webpage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
function stylesheet() 
{
echo "
<style>
.avatar
{
float:left;background-color: #9A9B9B;padding: 4px;margin: 0 4px 0 0;display: inline;
}
.author_info
{
color: #666;background: #DDDDDD;padding: 8px;margin:0 0 6px 0; 
}
</style>
";
}

Now we will define the main function called display_author_info. This function is the one that is loaded when the plugin file is loaded, and we’re going to load the 2 functions we’ve just written from this one.

1
2
3
4
5

function display_author_info()
{
if (is_single() )
return author_info().stylesheet();
}

is_single simply conveys to WordPress to execute our function only when it is showing a single post. is_single is one of the core WordPress conditional tags, there are a number of others you can use in your plugins.

At the moment, we can test the output of plugin by adding the following code to our single.php file after the content:

1

<?php if (function_exists(display_author_info)) echo display_author_info; ?>

The above code simply calls our plugin function.

The plugin is almost ready, but we could make it more user friendly by automatically adding the plugin code for users, so they don’t have to edit their theme files at all.

WordPress hooks provide a way of doing this. Hooks provide a way of telling WordPress to automatically load our plugin at a certain point while it is building the rest of the webpage.

There are two types of Hooks. According to the WordPress Codex:

Actions are the hooks that the WordPress core launches at specific points during execution, or when specific events occur. Your plugin can specify that one or more of its PHP functions are executed at these points, using the Action API.

And the definition of Filters according to WordPress codex is

Filters are the hooks that WordPress launches to modify text of various types before adding it to the database or sending it to the browser screen. Your plugin can specify that one or more of its PHP functions is executed to modify specific types of text at these times, using the Filter API.

We will use a filter hook called comments_template to hook the comments on a single post. This filter will ensure that WordPress launches display_author_info when it is loading comments template and append the author info section between the post content and comments.

1
2

add_filter('comments_template', 'display_author_info');
?>

Our Finished Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?php
/*
Plugin Name: PBD_Author_Info
Plugin URI: http://www.problogdesign.com/tag/wordpress/
Version: 0.1
Description: A Plugin that will add an author info section at the end of your posts.
Author: Saad Hameed Bassi
Author URI: http://www.crispytech.com
*/
function author_info()
{
?>
<div class="author_info">
<?php if (function_exists('get_avatar')) { echo get_avatar(get_the_author_email(), '65' ); }?>    
This post is written by <?php the_author_posts_link(); ?><br>
<?php the_author_meta('description'); ?>
</div>
<?php
}
function stylesheet() 
{
echo "
<style>
.avatar
{
float:left;background-color: #9A9B9B;padding: 4px;margin: 0 4px 0 0;display: inline;
}
.author_info
{
color: #666;background: #DDDDDD;padding: 8px;margin:0 0 6px 0; 
}
</style>
";
}
function display_author_info()
{
if (is_single())
return author_info().stylesheet();
}
add_filter('comments_template', 'display_author_info');
?>

And that is our basic plugin complete. It doesn’t do a great deal, certainly not anything that you couldn’t do easily enough in your theme anyway, but hopefully we’ve demonstrated some of the core features of plugin development to you!

Resources for More Complex Plugin Development

Now that you’ve found your feet with plugins, it’s time to start building that up knowledge. Here are some of the best recommendations we can give you, in 3 categories.

1. Beginner
2. Intermediate
3. Advanced

Beginner

Writing a plugin – WordPress Codex

This ultimate resource for Newbies. The extensive WordPress codex describes the development procedure in detail. You may find it a little dry though, and other resources which work through real examples may be more useful. The codex will always be an invaluable reference while you’re coding though, nowhere else has anything like the amount of information the codex has on different WordPress functions!

Free e-Book: How to Write a WordPress Plugin

Very Useful ebook for WordPress plugin developers. This twelve part series illustrates the process from creation of a plugin, right through to promoting it. Well worth working through if you have the time!

Developing Plugins for WordPress (Singapore PHP User Group 2008)

A video presentation from Lester Chan (one of the best known plugin devs around!) on developing a WordPress plugin.

Your First WordPress Plugin

This screencast shows you how to make a very simple plugin which will replace foo with bar. A beginner’s guide from Mark Jaquith, who is a core developer for WordPress.

A Crash Course in WordPress Plugin Development

A simple tutorial explaining the implementation a Digg button and adding some formatting to posts.

Intermediate

The slides from Matt Martz’ presentation at WordCamp NY09.You can also watch the video here.

Anatomy of a WordPress Plugin

This article instructs on how to build a widget plugin that queries a given number of blog posts scheduled for the future.

Wordpress Plugin Development Tips And Tricks

A very handy article for WordPress plugin developers about some useful tips and tricks.

Top 10 Most Common Coding Mistakes in WordPress Plugins

Ozh, a very famous wordpress plugin developer writes about how to make your plugin error proof from the most common errors.

Advanced

How To Design And Style Your WordPress Plugin Admin Panel

An advanced tutorial on how to style your WordPress plugin settings panel.

Make your WordPress plugin talk AJAX

Some nice examples of using Ajax in WordPress plugins by Irish WordPress Developer, Donncha O Caoimh.

Mastering Shortcodes

A very useful guide on how to implement shortcodes in plugins.

Create a custom WordPress plugin from Scratch

This tutorial elaborates the development of a plugin that shows random products from an external OSCommerce database.

Create a Plugin with its Own Custom Database Table

A tutorial covering the creation of a plugin which has its own database table. Follow this tutorial if you want to learn how to validate a database table if your plugin is writing entries to it.

Conclusion

The guide above should give you the most basic steps to building your own plugin. It really is that easy to start!

And hopefully with all of the resources we’ve listed, you’ll be able to expand that into a much more complex plugin someday! If you know of a great tutorial or plugin resource we’ve left out, share it with us!

One of the most important elements of your blog, is the content that you painstakingly put together to gain readers and keep the online masses surfing your waves. So why do so many bloggers not take the extra time and give more attention to their archives?

Afterall, without an easy to navigate archive section, then all of that great content that you crafted will become lost in the backpages of your post progression as you continue to crank out the content. It seems that once a post has served its initial use for us, that we carelessly discard it to the forgotten areas for the post to die, rather than institute an accessible archive that will allow those past posts to continue to deliver the punch you packed within.

Our archives allow for an overall easier experience for our readers, by giving them simple access to the content they are looking for. Or more to the point, the information that they do not know they are looking for.

What I mean by that, is this. On occasion, we have users come to our site without a specific target in mind, they are simply browsing for interesting reads. By setting up a thorough collection of your posts, those browsers will have a much easier time surfing for a destination among your archives, keeping the reader engaged and skimming through the content that could have easily fallen through the cracks.

So in this post, I am going to offer some pointers on creating a quality archive section for your blog that will serve as an inspired homage to the awesome content that it contains.

Creating a Template

The first thing you will need to do is to create a Wordpress Page Template for your archives page. Here we’ll be creating archives.php in our wordpress theme folder.

So here’s the code we are going to start with, then I am going to give you some options to actually customize the page the way you want it.

NOTE: Since the Template Name is Archives, the page must be named archives.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
/*
Template Name: Archives
*/
?>
 
<?php get_header(); ?>
 
<div id="archives">
 
	This is where we will actually be building the archives page.
 
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Posts by Date

While listing archives by date isn’t usually that helpful for finding a particular post or topic, it is a good way to establish your blog (remember that longevity = reader confidence). I recommend simply listing these archives by month to conserve space.

The following code will list the archives by month with no limit to the number of months it will display.

1

<?php wp_get_archives(); ?>

The following code lists the archives by month displaying only the past 12 months.

1

<?php wp_get_archives('type=monthly&limit=12'); ?>

You can set the type and limit to whatever your preference is. You can find more information about your options for parameter settings at the Wordpress Codex Get Archives Page.

Posts by Category

This will be the most important section of your archives since most readers are not looking for a particular date but for a specific topic.

If you just want to generate a list of your categories use the following code.

1

<?php wp_list_categories(); ?>

If you would like to exclude certain categories (for example, blog updates) use this code. In this example, categories 10 and 12 will be excluded. To find the id for the category you want to exclude, go to your admin area and go to Posts > Categories. Right click on the category you want to exclude and go to Properties. The category ID number will be at the very end of the address line.

1

<?php wp_list_categories('exclude=10,12'); ?>

If you would like to show posts from each category, a great plugin that I use on Arbenting is Latest Post from each Category. With this plugin you can choose how many posts from each category you would like to display including the option to list every post from each category.

Most Popular Posts

It is always helpful to direct your visitors to your most popular posts because the content has proven to connect with a range of people. For this you will need the Wordpress Popular Posts Plugin.

Then place the following code wherever you want to display your most popular posts. This default will have an h3 header ‘Popular Posts’ and will list 5 posts via their linked titles.

1

<?php if (function_exists('WPPP_show_popular_posts')) WPPP_show_popular_posts(); ?>

You can also alter these parameters with the options listed at the plugin’s FAQ page.

For example, the following code will have the h4 header ‘Our Most Popular Articles’ and will list 10 posts via linked titles as well as the number of views the post has received.

1

<?php WPPP_show_popular_posts( "title=<h4>Our Most Popular Articles</h4>&number=10&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title% (%post_views% views)</a>" );?>

Most Commented Posts

Highlighting your most commented posts will direct your readers to the most active discussions on your blog, sparking more interaction with your audience which is always beneficial in building a strong readership.

First, you will need to install the Most Commented plugin.

Then insert this code wherever you would like the posts listed. This will show the 5 most commented posts on your blog. You can also alter this number to however many articles you would like to display.

1

<?php mdv_most_commented(5); ?>

Highlight Your Favorite Posts

If highlighting posts that are your personal favorites is a route you want to go, you will need to create a category titled something like Favorites, and then add all of the posts you want listed here into that category. Using the following code will list all posts in your ‘Favorites’ category.

1
2
3
4

<?php $my_query = new WP_Query('category_name=Favorites'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
<?php endwhile;?>

A Search Box

And just in case the reader still does not find what they are looking for on the page, it is nice to provide them with a search box.

If your theme doesn’t already have a searchform.php file, you will need to create it. Simply paste the following code into a new text file and save it as searchform.php in your theme folder.

1
2
3
4
5
6
7

<form id="searchform" method="get" action="/index.php">
  <div>
     <input type="text" name="s" id="s" size="15" /><br />
     <input type="submit" value="Search" />
  </div>
</form>
</li>

Then, paste the following code wherever you want the search box to appear in your theme.

1

<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Wrap Up

So, here is our final archives page template. Obviously you will need to create some styling elements to style the page to match your client’s theme.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<?php
/*
Template Name: Archives
*/
?>
 
<?php get_header(); ?>
 
<div id="archives">
 
	<h3>Monthly Archives</h3>
	<?php wp_get_archives(); ?>
 
	<h3>Archives by Category</h3>
	<?php wp_list_categories(); ?>
 
	<?php WPPP_show_popular_posts( "title=Posts by Popularity&number=5&format=<a href='%post_permalink%' title='%post_title_attribute%'>%post_title% (%post_views% views)</a>" ); ?>
 
	<h3>Most Commented Posts</h3>
	<?php mdv_most_commented(5); ?>
 
	<h3>My Favorite Posts</h3>
	<?php $my_query = new WP_Query('category_name=Favorites'); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a>
<?php endwhile;?>
 
	<h3>Search the Blog</h3>
	<?php include (TEMPLATEPATH . '/searchform.php'); ?>
 
</div>
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now that you have the template complete, upload it to your theme folder, log in to wordpress admin and create a new page. In the right hand column you will see Template listed under Attributes. Choose the Archives page, give the page a title and simply publish.

What have you done with your archives page? Feel free to show off links in the comments!