Thank you for all your support.
I’ve been getting quite a number of emails these days regarding to this plug-in. Here is a little FAQ.

1. Will you add Monk class in and when?
- Yes I will add [...]]]> The widget hasn’t been updated for over a year but it is not dead!

Thank you for all your support.
I’ve been getting quite a number of emails these days regarding to this plug-in. Here is a little FAQ.

1. Will you add Monk class in and when?
- Yes I will add Monk class in and it will be done before MOP I promise.

2. I’ve tried to modify your plug-in for [SWTOR / Rift / Insert your game here] classes, but I can’t get it to work by [Insert your modification here] ……
- Unfortunately I don’t play SWTOR, and I’m not sure how many classes there are in the game. This widget right now only “supports” 10 classes, and you will need to modify the php file (and the style sheet of course) in order to get more classes in. Try to find $wr_class and $options arrays and add more classes to it, $options is used to initialize class names, while $wr_class is used to build the markup for the stylesheet of the previous version(1.0) to work properly. The code base is very messy and I’ll definitely do a major re-code in the next version.

3. Can you make it display on a page instead of only on the side bar?
- You mean short code support or even a plug-in page. Unfortunately it is not supported at the moment. I’ve thought about it but can’t quite figure out the best way to support short code while still storing data through widget instance and widget update function.

4. Can you make a version for [Joomla / Drupal / Insert your CMS here]?
- This widget is strongly based on wordpress at the moment. It is not the highest priority to make one for different CMSes at the moment, but it is definitely in my to-do list.

This plugin is now updated to use official JSON feed, (finally :p), php 5.2+ required (for native json_decode() support), although fallback JSON.php for earlier versions is included as well, no garrantee it works in 5.2-, too bad if it doesn’t work .

For non-wordpress [...]]]> Thanks Aoife for the info, I didn’t know Blizzard released their official API.

This plugin is now updated to use official JSON feed, (finally :p), php 5.2+ required (for native json_decode() support), although fallback JSON.php for earlier versions is included as well, no garrantee it works in 5.2-, too bad if it doesn’t work .

For non-wordpress users, feel free to download the package and extract the wow_ss.php to use it like the original one. (text display mode may contain bugs), more information about this plugin

If you would like to support this project, please consider

, I will give you my Shaman hug

Changelog

= 1.0.7 =* just re-upload and make sure all files are newest
= 1.0.6 =* patched to use official JSON feed
= 1.0.5 =* fixed bug of space becomes %20 in the new wow_ss.php, thanks Mike
= 1.0.4 =* since official realm status xml is not there anymore, I’ve modified the original wow server status badge to use [Axho's WoW Feeds](http://wowfeeds.wipeitau.com/)… at least for now, feel free to extract the modified badge php for your own use.
= 1.0.3 =* take 2, fixed the apostrophe realm not showing bug in original wow_ss.php, aparently the original script has 3 places doing the same thing, so I merged them to one, and encode it correctly to ANSIit should be fine now if your keyboard is US keyboard, that renders apostrophe as ', sorry for having it not working for so long

Nice job WordPress! and the community!

It’s been a bit awkward to code WordPress plugins while I’m not using WordPress for my own site :p.

space already purchased, domain will stay the same, changes to all my plugin readme files will be done as soon as I’ve set it up on the other [...]]]> Finally, I’ve got my own hosted space, lol.

It’s been a bit awkward to code WordPress plugins while I’m not using WordPress for my own site :p.

space already purchased, domain will stay the same, changes to all my plugin readme files will be done as soon as I’ve set it up on the other side.

Demo site will be setup properly, no more cheapo “free site suspended” messages…

and I’ll also setup a forum for Supporting issues, so no more old school emails or un-threaded comments!

This side will be changed back to ycfreeman.blogspot.com until all migrations are done,
while domain will be moved to new site soon for easier setup

Stay tuned for updates!

I had always been trying to make this widget really customizable in the first place, because I just don’t want to make all of these wordpress sites look like those in Guild Launch or those Joomla sites out there. At one point I even thought about making a drag & drop type of customization [...]]]> Introduction

I had always been trying to make this widget really customizable in the first place, because I just don’t want to make all of these wordpress sites look like those in Guild Launch or those Joomla sites out there. At one point I even thought about making a drag & drop type of customization like Facebook, but it is just not feasible to do something like that with the time I want to spend on this plugin.

