Jupyter Notebooks in WordPress

Jupyter Notebooks in WordPress

While it might look like a normal WordPress blog post (like all the previous posts on our blog), you are actually looking at a Jupyter Notebook.

If you are not familiar with Jupyter Notebooks then here’s what you need to know about them:

The Jupyter Notebook is an open-source web application that allows you to create and share documents that contain live code, equations, visualizations and narrative text. Uses include: data cleaning and transformation, numerical simulation, statistical modelling, data visualization, machine learning, and much more.

In this first proof-of-concept blog post/Notebook, we are showing you how Notebooks work and a few cool things you can accomplish with them.

Why are we doing this?

The reason we are testing with “blogging using a Jupyter Notebook” is that it allows us to share our code example and analysis done in Python more easily and in a more repeatable way.

At Reflective Data, we are using a lot of Python in all steps of data analysis. Jupyter Notebooks is a tool we use to run and share our code both internally and with our clients. Why not leverage the same workflow in our blogging efforts as well, we thought.

Our plan is to create a series of useful tutorial-type blog posts where we show you how to use Python (and Notebooks) in your everyday work as a digital analyst. We are going to pull data from Google Analytics, testing tools and databases, then run all sorts of analysis and visualizations using this data (and Notebooks).

How are we doing this?

Since sharing Notebooks is all about repeatability, we thought it will be wise to also share how we managed to turn Notebooks into a WordPress blog post.

While you can host and run Jupyter Notebooks both locally or on the cloud, we’ve found Colaboratory by Google to be the best solution when it comes to (as the name suggests) collaborative coding. That’s why we are mostly using Colab when working with Notebooks.

Turning a Notebook into HTML

The first step in the process of sharing your Notebook on WordPress would be turning your Notebook from ipynb format into HTML.

The hosted version of Jupyter Notebooks comes with a handy “Download as HTML” option built-in. Colab, unfortunately, doesn’t have this feature. So, we found a workaround which also allowed us to semi-automate the whole process.

We are using Google Drive’s API to load the ipynb file from Drive (Colab hosts Notebooks on your Drive) and then using nbpreview to turn it to HTML. We haven’t yet done so, but the plan is to build a WordPress plugin that would take a Colab Notebook’s ID and then automatically turn it into HTML.

Teaching WordPress how to render a Notebook

Currently, we simply paste the HTML version of the Notebook into WordPress blog post using a text-edit-mode. This will soon be handled by the plugin we mentioned in the previous step.

Everey blog post that contains a Notebook will receive a tag “notebook”. Using this tag we can then tell WordPress to load some extra CSS to properly render the Notebook.

We are currently doing this in a few lines of code in our functions.php file.

