WPCodeBox Guide: Getting Started [Video]

Hey guys, welcome to another guide on Van Marciano Pro! So, if you’re working with WordPress and want a simple way to add custom CSS, JavaScript, PHP, or HTML to your website without constantly editing theme files, WPCodeBox is a tool worth getting familiar with.

As you may know, I’ve been using WPCodeBox for the past few years, and I regularly use it in my tutorials and course lessons.

I thought it would be useful to put together a simple WPCodeBox guide to help you get familiar with the plugin and its core features.

That way, when you come across a tutorial or course topic here on Van Marciano Pro that uses WPCodeBox, you’ll already have a good understanding of how it works and can follow along more easily.

So, let’s begin.

In this beginner-friendly guide, I want to walk you through the basics of WPCodeBox, how it works, and how to create your first snippet.

You don’t need to be a super-duper experienced developer to follow along. In fact, one of the things I like about WPCodeBox is that it gives you a much more organised way to manage custom code than scattering snippets throughout your theme or WordPress installation, which can be a nightmare.

By the end of this tutorial, you’ll understand how to create, edit, organise, and safely manage your custom code snippets like pro!

What is WPCodeBox?

WPCodeBox is a WordPress code snippet management plugin that allows you to add custom code to your website without having to modify your theme’s files directly.

You can use it for a variety of purposes, including:

• Custom CSS
• Custom JavaScript
• PHP snippets
• HTML
• WordPress hooks and filters
• Builder-specific customizations
• WooCommerce customizations
• Performance-related snippets
• Adding small functionality to WordPress
• Creating reusable snippets

Instead of opening your theme’s functions.php file every time you need to add some PHP, or adding custom code using the code block element inside of Bricks or Oxygen Builder, for example, you can create and manage that code from within WPCodeBox.

This makes your custom code easier to find, edit, disable, and reuse.

Why use WPCodeBox?

There are several ways to add custom code to WordPress, so why use a dedicated snippet manager plugin?

For me, one of the biggest advantages is organisation.

If you’ve ever added random pieces of CSS to the Customizer in WordPress, JavaScript to a page builder, PHP to functions.php, and then forgotten where everything lives six months later, you’ll appreciate having one central location for your snippets.

I can’t tell you how many times I’ve taken over a Bricks Builder project and felt so frustrated by CSS being added all over the place.

WPCodeBox allows you to keep your custom code together.

You can also enable or disable individual snippets without deleting them.

For example, imagine you’ve created a small CSS snippet that changes the styling of your navigation menu.

Rather than deleting the CSS when you no longer need it, you can simply deactivate the snippet.

That makes experimenting with your website and custom code much easier.

1. Installing WPCodeBox

OK, before we start creating snippets, you’ll need WPCodeBox installed on your WordPress website.

One thing I’d recommend is installing WPCodeBox on a local or staging website. This gives you a safe place to experiment, add snippets, test your code, and generally get familiar with how everything works without risking your live site.

Once WPCodeBox is installed and activated, you’ll see a new WPCodeBox option within your WordPress dashboard.

Click WPCodeBox to open the main WPCodeBox interface. This is where you’ll manage your snippets.

2. Understanding the WPCodeBox interface

OK, so now the fun begins. When you first open WPCodeBox, the interface can look a little intimidating, especially if you’re completely new to code snippets.

Don’t worry, because it really isn’t that complicated, and you won’t need to understand everything straight away.

The important thing to understand is that WPCodeBox essentially gives you a central workspace for creating and managing snippets.

Depending on the type of snippet you’re creating, you’ll be able to select the suitable code language and configure where and when that code should run.

For now, we’ll concentrate on the absolute basics.

The general workflow is:

1. Create a new snippet.
2. Choose the type of code you’re adding.
3. Write or paste your code. (We have plenty of code snippets on Van Marciano Pro you can copy and paste)
4. Configure where the code should run.
5. Save the snippet.
6. Activate it.
7. Test your website.

That’s really all you need to know to get started. We’ll look at other things you can do later. Watch the short video below to go through the workflow steps above.

Enjoyed this tutorial?

Did you find this tutorial useful? Did you know that Van Marciano Pro gives you access to over 400 premium-quality HD and 4K video tutorials and page builder course lessons?

Learn at your own pace, explore our growing library of WordPress design resources, join our design-focused WordPress community, and much more.

Check out our latest membership options and discover everything Van Marciano Pro has to offer. Click here to learn more. Or subscribe to our email newsletter for more free content!