If you want to extend your WordPress site with custom functionalities you frequently need to add custom code snippets to your codebase. In fact, the web is full of support forums and articles that provide you with custom code snippets you need to add to your WordPress site. If you are a beginner this can be quite intimidating and even make you give up on the endeavor. However, you shouldn’t do so, as it’s really not that hard and there are also great plugins you can rely on in the process.
1. Start with a Backup
Before you touch your codebase, always back up your site so that you can quickly go back to a previous version if anything goes wrong. Most hosting providers have an option to create a full website backup from the cPanel. Moreover, there are also many great backup plugins with which you can create a site backup from the WordPress admin.
If you want to be 100% safe it can also be a good idea to create a local copy of your site. This way you can test if the custom code snippet really doesn’t break anything on the site before you begin to use it in production.
2. Check the Type of the Custom Code
WordPress-related custom code snippets you can find on the web usually fall into two categories. They are either CSS or PHP snippets. CSS is for layout and design elements, while PHP is for backend functionality. Even if you don’t know anything about these languages, you can easily recognize them from their syntax.
CSS syntax is easy to identify, as it always follows the following structure:
It’s always a bunch of property-value pairs inside braces, one in each line.
PHP syntax is a little bit more complicated. The easiest way to recognize it is looking for special cues that WordPress developers frequently use in their PHP code. The cues you can find in (almost) every custom PHP snippet are the following:
If you find the “add it to your theme’s functions.php file” in the text in which the authors explain the code snippet then you can be sure that it’s also a PHP snippet. In case you can’t determine the type of the code snippet you can also ask it from the authors.
3. Add Custom CSS via the Customizer
Newer versions of WordPress allow you to add custom CSS to your site using the Theme Customizer. You can access the Customizer by clicking the
Appearance > Customize menu in your admin area.
The Customizer opens the front-end of your site and adds a vertical admin panel on the left. You can access the customization options through this panel. The options may vary by theme to theme, however since WordPress 4.7, all themes contain the “Additional CSS” option where you can add your custom CSS code.
On the image below, you can see that I have added an example CSS code snippet. You need to add your own custom code the same way. It’s also good news that WP Customizer has a built-in CSS linter that checks for errors in the CSS. If the linter finds any errors in your custom code it will notify you with an error message.
4. Add Custom CSS or PHP with a Child Theme
If you only want to add a few lines of CSS to your WordPress site it’s not worth creating a child theme, as using the Customizer is so much easier. However, if you want to add both custom CSS and PHP it’s the best solution. A child theme relates to its parent theme the same way children relate to their parents. It inherits all its styling and functionality but you can also add custom styling and functionality to it.
You can add a child theme to the main WordPress themes you can download from the official WordPress theme repository or buy from a commercial site such as ThemeForest. While it’s possible to create a child theme manually and upload it to the server, it’s easier, safer, and faster to create it with a child theme creator plugin.
Although there are a bunch of child theme creator plugins out there, the simplest one is Child Themify. It doesn’t have any fancy options, just does the job quickly, with a single click. You can install and activate the plugin using the
Plugins > Add New menu in your WordPress admin.
The plugin adds a new
Create Child Theme submenu to the
Appearance menu in your admin area. Click the menu and select the parent theme you want to create the child theme for. Then, simply name your child theme.
WordPress recommends a certain naming convention to child themes for the sake of clarity. However, you can give any other name to your child theme if you want. If you want to follow the WordPress conventions just add the “Child” word after the name of the parent theme. For instance, the child theme for “Twenty Seventeen” will be “Twenty Seventeen Child”.
When your child theme is created, you can find it inside the
Appearance > Themesmenu in your WordPress admin, among all your other themes.
Now, you can add your custom CSS and PHP code to the child theme using the Theme Editor you can find if you click the
Appearance > Editor menu.
In the Theme Editor, you need to select the theme you want to edit. On the right of the page, you can find a “Select theme to edit” dropdown menu. Select your child theme here and click the “Select” button next to the dropdown.
In a default child theme, you will find two files:
style.css for the custom CSS and
functions.php for the custom PHP.
Add Custom CSS to Your Child Theme
To add custom CSS code to your child theme, select the
style.css file on the right-hand side of the screen. You need to add the custom code to the bottom of the file, below the @import rule.
Just like the Customizer, the Theme Editor also has a built-in linter for CSS. Therefore, you don’t have to worry about errors, the linter will notify you. When you are done, click the “Update File” button at the bottom of the page.
Add Custom PHP to Your Child Theme
You need to add your custom PHP code to the
functions.php file. You can find this file below
style.css on the right of the screen. The
functions.php file contains the custom theme functions of your child theme.
Your custom PHP code goes to the bottom of the file. In case of an empty file, you need to add it right after the
<?php starting tag, as you can see on the screenshot below (the short example code you can see removes the admin bar for non-admin users). Note that WordPress doesn’t check for errors in the PHP code. When you are ready with the changes, click the “Update File” at the bottom of the screen.
5. Add Site-Specific PHP Code
The problem with adding PHP code to your child theme is that when you begin to use a new theme, you lose the custom functionality. This is not an issue with CSS, as CSS manipulates the styles of a specific theme, so if you activate a new theme you need to use new CSS as well.
Luckily, it’s possible to add site-specific PHP to WordPress. This code is independent of the theme, therefore you don’t lose it when you switch between themes.
Although it’s possible to create a site-specific plugin manually, to which you can add your custom code, it takes some work and has some security risks. However, you can also use the free Code Snippets plugin that does just the same thing.
Install and activate the plugin through the Plugins menu in your WordPress area. The Code Snippets plugin adds a new “Snippets” menu to your backend. Here, you can add your custom PHP snippets the same way you add regular blog posts to WordPress. This is a brilliant solution, as you can keep your custom code tidy and easily edit and delete them, separately.
Simply copy-paste your custom code into the “Add New Snippet” editor and choose where you want to run the snippet. In most cases, the “Run snippet everywhere” option will be appropriate. Then, add a title, a description, and some tags (if you want) to your custom PHP and click the “Save Changes and Activate” button.
Enhancing your site with custom code snippets allows you to present a unique and recognizable brand to your audience. To take your WordPress customization skills to the next level, read our article on the things you must do when changing WordPress themes or our no-nonsense guide to choose the best theme for your site.
If you are new you can check – Things to Check Before Launching a New Website