Would you like to add a piece of code to your WordPress site without touching a theme file? WPCode keeps each piece of code as a snippet, places it where you choose, and lets you switch it off again in one click. All you need is WPCode installed on your WordPress site.

In this guide, we’ll walk you through building your first WPCode snippet, from an empty editor to working code on your live site.

• Adding a New Snippet
• Choosing a Code Type
• Naming Your Snippet and Adding the Code
• Choosing Where Your Snippet Runs
• Adding Tags, a Priority, and a Note
• Activating and Saving Your Snippet
• Checking That Your Snippet Is Working

Before you get started, make sure WPCode is installed and activated on your WordPress site.

Adding a New Snippet

Because a snippet lives in WPCode rather than in a theme file, it survives theme updates and it comes with you when you switch themes. Every snippet you create starts on the same screen.

To get started, go to Code Snippets » + Add Snippet in your WordPress admin sidebar.

This screen has five tabs, each one a different route to a new snippet.

• Snippet Library holds ready-made snippets you can install with one click.
• Snippet Generators builds code for you from a form.
• Snippet Packs installs a themed bundle of snippets at once.
• Plugin Snippets lists snippets published by other plugin authors.
• My Library holds the snippets you’ve saved to your own WPCode account.

We’re writing our own code in this guide, so click + Add Custom Snippet on the first card.

Choosing a Code Type

WPCode opens the code type picker as soon as the blank snippet loads. Your choice here decides two things: which language the editor highlights and validates, and which insertion locations the snippet can use later on.

There are eight types to pick from. HTML Snippet is selected to begin with. It suits anything you’d normally paste into your site’s header or footer, such as a tracking script or a small block of markup.

Once you’ve decided which type fits your code, click the card you want.

After your first save, WPCode remembers the type you used and highlights it the next time you start a snippet.

Naming Your Snippet and Adding the Code

Once the picker closes, you land in the snippet editor. In the title field at the top, type a name for your snippet.

The name is there for your own reference in the WordPress admin, so pick something you’ll recognize in a list months from now.

Below the title sits the Code Preview editor. In that editor, paste or type your code.

The editor colors your code as you go. For HTML and JavaScript snippets it also checks the syntax and marks any line whose syntax is not valid.

Above the editor, on the right, the Code Type control names the type you picked a moment ago. If you picked the wrong one, open that control and choose again.

Beside it, a Show Smart Tags button drops dynamic values such as the current post title or the logged-in user’s name into your code. Our guide on using smart tags covers those.

Choosing Where Your Snippet Runs

A snippet’s location is what turns your code from stored text into something that actually runs. WPCode gathers those settings into a single panel.

Next, scroll down to the Insertion panel. This is where you tell WPCode when to run the code.

In the Insert Method row, Auto Insert is selected to begin with, which means WPCode places the snippet for you at a location you choose. The alternative, Shortcode, gives you a shortcode to drop into a specific post or page instead. If shortcodes are new to you, WPBeginner’s guide on how to add a shortcode in WordPress explains how to place one in your content.

Underneath, the Location control starts on Site Wide Header, which puts your code between the head tags of every page. To change it, click the control to open the location picker.

The picker groups every location by where it runs. For this example, pick Site Wide Body from the Site Wide (Frontend) group. That location places the snippet immediately after the opening body tag on every page.

The default header location is the right home for code that never shows on the page, such as a tracking script. Our example prints a visible announcement bar instead, so the body is where it belongs.

The picker closes as soon as you choose, and the Location control now reads your new location.

There are dozens more locations, covering single posts, archives, positions inside your content, and eCommerce pages. Our guide on choosing where your snippets run lists all of them.

If you need finer control than a location alone gives you, the Smart Conditional Logic panel sits further down the same screen. The rules you build there narrow the snippet to only the situations you describe.

See our guide on smart conditional logic for that.

Adding Tags, a Priority, and a Note

The Basic info panel holds three optional fields, and you can leave every one of them alone on your first snippet.

Tag groups similar snippets together so you can filter your list, or export a set of them, without hunting through every snippet you own.

Priority controls the order in which snippets in the same location run. Every snippet starts at 10, and a lower number runs earlier, so a snippet set to 5 outputs before one left at 10.

Under those two, a Note field stores a private reminder about what the snippet does and why you added it. Nobody visiting your site ever sees it.

With the code written, a location chosen, and these details filled in or skipped, the snippet is ready to switch on.

Activating and Saving Your Snippet

A new snippet starts out inactive, which keeps your code off your site until you’ve finished working on it. WPCode only runs snippets that are active. Scroll back to the top of the screen and click the status toggle so it reads Active.

With the toggle on, click Save Snippet next to it.

Your snippet is now saved and live on your site.

Checking That Your Snippet Is Working

WPCode reloads the editor and shows a confirmation message at the top of the screen. Three things on this screen tell you the save worked. The heading now reads Edit Snippet, the snippet status still reads Active, and the button you used a moment ago now reads Update.

From here on, the Update button is what saves any further changes you make to this snippet.

To see the snippet itself, open your site in a new browser tab. Our example snippet outputs an announcement bar at the top of every page, so it shows up above the site header.

Your own snippet will show up wherever the location you picked puts it. Code that produces no visible output, such as a tracking script, appears in the page source rather than on the page.

That’s it! You’ve created, placed, and activated your first WPCode snippet. Next, take a look at our guide on choosing where your snippets run to place your next one exactly where you need it.

Frequently Asked Questions

Below, we’ve answered some of the most common questions about creating a WPCode snippet.

Does a snippet have to be active to work?

Yes. WPCode only loads snippets whose status is Active, so an inactive snippet is stored safely and does nothing at all. That applies to its shortcode too, which returns nothing while the snippet is switched off. It makes the toggle a convenient way to park a snippet while you work on it. You don’t have to remove the shortcode from your content first.

What happens if my code has a mistake in it?

For PHP and Universal snippets, WPCode runs the code once at the moment you activate it. If that produces an error, WPCode saves your changes but leaves the snippet switched off. A message on the editor screen tells you so, and your site keeps running exactly as it did before. Snippets in the other six types are stored exactly as you type them, and you see the result in your browser as soon as you save. Our guide on PHP error handling and safe mode covers what WPCode does behind the scenes.

Can I use a snippet as a shortcode instead?

Yes. Switch Insert Method to Shortcode in the Insertion panel, and WPCode gives you a shortcode in the format [[wpcode id="123"]] once the snippet is saved. Every active snippet has one, whether or not you’re auto-inserting it, so you can auto-insert a snippet and still place it manually somewhere else. Our guide on shortcode attributes shows how to pass values into one.

Can I change a snippet’s code type after saving it?

Yes. Open the Code Type control in the top right corner of the Code Preview editor, choose the new type, and click Update. The list of insertion locations updates to match the new type, since some locations run PHP.

Do I need to write the code myself?

No. The Snippet Library tab on the Add Snippet screen holds ready-made snippets you install with one click. Snippet Packs installs a themed group of them together. The Snippet Generators tab builds a working snippet from a form you fill in. All three leave you with an ordinary snippet you can edit exactly as described above.

Where do I find my snippet again?

Go to Code Snippets » Code Snippets in your admin sidebar. Every snippet you’ve created is listed there with its location, its code type, and its priority. Each row also carries a status toggle you can flip straight from the list.