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)

for more information about this plugin please go to: http://ycfreeman.com/2010/06/wow-server-status-wordpress-widget-10.html

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

please save the widget once after upgrading from 1.0.x to make data work with new code Update 1/8/2010: I’ve just written a post about customizing this widget with only css codes, have a look

[...]]]>

• please save the widget once after upgrading from 1.0.x to make data work with new code
• Update 1/8/2010: I’ve just written a post about customizing this widget with only css codes, have a look

  
  

  http://www.ycfreeman.com/2010/08/wow-recruitment-wordpress-widget.html

This version is updated and tested with 3.0.1

• option to use custom style sheet!
• fully customizable class / status texts! (yea I don’t have much time to hard code multilingual support, so now you can do it all yourself :p)
• customizable number of rows! (yes it’s official now)
• added in recruitment message
• added in a google ad to widget settings for my own good, lol, you can delete that line of code if you really don’t like it.

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

current stable release 1.1.4
please save the widget once after upgrading from 1.0.x to make data work with new codes
The 1.1.3 admin panel bug only happened to Internet Explorer due to an incomplete html tag (IE hides contents inside [...]]]>

• current stable release 1.1.4
  
• please save the widget once after upgrading from 1.0.x to make data work with new codes
  

• The 1.1.3 admin panel bug only happened to Internet Explorer due to an incomplete html tag (IE hides contents inside while all other browsers show contents inside), so if you are using Internet Explorer, please update to 1.1.4 to fix this bug.

• Update 24/6/2010: eh…. took me ages to find the bug… turns out it is only missing a close “>” so the drop down box breaks in certain browsers, namely, freaking Internet Explorer, come on, stop using IE guys! anyway, 1.1.4 released, enjoy.
• Update 23/6/2010: looks like there can be a bug on admin form on some servers, if you have problem using 1.1.x just revert back to 1.0.1 at the mean time. I’ll upload a beta version to this page these few days, please stay tuned with this post thanks!
• Update 19/6/2010: fixed a bug that may cause by css float
• Update 19/6/2010: fixed a typo “Huner” and released 1.1.2 lol, also fixed some subversion stuffs, now it won’t give you dead images if you need to revert to older versions.
• Update 18/6/2010: turns out there’s really some bug on sorting algorithm also does not quite work on multi-site, I’ve fixed and released 1.1.1, it should work fine now, please comment here it doesn’t work on your site
• Update 16/6/2010: er … the sorting algorithm is still buggy, I’ll look into it again in the next update.

Description

This version is updated to work with 3.0 single and multi site

I’ve revamped the whole widget and did a lot of changes to old codes, it should be way much cleaner than before.

New Features in 1.1:

• no more old school table layout, all are recoded with css2 (works on IE8 as well)
• since there is no more layout codes in the widget itself, custom layout can be done just by editing the css
• color and layout are seperated into 2 css files
• data structure is changed, old data will be changed to new structure automatically
• class icons are combined into css sprite
• new sorting method used, it should sort by status then class as intended now.

** row order in widget settings does not affect order that displays in front, it will just automatically sorts by status then class, I will improve this in future version

Thank you for all your support, stay tuned for updates~

Full change log, plugin description after the break.

= 1.1 =
* major recode to everything including data structure
* no more table layout, all replaced by div, which can be easily customized by editing css/layout.css
* color and layout are seperated into css/layout.css and css/color.css
* class icons are combined into css sprite
* new sorting method used, it should sort by status then class as intended now
= 1.1.1 =
* fixed a few non-set variable and duplicate function declaration bug, thanks Ramides
* fixed sorting mechanism, it should sort by status from high to low, then by class in alphabetical order, tell me if it is still bugged
= 1.1.2 =
* fixed a typing mistake “Huner”, lol, thanks KGBAgent
= 1.1.3 =
* fixed a layout bug that may cause by css float
= 1.1.4 =
* fixed a lovely IE only bug, thanks KGBAgent again

Future Improvements:

• Custom order
• Custom status text
• More readable widget settings
• Able to toggle display/not display instead of hiding all “Closed” status
• Able to toggle usage of embedded style sheets