How to set up WordPress analytics with PostHog

Last updated:

|Edit this page

On this page

Getting traffic, usage, and user behavior data about your WordPress site is simple with PostHog. Once you have that data, you can discover insights and build dashboards with our suite of analytics tools.

How to add PostHog to your WordPress site

The best way to add PostHog to your WordPress site depends on what version of WordPress you are using.

All of them require you to signup for PostHog, get your snippet with your project API key and instance address from your project settings, and add the PostHog snippet to your site.

Option 1: Use a plugin

The first option is to use a plugin. These enable you to easily add custom code to your site's header which we can use to add the PostHog snippet.

For WordPress.com users, this is also the only option. This is because you don't have access to the header.php or functions.php files. Using plugins does require their Business or Commerce plans. We also recommend this option for WooCommerce sites.

Two plugin options include:

  1. WordPress.com recommends using the free Insert Headers and Footers plugin.

  2. If you are already using Google Tag Manager on your WordPress site with a plugin like Site Kit, you can add the PostHog snippet as a tag instead. See our Google Tag Manager docs for more information.

The workflow for these is the same:

  1. Install the plugin.
  2. Add the PostHog snippet to the header via the plugin.
  3. Activate the plugin.

Option 2: Edit your theme's functions file

Theme functions enable you to add functionality to your WordPress site. This makes them a great way to add PostHog.

To set one up for PostHog, first, find your theme's functions.php file. This can be found either in app/public/wp-content/themes/<your-theme> folder or in your WordPress admin under Tools -> Theme Filter Editor.

WordPress Theme Filter Editor

Next, create an add_posthog function with your snippet like this:

PHP
if ( ! function_exists( 'add_posthog' ) ) :
function add_posthog() {
    ?>
    <script>
      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
      posthog.init('<ph_project_api_key>',{api_host:'https://us.i.posthog.com' })
    </script>   
    <?php
}
endif;

Finally, add the add_action hook to add the code to your site. Your functions.php file should look like this:

PHP
// ... your existing functions


if ( ! function_exists( 'add_posthog' ) ) :
function add_posthog() {
    ?>
    <script>
      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
      posthog.init('<ph_project_api_key>',{api_host:'https://us.i.posthog.com' })
    </script>   
    <?php
}
endif;


// Hook to add the code right before the closing </head> tag
add_action('wp_head', 'add_posthog', 999);

After saving your changes or clicking Update File, PostHog should begin to autocapture pageviews, clicks, and more.

Option 3: Edit your theme's header file

If you are using an older version of WordPress, you can edit the header.php file directly.

To do this, start by going to your WordPress admin and navigating to Appearance -> Theme Editor.

Select your theme in the editor drop-down menu to the right and click the header.php file in the file column to the right.

WordPress Theme Editor

You should now see the contents of the header.php template file in the code editing view. It is recommended that you copy all the text/code and save it somewhere as a back-up.

Find the closing </head> in the code editor and paste the PostHog snippet before it (see above image). Finally, click the Update File button at the bottom to save your changes. PostHog should begin to autocapture pageviews, clicks, and more.

To confirm PostHog is configured correctly, visit your website and then check if the events from your session appear in PostHog.

Notes:

  • Using the Theme Editor is very convenient, but you have to consider the potential drawbacks of having template files writable, which many prefer to disable for security purposes. Also, wrongfully editing a file may cause problems so be sure to perform appropriate backups before attempting this.
  • If your theme auto-updates, manually editing the header.php file may lose your settings. Making a Child Theme is the recommended approach.

Questions?

Was this page useful?

Next article

Deploying a reverse proxy to PostHog Cloud

A reverse proxy allows you to send events to PostHog Cloud using your own domain. This means that events are less likely to be intercepted by tracking blockers. You'll be able to capture more usage data without having to self-host PostHog. Setting up a reverse proxy means setting up a service to redirect requests from a subdomain you choose (like e.yourdomain.com ) to PostHog. It is best practice to use a subdomain that does not include posthog , analytics , tracking , or other similar words…

Read next article