As a WordPress user, you might want to add custom code snippets to your website for various purposes, such as adding tracking codes, customising 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 Builder, 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
- Nexter Theme FREE installed & activated.
- You need to have Nexter Extension plugin installed and activated.
How to Add PHP Code in WordPress?
To add PHP code in WordPress using the Nexter Builder, from the Dashboard, go to Nexter Builder > Add New.
On the next page, give a name to your template.
Now scroll down to the Nexter Builder section. From the Layout, select Code Snippets, and from Code Type options, select PHP.
From the Code Execute section, you have to select where your PHP code will run. Here you’ll find three options –
Run Snippet Front-end/Back-end – This will make your PHP code run both on the frontend and backend (WordPress backend).
Only Back-end – 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 Front-end – 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.
After selecting the appropriate option in the PHP Code field, you have to add your PHP code.
Once done, publish your template.
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 Builder, from the Dashboard, go to Nexter Builder > Add New.
On the next page, give a name to your template.
Now scroll down to the Nexter Builder section. From the Layout, select Code Snippets, and from Code Type options, select HTML.
From the Html Hooks dropdown, you can select the location of your HTML code on the page. The available hook options are the same as those found in the Nexter Builder Hooks, allowing you to place your code in various locations throughout your website.
Then in the Html Code field, you have to add your HTML code. Depending on the choice of your hook, you can add meta tags, some custom content etc. with this option.
Now from the Display Rules section, you have to set where the HTML will show or won’t show. Here you’ll find two sections –
Include In – Whichever location you select here, the HTML will be visible only there.
Exclude From – Whichever location you select here, the HTML will not show there.
In both sections, you will find the same location options that are available in the Nexter Header template.
Once you set the appropriate display rule for your template, publish the template.
How to Add CSS Code in WordPress?
To add CSS code in WordPress using the Nexter Builder, from the Dashboard, go to Nexter Builder > Add New.
On the next page, give a name to your template.
Now scroll down to the Nexter Builder section. From the Layout, select Code Snippets, and from Code Type options, select CSS.
In the CSS Code field, you have to add your CSS code.
Note: You don’t need to add <style></style> tags to add your CSS code.
Now from the Display Rules section, you have to set where the CSS code will show or won’t show. Here you’ll find two sections –
Include In – Whichever location you select here, the CSS code will apply only there.
Exclude From – Whichever location you select here, the CSS code won’t apply there.
In both sections, you will find the same location options that are available in the Nexter Header template.
Once you set the appropriate display rule for your template, publish the template.
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 Builder, from the Dashboard, go to Nexter Builder > Add New.
On the next page, give a name to your template.
Now scroll down to the Nexter Builder section. From the Layout, select Code Snippets, and from Code Type options, select JS.
In the Javascript Code field, you have to add your JS code.
Note: You don’t need to add <script></script> tags to add your JS code.
Now from the Display Rules section, you have to set where the JS code will apply and won’t apply. Here you’ll find two sections –
Include In – Whichever location you select here, the JS code will apply only there.
Exclude From – Whichever location you select here, the JS code won’t apply there.
In both sections, you will find the same location options that are available in the Nexter Header template.
Once you set the appropriate display rule for your template, publish the template.
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.
