As a WordPress user, you might want to add custom code snippets to your website for various purposes, such as adding tracking codes, customizing the appearance of your site, or adding new functionality. Fortunately, WordPress provides a way to add code snippets without having to modify the theme or plugin files directly.
With the Nexter Code Snippets, you can easily add HTML, CSS, JS, and PHP code snippets to your website without modifying the original code. This makes it easy to add custom functionality, modify the appearance of your website, or make other modifications without having to learn how to code from scratch.
Required Setup
- Make sure to install & activate one of the supported themes.
- You need to have Nexter Extension plugin installed and activated.
Supported Themes
Currently, the Nexter Code Snippets supports the following themes.
Note: We will be adding support to more popular themes soon.
How to Add PHP Code in WordPress?
To add PHP code in WordPress using the Nexter Code Snippets, follow the steps –
1. From the Dashboard, go to Nexter Settings > Code Snippets > Create New.
2. On the next page, add the snippet name in the Name of Snippet field.
Then you can use the toggle to activate or deactivate the code snippet.
Note: Make sure the toggle is enabled for the code snippet to work.
3. After that, select PHP from the Select Type dropdown.
4. Then add your PHP code in the Code Preview section.
5. From the Run Code on section, you have to select where your PHP code will run. Here you’ll find three options –
- Run Snippet Frontend/Backend – This will make your PHP code run both on the frontend and backend (WordPress backend).
- Only Backend – This will make your PHP code run on the backend only. If you have some code that affects the WordPress backend only, then this option is ideal for you.
- Only Frontend – This will run your PHP code on the frontend only. This is an ideal option if your code only executes on the frontend of your website.
In the Basic info section, you can add more information about the particular code snippet by adding tags and note.
6. Once done, click on the Create button and your code snippet will be created.
Adding PHP code snippets to your WordPress website can enhance its functionality without requiring modifications to the original code. This can be especially useful when using third-party plugins or themes that may not have the desired functionality out of the box.
The benefit of adding PHP code through the code snippets feature is that your custom code will remain safe even after updating the theme or plugin. This can save time and effort in the long run by avoiding the need to continually modify the code after each update.
How to Add HTML Code in WordPress?
To add HTML code in WordPress using the Nexter Code Snippets, follow the steps –
1. From the Dashboard, go to Nexter Settings > Code Snippets > Create New.
2. On the next page, add the snippet name in the Name of Snippet field.
Then you can use the toggle to activate or deactivate the code snippet.
Note: Make sure the toggle is enabled for the code snippet to work.
3. After that, select HTML from the Select Type dropdown.
4. Then add your HTML code in the Code Preview section.
5. From the Html Hooks dropdown, you have to select the hook. The available hook options are the same as those found in the Nexter Theme Builder Hooks, allowing you to place your code in various locations throughout your website.
6. Then you need to set the priority of the specific hook from the Priority field.
Lower the number earlier will be the execution of the hook.
7. After that, you have to set the appropriate display conditions from the Display Rules section.
From the Include In dropdown, you have to select where the HTML will be visible.
Then, from the Exclude From dropdown, you can set where the HTML won’t show.
In both sections, you will find the same location options that are available in the Nexter Theme Builder header template.
In the Basic info section, you can add more information about the particular code snippet by adding tags and note.
8. Once done, click on the Create button and your code snippet will be created.
How to Add CSS Code in WordPress?
To add CSS code in WordPress using the Nexter Code Snippets, follow the steps –
1. From the Dashboard, go to Nexter Settings > Code Snippets > Create New.
2. On the next page, add the snippet name in the Name of Snippet field.
Then you can use the toggle to activate or deactivate the code snippet.
Note: Make sure the toggle is enabled for the code snippet to work.
3. After that, select CSS from the Select Type dropdown.
4. Then add your CSS code in the Code Preview section.
7. After that, you have to set the appropriate display conditions from the Display Rules section.
From the Include In dropdown, you have to select where the CSS code will apply.
Then, from the Exclude From dropdown, you can set where the CSS code won’t apply.
In both sections, you will find the same location options that are available in the Nexter Theme Builder header template.
In the Basic info section, you can add more information about the particular code snippet by adding tags and note.
8. Once done, click on the Create button and your code snippet will be created.
With the CSS Code Snippets option, you can add custom styles to specific pages using display rules. This can be incredibly useful for making targeted design changes that apply only to certain areas of your website. Additionally, you can use the CSS Code Snippets option to override existing styles and make changes to the appearance of your website.
How to Add JS Code in WordPress?
To add JS code in WordPress using the Nexter Code Snippets, follow the steps –
1. From the Dashboard, go to Nexter Settings > Code Snippets > Create New.
2. On the next page, add the snippet name in the Name of Snippet field.
Then you can use the toggle to activate or deactivate the code snippet.
Note: Make sure the toggle is enabled for the code snippet to work.
3. After that, select JavaScript from the Select Type dropdown.
4. Then add your CSS code in the Code Preview section.
7. After that, you have to set the appropriate display conditions from the Display Rules section.
From the Include In dropdown, you have to select where the JS code will apply.
Then, from the Exclude From dropdown, you can set where the JS code won’t apply.
In both sections, you will find the same location options that are available in the Nexter Theme Builder header template.
In the Basic info section, you can add more information about the particular code snippet by adding tags and note.
8. Once done, click on the Create button and your code snippet will be created.
With the JS Code Snippets option, you can add custom interactivity to specific pages. This option allows you to add your own JavaScript code that can modify the behavior of your website.
For example, you can use it to add a custom animation, a pop-up window, or other interactive features to your pages. Additionally, you can specify the display rules to control which pages or sections of your website the code will be applied to.
Also, read How to Create Breadcrumb Template in WordPress for Free.
