Web CommunicationWeb TrainingPlugin TrainingWSUWP Tools

WSUWP Tools

Adding Code Snippets from Facebook, Tracking Pixel, or Meta Tag to a Website

This tutorial covers how to add code snippets to the head or the footer of a website. Once created, add code snippets to individual web pages or to the entire website.

Step 1: Activate WSUWP Tools

Go to the WordPress Dashboard and select Plugins in the left navigation. On the Plugins web page scroll down to WSUWP Tools. Select Activate under the plugin title to enable it. If the plugin says Deactivate it is already active.

An excerpt from the WordPress plugin page showing an arrow pointed at deactivate link on WSUWP Tools

Step 2: Enable Code Spinnets

Note: People with the Administrator role can access Customize.

From the WordPress Dashboard, select Appearance in the left navigation, then select Customize. In the Customizer, select WSU Tools. Then select Code Snippets, and check the box marked Enable Site Scripts.

A screenshot of the customizer at the Code Snippets page under WSU Tools.

Step 3: Add Code Snippet

Note: Creating a snippet does not add it to the website yet.
See Step 4: Enable Snippet Site-Wide.

Add the code snippet. From the WordPress Dashboard select WSU Tools. On the All Code Snippets web page is a list of existing code snippets on the website. Select Add New next to the title to create a new code snippet.

An excerpt of the WSU Tools plugin page with an arrow pointing to the Add New button next to the heading Code Snippet .
A screen capture of the snippet page showing the Add Title, Snippet Type, Snippet Location, and Snippet Code fields.

Step 3a: Add a Title

Enter the snippet title in Add Title. Give the code snippet a descriptive title. This will help people will its purpose or use case later. If this snippet is for a specific campaign it is helpful to include that information in the title.

Step 3b: Set the Type

Select the Snippet Type to insert. Or make the best guess on the type of snippet.

Step 3c: Set the Location

Select the Snippet Location where the snippet should render. Or make the best guess for the location of the snippet. Or try a Google search.

Step 3d: Paste in the Snippet

Paste the snippet into the content area labeled Code Snippet.

Step 3e: Publish the Snippet

Note: Publishing a snippet does not add it to the website yet.

Select Publish in the Publish panel.

Follow Step 4 to enable the snippet on the entire website or follow Step 5 to enable the snippet on a web page(s).

Step 4: Enable Snippet

Choose to enable the snippet site-wide (Step 4a) or on a single webpage (Step 4b).

Step 4a: Enable Snippet Site-Wide (optional)

Enable the snippet site-wide if the snippet is to show on all web pages.

From the WordPress Dashboard select Appearance in the left navigation then select Customize. In the Customizer select WSU Tools. Under Site-Wide Active Snippets is a list of the existing snippets with checkboxes. Select the checkbox for the snippet to show on all web pages.

Step 4b: Enable Snippet Single Web Page (optional)

Enable the snippet on a single web page to show only on a single web page (or a set of web pages).

Go to the WordPress editor for the web page to add the snippet. The Activate Code Snippets panel is either in the right-hand panel or at the bottom of the content page. Select the checkbox for the snippet to add to the web page.