Skip to content
GPLWP Guides

How to add custom code to WordPress

Developer ToolsWordPress Time About 20–45 minutes 6 steps Updated 7 Oct 2026

DEVELOPER TOOLS
The short answer

You can add custom CSS, JavaScript, HTML or PHP manually, but each type belongs in a different place. Use Additional CSS or a child theme for small changes, a custom plugin for site features, and a code manager when you need safer editing, conditions and version control.

The route
  1. 01Identify the code type
  2. 02Back up before editing
  3. 03Use the manual route
  4. 04Add HTML in its context
  5. 05Check the code safely
  6. 06Choose the fast route

What you need

  • Administrator access to WordPress
  • A recent backup or staging site
  • The code you want to add and a way to check its syntax

Identify the code type

Decide whether you are adding CSS, JavaScript, HTML or PHP. CSS changes appearance, JavaScript adds browser-side behaviour, HTML adds markup, and PHP changes WordPress behaviour or data.

Do not paste code into a random theme file. The location affects when it runs, whether it survives updates, and whether a mistake can take the site offline.

Back up before editing

Create a backup and, if possible, make the change on a staging site first. Keep the original code in a separate text file so you can remove the new code quickly.

A PHP syntax error can produce a critical error and prevent access to the dashboard. If that happens, use your host's file manager, SFTP or a recovery tool to remove or correct the last change.

Use the manual route

For CSS, use the WordPress Customizer's Additional CSS area when your theme provides it, or the Site Editor's Styles area with a block theme. For PHP that belongs to the site's design, use a child theme's functions.php; never edit the parent theme or WordPress core files.

For functionality that should remain when the theme changes, create a small custom plugin in wp-content/plugins. Load JavaScript and CSS with wp_enqueue_script() and wp_enqueue_style() rather than hard-coding script or link tags. Add PHP through WordPress actions and filters, and prefix your own function names to avoid conflicts.

Add HTML in its context

Use a Custom HTML block for markup that belongs in one page or post. For site-wide markup, use a theme template, a block pattern, a widget area or a hook supplied by the theme or plugin that owns that part of the page.

Do not place PHP inside a post or page and expect WordPress to execute it. HTML inserted into content is treated as content, while PHP must run from a plugin or theme file.

Check the code safely

Activate or save one change at a time, then check the front end, the dashboard and any affected forms or checkout screens. Clear the page cache and browser cache if a CSS or JavaScript change does not appear.

Common failures include a missing PHP bracket or quote, a duplicated function name, loading JavaScript before its dependency, placing CSS in a PHP file, and editing a parent theme that is later updated. Browser developer tools can reveal JavaScript errors, while the WordPress recovery email or server error log can help locate PHP errors.

Choose the fast route

For occasional CSS or a single carefully reviewed PHP change, the manual route is fine. A code manager becomes useful when you maintain several snippets, need to turn code on only for certain pages, want syntax highlighting and categories, or need version history without editing theme files.

WPCodeBox 2 is a practical option for that workflow. It manages PHP, HTML, CSS and JavaScript snippets from one interface and adds conditional loading, import and export, and version control. Add the plugin, create a snippet for the correct code type, test it on staging, then enable it only after checking the site.

The fast route

Let WPCodeBox 2 do it

Cloud-backed snippet management with conditional loading and version control, for sites needing more than a basic code inserter.

Get WPCodeBox 2

Questions

Should custom PHP go in functions.php or a plugin?
Put PHP that only supports the active theme in a child theme's functions.php file. Put site functionality in a custom plugin so it continues working when you change themes. Never edit the parent theme or WordPress core, because updates can overwrite those files. Prefix your functions and classes to reduce naming conflicts with WordPress and other plugins.
Can I add JavaScript directly to WordPress?
You can add small page-specific markup through a suitable HTML block, but site scripts should normally be loaded with wp_enqueue_script(). This lets WordPress manage dependencies and loading order. Add the script through a child theme or plugin, and check the browser console for errors. A script may appear not to work because it loads before a required library or is blocked by a cache or security policy.
What happens if custom PHP breaks my site?
A PHP parse or fatal error can cause a critical error and lock you out of the dashboard. First use WordPress recovery mode if it is offered. Otherwise remove the latest change through SFTP, your host's file manager or a backup, then inspect the error log. Test PHP changes on staging and keep a copy of the previous working file before saving.
Will custom code survive a WordPress theme update?
Code in a parent theme will usually be lost when that theme is updated. Use a child theme for theme-specific PHP and CSS, or a custom plugin for functionality that should survive a theme change. WordPress core files are also unsuitable because core updates replace them. A snippet manager can keep code separate from both the theme and core files.