Skip to content

Item Tooltips in WordPress

If you’re like me and you can get neither ItemStats or this script to work on your WordPress blog, I’ve managed to come up with a solution, albeit not as easy as those. If I can get a script to parse some XML the way I want it, I can make it a lot easier. If anyone with PHP and XML experience wants to lend a hand, I’d sure appreciate it 🙂

Here’s what you need to do:

First you will need to get the macro expander plugin. This is not totally necessary but I highly recommend it because it makes things easier later on.

Next, you need to make some changes to your theme. Do that by going to your admin panel -> Presentation -> Theme Editor. Select the “Header” file from the list on the right.

The following code I’m going to give you was not written by me, but by Okoloth of Armor Musings. However, the code he wrote is for Blogger blogs and I’ve just adapted it to work with WordPress.

Anyways, you need to find the </head> tag in the “Header” file. Then add the following code above the </head> tag:

<!-- WoW Item Popup v1.3 --> <style type="text/css">
#wowitemfloat { position:absolute; left:200px; top:200px; z-index:100; }
.poor { color:#9d9d9d !important; text-decoration:none; }
.common { color:#ffffff !important; text-decoration:none; }
.uncommon { color:#1eff00 !important; text-decoration:none; }
.rare { color:#0070dd !important; text-decoration:none; }
.epic { color:#a335ee !important; text-decoration:none; }
.legendary { color: #ff8000 !important; text-decoration:none; }
.artifact { color: #e5cc80 !important; text-decoration:none; }
</style>

If your website has a white background or some other color that will drown out one of the class colors (purple on purple, blue on blue, etc.), you can add a background color to the text. Here’s an example of how you would do it (look for background-color in particular):

.common { color:#ffffff !important; text-decoration:none; }

Now, add the followig code below the </head> tag:

<!-- WoW Item Popup v1.3 --> <style type="text/css">
#wowitemfloat { position:absolute; left:200px; top:200px; z-index:100; }
.poor { color:#9d9d9d !important; text-decoration:none; }
.common { color:#ffffff !important; text-decoration:none; background-color:#999999;}
.uncommon { color:#1eff00 !important; text-decoration:none; }
.rare { color:#0070dd !important; text-decoration:none; }
.epic { color:#a335ee !important; text-decoration:none; }
.legendary { color: #ff8000 !important; text-decoration:none; }
.artifact { color: #e5cc80 !important; text-decoration:none; }
</style>

If you haven’t already, download the macro expander plugin and unzip it. Open macro_expander.php in a text editor (like Notepad) and look for the line that says ADD YOUR OWN MACRO FUNCTIONS BELOW THIS LINE. So after this line (obviously), add this code:

function macro_item($name='Wolpertinger', $number='32233', $class='rare')
{
return "<a href='http://wow.allakhazam.com/item.html?witem=$number' class='$class' onmouseover='showWowitem(event,$number);' onmouseout='hideWowitem();'>[$name]</a>";
}

Save the file, upload it, and install the plugin per the instructions on the plugin website.

To use it in your posts, type something like this:

It follows this basic syntax:

All this information can be found on Allakhazam or Wowhead. The item name is obvious, the item number can be found in the URL of the item page, and the class can be deciphered by the color:

Grey = poor
White = common
Green = uncommon
Blue = rare
Purple = epic
Orange = legendary
Red = artifact

That’s it! Hopefully these instructions aren’t too confusing to follow, and I don’t believe I missed any steps. If anyone has any comments or questions, please post them.

2 Comments

  1. Posted October 19, 2010 at 1:26 pm | Permalink

    I followed your steps, but when I hover over the link on this page, I don’t get the pop up. Any ideas?

    Page: http://wow.snowfaerie.net/?page_id=11

    • Posted October 19, 2010 at 6:32 pm | Permalink

      Oh wow, this is a really really old post so I’m fairly certain it does not work anymore. Give the Wowhead Tooltips a try instead.

One Trackback

  1. […] I’d been resisting adding some sort of script to do fancy item links (like this) to this blog. I don’t link to that many items — not like some people! — and anyway it seemed like a lot of work. […]