Steam WordPress Plugin
There are WordPress plugins for almost everything, and Steam is no exception. Using a Steam WordPress plugin like Steam Library GT can help you show off cool stats about the games you play online. The section below was developed using the Steam API Plugin, available for free at WordPress.org.
I’m most interested in Civ 6 news, so I found the Steam ID (289070) at steamdb.info.
Steam News Widget Plugin
Important: A special requirement from the data provider: Each page that uses the Steam Web API must contain a link to http://steampowered.comwith the text “Powered by Steam”. We suggest that you put this link in your footer so it is out of the way but still visible to interested users.
Steam Library WordPress Plugin
Update 1/9/2017: After some testing, it appears the Steam Library GT plugin is still causing my theme (and other WordPress themes) to break. I’ll leave the code changes below up in case you’re looking to fix it yourself, but this plugin is much too large for what it needs to do.
Update 1/10/2017: After checking out the individual errors the plugin was causing I found that it was breaking my themes because it was attempting to load itself on every page. Since I only reference the shortcode on this page, a NULL jQuery response was breaking the rest of the site. D’oh! So – as there is a WordPress plugin for everything – I found a plugin that lets me choose which plugins get loaded on which pages.
The Plugin Organizer is pretty easy to use. For this scenario, I created a group specifically for the Steam Library GT plugin and set it to be disabled globally. Then on this page, I use the Plugin Organizer settings below the post to override the settings, allowing it to be enabled for this URL only.
Showing off my Steam library using a plugin was a little more challenging. The plugin I used, Steam Library GT, looked promising, but some AJAX code was making the games appear in a long line down the page. It looks like it’s not being developed anymore, but I found the issue in code if you still need help.
Edit line 57 of the following file to change the size of the container
<div> to 100% or the desired width, instead of its current settings to get a prettier layout for your Steam games:
container.style.width = '100%';
Additionally, I added some padding for the images within the plugin’s CSS file. Next, I plan to do away with the pop-up game descriptions. I’d rather have each game jump to a section lower on the page. Pop-ups are generally not great for mobile visitors and this one is a bit of a memory hog.
border-radius: 0 !important;