How to embed visualizations in Wordpress articles
In this article, you'll learn how to embed interactive, responsive Datawrapper charts, maps & tables into WordPress articles. This works both for self-hosted WordPress installations and for sites hosted on WordPress.com. Here's the difference:
- WordPress is a free, open-source content management system (CMS) software that everyone can download & install to build their own blog or website. You can find it at wordpress.org.
- WordPress.com is a commercial platform that runs on a modified version of WordPress. WordPress.com hosts your blog or website, so you don't need to deal with installing it on a server yourself.
Embedding charts on sites built with WordPress.org
If you or your organization self-host WordPress, you have two options:
First, you can embed Datawrapper charts, maps & tables with the normal embed code. So if you see the option to add HTML code to your posts, simply copy & paste the "Responsive iFrame" embed code into your site's HTML. Then, the interactive Datawrapper chart will appear automatically. (You might need an additional plugin for handling embeds.)
You can also use the WordPress Datawrapper plugin that we explain in the next part.
Embedding charts on WordPress.com sites
To embed responsive Datawrapper visualizations on WordPress.com, you'll first need to install the Datawrapper oEmbed plugin. Please note that you need a WordPress.com Business plan or up to install plugins.
The only way to display responsive Datawrapper visualizations on WordPress.com sites is to get the Datawrapper oEmbed plugin first. To do so, log in, then go to My Site > Tools > Plugins and search for "Datawrapper": Click on the result, then "Install now" or "Activate". Now you successfully installed the Datawrapper oEmbed plugin.
To embed your article on your WordPress site, publish your final chart, map or table in step 4: Publish & Embed. To publish, click the big blue button here that says "Publish chart". Once the graphic is published, you get some Share & Embed options.
To embed a chart into your WordPress article, we can either take the "fullscreen" or the "normal size" link.
Now you'll need to copy the link URL – either directly, or click on it and then copy it from your browser address bar:
Next, go to your WordPress article. Add a new paragraph and simply paste the link you just got from Datawrapper.
And that's it! You got a chart in your WordPress article:
If your chart, map, or table doesn't seem to be interactive yet, this is just because the article is still in edit mode. Once you publish your article, you will be able to search in tables, hover over data points, etc.
To see how your article and the chart will look like once it's published, click on Preview in the top right:
Datawrapper charts are responsive: Try to resize your browser window, and you will see that the charts adapt to the new size and are still beautiful & readable.