add_action('wp_head', 'load_notebook_styles');
function load_notebook_styles() {
    if ( has_tag( 'notebook' ) ) {
        wp_enqueue_style( 'notebook-css', get_template_directory_uri() . '/notebooks/notebook.css' );
        wp_enqueue_style( 'notebook-prism-css', get_template_directory_uri() . '/notebooks/prism.css' );

Here are the CSS files we load:

What’s possible with Notebooks?

So, now that you have at least a basic knowledge of what a Notebook is and how we managed to turn them into WordPress blog posts, let’s see what you could actually accomplish with them.

Them main thing, of course, is that you can run Python code and immediately see the output.

Here’s a very basic example:

x = 5
for i in range(x):
  print(i * '*')

Awesome, right?

Now, the only limits you really have are your creativity and Python skills. In the upcoming blog posts, our goal is to get you better at both by showing some cool and useful things we are doing using Python and Jupyter Notebooks.

While the first Python script was quite useless, let’s try and load in some real data from Google Analytics.

First, let’s import our required dependencies.

import pandas as pd
import json
import requests

There are many ways you can pull data from Google Analytics but one of the simplest is by using the API Query URI that you can grab from the Query Explorer.

In this example, we are loading the number of Sessions and Users per day for the last 30 days.

from getpass import getpass # required only for hiding your variables

api_query_uri = getpass('Enter API Query URI here') # get the URI
r = requests.get(api_query_uri) # make the request
data= r.json() # read data from a JSON format
df = pd.DataFrame(data['rows']) # turn data into a Pandas data frame
df = df.rename(columns={0: 'Date', 1: 'Sessions', 2: 'Users'}) # giving the columns some proper titles
df['Sessions'] = df['Sessions'].astype(int) # formatting sessions as ints
df['Users'] = df['Users'].astype(int) # formatting users as ints
df['Date'] = pd.to_datetime(df['Date'])

df.head() # printing the first five rows
Enter API Query URI here··········
Date Sessions Users
0 2019-09-12 50526 58667
1 2019-09-13 53919 63156
2 2019-09-14 58735 68200
3 2019-09-15 67371 77597
4 2019-09-16 65780 77305

Great, so our data is now loaded and formatted for our needs.

Let’s go ahead and try visualizing it. For timeseries data, a line chart should work well.

df.plot.line(x='Date', y=['Sessions', 'Users'], ylim=[0,None], figsize=[10, 6])
<matplotlib.axes._subplots.AxesSubplot at 0x7fc6a53c3278>

That was simple, right?

There is so much more you can do with Python and Jupyter Notebooks and we are going to cover more advanced stuff in our upcoming blog posts.

I’d like to end this post with a few thoughts I got while writing this one.

  1. Writing a blog post using Markdown is fun (and effective). I know some people are doing it but this is the first time for me. Markdown is the way you write text in Notebooks.
  2. While I thought so before, now I know for sure that Notebooks + WordPress is a really good solution for sharing Python code examples and data visualizations online.
  3. I’d love to hear your thoughts, ideas, questions and topic suggestions in the comments below! We are happy to respond/help.

PS! More Notebooks-related content is coming soon! Consider subscribing to our newsletter.

23 thoughts on “Jupyter Notebooks in WordPress

  1. Hi Silver, as of today, is there an easy way to put the Jupyter Notebook code and output to a WordPress post, say, by copy & paste?

    1. Hi Yunfei,

      Copy & paste of the HTML of a Notebook is always an option, you just need to include the CSS file or inline styles too.

  2. Great Post. I added the PHP with the help of a plugin that adds custom snippets. Now, I cant find a way to upload your CSS files in WordPress. Any Ideas? I saw you have them here “get_template_directory_uri()” but I have no idea how to do it.

  3. Hi! Great post. I follow your step-by-step guide from one of the comments. It worked. However, LaTeX formulas are not being rendered. I saw that nbpreview uses Katex do render LaTeX so I tried the instructions from https://github.com/KaTeX/KaTeX, adding the code cited there to the tags of my pages. However, that did not render the LaTeX formulas. Any tips?

    1. Hi Chico,

      Unfortunately, we haven’t used this setup to render LaTex. Should we figure out the solution to this, we’ll update the blog post accordingly. Oh, and if you find a solution, please share it here in the comments.


  4. Do you think this can be used to create a question/answer type of environment? Like I would make a question such as, “create a function named x that does y” then the person has to type in the answer and presses run to see if they are correct.

    1. Hi Robert,

      By default, with the setup described in this article, this would not be possible. If there’s a Python library that works in Notebooks that produces JavaScript that provides this kind of interactive functionality then it should be doable. I couldn’t name such library, though.

      If you figure this out, I’d be happy if you could share it with us here in the comments, too!

      1. Sorry do you mean that such a library exists but you can’t name it here for some reason (legal or other)? Or do you mean that you’re not sure if something like this exists?

        I know I can use google Colab notebooks for something like this, but how would you do the testing portion of it?

  5. Pingback: Working with Google Analytics Data Using Python and Jupyter Notebooks - Reflective Data
    1. Hello Rahul!

      A very simple step-by-step guide to get you started:

      1. Download your notebook as .ipynb file
      2. Upload your file to https://jsvine.github.io/nbpreview/
      3. Open your browser dev tools and copy the element id=”notebook-holder” from the DOM
      4. Paste it in your WordPress post as raw text
      5. Grab CSS from here, for example https://jsvine.github.io/nbpreview/css/vendor/notebook.css

      This is not for production but should get you started.

      Let me know if you have any further questions.

      1. Hi Silver,
        Thanks so much for posting this!
        I am stuck on Step 3, would you mind doing a small tutorial for it with screenshots?
        Thank you so much.

        1. Hello Vivian!

          Using Google Chrome:

          1. Right click on the page and open “Inspect” or “Inspect element”
          2. Choose “Elements” tab
          3. Find element with id=”notebook-holder”
          4. Right click on this element and Copy –> Copy Outer HTML

          Let me know if you need something else.

    1. Hello Konrad. Unfortunately, right now this is not in our top priorities. Hopefully, we’ll get to it later this year and ideally involve others in the community as well.

  6. Are you sure there doesn’t already exist a plugin that solves this? I haven’t checked myself but would think there is one.

    1. We’ve checked but never found one. Should someone know about a plugin that makes embedding Jupyter Notebooks in WordPress easy, please let us know!

Leave a Reply

Your email address will not be published. Required fields are marked *

Sign up for Reflective Data

5,000 sessions / month ×

Please enter your email


After submitting your email, we will send you the registration form.