Add Custom CSS/JS (Frontend)

With WP Adminify, you can effortlessly inject custom CSS and JavaScript into the frontend of your WordPress website. This can be particularly useful for developers or site administrators who want to add styling or functionality to specific pages or across the whole site without touching the theme files. Follow this guide to learn how to add custom CSS and JS using WP Adminify's Header/Footer Snippets feature.

Note: "Custom Header & Footer" Addon is required to work with this feature. If you haven't installed this yet, then you will notice a "install now" button. It will redirect you to our addons page, from this addon page - install the Header & Footer addon.

1. Access the Header/Footer Snippets Feature

To start, log in to your WordPress dashboard:

• Navigate to WP Adminify > Code Snippets.
• Select the Frontend Scripts tab to access the Header/Footer Snippets section.

2. Create a New Snippet

In the Header/Footer Snippets section, follow these steps to create a new CSS or JS snippet:

• Click the Add New Snippet button.
• Name your snippet by filling in the Snippet Title field (e.g., "Custom Frontend Styles").

3. Choose Display Location and Target Pages

Under Display on, choose where you want your custom CSS or JS to appear:

• Select Full Site to apply the snippet across the entire website.

If you have the Pro version of one of our addons Header & Footer Scripts, you can target specific pages, categories, post types, or tags:

• Options like Specific Posts, Specific Pages, Specific Categories, and others are available in the Pro version for more detailed targeting.

Location determines where the script is applied:

• Choose between Header, Footer, or, if you have the Pro version, options like Before Content or After Content.

4. Choose Device Visibility (Pro Feature)

With the Pro version of Header & Footer Scripts, you can specify the device type where the snippet will run:

• Use the Display Device to choose whether the custom code should appear on Only Mobile Devices or Only Desktops

5. Save Your Settings

Once you’ve added your custom CSS or JavaScript:

• Scroll down and click on the Save Settings button to apply your changes.

6. Verify the Changes on Your Website Frontend

After saving, visit the frontend of your site to verify that your custom CSS or JS has been applied correctly:

• Refresh the page or open the developer tools to inspect and see the changes reflected.