Zia3 CSS JS

Description

A WordPress Plugin for easily defining additional CSS and JavaScript (inline and/or by URL)
to be added to any page or post individually.

Two simple steps:

  • Enter the directory location/s of your custom CSS and/or JavaScript files on the Zia3 JS
    CSS settings page
  • Select the CSS/JS files you want to include on the page/post edit page using checkboxes

The plugin adds a css editor field when you are editing and creating a new post or page.
With the plugin each template page/post will have more possibilities with it’s increased
editing power. This allows you to insert arbitrary JavaScript and CSS into any post or
page you like without having to resort to loading it on all pages or modifying your
template’s CSS or JS files. This reduces page load time by finely tuning the CSS and
JavaScript files includes in each page/post.

Ever need to include specific CSS or JavaScript (JS) files on a per page/post basis ? Needed
a seperate CSS / JS file for your homepage and not anywhere else in your site ? Wanted
certain pages/posts to use another CSS/JS file and provide funtionality to those pages only
and not to your full site ?

Ever want to tweak the appearance of the WordPress pages/posts, by hiding stuff, moving
stuff around, changing fonts, colors, sizes, etc? Any modification you may want to do
with CSS / JS can easily be done via this plugin. Leverage the power of jQuery on your
website by injecting inline JavaScipt.

Using this plugin you’ll easily be able to define additional CSS / JS (inline and/or files
by URL) to any page or post individually. You can define CSS / JS to appear inline in
the page/post head (within style tags), or reference CSS files to be linked (via “link
rel=’stylesheet'” tags). The referenced CSS / JS files will appear in page/post head first,
listed in the order defined in the plugin’s settings. Then any inline CSS / JS are added to
the page head. Both values can be filtered for advanced customization (see Advanced
section).

Screenshots

  • Zia3 CSS JS Meta Boxes
  • Zia3 CSS JS Settings
  • Zia3 CSS JS Installation Upload
  • Zia3 CSS JS Installation Success
  • Zia3 CSS JS Setting Menu Link
  • Zia3 CSS JS Syntax Highligher

Installation

Install automatically through the Plugins, Add New menu in WordPress, or upload the
zia3meta folder to the /wp-content/plugins/ directory.

Activate the plugin through the Plugins menu in WordPress. Look for the Settings link
Zia3-JS-CSS to configure the Options.

FAQ

Who can insert JavaScript or CSS ?

By default users with the capability upload_files are allowed to insert JavaScript or CSS
into posts/pages. This seemed to be a logical choice as you need to have a certain level of trust
for users to upload files.

Can I add CSS I defined via a file, or one that is hosted elsewhere ?

Yes, via the “Zia3-JS-CSS” input fields on the plugin’s settings page.

Can I limit what pages the CSS / JS gets output on ?

Yes. This is the main strengh of the plugin.

Why don’t I have any checkboxes to include CSS/JS files ?

You either have no files in the selected CSS/JS directories you set up using the Zia3 CSS JS
options page or the directory doesn’t exist or you don’t have access to it. The configuration
page displays both the file path on the server and the URl as a link to the configured CSS/JS
directory. You can use the link to check if you can access the directory. Also make sure you
have the correct permissions for your CSS/JS directories and that access isn’t also blocked
via .htaccess file configuration.

Reviews

Visual Editor WP 4.5 problem

There is a conflict between WP-SEO Yoast ver 3.2.5 and this version 1. of Zia3-Js-Css.
Two problems:
1. In edit page admin – Visual does not work unless one clicks Text then Visual
2. The new WP URL link textbox shows at bottom of page instead of inline where the link words are. The setting gear also does not display.

If I revert back to Yoast 3.0.6 all is OK. Or if I keep Yoast 3.2.5 and deactivate ZIA all is ok.

In ZIA the problem seems to be in the jquery-ui.min.js file. But it is too hard to debug.

Absolutely Magical !!!

This is the best plugin for its type.

For those who gave it lower ratings because of conflicts with other plugins:

Yoast SEO: I found it to be working fine, so the issue reported by this person, must be coming from elsewhere, and not this plugin.

Divi: I did not check it with Divi yet, but Divi the theme which has built in the Divi builder, gets a 0% from themecheck.org, because it is not coded according to the WordPress standards. Elegant Themes theme’s in general look great, but the code underneath is bad, causing conflicts with many plugins. All of their themes get very low scores.

Visual Composer: I did not test for compatibility with VC yet.

In general: The Plugin Inspector did not find any security errors, just once instance of a Deprecated function screen_icon(). The code line that has this function can safely be removed. Because of the Plugin Inspector’s result, I can conclude that this plugin is coded pretty cleanly, and if you encounter any conflicts with various other plugins, look for the cause in those plugins and not this one. This plugin is awesome, except the use of one instance of the screen_icon() function.

Looking forward to read opposing views on the subject…

Nick.

No Support

To be fair, the plugin served me extremely well while it played nicely with my Divi theme’s Builder.

With the latest updates of WP and Divi though, TinyMCE in the Divi Builder stopped working and I traced the cause back to this plugin. Submitted a support request more than a week ago, but I’m hearing crickets, I’m afraid…

I’ve had to switch to another custom CSS plugin in the meantime (a great pity), and you can imagine what a pain it was to transfer custom CSS from individual pages of 30-odd sites!

Not compatible with Visual Composer

I installed the plugin. The grid view in Visual Composer stopped working. Uninstalled the plugin, now VC is back to normal. Too bad cause I need custom CSS per page and this plugin looked otherwise fine.

Read all 8 reviews

Contributors & Developers

“Zia3 CSS JS” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

0.1 initial release.

0.2 Added CSS and JavaScript code highlighting and auto-complete to respective metaboxes.