So what I did is to make it fully customizable with some CSS techniques. This feature had been supported since 1.1 when I had got rid of all table layouts, today I finally have the time to write this tutorial after the release of 1.2.2

This is a little tutorial of how to customize this widget, if you read through this, it may help you learn some CSS techniques as well.

Before writing any codes, you will want to keep your changes right? so copy all style codes of the widget css (go to Plugins > Editor > Select plugin to edit: WOW Recruitment Widget > wow-recruit-widget/css/style.css) copy everything inside, and paste to bottom of your theme css (Appearance > Editor > Select your theme > style.css), then tick “Use Custom Style Sheet” in Settings > WOW Recruit Widget.

This will stop the widget style sheet from loading at all, which reduces a lot of conflicts and headache.

url(../../plugins/wow-recruit-widget/img/class-sprite.png)

url(http://{your site's url}/wp-content/plugins/wow-recruit-widget/img/class-sprite.png)

I’ll separate this tutorial into 3 difficulty levels, in some WOW terms, Casual(Basic CSS), Intermediate(Advanced CSS), Hard Core(for Coders)

*All screenshots are taken with chrome 5, but they should look the same (or very similar) on chrome 4+, firefox 3.5+ and safari 4+, opera does not support specific corner roundness thingy, so all will become rounded, Internet explorer does not support any css3 rounded corner and shadows (but it’s hackable with filter).

Casual
So your guild just make you web master but you don’t know any html or css,
and you just want to change some colors right? no worries, it’s easy.
just find out the class that you want to change color, and replace the original color code to the new one you want, or even easier, add those lines to very bottom of your style sheet and they should do just fine.
That’s how cascading style sheet works, “the second mouse gets the cheese”, latter rule always overwrite previous rule, if there is no special rule or id involved
which means, if you add your custom style code to very bottom to the only style sheet you have (aka the theme style sheet), those rules will always overwrite previous ones.

say you have a white theme and want to change Priest class to something instead of white, and other classes to a darker tone,

just change the corresponding color codes

.wr-priest { color: #FFFFFF; }

to something else say grey

.wr-priest { color: #999999; }

or background of each item (.wr-item) to a different color, just add in this line

.wr-item  { background:#222222;}

or background of alternate item (.wr-odd, .wr-even) *yes I know CSS3 offers alternating row styling, but my plugin is using all divs so it may not suppoort seamlessly, and remember, IE8 doesn’t support many CSS3 features

.wr-odd  { background:#999999;}
.wr-even  { background:#222222;}

still doesn’t look quite right? let’s add a background for the whole widget

.wow-recruit-widget {
 
        background:#111111;
        padding:10px;
}

looks a bit weird, let’s add border to each item instead.

.wow-recruit-widget {
 
        background:#111111;
        padding:10px;
}

hmm, how about different border color, lol looks a bit like old school windows xp button

.wr-item {padding:5px;}
.wr-odd { background:#444444;
        border-top:3px solid #cccccc;
        border-left:3px solid #cccccc;
        border-right:3px solid #999999;
        border-bottom:3px solid #999999;
}
.wr-even {background:#222222;
        border-top:3px solid #cccccc;
        border-left:3px solid #cccccc;
        border-right:3px solid #666666;
        border-bottom:3px so
lid #666666;
}

now how about some rounded corners (it’s css3 so… sorry IE fans.
-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome, border-radius is css3 standard, since not all 3 browsers are supporting standard css3 yet, so it’s better to have them all)

.wr-odd { background:#444444;
          border-top:3px solid #cccccc;
          border-left:3px solid #cccccc;
          border-right:3px solid #999999;
          border-bottom:3px solid #999999;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
}
.wr-even {background:#222222;
          border-top:3px solid #cccccc;
          border-left:3px solid #cccccc;
          border-right:3px solid #666666;
          border-bottom:3px solid #666666;
          -moz-border-radius:10px;
          -webkit-border-radius:10px;
          border-radius:10px;
}

hmm how about rounded corner for those icons?

.wr-icon {
    border:2px solid #cccccc;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
 
}

hmm how about fonts, I just don’t like my theme default font for my widget

.wow-recruit-widget {
 
    font-family:verdana;
 
}

So I want different color for different spec text (1.2.2 I’ve made note has a class name corresponding to what you typed in the note, i.e. if you typed “Frost” in the note, the class of that note will be “wr-frost”)
*note Death Knight becomes DKnight here, class texts are now fully customizable in 1.2.x, so you can change to whatever you want

.wr-frost                       { color:#409FFF;}
.wr-blood                       { color:#FF4F4F;}
.wr-feraltank                   { color:#52B2A5;}
 
.wr-note                        {font-style:normal;}

Intermediate
So you do know some html and css, but maybe not much php, enough for colors and fonts as you probably know all of those already, since the outputs of this widget are all divs, we can do a lot more than that.

At this point I assume you should know and understand css syntax , so I will only post important style codes for each examples below

From here, a good text editor with syntax highlighting or even IDE with syntax checking will help big time.

Then you may want to work with a local wordpress installation before you put them onto your site.

And if you want to make rounded corner and box shadow work in IE, you may want to have a look at PIE , upload that to root folder of your server and add

behavior: url(/PIE.htc);

to your rounded classes, and it should work, but it sometimes break in IE 6 if coupled with other filters like png filters and definitely not work at 5.x ……. that is, if you care about those ancient technologies, believe me, your target audiences won’t be using that 2002 computer that came with those browsers

Ok let’s go back to our tute.

say you want something look like this, it looks like a big change? nah, it is still achievable by just editing a few classes!

.wr-item {
    display:block;
    float:left;
    width:90px;
    height:65px;
    padding:0px;
    margin:2px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-box-shadow: 3px 3px 3px #666; /* Firefox */
    -webkit-box-shadow: 3px 3px 3px #666; /* Safari, Chrome */
    box-shadow: 3px 3px 3px #666; /* CSS3 */
    background:#444444;
}
.wr-odd {
 
}
.wr-even {
 
}
.wr-left {
    display:block;
    float: left;
    width: 25px;
    height: 30px;
    text-align:center;
}
.wr-right {
    display:block;
    float:left;
    height:30px;
    width:50px;
    position:relative;
}
 
.wr-class-text {
    display:block;
    margin-left:5px;
    height:30px;
    line-height:15px;
    width:40px;
    margin-top:5px;
    /*position:absolute;
    top:0px;
    left:0px;*/
}
.wr-status {
    display:block;
    margin-left:5px;
    height:15px;
    line-height:15px;
    width:20px;
    position:absolute;
    top:45px;
    left:-25px;
}
.wr-note {
    display:inline-block;
    font-weight:normal;
    font-style:italic;
    color:#cee683;
    line-height:15px;
    width:30px;
    height:15px;
    margin-left:5px;
    position:absolute;
    top:30px;
    left:-25px;
}
 
.wr-icon {
    vertical-align:middle;
    width: 25px;
    height:25px;
    background:url(../../plugins/wow-recruit-widget/img/class-sprite.png);
 
}

so you want to change the icon? no worries
(note that css background resizing is very problematic, so it’s better not doing it, the work around is to resize .wr-icon class to fit the icon, or resize the icon image itself with paint or whatsoever, hot linking image is not a very good practice, unless it’s a very reliable source, code below is just an example)
note that here I’ve used .wr-icon.wr-deathknight, and removed background from .wr-icon, because if you only put background to .wr-deathknight, the background image will apply to class text block as well.

.wr-icon {
    vertical-align:middle;
    width:40px;
    height:40px;
    position:absolute;
    top:-10px;
    left:-10px;
    background-position:center;
    background-repeat: no-repeat;
}
.wr-icon.wr-deathknight { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_deathknight.png);}
 
.wr-icon.wr-druid   { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_druid.png);}
 
.wr-icon.wr-priest  { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_priest.png);}
.wr-icon.wr-rogue  { background-image:url(http://area52.wowstead.com/files/icons/favicon/classround/class_rogue.png);}

I just think status is not very necessary

.wr-status
{
    display:none;
}
 
.wr-item
{
    height:50px;
}

nope I changed my mind, I don’t want class text instead.

.wr-item
{
    height:40px;
}
 
.wr-status {
    display:block;
    margin-left:5px;
    height:15px;
    line-height:15px;
    width:20px;
   /*position:absolute;
    top:45px;
    left:-25px;*/
}
 
.wr-note {
    display:block;
    font-weight:normal;
    font-style:italic;
    color:#cee683;
    line-height:15px;
    width:30px;
    height:15px;
    margin-left:5px;
    /*position:absolute;
    top:30px;
    left:-25px;*/
}
 
.wr-class-text {
    display:none;
}

Hard Core
hey you are coder already what do you need me to teach you? you maybe better than me already

ok something more for you. that is, wordpress gives each widget a unique id, say your 10 man recruit widget is wow-recruit-widget-6 and 25 man one is wow-recruit-widget-9,
you can style individual widget with its own class by specifying css id, check your browser’s developer tool for the actual div id on the generated html

#wow-recruit-widget-6 .wow-recruit
{
    /*something something*/
}
 
#wow-recruit-widget-9 .wr-item
{
    /*something something*/
}

Conclusion
so you can pretty much break the whole layout and reconstruct as long as they are still having the same elements, or if you know jQuery or know how to use DOM model with other javascript libraries, you can even replace those elements with what you want. here I won’t say much about those, since if it requires so much code, it loses the point of plug in already.

at this point I have no plan to make a more graphical version for this widget, like with more icons instead of texts

hope this tutorial helps to customize your WOW Recruitment Widget, and maybe you’ve learnt some css here, if you like this article about css, feel free to leave a comment here or recommend to your friends

Oh yeah, share with me with your cool looking themes!

Have fun!

Appendix

seems this feed is much more stable now, I’m still looking at ways to improve the speed of this image generation.

* 26/2/2011:

lol GG, unofficial realm status feed is down due to bandwidth limit exceeded. if it is not going back up, i’m gonna look for alternative solution.
Maybe write an [...]]]> * 14/5/2011:

seems this feed is much more stable now, I’m still looking at ways to improve the speed of this image generation.

* 26/2/2011:

lol GG, unofficial realm status feed is down due to bandwidth limit exceeded. if it is not going back up, i’m gonna look for alternative solution.
Maybe write an adapter to screen scrap official realm status page and convert it to xml or something.

* 20/12/2010:

1.0.4: since official feed is moved to some mysterious place, this widget is changed to use Axho’s WoW Feeds… at least for now. for any kind of widget that is using similar method (old xml feed) to look for data, you can look for the same feed to do things, it provides JSON and XML feed, and rather getting all realms at once and filter on your widget, their feed can provide only one realm on request, which would be slightly faster for something like desktop widget. Data is formated slightly different there, but it should be pretty obvious what has to be changed.

alternatively, you can always screen scrap official realm status page. good luck and have fun

* 18/12/2010: confirmed it is breaking everywhere, appears blizzard has completely turned off the old xml realm status, maybe they’ve moved somewhere else, if that is the case it should be a quick fix. will look at it tomorrow

* 10/12/2010:  ok ok, yea I know Blizzard has changed their data and the badge is not working any more, thanks Blizzard! I’m still looking for solution, should be fixed within next 2 weeks.

Easily add WOW Server Status 4.1 badge to your site by just a few clicks.

Description
This is a simple widget that displays WOW Server Status 4.1 badge, without having to upload the script with ftp and write an img tag to run it.

The original script can be found here, which is not my work:
http://53×11.com/blog/2005/04/21/WoW-Server-Status-41.10

If you managed to find bugs or want to correct some of my codes, please don’t hesitate to leave a comment

Download from wordpress plugin gallery : – http://wordpress.org/extend/plugins/wow-server-status-widget/

Full change log and descriptions after the break

Installation
1. Unpack and Upload all files to the `/wp-content/plugins/wow-server-status-widget` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Drag ‘WOW Server Status Widget’ to your sidebar
4. Enter details and done!


Frequently Asked Questions

The badge script is not my work, I just make it easy to drag and drop in wordpress.
It should be able to run properly on most servers, but if there is a problem
please visit http://53×11.com/blog/2005/04/21/WoW-Server-Status-41.10 and look for solutions there.

= It says “No Status Source”, what’s wrong? =
Make sure you check the realm name and region carefully, it won’t work if you’ve typed it wrong.
If official realm status page: http://www.worldofwarcraft.com/realmstatus/compat.html is working fine, this badge should be working fine, in some rare cases like when they are upgrading server hardware or something, the realm page just breaks and so the badge will also break.

= It doesn’t reflect the actual realm status correctly, what’s wrong? =
See above. Also, update timer of this badge is set to 10 minutes, so it may not reflect immediately if the server status has just changed within 10 minutes.

Changelog

= 1.0.2 =

* fixed the quotation realm not showing bug in original wow_ss.php, thanks Nullinger

= 1.0.1 =
* better plugin path handling, added bug report icon, updated license wordings

= 1.0 =
* First released version