How to add custom CSS or JS in Full Site or specific page?

How to add custom CSS or JS?

Holding readers to your site depends a lot on the appearance of your website. But regularly modifying your theme or plugin could be of hazard. That is why we bring you a custom CSS for JS option. With this option, you don’t truly need to change or alter your theme or plugin often.

So let us see how you can easily apply it. First of all, when you log in you see the general WordPress Dashboard. On the left side of the menu bar, you will see an option named “WP Adminify“.

After pointing the mouse on that option you see a submenu, the second option is  “Custom CSS / JS“. Just click on it and wait a few seconds to load. 

Click on add new snippet. It will direct you to a new page with a lot of options where you can set custom CSS for JS to your choice.

Header and Footer snippets

The first on the list comes the snippet title. Simply type in the title you want your custom CSS or JS on. Use an identical title for example, if you are writing some code to hide your page title. Just name it “Hide Page CSS”. It will help you to understand snippet uses in the future. 

Next comes whether you want to enable or disable your snippet. No one knows what will happen in the future that’s why if you don’t need a snippet now just disable it instead of delete. In the future, if you need it again, you can easily enable it.

After that you will consequently see options like the display on, select post, select category, select post type, select page, select tag, location display, device, and snippet type later on you will see the interface of adding custom javascript and CSS consequently.

Add custom CSS or JS in specific page, post, archive page

Well, when you put your mouse on the option display on you will see a sub-menu. It comprises the option like if you want to view it on the full site or on specific places. These specifications are specific post-specific page-specific categories specific post types and specific tags. Simply select your desired one.

Add Custom CSS / JS Full site: This is the default option. If you don’t change it from “Display on” option, then your CSS or JS snippets will be applied to the enter website. 

Add Custom CSS / JS specific page: There are Specific Post, Specific Page, Specific category, Specific Post Type, Specific Tag selector available. If you select any options from the list, it will dynamically open select post, page, category, and post type options. 

Custom CSS and JS in full site or specific post type

Make sure to select each option properly otherwise you will not get proper output on your page.

Define Custom CSS / JS location

We know sometimes you need to run CSS Code and JS snipets in the Header, Before Content, After Content, Footer. With the use of location option, you can define where you like to keep each snippet.

Custom CSS and JS script location

Custom Responsive CSS or JS Code

There is the option to select the device you want your snippet to be viewed. You can either select mobile or desktop or even show on all devices. You don’t have to write CSS code in a responsive way. Just select Mobile or Desktop or Both and you are done.

Select device for snippets

Choose your snippet Type, is it CSS or JS?

This is simply the type of snippet you desire. If you are planning to write CSS code then select CSS perhaps if you have plan to write JS then select JS. 

After selecting the proper snippet type, start writing your code on the field. Finally, don’t forget to save. Otherwise, you will lose your all data.

September 3, 2023
Custom CSS and JS
Was this article helpful?

© 2021-2024 - Adminify | All rights reserved

WP Adminfy accepted payment methods